Viewbox control in WPF using VB.NET

In this article we will learn how to use Viewbox control in WPF.

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.

 

Figure 1.

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

<Window x:Class="MainWindow"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Title="MainWindow" Height="350" Width="543">

    <Grid Width="534">

        <Viewbox Height="209" HorizontalAlignment="Left" Margin="30,0,0,98" Name="Viewbox1"VerticalAlignment="Bottom"
 Width="305" Stretch="None">

        <Image Height="152" Name="Image1" Stretch="Fill" Width="227"Source="/WpfApplication8;component/Images/image1.jpg.gif" />

        </Viewbox>

        <Button Content="Fill" Height="23" Name="Button1" Width="75" Margin="106,276,353,0"VerticalAlignment="Top" />

        <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,128,66,0"Name="Button8" 
VerticalAlignment="Top" Width="75" />

        <TextBlock Height="2" HorizontalAlignment="Left" Margin="30,21,0,0" Name="TextBlock3"Text="TextBlock"
 VerticalAlignment="Top" Width="44" />

        <Button Content="Both" Height="23" HorizontalAlignment="Left" Margin="362,190,0,0"Name="Button6"
 VerticalAlignment="Top" Width="75" />

    </Grid>

</Window>

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."

 

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.