Using Viewbox for Automatic Control Scaling in Windows Phone

Presenting content of varied size can often be tricky. For example, displaying names of metro stations with fixed font size, and it always is a fixed font size, can result in a part of the text being clipped off. Or if you use text wrapping, a large block of text can extend way beyond your intended design. Trimming might help, but you cannot always do that.

Consider the following page:

Simple page using a bunch of controls with default styles

It uses a very simple layout – two equally wide columns. Notice how the default font might be too small for the text on the left and how variation in button captions create problems for buttons on the right. We would like to increase font size for the text on the right, but it is hard to anticipate how large the text would be. Or if there are large words in the text, they might “bleed” onto the right side. As for the buttons, you would want the entire text to be seen.

So how do we do that? Luckily, there is a control that will auto scale any content we give it – Viewbox. Whatever content you give it, Viewbox will auto scale it, either up or down, to fill the space the Viewbox control would normally take. The XAML for the above page looked like this:

<Border BorderBrush="Red" BorderThickness="1"
        HorizontalAlignment="Center"
        VerticalAlignment="Center">
    <TextBlock Text="{Binding FullName}"
                TextAlignment="Right"/>
</Border>
 
<StackPanel Grid.Column="1">
    <StackPanel.Resources>
        <Style TargetType="Button">
            <Setter Property="Width" Value="200" />
            <Setter Property="Height" Value="80" />
            <Setter Property="Margin" Value="10"/>
        </Style>
    </StackPanel.Resources>
 
    <Button Content="Pick 1" />
    <Button Content="or 2" />
    <Button Content="or any large number" />
    <Button Content="first line
second line" />
</StackPanel>

We wrap the problematic control inside the Viewbox control. The final XAML should look like this:

<Viewbox>
    <Border BorderBrush="Red" BorderThickness="1">
        <TextBlock Text="{Binding FullName}"
               TextAlignment="Right"/>
    </Border>
</Viewbox>
 
<StackPanel Grid.Column="1">
    <StackPanel.Resources>
        <Style TargetType="Button">
            <Setter Property="Width" Value="200" />
            <Setter Property="Height" Value="80" />
            <Setter Property="Margin" Value="10"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <Border BorderBrush="{TemplateBinding BorderBrush}"
    BorderThickness="{TemplateBinding BorderThickness}"
    Background="{TemplateBinding Background}"
                                    Margin="{TemplateBinding Margin}">
                                <Viewbox>
                                    <ContentPresenter
        Content="{TemplateBinding Content}"
        ContentTemplate="{TemplateBinding ContentTemplate}"
        Margin="{TemplateBinding Padding}"
        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
        VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                                </Viewbox>
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </StackPanel.Resources>
 
    <Button Content="Pick 1" />
    <Button Content="or 2" />
    <Button Content="or any large number" />
    <Button Content="first line
second line" />
</StackPanel>

The TextBlock on the left was wrapped in the Viewbox control while the control template for the buttons was modified to put the content inside another Viewbox. The final result can be seen on the image below.

Text scales correctly when using Viewbox control

As you can see from the image, text is now fully visible in the buttons while the text on the left is now scaled up to fill the allocated space. This isn’t full-proof solution because you still need to account for differences between the smallest and the largest text. You could pad the text on both size with spaces, just to ensure that short text doesn’t become really large.