c# - Sizing objects based on screen dimensions

Question

Given different screen sizes what is the accepted method of scaling the UI?

In setting up a UI it looks great on one screen but terrible on another. Trying to set up a possibly dynamic style based on screen dimensions. I have here a simple header with a FormattedString in a label. I want to center the entire label with the spans formatting remaining intact. Ideally I'd like to set the height of the text to some percentage of the Current.MainPage.Height ...

From 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>

Code behind

        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;
        }

I thought that I might be able to utilize this code to do the deed. But I don't know how to impact the styles from there. I thought that a setter might be the right path. I have not made solid progress.

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>

With no code behind.

I would be appreciative if anyone could lead me to the correct solution.

Answer 1

If you want to change values of your UI depending on the platform, you could make use of the "On Platform" Statement. For instance, if you want to have a different margin for a grid on iOS than you need to use on Android, you could use it like that:

<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>

Of course you can use that for other properties as well. Keep in mind that if you set a property in your view.xaml it will override the style definition of the same property if present.

Making your font size dependent on the screen height can be done as follows:

Getting the screen dimensions - Shared

We will need to implement a dependency service, which allows us to retrieve the actual screen height or width.

Therefore in the shared code, create a new interface:

IScreenDimensions.cs

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

in your android implementation, add the implementation of the interface:

Getting the screen dimensions - 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);
        }
    }
}

Getting the screen dimensions - 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;
        }
    }
}

Building a value converter to consume the screen dimensions

Now we create an IValueConverter (again in shared code):

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();
    }
}

Note that the converter needs a parameter that will tell it which fraction of the screen size the resulting size will end up with.

Putting it all together

Finally you add the following resources to your App.xaml file:

<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>

And set the style to your label (or other element) in question:

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