Is it possible to make fonts scaleable?

Question

All my grids could be small and very big depending on window size but text inside is looking really small on big grid sizes.

My current idea (but I don't know how to realize it yet) is to make Binding for all Grid elements to single font and then change the font size by

override void OnRender(DrawingContext dc) {

depending on window size.

The question is: Is this idea sane and is there other methods for it?

Answer 1

If you have not set the font on inner elements explicitly, they inherit the parent font. So you can change the font size on one of the parent elements (for example the Window itself or the Grid). This changes the font size on all inner elements that has not specified the font size explicitly.

However if your font should be of different sizes, the best solution in my opinion is binding the font size of elements to the font size of the parent window, and using a value converter to do a scale on the font size:

Define a value converter like this:

using System;
using System.Windows.Data;

namespace WPFTest
{
    public class FontSizeConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            if (value == null)
                return null;
            double windowFontSize = (double)value;
            var scale = System.Convert.ToDouble(parameter);
            return windowFontSize * scale;
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
}

And use it in your xaml:

<Window x:Class="WPFTest.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:test="clr-namespace:WPFTest"
        Title="Window1" Height="300" Width="300" FontSize="20" x:Name="window1">
    <Window.Resources>
        <test:FontSizeConverter x:Key="fontSizeConverter"/>
    </Window.Resources>
    <Grid>
        <StackPanel Grid.Row="0" Grid.Column="0">
            <TextBlock
                FontSize="{Binding ElementName=window1, Path=FontSize, Converter={StaticResource ResourceKey=fontSizeConverter}, ConverterParameter=1.5}">
                Text 1
            </TextBlock>
            <TextBlock FontSize="{Binding ElementName=window1, Path=FontSize, Converter={StaticResource ResourceKey=fontSizeConverter}, ConverterParameter=0.7}">
                Text 2
            </TextBlock>
            <TextBlock >Text 3</TextBlock>
        </StackPanel>
    </Grid>
</Window>

ConverterParameter is used as the scale of the element's font related to the window (specified in ElementName property of the binding).

In this example font of the first TextBlock is 150% of the window font and font of the second TextBlock is 70% of the window. The third TextBlock follows the font size of the window.