ARTICLE

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

Posted by Dea Saddler Articles | WPF using VB.NET May 26, 2011
In this article you will learn that how can you resize an Ellipse using ScrollBar by setting the Margin Width and Height.
Download Files:
 
Reader Level:

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="{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

scrollbar2.gif

scrollbar3.gif

scrollbar4.gif

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

Login to add your contents and source code to this article
share this article :
post comment
 
Team Foundation Server Hosting
Become a Sponsor
PREMIUM SPONSORS
  • The leading .NET charting control now features PDF, Flash and Silverlight export, visualization of large datasets and more. Deliver true charting functionality to your BI, Scorecard, Presentation or Scientific apps. Download evaluation now.
    The leading .NET charting control now features PDF, Flash and Silverlight export, visualization of large datasets and more. Deliver true charting functionality to your BI, Scorecard, Presentation or Scientific apps. Download evaluation now.
6 Months Free & No Setup Fees ASP.NET Hosting!
Become a Sponsor