In this blog, i am going to create a simple Zoom application using WPF. The Classes and controls which i will be using for this purpose are:

Control - Slider
Classes - ImageBrush
Property - Viewbox( Dependency property of ImageBrush)

Slider Control - Introduction
The Slider control lets the user select from a range of values by moving a Thumb control along a track.A Slider control has a minimum, a maximum, and an increment value. You can use the Value of a Slider to modify another adjustable value. For example, a Slider control can enable users to gradually modify volume. When users move the Thumb in one direction, the volume increases; when users move it the other direction, the volume decreases.When you create a Slider, the default style provides a Thumb, which is used to change the value, and a TickBar that has tick marks. Primary tick marks are displayed at the minimum and maximum values; secondary marks are displayed at positions that are determined by the value of the TickFrequency property.

We will take a look at some of the important properties of Slider Control but first lets a look at the XAML below which creates the Slider controls assigns values to some of its properties.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<grid>
        </grid><grid>
            <rowdefinition height="200">
            </rowdefinition><rowdefinition height="30">
        </rowdefinition>
        <rectangle grid.row="0" grid.column="0" width="200">
        </rectangle>
         <rectangle>
           <imagebrush x:name="zoomImage" imagesource="Zoom_Image.jpg"></imagebrush>
         </rectangle>
         </grid>
        <slider ticks="0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1">
            Value="1"
            TickPlacement="BottomRight"
            Minimum="0.1"
            Maximum="1"
            IsSnapToTickEnabled="False"
            Width="100"
            AutoToolTipPlacement="BottomRight"
            ValueChanged="ZoomSlider_ValueChanged"
            Grid.Row="1"
            Grid.Column="0"&gt;
        </slider>

Lets go over each of the properties of the Slider class and see what it does.

Ticks - The ticks for the slider have been defined as from 0.1-1 with range difference of 0.1 between two ticks.
Value - This defines the default value of the tick. I have set it as 1, so the slider will start from right to left.
TickPlacement - TickPlacement property has been set as BottomRight. We can set this property as None, Both or TopLeft also.
Minimum - Minimum sets the minimum value of the Slider.
Maximum - Maximum sets the maximum value, the slider can have.
AutoToolTipPlacement - This property displays the value of the tick as the thumb is moved. We have set the property as BottomRight but we can also set it as TopLeft or None.

The other important thing to look in the XAML file is the code given below which creates a Rectangle and fills the content of the Rectangle with ImageBrush.

1
2
3
4
5

<rectangle grid.row="0" grid.column="0" width="200">
</rectangle>
<rectangle>
    <imagebrush x:name="zoomImage" imagesource="Zoom_Image.jpg"></imagebrush>
</rectangle>

ImageBrush class and Viewbox property - Description

An ImageBrush is a type of TileBrush that defines its content as an image, which is specified by its ImageSource property. You can control how the image is stretched, aligned, and tiled, enabling you to produce patterns and other effects.By default, an ImageBrush stretches its image to completely fill the area that you are painting. In the preceding code, the image is stretched to fill the Rectangle, possibly distorting the image. You can control this behavior by setting the Stretch property of TileBrush to Uniform or UniformToFill, which causes the brush to preserve the aspect ratio of the image.
There is an important property of ImageBrush ‘Viewbox‘ which we will use to create a repeating pattern. This property allows us have a Zoom in and Zoom out effect.
Viewbox property allows us to Get or Set the position and dimension of the content in a TileBrush tile.

Now, let’s look at the code-behind of the ValueChanged property of the Slider.

1
2
3
4
5
6

private void ZoomSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
double value = e.NewValue;
ImageBrush imageBrush = this.FindName("zoomImage") as ImageBrush;
imageBrush.Viewbox = new Rect(0, 0, value,value );
}

Whenever the user, changes the position of the thumb of the slider, A ValueChanged event is triggered and the ZoomSlider_ValueChanged eventhandler is called. Inside the method, we get the new value of the tick and assign it as the Height and Width of the Viewbox property of the ImageBrush.

This is how the Application looks like.

Starting position ZoomIn - Midway position

If you move the mouse from left to right, it will Zoom out the image.

By changing the dimensions and positions of the Viewbox property of the ImageBrush, we can change the behavior of the image while zooming in and zooming out.

For e.g. - If we change the Left and Top value of the Rectangle as 0.5 from0 as shown in the code below:

1
2
3
4
5
6

private void ZoomSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
double value = e.NewValue;
ImageBrush imageBrush = this.FindName("zoomImage") as ImageBrush;
imageBrush.Viewbox = new Rect(0.5, 0.5, value,value );
}

The application will look like this:

Starting position ZoomIn - Midway position

Take a note of how the image is clipped from the top and left. You can change the Viewbox code to see what fits your needs.