Objective:
This article will explore how to use the ViewBox control in Silverlight 5.
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 5 project.
Modify the existing XAML code of MainPage.xaml so that a Grid of 1 column and
three rows is created. The code for the same is shown below:
<UserControl
x:Class="SilverlightDemo.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
mc:Ignorable="d"
xmlns:sdk=http://schemas.microsoft.com/winfx/2006/xaml/presentation/
sdk HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<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
x:Class="SilverlightDemo.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
mc:Ignorable="d"
xmlns:sdk=http://schemas.microsoft.com/winfx/2006/xaml/presentation/
sdk HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<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 "Winter.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.
<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="Winter.jpg"
Height="40"
Width="40"></Image>
</controls:Viewbox>
</Grid>
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:
<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="Winter.jpg"
Height="40"
Width="40"></Image>
</controls:Viewbox>
<controls:Viewbox
Grid.Row="1"
Grid.Column="0"
Height="70"
Width="90">
<Image
Source="Winter.jpg"
Height="40"
Width="40"></Image></controls:Viewbox>
</Grid>
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.
![ViewBox.gif]()
Figure 1: ViewBox control in Action
Conclusion: Thus, you learnt how to add and use a ViewBox control in a
Silverlight application.