WPF: How to implement a panel with adjustable font size?

Question

I have a panel with several TextBlocks. I want to modify this panel such that the font size of each TextBlock changes depending on the size of the panel.

The size of the panel can change when the user changes the size of the window (e. g. maximizes or restores it).

I tried to do it using a Viewbox:

<Viewbox Stretch="Fill">
    <Grid Width="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Viewbox}}, Path=Width}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <TextBlock 
            HorizontalAlignment="Stretch"
            VerticalAlignment="Stretch" />
        <TextBlock 
            HorizontalAlignment="Stretch"
            VerticalAlignment="Stretch" />
        <TextBlock 
            HorizontalAlignment="Stretch"
            VerticalAlignment="Stretch" />
        <TextBlock 
            HorizontalAlignment="Stretch"
            VerticalAlignment="Stretch" />
        <TextBlock 
            HorizontalAlignment="Stretch"
            VerticalAlignment="Stretch" />
        <TextBlock 
            HorizontalAlignment="Stretch"
            VerticalAlignment="Stretch" />          
    </Grid>
</Viewbox>

But it doesn't work because

• font size doesn't get bigger, when the size of the Viewbox increases and
• it doesn't get smaller, when the size of the Viewbox decreases.

How can implement scaling of these text blocks (so that they fill the entire available area, and adapt their font sizes) ?

Answer 1

You have height width auto and you are not placing the textblocks in the grid

<Grid>
    <Viewbox Stretch="Fill">
        <Grid Width="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Viewbox}}, Path=Width}">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <TextBlock Grid.Column="0"  Text="TextBlock1"
                HorizontalAlignment="Stretch"
                VerticalAlignment="Stretch" />
            <TextBlock Grid.Column="1"  Text="TextBlock2"
                HorizontalAlignment="Stretch"
                VerticalAlignment="Stretch" />
            <TextBlock Grid.Column="2"  Text="TextBlock3" 
                HorizontalAlignment="Stretch"
                VerticalAlignment="Stretch" />
        </Grid>
    </Viewbox>
</Grid>

Answer 2

A Viewbox does work... this is pretty much what it is for. Try this simple example:

<Window x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Height="350" Width="525">
    <Viewbox Stretch="Fill">
        <TextBlock Text="This will change size" FontSize="40" />
    </Viewbox>
</Window>

I think that the problem is that you didn't set the initial FontSize to be big enough and your Stretch mode was not right. If this example is not quite right for your requirements, then try using a different Stretch mode.