Viewbox

The Viewbox element automatically scales its content to fill the space available. Viewbox is not strictly speaking a panelit derives from Decorator. This means that, unlike most panels, it can only have one child. However, its ability to adjust the size of its content in order to adapt to its surroundings make it a useful layout tool.

Figure 2-24 shows a window that doesn't use a Viewbox but probably should. The window's content is a Canvas containing a rather small drawing. The markup is shown in Example 2-17.

Figure 2-24. Canvas without Viewbox

Example 2-17. Canvas without Viewbox

<Window xmlns="http://schemas.microsoft.com/winfx/avalon/2005">

    <Canvas Width="18" Height="18" VerticalAlignment="Center">
        <Ellipse Canvas.Left="1" Canvas.Top="1" Width="16" Height="16"
                 Fill="Yellow" Stroke="Black" />

        <Ellipse Canvas.Left="4.5" Canvas.Top="5" Width="2.5" Height="3"
                             Fill="Black" />
        <Ellipse Canvas.Left="11" Canvas.Top="5" Width="2.5" Height="3"
                             Fill="Black" />
        <Path Data="M 5,10 A 3,3 90 0 0 13,10" Stroke="Black" />
    </Canvas>

</Window>

We can use a Viewbox to resize the content automatically. The Viewbox will expand it to be large enough to fill the space, as shown in Figure 2-25. (If you're wondering why the drawing doesn't touch the edges of the window, it's because the Canvas is slightly larger than the drawing it contains.)

Figure 2-25. Canvas with Viewbox

All we had to do to get this automatic resizing was to wrap the Canvas element in a Viewbox element, as is done in Example 2-18.

Example 2-18. Using Viewbox

<Window xmlns="http://schemas.microsoft.com/winfx/avalon/2005">

    <Viewbox>
        <Canvas Width="20" Height="18" VerticalAlignment="Center">

            ...as before

        </Canvas>
    </Viewbox>

</Window>

Notice how in Figure 2-25 the Canvas has been made tall enough to fill the window, but not wide enough. This is because by default, the Viewbox preserves the aspect ratio of its child. If you want, you can disable this so that it fills all the space, as Figure 2-26 shows.

Figure 2-26. Viewbox with Stretch

To enable this behavior we set the Stretch property. Its default value is Uniform. We can make the Viewbox stretch the Canvas to fill the whole space by setting the property to to Fill, as Example 2-19 shows.

Example 2-19. Specifying a Stretch

...
    <Viewbox Stretch="Fill">
...

The Stretch property can also be set to None to disable stretchingyou might do this from code to flip between scaled and normal-sized views of a drawing. There is also a UniformToFill setting, which preserves the aspect ratio, but fills the space, clipping the source in one dimension if necessary (see Figure 2-27).

Figure 2-27. UniformToFill

The Viewbox can scale any child elementit's not just for Canvas. However, you would rarely use it to size anything other than a drawing. If you were to use a Viewbox to resize some non-graphical part of your UI, it would resize any text in there as well, making it look inconsistent with the rest of your UI. For a resizable user interface, you are best off relying on the resizable panels shown in this chapter.

It's time to return to our example. The document viewer's overall layout is complete, as is the layout for the panels around the edge of the window. The one remaining piece is the main document view. For this, we will use WPF's text-layout services.