Programming WPF, 2nd Edition

Viewbox

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

Figure 3-22 shows a window that doesn't use a Viewbox but probably should. The window's content is a Canvas containing a rather small drawing. Example 3-19 shows the markup.

Figure 3-22. Canvas without Viewbox

Example 3-19. Canvas without Viewbox

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
  <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. It will expand it to be large enough to fill the space, as shown in Figure 3-23. (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 3-23. Canvas with Viewbox

All we had to do to get ...