In this article we will learn how to use Viewbox control in Silverlight 4.
Viewbox control
The Viewbox control is used to stretch and scale a single child to fill the available space.
Properties - This control has the following properties.
Figure1.
Stretch - This property has four condition.
Figure 2.
Fill Stretch
Stretch = Fill, which fills the entire space but does not preserve the aspect ratio, so things can get stretched.
UniformToFill Stretch
UniformToFill for Stretch, the aspect ratio is still preserved, but there is no letterboxing.
Uniform Stretch
The ViewBox is set to Stretch = Uniform, so the image is scaled to fit the viewbox, taking as much space as possible while still showing the entire image and preserving the aspect ratio.
None Stretch
The Image have the original size. If smaller than the view box it will be visible else clipped based on its top-right corner.
StretchDirection - This property shows how to change the value of the StretchDirection and Stretch properties of a Viewbox.This property has three condition.
Figure 3.
UpOnly StretchDirection
This property shows how to Up the value of the StretchDirection properties of a Viewbox.
DownOnly StretchDirection
This property shows how to down the value of the StretchDirection properties of a Viewbox.
Both StretchDirection
This property shows how to up and down the value of the StretchDirection properties of a Viewbox.
For Example
Drag and drop one Viewbox control, one Image control and six Button control (rename each) from the Toolbox on the form.
The form looks like this.
Figure 4.
XAML code
<UserControl x:Class="SilverlightApplication51.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"
d:DesignHeight="328" d:DesignWidth="579">
<Grid x:Name="LayoutRoot" Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0*" />
<ColumnDefinition Width="579*" />
</Grid.ColumnDefinitions>
<Viewbox Height="209" HorizontalAlignment="Left" Margin="30,0,0,98" Name="Viewbox1"VerticalAlignment="Bottom" Width="376" Stretch="None" Grid.Column="1">
<Image Height="152" Name="Image1" Stretch="Fill" Width="227"Source="/SilverlightApplication51;component/Images/flowers-image.jpg" />
</Viewbox>
<Button Content="Fill" Height="23" Name="Button1" Width="75" Margin="106,273,398,32"Grid.Column="1" />
<Button Content="Uniform" Height="23" HorizontalAlignment="Left" Margin="187,273,0,0"Name="Button2" VerticalAlignment="Top" Width="75" Grid.Column="1" />
<Button Content="Uniform To Fill" Height="23" HorizontalAlignment="Left"Margin="269,273,0,0" Name="Button3" VerticalAlignment="Top" Width="87" Grid.Column="1" />
<Button Content="None" Height="23" HorizontalAlignment="Left" Margin="362,273,0,0"Name="Button4" VerticalAlignment="Top" Width="75" Grid.Column="1" />
<TextBlock Height="23" HorizontalAlignment="Left" Margin="426,43,0,0" Name="TextBlock2"Text="TextBlock" VerticalAlignment="Top" Grid.Column="1" />
<Button Content="UP" Height="23" HorizontalAlignment="Left" Margin="443,273,0,0"Name="Button5" VerticalAlignment="Top" Width="75" Grid.Column="1" />
<Button Content="Down" Height="23" HorizontalAlignment="Right" Margin="0,136,78,0"Name="Button8" VerticalAlignment="Top" Width="75" Grid.Column="1" />
<TextBlock Height="2" HorizontalAlignment="Left" Margin="30,21,0,0" Name="TextBlock3"Text="TextBlock" VerticalAlignment="Top" Width="44" />
<Button Content="Both" Grid.Column="1" Height="23" HorizontalAlignment="Left"Margin="426,182,0,0" Name="Button6" VerticalAlignment="Top" Width="75" />
</Grid>
</UserControl>
Now The following shows the code for the each button click handlers.
Private Sub Button1_Click(ByVal sender As System.Object, ByVal e AsSystem.Windows.RoutedEventArgs) Handles Button1.Click
Viewbox1.Stretch = Stretch.Fill
TextBlock2.Text = "Stretch is now set to Fill."
End Sub
Private Sub Button2_Click(ByVal sender As System.Object, ByVal e AsSystem.Windows.RoutedEventArgs) Handles Button2.Click
Viewbox1.Stretch = Stretch.Uniform
TextBlock2.Text = "Stretch is now set to Uniform."
End Sub
Private Sub Button3_Click(ByVal sender As System.Object, ByVal e AsSystem.Windows.RoutedEventArgs) Handles Button3.Click
Viewbox1.Stretch = Stretch.UniformToFill
TextBlock2.Text = "Stretch is now set to UniformToFill."
End Sub
Private Sub Button4_Click(ByVal sender As System.Object, ByVal e AsSystem.Windows.RoutedEventArgs) Handles Button4.Click
Viewbox1.Stretch = Stretch.None
TextBlock2.Text = "Stretch is now set to None."
End Sub
Private Sub Button5_Click(ByVal sender As System.Object, ByVal e AsSystem.Windows.RoutedEventArgs) Handles Button5.Click
Viewbox1.StretchDirection = StretchDirection.UpOnly
TextBlock2.Text = "StretchDirection is now UpOnly."
End Sub
Private Sub Button8_Click(ByVal sender As System.Object, ByVal e AsSystem.Windows.RoutedEventArgs) Handles Button8.Click
Viewbox1.StretchDirection = StretchDirection.DownOnly
TextBlock2.Text = "StretchDirection is now DownOnly."
End Sub
Private Sub Button6_Click(ByVal sender As System.Object, ByVal e AsSystem.Windows.RoutedEventArgs) Handles Button6.Click
Viewbox1.StretchDirection = StretchDirection.Both
TextBlock2.Text = "StretchDirection is now Both."
End Sub
Now run the application.
Figure 5.
Now click on the Fill Button. The image looks like this.
Figure 6.
Now click on the down button. The image looks like this.
Figure 7.
Now click on the Up button. The image looks like this.
Figure 8.
Now click on the Uniform button. The image looks like this.
Figure 9.
Now click on the UniformToFill button. The image looks like this.
Figure 10.
Now click on the none button. The image looks like this.
Figure 11.