.NET 4.0+

WPF Layout Controls - Viewbox

by Richard Carr, published at http://www.blackwasp.co.uk/WPFViewbox.aspx

The eleventh part of the Windows Presentation Foundation Fundamentals tutorial continues the examination of the WPF layout controls. This instalment looks at the Viewbox control, which automatically resizes its contents to fit the available area.

The Viewbox

The Viewbox is another standard WPF layout control. Unlike many of the other layout controls that we've seen in earlier articles in this series, a Viewbox may only have one child control. However, this can be another layout control with many children of its own.

A Viewbox changes the size of the control that it contains, generally to make it expand or contract to fill the available area as much as possible. The resizing is not usually noticed by the child control. For example, you might set the child control to a Canvas that is one hundred pixels wide. If the Viewbox doubled this size, the sizes of the Canvas and its children may also be doubled. However, positioning an item at fifty pixels from the left edge of the Canvas would still place it in the centre of the control.

This behaviour makes Viewboxes ideal for applications that must be resolution independent. One of the problems with designing for Windows Forms was that a dialog box created for use with a low resolution monitor would be tiny, and perhaps unreadable, on a high definition screen. This was made worse if the user of such a screen had modified the text size for the operating system, as this often caused controls to reposition incorrectly. Using a Viewbox solves this problem because it allows you to smoothly scale such user interfaces without changing the relative positions of the controls.

Viewbox Example

Let's create a simple example project. Create a new WPF Application project in Visual Studio named, "ViewboxDemo" and change the XAML of the default window to that shown below. This creates a layout similar to that shown at the end of the previous article. It uses a DockPanel to arrange some controls to emulate a toolbar and status bar. So far it does not include the use of a Viewbox. Note that in this case the DockPanel has a specific size and the Window is sized to fit its contents.

<Window x:Class="ViewboxDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Viewbox Demo"
        SizeToContent="WidthAndHeight">
    <DockPanel Width="250" Height="200">
        <StackPanel Orientation="Horizontal" DockPanel.Dock="Top" Background="LightBlue">
            <Button Content="01" Margin="1"/>
            <Button Content="02" Margin="1"/>
            <Button Content="03" Margin="1 1 10 1"/>
            <Button Content="04" Margin="1"/>
            <Button Content="05" Margin="1"/>
            <Button Content="06" Margin="1"/>
        </StackPanel>

        <StackPanel Orientation="Horizontal"
                    DockPanel.Dock="Bottom"
                    Background="Lightblue"
                    Height="25">
            <TextBlock VerticalAlignment="Center">Processing</TextBlock>
            <ProgressBar Value="75" Width="100" Margin="4"/>
        </StackPanel>

        <Grid>
            <TextBlock>Content area</TextBlock>
        </Grid>
    </DockPanel>
</Window>

When you execute the program the output appears as shown below. If you resize the window to make it larger the fixed size DockPanel stays centralised with empty areas around it. If you make the window smaller, the DockPanel is clipped.

Let's try wrapping the DockPanel in a Viewbox. Update the XAML within the Window element as shown below. Note that the fixed size for the DockPanel remains and that all of the measurements for sizing and margins of the DockPanel's children are unchanged.

<Viewbox>
    <DockPanel Width="250" Height="200">
        <StackPanel Orientation="Horizontal" DockPanel.Dock="Top" Background="LightBlue">
            <Button Content="01" Margin="1"/>
            <Button Content="02" Margin="1"/>
            <Button Content="03" Margin="1 1 10 1"/>
            <Button Content="04" Margin="1"/>
            <Button Content="05" Margin="1"/>
            <Button Content="06" Margin="1"/>
        </StackPanel>

        <StackPanel Orientation="Horizontal"
                    DockPanel.Dock="Bottom"
                    Background="Lightblue"
                    Height="25">
            <TextBlock VerticalAlignment="Center">Processing</TextBlock>
            <ProgressBar Value="75" Width="100" Margin="4"/>
        </StackPanel>

        <Grid>
            <TextBlock>Content area</TextBlock>
        </Grid>
    </DockPanel>
</Viewbox>

If you run the updated program and resize the window you will find that the DockPanel scales to be as large as possible without clipping or distortion. The image below shows a sample output. You can see that the text and the buttons are increased in size but do not pixelate because of the vector-based graphics of WPF. All of the child controls keep their relative positions, sizing and margins. There is a band of white at the top and bottom in the image below, as expanding into these areas would affect the aspect ratio of the DockPanel.