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.

f il M 0



1 1


Figure 3-22. Canvas without Viewbox Example 3-19. Canvas without Viewbox

<Window xmlns=""> <Canvas Width="18" Height="18" VerticalAlignment="Center">

Example 3-19. Canvas without Viewbox (continued)

<Ellipse Canvas.Left="1" Canvas.Top="1" Width="l6" Height="l6"

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>

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 this automatic resizing was wrap the Canvas element in a Viewbox element, as shown in Example 3-20.

Example 3-20. Using Viewbox

<Window xmlns=""> <Viewbox>

<Canvas Width="l8" Height="l8" VerticalAlignment="Center"> before...

Notice how in Figure 3-23 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 3-24 shows.

Figure 3-24. 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 Fill, as Example 3-21 shows.

Example 3-21. Specifying a Stretch <Viewbox Stretch="Fill">

You can also set the Stretch property to None to disable stretching. That might seem pointless, because the effect is exactly the same as not using a Viewbox at all. However, you might do this from code to flip between scaled and normal-size 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 3-25).

The Viewbox can scale any child element—it'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 nongraphical 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.

Figure 3-25. UniformToFill

Was this article helpful?

0 0
Project Management Made Easy

Project Management Made Easy

What you need to know about… Project Management Made Easy! Project management consists of more than just a large building project and can encompass small projects as well. No matter what the size of your project, you need to have some sort of project management. How you manage your project has everything to do with its outcome.

Get My Free Ebook

Post a comment