Размер объектов на основе размеров экрана

Question

При разных размерах экрана, какой метод масштабирования интерфейса принят?

При настройке пользовательского интерфейса он выглядит великолепно на одном экране, но ужасно на другом.Попытка установить возможно динамический стиль, основанный на размерах экрана.У меня есть простой заголовок с FormattedString в метке.Я хочу центрировать всю метку так, чтобы форматирование отрезков оставалось нетронутым.В идеале я хотел бы установить высоту текста в некоторый процент от Current.MainPage.Height ...

Из App.xaml

<Application.Resources>
    <ResourceDictionary>
        <Style x:Key="HeaderSpans" TargetType="Span" >
            <Setter Property="BackgroundColor" Value="Transparent"></Setter>
            <Setter Property="HorizontalOptions" Value="Center"></Setter>
            <Setter Property="TextColor" Value="White"></Setter>
            <Setter Property="VerticalTextAlignment" Value="Center"></Setter>
            <Setter Property="Margin" Value="0, 20, 0, 0"></Setter>
        </Style>
        <Style x:Key="HeaderSpan" TargetType="Span" >
            <Setter Property="TextColor" Value="White"></Setter>
            <Setter Property="FontSize" Value="32"></Setter>

        </Style>
        <Style x:Key="HeaderSpanB" TargetType="Span" >
            <Setter Property="TextColor" Value="White"></Setter>
            <Setter Property="FontSize" Value="32"></Setter>
            <Setter Property="FontAttributes" Value="Bold"></Setter>
        </Style>
    </ResourceDictionary>
</Application.Resources>

Код позади

        switch (Device.RuntimePlatform)
        {
            case Device.iOS:
                //MainPage.BackgroundColor = Color.Black;
                break;
            case Device.Android:
                //MainPage.BackgroundColor = Color.Red;
                break;
            case Device.UWP:
                //MainPage.BackgroundColor = Color.Orange;
                break;
            default:
                //MainPage.BackgroundColor = Color.Transparent;
                break;
        }

Я подумал, что смогу использовать этот код, чтобы сделать дело.Но я не знаю, как повлиять на стили оттуда.Я думал, что сеттер может быть правильным путем.Я не сделал солидный прогресс.

From Header.xaml

<!-- dark-blue backing header -->
<Image Source="Header752x135.png" VerticalOptions="Start" HorizontalOptions="CenterAndExpand"></Image>

<!-- SHIPSHAPE text placed on the backing header -->
<Label

    Style="{StaticResource HeaderSpans}"
>
    <Label.FormattedText>
        <FormattedString>
            <Span Text="SHIP" Style="{StaticResource HeaderSpan}" />
            <Span Text="SHAPE" Style="{StaticResource HeaderSpanB}" />
        </FormattedString>
    </Label.FormattedText>
</Label>

Без кода.

Буду признателен, если кто-нибудь сможет привести меня к правильному решению.

Answer 1

Если вы хотите изменить значения вашего пользовательского интерфейса в зависимости от платформы, вы можете использовать оператор «На платформе».Например, если вы хотите иметь другое поле для сетки в iOS, чем для Android, вы можете использовать его следующим образом:

<Grid>
    <Grid.Margin>
        <On Platform x:TypeArguments="Thickness">
            <On Platform="iOS">0,0,0,0</On>
            <On Platform="Android">15,0,15,0</On>
        </OnPlatform>
    </Grid.Margin>
</Grid>

Конечно, вы можете использовать это для других свойств, какЧто ж.Имейте в виду, что если вы установите свойство в вашем view.xaml, оно переопределит определение стиля того же свойства, если оно присутствует.

Заставить размер шрифта в зависимости от высоты экрана можно сделать следующим образом:

Получение размеров экрана - Общий

Нам потребуется реализовать службу зависимостей, которая позволяет нам получать фактическую высоту или ширину экрана.

Поэтомув общем коде создайте новый интерфейс:

IScreenDimensions.cs

public interface IScreenDimensions
{
    double GetScreenWidth();
    double GetScreenHeight();
}

в вашей реализации Android, добавьте реализациюинтерфейс:

Получение размеров экрана - Android

ScreenDimensions.cs

[assembly: Dependency(typeof(ScreenDimensions))]
namespace MyAppNamespace.Droid
{
    public class ScreenDimensions : IScreenDimensions
    {
        public double GetScreenHeight()
        {
            return ((double)Android.App.Application.Context.Resources.DisplayMetrics.HeightPixels / (double)Android.App.Application.Context.Resources.DisplayMetrics.Density);
        }

        public double GetScreenWidth()
        {
            return ((double)Android.App.Application.Context.Resources.DisplayMetrics.WidthPixels / (double)Android.App.Application.Context.Resources.DisplayMetrics.Density);
        }
    }
}

Получение размеров экрана - iOS

ScreenDimensions.cs

[assembly: Dependency(typeof(ScreenDimensions))]
namespace MyAppNamespace.iOS
{
    public class ScreenDimensions : IScreenDimensions
    {
        public double GetScreenHeight()
        {
            return (double)UIScreen.MainScreen.Bounds.Height;
        }

        public double GetScreenWidth()
        {
            return (double)UIScreen.MainScreen.Bounds.Width;
        }
    }
}

Создание преобразователя значений впотребляем размеры экрана

Теперь мы создаем IValueConverter (снова в общий код):

ScreenSizeToRelativeSizeConverter.cs

public class ScreenSizeToRelativeSizeConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        double height = DependencyService.Get<IScreenDimensions>().GetScreenHeight();
        return (double) height * (double) parameter;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        // no need to convert anything back
        throw new NotImplementedException();
    }
}

Обратите внимание, что преобразователю нужен параметр, который сообщит ему, какая доляразмер экрана, в результате которого будет получен размер.

Собираем все вместе

Наконец, вы добавляете следующие ресурсы в свой файл App.xaml:

<Application.Resources>
    <ResourceDictionary>
        <converter:ScreenSizeToRelativeSizeConverter x:Key="SizeToRelativeSizeConverter"/>
        <x:Double x:Key="fontSizeFactor">0.03</x:Double>
        <Style x:Key="LabelStyle" TargetType="Label">
            <Setter Property="FontSize" Value="{Binding Converter={StaticResource SizeToRelativeSizeConverter}, ConverterParameter={StaticResource fontSizeFactor}}" />
        </Style>
    </ResourceDictionary>
</Application.Resources>

И установите стиль для вашего ярлыка (или другого элемента) в вопросе:

<Label Text="Welcome to Xamarin.Forms!" Style="{StaticResource LabelStyle}"
       HorizontalOptions="Center"
       VerticalOptions="CenterAndExpand" />