Viewbox in Windows Presentation Foundation

For selecting a specific area of an image ViewBox work. By passing just four values we can get particular area of an image.
  • 1943

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:

image1.jpg

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.

Image2.jpg

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:

Image3.jpg

Figure 3:

Categories

More Articles

© 2019 DotNetHeaven. All rights reserved.