How to Create form and Controls in Silverlight Using F#

Introduction

Today I am discussing about how we can create a form and add different control on that form in Silverlight using F#. You can download F# Silverlight application template from my Previous article. Now we are firstly creating a form than we will add some controls named TexBox, Label and Button on that form and combine the Logic for computing Intelligence Quotient(IQ). Firstly you will enter your Mental and cronological age and than click on Button you will get your Intelligence Quotient (IQ) according to your age.

The below Code Block Create the Form for application.

module UI =
  let crtFrm() =
    let frm = Canvas()
 
    frm.Width <- 500.
    frm.Height <- 400.
    frm.Background <- SolidColorBrush Colors.Orange

Then you will create all the Controls. The below code block will work for controls creation.

// This is for creating controls
    let ttl = TextBlock(Text=" Hi I am Computing Your IQ")
    let f1lbl = TextBlock(Text="Mental age:")
    let f1txtbx = TextBox(Width=30.)
    let f2lbl = TextBlock(Text="Chronological age:")
    let s1txtbx = TextBox(Width=30.)
    let f3lbl = TextBlock(Text=" Your IQ is :")
    let reslbl = TextBlock()
    let adbtn = Button(Content=" Click to Know Your IQ")

Now The time is to add all the created controls on Form.This can be done through below code.

    // Now adding the controls to the form
    let addToForm uiElement (top:double) (left:double) =
      frm.Children.Add uiElement
      uiElement.SetValue(Canvas.TopProperty, top)
      uiElement.SetValue(Canvas.LeftProperty, left)
 
    addToForm ttl 5. 5.
    addToForm f1lbl 40. 5.
    addToForm f1txtbx 40. 120.
    addToForm f2lbl 70. 5.
    addToForm s1txtbx 70. 120.
    addToForm f3lbl  100. 5.
    addToForm reslbl 100. 120.
    addToForm adbtn 130. 120.

Lastly you will give code for the Button's click event. So that as you will click the button, you will get the IQ. Code is given Below.

adbtn.Click.Add(fun _ ->
      try
        let manum = Convert.ToDouble f1txtbx.Text
        let canum = Convert.ToDouble s1txtbx.Text
        let iq = Convert.ToDouble((manum/canum)*100.00)
        reslbl.Text <- Convert.ToString(iq)
      with :? FormatException ->
        reslbl.Text <- String.Empty
    )
    frm

Getting Started

Step 1: Firstly open a new project in F# in Visual Studio 2010. Select F#Silverlightapp template and give name to the project like below image.

Step 2: Your Solution Explorer will contain two file one is MainPage.fs and second one is App.fs like below image.

Step 3: Now click on App.fs file and write below code in that your App.fs window will look like below image.

//DO NOT Change the name of this namespace!
//Visual Studio will fail to recognise the new namespace and you'll break stuff!
namespace SilverlightApp
 
open System
open System.Windows
open System.Windows.Controls
open System.Windows.Media
open System.Windows.Media.Imaging
 
module UI =
  let crtFrm() =
    let frm = Canvas()
 
    frm.Width <- 500.
    frm.Height <- 400.
    frm.Background <- SolidColorBrush Colors.Orange
 
    // This is for creating controls
    let ttl = TextBlock(Text=" Hi I am Computing Your IQ")
    let f1lbl = TextBlock(Text="Mental age:")
    let f1txtbx = TextBox(Width=30.)
    let f2lbl = TextBlock(Text="Chronological age:")
    let s1txtbx = TextBox(Width=30.)
    let f3lbl = TextBlock(Text=" Your IQ is :")
    let reslbl = TextBlock()
    let adbtn = Button(Content=" Click to Know Your IQ")
    // Now adding the controls to the form
    let addToForm uiElement (top:double) (left:double) =
      frm.Children.Add uiElement
      uiElement.SetValue(Canvas.TopProperty, top)
      uiElement.SetValue(Canvas.LeftProperty, left)
 
    addToForm ttl 5. 5.
    addToForm f1lbl 40. 5.
    addToForm f1txtbx 40. 120.
    addToForm f2lbl 70. 5.
    addToForm s1txtbx 70. 120.
    addToForm f3lbl  100. 5.
    addToForm reslbl 100. 120.
    addToForm adbtn 130. 120.
 
    //when the button is clicked
    //It will display the IQ value in the reslbl
    adbtn.Click.Add(fun _ ->
      try
        let manum = Convert.ToDouble f1txtbx.Text
        let canum = Convert.ToDouble s1txtbx.Text
        let iq = Convert.ToDouble((manum/canum)*100.00)
        reslbl.Text <- Convert.ToString(iq)
      with :? FormatException ->
        reslbl.Text <- String.Empty
    )
 
    frm
 
type App() as app =
  inherit Application()
  do
    app.Startup.Add(fun _ ->
      app.RootVisual <- UI.crtFrm()
    )

Step 4: Now press F5 to execute the Code.

Output

Summary

In this article I have discussed that how you can create form and different controls in Silverlight using F#.