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.
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.
- 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
Summary
In this article you learned that how can you resize an Ellipse using ScrollBar.