Silverlight Viewbox control in VB.NET

In this article we will learn how to use Viewbox control in Silverlight 4 using VB.NET.
  • 2178

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.

vb1.gif
 

Figure1.

Stretch - This property has four condition.

vb2.gif
 

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.

vb3.gif
 

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.

vb4.gif
 

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.


 

vb5.gif 

Figure 5.

 

Now click on the Fill Button. The image looks like this.


 

vb6.gif 

Figure 6.

 

Now click on the down button. The image looks like this.


 

vb7.gif 

Figure 7.

 

Now click on the Up button. The image looks like this.


 

vb8.gif 

Figure 8.

 

Now click on the Uniform button. The image looks like this.


 

vb9.gif 

Figure 9.

 

Now click on the UniformToFill button. The image looks like this.


 

vb10.gif
 

 

Figure 10.

 

Now click on the none button. The image looks like this.


 

vb11.gif 

Figure 11.

Categories

More Articles

© 2019 DotNetHeaven. All rights reserved.