Working with the Silverlight Toolkit - Part III

Objective: In the previous parts of this series, we explored how to add the Silverlight Toolkit Controls to the Toolbox and how to make use of the AutoCompleteBox control present in the Toolkit. This article will expolore how to use the ViewBox control in the Toolkit.

The ViewBox control allows you to place a child control such as Image within it in such a way that it will be scaled appropriately to fit the available without any distortion. It is typically used in 2D graphics.

We will begin with creating a new Silverlight 2 project.

Add the Silverlight Tookit Controls to the Toolbox as explained in Part II of this series.

Modify the existing XAML code of Page.xaml so that a Grid of 1 column and three rows is created. The code for the same is shown below:

      <UserControl xmlns:controls="clr-namespace:Microsoft.Windows.Controls;assembly=Microsoft.Windows.Controls"  x:Class="ViewBoxDemo.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="400" Height="300">
            <Grid x:Name="LayoutRoot" Background="White" Height="300" Width="300">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="200" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
            </Grid>
        </UserControl>

Drag and drop the Viewbox control from the Toolbox into the XAML code between the <Grid></Grid> tags. Specify its row and column in the grid to be 0. The resulting code is seen below.

        <UserControl xmlns:controls="clr-namespace:Microsoft.Windows.Controls;assembly=Microsoft.Windows.Controls" x:Class="ViewBoxDemo.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
            <Grid x:Name="LayoutRoot" Background="White" Height="300" Width="300">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="200" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <controls:Viewbox Grid.Row="0" Grid.Column="0" Height="120" Width="120">
                </controls:Viewbox>
            </Grid>
        </UserControl>

Right click on the project name in the Solution Explorer pane and select Add Existing Item option. Choose the image "Sunset.jg" from the My Documents\My Pictures\Sample Pictures folder.

Drag and drop an Image control in between the <controls:ViewBox> and </controls:ViewBox> tag and modify its code as shown below, to specify its source and size.

        <UserControl xmlns:controls="clr-namespace:Microsoft.Windows.Controls;assembly=Microsoft.Windows.Controls" x:Class="ViewBoxDemo.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
            <Grid x:Name="LayoutRoot" Background="White" Height="300" Width="300">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="200" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <controls:Viewbox Grid.Row="0" Grid.Column="0" Height="120" Width="120">
                    <Image Source="Sunset.jpg" Height="40" Width="40"></Image>
                </controls:Viewbox>
            </Grid>
        </UserControl>

Drag and drop another ViewBox and then an Image control in between the second <controls:ViewBox> and </controls:ViewBox> tag.

Modify the XAML as shown below:

      <UserControl xmlns:controls="clr-namespace:Microsoft.Windows.Controls;assembly=Microsoft.Windows.Controls" x:Class="ViewBoxDemo.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
            <Grid x:Name="LayoutRoot" Background="White" Height="300" Width="300">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="200" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <controls:Viewbox Grid.Row="0" Grid.Column="0" Height="120" Width="120">
                    <Image Source="Sunset.jpg" Height="40" Width="40"></Image>
                </controls:Viewbox>
                <controls:Viewbox Grid.Row="1" Grid.Column="0" Height="70" Width="90">
                    <Image Source="Sunset.jpg" Height="40" Width="40"></Image>
                </controls:Viewbox>
            </Grid>
        </UserControl>

Save the solution, build and execute it. When you see the output, you will observe that the two images show no distortion whatsoever though their height and width are not the same. This has happened because of the ViewBox.

Figure 1: ViewBox control in Action

Conclusion: Thus, you learnt how to add and use a ViewBox control in a Silverlight 2 application.