CODEWITHSUNDEEP
c#xamluwp
fs_dm
fs_dm

Reputation: 401

Different font size for specific device

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.

Upvotes: 0

Views: 530

Answers (1)

Nico Zhu
Nico Zhu

Reputation: 32785

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;

Upvotes: 2

Related Questions