WPF Slider to scale a Line in VB.NET

In this article you will learn that how you can scale a line through Slider.
  • 2903
 

Introduction
Here in this article we are discussing that how we can use slider to scale a Line. This example used a StackPanel and Canvas. Then you will set the height and width of the StackPanel's border and canvas. You will also need to use TransformGroup, Line and a Slider control and  set the ScaleTransform, X-Y coordinates, stroke and Strokethickness of the Line and lastly you will bind the x-y scale of the Line to the Slider.
 
Getting Started

  • Simply create a new WPF application.
  • Drag a StackPanel, Canvas, Line and a slider on MainWindow. Your window will look like below.

    slider1.gif
     
  • After adding all the controls your MainWindow.xaml page will look below.

    <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="318" Width="333">
        <StackPanel Height="280" Width="250">
            <Border BorderBrush="SteelBlue"   BorderThickness="1" Height="200"
          Width="200" Margin="20">
                <Canvas Height="200" Width="200">
                    <Canvas.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform ScaleY="-1" />
                            <TranslateTransform Y="200" />
                        </TransformGroup>
                    </Canvas.RenderTransform>
                    <Line X1="0" Y1="0" X2="80" Y2="80" Stroke="MediumVioletRed"
              StrokeThickness="2">
                        <Line.RenderTransform>
                            <ScaleTransform
                  ScaleX="{Binding ElementName=slider,Path=Value}"
                  ScaleY="{Binding ElementName=slider,Path=Value}" />
                        </Line.RenderTransform>
                    </Line>
                </Canvas>
            </Border>
            <Slider Name="slider" Minimum="0" Maximum="3" Value="1"
          TickPlacement="BottomRight" TickFrequency="0.2"
          IsSnapToTickEnabled="True" />
        </StackPanel>
    </
    Window>
     
  • Now run your application.

Output:-

slider5.gif

slider2.gif

slider3.gif

slider4.gif

Summary
In this article you learned that how to scale a Line through Slider.

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.