How to Draw Circle Shape by MouseCapture Event in WPF Using F#

Today I am going to explain how you can draw a circle shape in WPF using F# through MouseCapture Event. You can also set font, color, position, width, height as well as thickness of the shape. The steps are given below.

Step 1: First open a new project in F# using Visual Studio 2010. Select the F# WPF Application template and name the project as in the following image.

Step 2: Now add the following given references to your project by right-clicking on your project in the Solution Explorer.

• System

• UIAutomationTypes

Step 3: Your Solution Explorer will look as in the following after you have added all references.

Step 4: Now click on the Program.fs file in the Solution Explorer and write the following given code in it. Your Window will look like the following given images.

#light

open System
open System.Windows
open System.Windows.Controls
open System.Windows.Documents
open System.Windows.Input
open System.Windows.Media
open System.Windows.Shapes

let fntfam = new FontFamily("Vardana")
let defaultPoint = new Point(0.0,0.0)

type DrwCrcls = class
inherit Window

val cnvs : Canvas
val mutable isDrawing : bool
val mutable elps : Ellipse
val mutable ptCntr : Point
val mutable isDragging : bool
val mutable elDragging : FrameworkElement
val mutable ptMusStrt : Point
val mutable ptElmntStrt : Point

new () as this = {
cnvs = new Canvas()
isDrawing = false
elps = null
ptCntr = defaultPoint
isDragging = false
elDragging = null
ptMusStrt = defaultPoint
ptElmntStrt = defaultPoint } then
this.Title <- "Circle Drawing Application in WPF using F#"
this.Content <- this.cnvs

override this.OnMouseLeftButtonDown (args:MouseButtonEventArgs) =
base.OnMouseLeftButtonDown(args)

if (this.isDragging) then
()
else
this.ptCntr <- args.GetPosition(this.cnvs)
this.elps <- new Ellipse()
this.elps.Stroke <- SystemColors.WindowTextBrush
this.elps.StrokeThickness <- 1.0
this.elps.Width <- 0.0
this.elps.Height <- 0.0
this.cnvs.Children.Add(this.elps) |> ignore
Canvas.SetLeft(this.elps, this.ptCntr.X)
Canvas.SetTop(this.elps, this.ptCntr.Y)

// Capture the mouse and prepare for future events
this.CaptureMouse() |> ignore
this.isDrawing <- true

override this.OnMouseRightButtonDown (args:MouseButtonEventArgs) =
base.OnMouseRightButtonDown(args)

if this.isDrawing then
()
else
// Get the clicked element and prepare for future events
this.ptMusStrt <- args.GetPosition(this.cnvs)
this.elDragging <- (this.cnvs.InputHitTest(this.ptMusStrt) :?> FrameworkElement)

if (this.elDragging <> null) then
this.ptElmntStrt <- new Point(Canvas.GetLeft(this.elDragging),
Canvas.GetTop(this.elDragging))
this.isDragging <- true

override this.OnMouseDown (args:MouseButtonEventArgs) =
base.OnMouseDown(args)

if (args.ChangedButton = MouseButton.Middle) then
let shape = (this.cnvs.InputHitTest(args.GetPosition(this.cnvs)) :?> Shape)

if (shape <> null) then
if ((shape.Fill :?> SolidColorBrush) = Brushes.Pink) then
shape.Fill <- Brushes.Transparent
else
shape.Fill <- Brushes.SkyBlue

override this.OnMouseMove (args:MouseEventArgs) =
base.OnMouseMove(args)
let ptMouse = args.GetPosition(this.cnvs)

// Move and resize the Ellipse
if this.isDrawing then
let dRadius = sqrt (((this.ptCntr.X - ptMouse.X) ** 2.0) +
((this.ptCntr.Y - ptMouse.Y) ** 2.0))
Canvas.SetLeft(this.elps, this.ptCntr.X - dRadius)
Canvas.SetTop(this.elps, this.ptCntr.Y - dRadius)
this.elps.Width <- 2.0 * dRadius
this.elps.Height <- 2.0 * dRadius
elif this.isDragging then
Canvas.SetLeft
(this.elDragging,
this.ptElmntStrt.X +
ptMouse.X - this.ptMusStrt.X)

Canvas.SetTop
(this.elDragging,
this.ptElmntStrt.Y + ptMouse.Y - this.ptMusStrt.Y);

override this.OnMouseUp (args:MouseButtonEventArgs ) =
base.OnMouseUp(args)

if (this.isDrawing && (args.ChangedButton = MouseButton.Left)) then
this.elps.Stroke <- Brushes.Pink
this.elps.StrokeThickness <- min 24.0 (this.elps.Width / 2.0)
this.elps.Fill <- Brushes.SkyBlue
this.isDrawing <- false
this.ReleaseMouseCapture()
else
this.isDragging <- false

override this.OnTextInput (args:TextCompositionEventArgs ) =
base.OnTextInput(args)

// End drawing or dragging with press of Escape key
if (args.Text.IndexOf('\x1B') <> 1) then
if this.isDrawing then
this.ReleaseMouseCapture()
elif this.isDragging then
Canvas.SetLeft(this.elDragging,this.ptElmntStrt.X)
Canvas.SetTop(this.elDragging,this.ptElmntStrt.Y)

override this.OnLostMouseCapture (args:MouseEventArgs ) =
base.OnLostMouseCapture(args)

// Abnormal end of drawing: Remove child Ellipse
if this.isDrawing then
this.cnvs.Children.Remove(this.elps)
this.isDrawing <- false
end

#if COMPILED
[<STAThread()>]
do
let app = Application() in
app.Run(new DrwCrcls()) |> ignore
#endif

Step 5: Now press F5 to execute the code.

Output

Summary

In this article I have discussed how to draw a circle shape in WPF using F# through MouseCapture Event.