Functional WPF Part Five (Simple example of how to use it)

// Example using the Functional WPF DSL

// View Model

type Person (firstName, lastName, age) =

    static member New (firstName, lastName, age) =

            new Person(firstName, lastName, age)

    member this.LastName

                with get () = lastName

                and set (value : string) = ()

    member this.FirstName

                with get () = firstName

                and set (value : string) = ()

    member this.Age

                with get () = age

                and set (value : int) = ()

let dataContext = [("Homer", "Simpson", 46)

                   ("Marge", "Simpson", 42)

                   ("Lisa", "Simpson", 9)

                   ("Bart", "Simpson", 12) ] |> List.map (Person.New)

// Header

let header = [ label [width 100] "First Name"

               label [width 100] "Last Name"

               label [width 50] "Age" ] |> stackpanel [] Horizontal

// Row

let row = [ textbox [width 100] <@@ fun (x:Person) -> x.FirstName @@>

            textbox [width 100] <@@ fun (x:Person) -> x.LastName @@>

            textbox [width 50] <@@ fun (x:Person) -> x.Age @@> ]

            |> stackpanel [] Horizontal

// Data Template

let sampleTemplate = datatemplate row

// Final composition

let sampleGrid = [ header

                   itemscontrol sampleTemplate

                   button "submit" ] |> stackpanel [width 250] Vertical

                                     |> border Blue

// Main Window

let mainWindow = window [width 400; height 200] sampleGrid

             

// Application                                

let sampleApplication = application mainWindow

// Run the app with the given dataContext                                                               

[<STAThread()>]

do run sampleApplication dataContext