Different font size for specific device

Question

I am currently developing universal app and I need to handle textbox font size for mobile and desktop separately. I found some approaches but none of them can't handle the problem: Using VisualStateManager with StateTrigger as example:

 <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="ChangeFontSize">
            <VisualState x:Name="Desktop">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="500"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="textBox.FontSize" Value="18" />
                </VisualState.Setters>
            </VisualState>

            <VisualState x:Name="Mobile">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="textBox.FontSize" Value="22" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

does not fit because StateTrigger fires only when screen is resizing. Redefine xaml style:

<x:Double x:Key="MyFontSize">22</x:Double>

\\\\\\
........
\\\\\\
Application.Current.Resources["MyFontsSettings"] = 18;

does not have any effect to the "MyFontSize", it still has value '22'.

Is there any proper way to do this correctly, without setting it on every page and control? I want set it once in styles and use everywhere. Any suggestions are welcome.

Are you sure that you have to change the fontsize? UWP handles scaling from different devices. The sizes you are using are really just effective pixels (epx). You can read about the scaling on [MSDN](https://learn.microsoft.com/en-us/windows/uwp/design/basics/design-and-ui-intro). — , May 11 '18 at 19:46
Yes, on my Lumia 640 fonts looks unnaturally big, while on desktop it looks nice — fs_dm, May 14 '18 at 06:07
Have you checked [this](https://gist.github.com/wagonli/40d8a31bd0d6f0dd7a5d)? — Nico Zhu, May 14 '18 at 10:11
@NicoZhu-MSFT Thank you for reply, but this is not what I am actually looking for. This helper only handle device family and convert system string values into the Enum. What am I supposed to do with them? My problem is that I can't change font sizes defined in styles in the runtime. — fs_dm, May 14 '18 at 11:44

Nico Zhu · Accepted Answer · 2018-05-15T05:04:40.867

My problem is that I can't change font sizes defined in styles in the runtime

For your requirement, you could refer Setting that implemented in Template 10. Create Setting class that implements INotifyPropertyChanged and contain FontSize property

public class Setting : INotifyPropertyChanged
{
   private double _fontSize = 20;
   public double FontSize
   {
       get { return _fontSize; }
       set { _fontSize = value; OnPropertyChanged(); }
   }

    public event PropertyChangedEventHandler PropertyChanged;

    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

Make a Setting instance in your application resources dictionary to init setting during app start.

<Application.Resources>
    <ResourceDictionary>
        <local:Setting x:Key="Setting"/>
    </ResourceDictionary>
</Application.Resources>

Use data binding to bind the FontSize property to your TextBlocks like the follow.

<TextBlock Name="MyTextBlock" Text="Hi This is nico" FontSize="{Binding FontSize, Source={StaticResource Setting} }"/>

Change font sizes defined in styles in the runtime.

((Setting)Application.Current.Resources["Setting"]).FontSize = 50;

This is close enough for my needs! For any reason I didn't even think about INotifyPropertyChanged interface realisation... Thank you, mate! — fs_dm, May 15 '18 at 06:34

Different font size for specific device

1 Answers1

Linked