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.
See Question&Answers more detail:os