Slider control is a built-in control in WPF. Specially slider work for zoom in or zoom out the images. Slider can work either horizontally or vertically. Here to use slider we have some slider properties, by using them we can make a slider application. Some properties like as Ticks, Value, Delay etc.
Here in this article I am showing that how slider works with images to zoom in and zoom out. Here I set some slider properties.
Tick: Here we can set many values. On the base of these tick value we set the interval.
Value: This is the value from where our slider gets start.
Delay: A milliseconds value that specifies how long RepeatButton should wait before an increase or decrease.
Interval: The time for waiting between repeats.
Minimum: Minimum value of slider.
Minimum: Minimum value of slider.
Maximum: Maximum value of slider.
These are the basic properties, which we have to use in our Slider application. Here in my application I have an image and with the help of slider I will make the image zoom in and zoom out.
<Window x:Class="SlidercontrolinWPF.Window1"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="SlidercontrolinWPF" Height="500" Width="800">
<Canvas>
<Grid Canvas.Top="30" Canvas.Left="30">
<Grid.RowDefinitions>
<RowDefinition Height="300" />
<RowDefinition Height="600" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Row="0" Grid.Column="4" Width="500" Height="300">
<Rectangle.Fill>
<ImageBrush x:Name="imageBrush" ImageSource="nature.jpg" />
</Rectangle.Fill>
</Rectangle>
<Slider Ticks="1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15" Value="1"
Delay="100"
Interval="5"
TickPlacement="BottomRight"
Minimum="1"
Maximum="15"
Width="100"
AutoToolTipPlacement="BottomRight"
ValueChanged="slider_ValueChanged"
Grid.Row="1"
Height="400"
Grid.Column="0">
</Slider>
</Grid>
</Canvas>
</Window>
The Winow.xaml.cs code for the application is:
using System;
using System.Collections.Generic;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
namespace SlidercontrolinWPF
{
/// <summary>
/// Interaction logic for Window1.xaml
/// </summary>
public partial class Window1 : System.Windows.Window
{
public Window1()
{
InitializeComponent();
}
void slider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
double value = e.NewValue;
ImageBrush imageBrush = this.FindName("imageBrush") as ImageBrush;
//From here By passing the value we can set our image in first look
imageBrush.Viewbox = new Rect(0.3, 0.1, 2 / value, 1 / value);
}
}
}
When user runs the application then the window will look like this:
Figure 1.
Figure 2: When we increase the slider the image zooms.
Figure 3.