WPF resize an Ellipse using ScrollBar in VB.NET

In this article you will learn that how can you resize an Ellipse using ScrollBar by setting the Margin Width and Height.
  • 3020
Download Files:
 

Introduction 

Here in this article I am explaining that how you can control the size of an Ellipse using ScrollBar. We have two ScrollBars and one Ellipse. One is vertical and another is horizontal. We have set the Margin, Height and Width of the ScrollBars and Ellipse as you will scroll the both ScrollBars up and down the Ellipse size will increase and decrease. The implementation of example needs a Canvas, ScrollBar and Ellipse.


Getting Started

  • Simply create a new WPF application.
  • Drag ScrollBar, Ellipse and Canvas on your MainWindow. Your Window will look like below.

    scrollbar1.gif
     
  • Your MainWindow.xaml will look like 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="350" Width
    ="525">
        <Canvas>
            <ScrollBar Name="scrlbarEllipseWidth" Margin="40,20,0,0" Width="100" Height="20"
                HorizontalAlignment="Left" VerticalAlignment="Top"
                Orientation="Horizontal" Value="50" Minimum="10" Maximum
    ="150" />
            <ScrollBar Name="scrlbarEllipseHeight" Margin="20,20,0,0" Width="20" Height="100"
                HorizontalAlignment="Left" VerticalAlignment="Top"
                Orientation="Vertical" Value="20" Minimum="10" Maximum
    ="150" />
            <Ellipse Fill="SkyBlue"  HorizontalAlignment="Left"
                Margin="45,45,0,0" 
                Height="{Binding ElementName=scrlbarEllipseHeight,Path=Value}" 
                Width="{Binding ElementName=scrlbarEllipseWidth,Path
    =Value}"/>
            <Label Canvas.Left="155" Canvas.Top="20" Content="{BindingElementName=scrlbarEllipseWidth,
    Path=Value}" Height="30" Name="labelWidth" Width="107" />
            <Label Canvas.Left="20" Canvas.Top="142" Content="{BindingElementName=scrlbarEllipseHeight,
    Path=Value}" Height="30" Name="labelHeight" Width="97" />
        </Canvas>
    </
    Window>
     
  • Now run your application.
Output

scrollbar2.gif

scrollbar3.gif

scrollbar4.gif

Summary
 
In this article you learned that how can you resize an Ellipse using ScrollBar.

Categories

More Articles

© 2019 DotNetHeaven. All rights reserved.