WPF Web Based

Slider can be used as a selector for Diffrent values. These values (which are double) can have a minimum and maximum.You can put different tick values for these values to split this interval. On the other hand you can set some values for intervals and delays between movements and clicks on ticks.

Important Properties:

• AutoToolTipPlacement: Specifies if a ToolTip must be shown and where it will be displayed.
• Delay: A value in milliseconds that specifies how long RepeatButton should wait before an decrease or increase.
• Interval: a value in milliseconds that specifies the time for waiting between repeats.
• LargeChange: The amount that should be added or subtracted to or from Value attribute when user clicks on scrollbar.
• Maximum: Maximum value for slider.
• Minimum: Minimum value for slider.
• Orientation: Gets to values, Horizontal or Vertical and specifies the orientation of slider Control.
• SmallChange: The amount that should be added or subtracted to or from Value attribute when user clicks on thumb.
• TickPlacement: Determines the place that ticks should be placed.
• Ticks: A required attribute and a set of double values for ticks.
• Value: ByDefault selected value for tick.

Syntax Of Slider Control:

<Slider Name="Slider1" Width="200" Height="20"
Background="Gray" Maximum="80" Minimum="0">           
</Slider>

In Above Code The Width and Height property represent the width and the height of the control. The Name property represents name of the control, which is a unique identifier of the control.

The Background property is used to set the background color of the control. The Minimum and Maximum properties represent the minimum and maximum values of the slider range.

Example:

Original Image:

When we increase the slider the image zooms

.XAML CODE:

<Page x:Class="WpfBrowserApplication5.Page8"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Page8">
<Grid Background="LightCoral">
<Grid.RowDefinitions>
<RowDefinition Height="200" />
<RowDefinition Height="30" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Rectangle Width="250" HorizontalAlignment="Left" Margin="25,0,0,0" Height="200" 
VerticalAlignment="Top">
<Rectangle.Fill>
<ImageBrush x:Name="imageBrush" ImageSource="Images.jpeg" />
</Rectangle.Fill>
</Rectangle>
<Slider Ticks="1, 2, 3, 4, 5, 6, 7, 8, 9, 10"
Value="1"
Delay="100"
Interval="5"
TickPlacement="BottomRight"
Minimum="1"
Maximum="10" AutoToolTipPlacement="BottomRight"
ValueChanged="slider_ValueChanged"
Grid.Row="1" Margin="25,0,0,0" HorizontalAlignment="Left" Width="250" 
Height="30" VerticalAlignment="Top">
</Slider>
</Grid>
</Page>

.CS CODE:

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