WPF Slider control in VB.NET

In this article we will learn how to use Slider control in WPF using VB.NET.
  • 1976

In this article we will learn how to use Slider control in WPF using VB.NET.

Slider Control

The Slider is a simple control on the surface providing a track and a "thumb"  that enables value changing.

Properties - The Slider control has the following properties.

s1.gif
 

Figure 1.

Minimum - The number that represents the lowest (left or bottom) value.

Maximum - The number that represents the highest (right or top) value.

LargeChange - The slip when a large change in value is desired.

SmallChange - The slip when a small change in value is desired.

Foreground - This property is used to describes the foreground color.

Background This property is used to describes the background color.

Creating Slider control in XAML

<Slider Height="23" HorizontalAlignment="Left" Margin="29,120,0,0" Name="Slider1"VerticalAlignment="Top" Width="220" />

 

The Width and Height property represents the width and the height of the control.:Name property represents name of the control.

 

The Output looks like this.


 

s2.gif
Figure 2.

 

Vertical Slider control

 

Set the property Orientation= Vertical.


 

s3.gif 

Figure 3.

 

The Output looks like this.


 

s4.gif
Figure 4.

 

For example:

 

The form looks like this.


 

s5.gif 

Figure 5.

 

XAML code

 

<Window x:Class="MainWindow"

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

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

    Title="MainWindow" Height="350" Width="525">

    <Border BorderBrush="Black" BorderThickness="1" Height="208"

        Width="433" Margin="20">

        <Canvas Height="200" Width="200">

            <Canvas.RenderTransform>

                <TransformGroup>

                    <ScaleTransform ScaleY="-1" />

                </TransformGroup>

            </Canvas.RenderTransform>

            <Rectangle Canvas.Top="-146" Canvas.Left="-55" Width="192"

                Height="103" Stroke="darkgreen" StrokeThickness="3">

                <Rectangle.Fill>

                    <ImageBrush ImageSource="/WpfApplication17;component/Images/flowers-image.jpg" />

                </Rectangle.Fill>

                <Rectangle.RenderTransform>

                    <ScaleTransform

                ScaleX="{Binding ElementName=slider,Path=Value}"

                ScaleY="{Binding ElementName=slider,Path=Value}" />

                </Rectangle.RenderTransform>

            </Rectangle>

            <Slider Name="slider" Minimum="0" Maximum="3" TickPlacement="BottomRight"TickFrequency="0.2"

      IsSnapToTickEnabled="True" Canvas.Left="-63" Canvas.Top="-243" Height="22" Width="222"Value="1" />

        </Canvas>

    </Border>

   

    </Window>

 

Now run the application. The form looks like this.


 

s6.gif 

Figure 6.

 

Now if you change the slider values, you will see that the size of image also changes according to the slider values.


 

s7.gif 

Figure 7.

Categories

More Articles

© 2019 DotNetHeaven. All rights reserved.