How to Implement Ellipse Shape in WPF using F#

This article contains explanation about how to draw and render Ellipse in F# using WPF. Ellipse shape is like an object which draw Ellipse and contain Height and Width of the Ellipse. The Height and width of the Ellipse is represented by the width and height properties of Ellipse. If you want to set the width of the Outline of the ellipse you will use the stroke property of the Ellipse. It also used to present the thickness and color of the outline. Steps are given below.

Step 1: Firstly Open a new Project in F# using Visual Studio, Select F# WPF application template and named it as shown in below image.

New Project Dialog Box

Step 2: Now add below given references in your project by right clicking on your project in solution Explorer.

PresentationCore
PresentationFramework
System
System.Xaml
UIAutomationTypes
WindowsBase

Step 3: When You will add all these References, Your Solution Explorer will look like below.

Solution Explorer

Step 4: Then click on Program.fs file and write the below code in Program.fs Window, Your Window will look like below.

Ellipse-Example1

Ellipse-Example1.1

#light

open System
open System.Windows
open System.Windows.Controls
open System.Windows.Input
open System.Windows.Media

let mutable private initFillProperty : DependencyProperty = null
let mutable private initStrokeProperty : DependencyProperty = null

type Elps() = class
inherit FrameworkElement()

static member FillProperty =
if initFillProperty = null then
initFillProperty <- DependencyProperty.Register
("Color Filled", typeof<Brush>,typeof<Elps>,
new FrameworkPropertyMetadata
(null, FrameworkPropertyMetadataOptions.AffectsRender))
initFillProperty
else
initFillProperty

static member StrokeProperty =
if initStrokeProperty = null then
initStrokeProperty <- DependencyProperty.Register
("Stroke Property", typeof<Pen>,typeof<Elps>,
new FrameworkPropertyMetadata
(null, FrameworkPropertyMetadataOptions.AffectsMeasure))
initStrokeProperty
else
initStrokeProperty

member this.Fill
with get() = (this.GetValue(Elps.FillProperty) :?> Brush)
and set (value :Brush) =
this.SetValue(Elps.FillProperty,value)

member this.Stroke
with get() = (this.GetValue(Elps.StrokeProperty) :?> Pen )
and set (value :Pen) =
this.SetValue(Elps.StrokeProperty,value)

override this.MeasureOverride (sizeAvailable:Size) =
if this.Stroke <> null then
new Size(this.Stroke.Thickness,this.Stroke.Thickness)
else
base.MeasureOverride(sizeAvailable)

override this.OnRender (dc:DrawingContext) =
let drawElps widthElps heightElps =
dc.DrawEllipse
(this.Fill, this.Stroke,
new Point(this.RenderSize.Width /2.0, this.RenderSize.Height /2.0),
widthElps/2.0,heightElps/2.0)

if this.Stroke <> null then
let widthElps = Math.Max(0.0,this.RenderSize.Width - this.Stroke.Thickness)
let heightElps = Math.Max(0.0,this.RenderSize.Height - this.Stroke.Thickness)
drawElps widthElps heightElps
else
drawElps this.RenderSize.Width this.RenderSize.Height

end
type WpfElps() as this =
inherit Window()
do this.Title <- "Ellipse in WPF using F#"
let elps = new Elps()
elps.Fill <- Brushes.Pink
elps.Stroke <- new Pen
(new LinearGradientBrush(Colors.SkyBlue, Colors.Yellow,
new Point(1.0, 0.0), new Point(0.0, 1.0)),24.0)
this.Content <- elps

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

#endif

Step 5: Now Press F5 to execute the Code.

Output

Summary

In this article I have discussed that how to draw an Ellipse in F# using WPF.