Viewbox and Viewport in Windows Presentation Foundation

This original post is here

Viewbox and Viewport are two properties of ImageBursh, DrawingBrush, TileBrush and VisualBrush elements in Windows Presentation Foundation.  These two attributes let you to crop images and shapes and put them into your applications based on scales.
Viewbox represents an area in original image or drawing which we want to show in our application.  It gets 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.
Viewport represents the target area in our application where the area that is selected by Viewbox will be shown.  Using Viewport you can manage the view of this area.  Like Viewbox it gets four values with same purposes.
There are two other properties related to Viewbox and Viewport.  ViewboxUnits determines that whether Viewbox values are relative (RelativeToBoundingBox) or absolute (Absolute) and default value is RelativeToBoundingBox.  ViewportUnits is the equivalent of ViewboxUnits for Viewport.
On relative boxing, units values for Viewbox or Viewport are doubles values between 0 and 1.  For example 0,0 is the top most left corner of an area and 1,1 is the right bottom corner of it.  On the other side 0.5, 0.5 for width and height of a 300×400 image equals to 150, 200.  On absolute boxing unit, values are based on pixels and can get integer values between zero and Integer.MaxValue.
Let's take a look at an example.  Below image is a 1024×768 sample picture in Windows Vista:

I name this bird Javat and want to select an area in this original image where Javat is sat and show it in my window.  So regarding above theories my code is this:

<Window x:Class="ViewboxViewport.Window1"

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

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

    Title="Viewbox and Viewport" Height="420" Width="400"

    >

    <Grid>

        <Grid.RowDefinitions>

            <RowDefinition Height="400" />

        Grid.RowDefinitions>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="400" />

        Grid.ColumnDefinitions>

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

            <Rectangle.Fill>

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

            Rectangle.Fill>

        Rectangle>

    Grid>

Window>

Note that I could use Stretch attribute to stretch my image somehow.  For example Uniform value makes Javat's beak better:

<Window x:Class="ViewboxViewport.Window1"

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

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

    Title="Viewbox and Viewport" Height="420" Width="400"

    >

    <Grid>

        <Grid.RowDefinitions>

            <RowDefinition Height="400" />

        Grid.RowDefinitions>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="400" />

        Grid.ColumnDefinitions>

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

            <Rectangle.Fill>

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

            Rectangle.Fill>

        Rectangle>

    Grid>

Window>

Now I add a Viewport attribute to change the area where my image will be shown:

<Window x:Class="ViewboxViewport.Window1"

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

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

    Title="Viewbox and Viewport" Height="420" Width="400"

    >

    <Grid>

        <Grid.RowDefinitions>

            <RowDefinition Height="400" />

        Grid.RowDefinitions>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="400" />

        Grid.ColumnDefinitions>

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

            <Rectangle.Fill>

                <ImageBrush ImageSource="Image.jpg" Viewbox="0.4,0.19,0.4,0.8" Viewport="0.05,0.05,0.85,0.85" />

            Rectangle.Fill>

        Rectangle>

    Grid>

Window>

And finally let's take a look at an absolute boxing unit example:

<Window x:Class="ViewboxViewport.Window1"

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

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

    Title="Viewbox and Viewport" Height="420" Width="400"

    >

    <Grid>

        <Grid.RowDefinitions>

            <RowDefinition Height="400" />

        Grid.RowDefinitions>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="400" />

        Grid.ColumnDefinitions>

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

            <Rectangle.Fill>

                <ImageBrush ImageSource="Image.jpg"

                Viewbox="420,180,430,530" ViewboxUnits="Absolute"

                Viewport="20,20,350,350" ViewportUnits="Absolute" />

            Rectangle.Fill>

        Rectangle>

    Grid>

Window>