Viewbox in Windows Presentation Foundation

If we want to select a specific area from an image then how we will do it. The solution for this is ViewBox. Viewbox and Viewport are the properties of ImageBursh, DrawingBrush, TileBrush and VisualBrush elements in Windows Presentation Foundation. With these two attributes we can crop images and shapes.

Viewbox stands for that area in real image which we want to show in our application. Here in ViewBox we have to pass four values: First two values specify the position of top left corner of area, third value specifies the width of area and fourth value specifies the height of area.

Let's see the use of Viewbox with the help of a program. Here the original image is:



Figure 1: The real image

The Window1.Xaml code is:

<Window x:Class="ViewBox.Window1"

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

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

    Title="XAMLLayout" Height="371" Width="328">

    <Grid>

        <Grid.RowDefinitions>

            <RowDefinition Height="400" />

        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="400" />

        </Grid.ColumnDefinitions>

        <Rectangle Grid.Row="0" Grid.Column="0">

            <Rectangle.Fill>

            <!-- Here By passing the four value in ViewBox I will select a area from Real Image-->

                <ImageBrush ImageSource="Image.jpg" Viewbox="0.4,0.12,0.7,0.8"/>

            </Rectangle.Fill>

        </Rectangle>

    </Grid>

</Window>

The image we will get after setting the ViewBox value.



Figure 2: See the image after selecting an area.

Here in ViewBox we have a property named as "Stretch".

The Window1.Xaml is:

<Window x:Class="ViewBox.Window1"

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

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

    Title="XAMLLayout" Height="371" Width="328">

    <Grid>

        <Grid.RowDefinitions>

            <RowDefinition Height="400" />

        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="400" />

        </Grid.ColumnDefinitions>

        <Rectangle Grid.Row="0" Grid.Column="0">

            <Rectangle.Fill>

            <!--Here I set the Stretch property Uniform then the Image will change -->

                <ImageBrush ImageSource="Image.jpg" Viewbox="0.4,0.12,0.7,0.8" Stretch="Uniform"/>

            </Rectangle.Fill>

        </Rectangle>

    </Grid>

</Window>

Here after setting the property Stretch="Uniform" of image we will get:



Figure 3: