WPF global font size

Viewed 94718

I'm creating a WPF app and I would like to know the best way to be able to change the font size for every element in the ui. Do I create a resource dictionary and set Styles to set the font size for all the controls I use?

What is the best practice?

11 Answers

I'd do it this way:

<Window.Resources>
        <Style TargetType="{x:Type Control}" x:Key="baseStyle">
            <Setter Property="FontSize" Value="100" />
        </Style>
        <Style TargetType="{x:Type Button}" BasedOn="{StaticResource baseStyle}"></Style>
        <Style TargetType="{x:Type Label}" BasedOn="{StaticResource baseStyle}"></Style>
        <Style TargetType="{x:Type TextBox}" BasedOn="{StaticResource baseStyle}"></Style>
        <Style TargetType="{x:Type ListView}" BasedOn="{StaticResource baseStyle}"></Style>
        <!-- ComboBox, RadioButton, CheckBox, etc... -->
    </Window.Resources>

That way, if I want to change ALL the controls, I'd just have to change the "baseStyle" style, the rest would just inherit from it. (That's what BasedOn property those, you can also extend the base style if you create other setters inside of the inherited style)

For any styles in WPF, you should have a separate resource dictionary that contains the styles for your app.

If you want to have a single Font Size that's reused throughout the app then just create a style for that font size. You can either give it a unique name/key to use explicitly or you can set a targetType that will transcend throughout the app.

Explicit Key:

<Style
    x:Key="MyFontSize"
    TargetType="TextBlock">
    <Setter
        Property="FontSize"
        Value="10" />
</Style>

<Control
    Style="{StaticResource MyFontSize}" />

*Note this style can be used with controls that have contentPresenters

For all textblocks in the app:

<Style
    TargetType="TextBlock">
    <Setter
        Property="FontSize"
        Value="10" />
</Style>

<TextBlock
        Text="This text will be size 10" />

To dynamically change the font size globally with ctrl-mousewheel:

XAML:

<Window Name="MainWindow" ... PreviewMouseWheel="MainWindow_PreviewMouseWheel">

code behind:

private void MainWindow_PreviewMouseWheel(object sender, MouseWheelEventArgs e)
{
    if ((Keyboard.Modifiers & ModifierKeys.Control) != 0)
    {
        if (e.Delta > 0)
            ++mainCtrl.FontSize;
        if (e.Delta < 0 && mainCtrl.FontSize > 1)
             --mainCtrl.FontSize;
    }
}

Using Resources in XAML is the way to go. Although there are many great answers to this question, I would like to add my two cents to the SCOPE of the Resource.

For Global accessibility in all of the Windows and User Controls of the Project, you can have your resource in the App.xaml file

<Application.Resources>
    <Style TargetType="{x:Type Control}" x:Key="GlobalFontSize">
        <Setter Property="FontSize" Value="28"/>
    </Style>
</Application.Resources>

For accessibility at a Window level, you can have your resource in your xaml file for Window

<Window.Resources>
    <Style TargetType="{x:Type Control}" x:Key="GlobalFontSize">
        <Setter Property="FontSize" Value="28"/>
    </Style>
</Window.Resources>

You could even have it at a Control level, for example

<DockPanel.Resources>
    <Style TargetType="{x:Type Control}" x:Key="GlobalFontSize">
        <Setter Property="FontSize" Value="28"/>
    </Style>
</DockPanel.Resources>

Let's have some BLACK MAGIC things:

  1. Add a double resource into your Application resource
<Application.Resources>
    <sys:Double xmlns:sys="clr-namespace:System;assembly=mscorlib" x:Key="GlobalFontSize">12</sys:Double>
</Application.Resources>
  1. Add a static property in your App class
public static double GlobalFontSize
{
    get => (double)Current.Resources["GlobalFontSize"];
    set => Current.Resources["GlobalFontSize"] = value;
}
  1. Use this resource any where you want by DynamicResource
FontSize="{DynamicResource GlobalFontSize}"
  1. Access property App.GlobalFontSize in any way to change value, binding is okay!
App.GlobalFontSize = 20;
//Or
{Binding Path=(local:App.GlobalFontSize)}
Related