Using Viewbox

March 27, 2005 Tagged: , ,

Nathan has called me out, so I should post some more now that I’m back from vacation. Today I’ll attempt to give a proper introduction for the simple, yet powerful Viewbox.

Images and Avalon can be scaled to fit within a layout, the most common and useful technique is a uniform scale into the available space. Viewbox allows you to take any Avalon content and scale it as if it were an Image.

I’ll illustrate with a simple example, which uses the following markup:

<StackPanel xmlns="http://schemas.microsoft.com/winfx/avalon/2005" xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005">
  <Border Background="VerticalGradient #cfc transparent"
          BorderBrush="#ccc" BorderThickness="1"
          Padding="10" Margin="10">
    <TextFlow FontFamily="Calibri, Verdana" FontSize="20">
      Lorem ipsum dolor sit amet.
    </TextFlow>
  </Border>

  <Viewbox Margin="10">
    <Border Background="VerticalGradient transparent #ccf"
            BorderBrush="#ccc" BorderThickness="1"
            Padding="10">
      <TextFlow FontFamily="Calibri, Verdana" FontSize="20">
        Lorem ipsum dolor sit amet.
      </TextFlow>
    </Border>
  </Viewbox>
</StackPanel>

In case you can’t sight-read XAML, I used a TextFlow within a Border to display some text within a border with a gradient background. I then made a copy of the Border and TextFlow, changed the background, and placed it within a Viewbox (I also moved the Border’s Margin up to the Viewbox, but the two are otherwise identical).

Here’s a screenshot of the results:

A StackPanel with two elements, one of which is within a Viewbox

Notice that, aside from their different backgrounds, the text looks exactly the same. This is because I took this screenshot at the exact window size such that the text fits perfectly. Let’s see what happens when I make the window smaller:

A StackPanel with two elements, one of which is within a Viewbox

Notice that the text on top has wrapped to a second line, while the one on the bottom has been scaled down and still fits on a single line. That’s Viewbox at work. Here’s another screenshot, this time with a larger window size:

A StackPanel with two elements, one of which is within a Viewbox

At this window size, the top text has enough space to flow within a single line and looks the same as in our first example. However, the bottom text has been scaled up to fill the larger width (perceptive readers may notice that the thickness of the border has also been scaled).

Essentially, Viewbox performs layout on its content once, freezes that layout, then scales the content up or down as appropriate. You can put anything within a Viewbox, users can interact with it, but the content won’t re-layout based on changes in window or screen size (it will only re-scale).

The Stretch and StretchDirection properties can be used to control how the content is stretched. These properties are useful for situations in which you do not want to scale uniformly, or perhaps when you only want to scale content down, but not up.

Although Viewbox is a quick and easy way to adapt to different screen or window sizes, it’s not always the ideal solution. I’ll be covering other strategies for dealing with these issues in a later posts.

Aside I’ve used Calibri, one of the great new fonts from Microsoft. Unless you work at Microsoft (and even if you do), you probably don’t have the font installed, you’ll see Verdana used in it’s place

Viewing 8 Comments

Trackbacks

close Reblog this comment
Powered by Disqus · Learn more
blog comments powered by Disqus