How to resize an Ellipse using ScrollBar in WPF using VB.NET

Introduction

Here in this article I am explaining that how we can control the size of a 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 we will scroll the both ScrollBars up and down the Ellipse size will increase and decrease. The implementation 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.
  
  
   
• 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="{Binding ElementName=scrlbarEllipseWidth,
  Path=Value}" Height="30" Name="labelWidth" Width="107" />
          <Label Canvas.Left="20" Canvas.Top="142" Content="{Binding ElementName=scrlbarEllipseHeight,
  Path=Value}" Height="30" Name="labelHeight" Width="97" />
      </Canvas>
  </Window>
   
• Now run your application.
  
  

Output