Silverlight 4 Rough Notes: Viewbox

Posted on by

Note – these posts are put together after a short time with Silverlight 4 as a way of providing pointers to some of the new features that Silverlight 4 has to offer. I’m posting these from the PDC as Silverlight 4 is announced for the first time so please bear that in mind when working through these posts.

Viewbox is pretty well understood – it’s been around in WPF since version 1 and it’s also part of the Silverlight Toolkit. In the current Silverlight 4 preview it’s also back in the platform.

The essential idea of the Viewbox is to scale its child content to fill the space that the Viewbox itself is occupying. I’ve always found this useful for situations where I’ve got content that I’ve organised at a fixed size and I simply want to scale that up/down rather than trying to do some dynamic layout with the content.

If I’ve got a simple UI such as;

<UserControl
    x:Class="SilverlightApplication11.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:ctl="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400">

    <Grid
        x:Name="LayoutRoot"
        Background="White">
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <ctl:GridSplitter
            Grid.RowSpan="2"
            Grid.Column="0"
            VerticalAlignment="Stretch"
            HorizontalAlignment="Right"
            Width="3"
            Background="Black" />
        <ctl:GridSplitter
            Grid.Column="1"
            VerticalAlignment="Bottom"
            HorizontalAlignment="Stretch"
            Height="3"
            Background="Black" />
        <Viewbox
            Grid.RowSpan="2"
            Stretch="Fill">
            <TextBlock
                Text="Fill" />
        </Viewbox>
        <Viewbox
            Grid.Column="1"
            Stretch="Uniform">
            <TextBlock
                Text="Uniform" />
        </Viewbox>
        <Viewbox
            Grid.Column="1"
            Grid.Row="1"
            Stretch="UniformToFill">
            <TextBlock
                Text="Uniform to Fill" />
        </Viewbox>
    </Grid>
</UserControl>

then there are 3 Viewboxes in there doing slightly different things and I can manipulate the GridSplitters in order to rearrange the content and get the Viewboxes to do their work;

image image

In terms of scaling – it’s possible to set the StretchDirection property to control whether content is only scaled “up” or only scaled “down” or ( default ) “both” as I used above.