Getting Started With WPF Applications Using F#

Today I am going to explain how you can make a simple WPF Application using F#. A WPF Application needs a XAML designer. The steps are given below to create a WPF Application using F#.

Step 1: First open Visual Studio 2010 then in file menu select new project, choose visual F# category and select F# application Template, give a name to it and press ok as you can see in following image.

New Project Dialog Box

Step 2: Now your Solution Explorer will contain Program.fs file like the following image.

Step 3: Now right-click on the project in Solution Explorer and select add references, a new window will open which will contain some tabs like in the following images.

Add Reference Selection

Add Reference Window

Step 4: Select the .Net tab and add following given references.

PresentationCore.dll
PresentationFramework.dll
WindowsBase.dll

Step 5: When you will add all the three references your Solution Explorer will look like the following image.

Solution Explorer with references

Step 6: Now write-click on the Solution Explorer and click on the add new item like in the following image.

Step 7: Add an XAML file and give it the name wpf.xaml like in the following image. If you don't contain a XAML template in your Visual Studio you can download it from the following link.

http://www.c-sharpcorner.com/Resources/1210/f-xaml-item-template.aspx

Add new Item Dialog Box

Note- If you get error in loading designer. Click on reload designer it will load the designer.

Step 8: Now click on the XAML file and write the following code to add the controls; your XAML designer will look like below.

<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="525">

<Grid Width="489">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60" />
<ColumnDefinition Width="150" />
<ColumnDefinition Width="150" />
<ColumnDefinition Width="128" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="24"/>

</Grid.RowDefinitions>
<Label Grid.Row="0" Grid.Column="0" >Enter:</Label>
<TextBox Name="enter" Grid.Column="1" Text="My First F# WPF Application" />
<Label Name="Result" Grid.Column="2" ></Label>
<Button Name="press" Grid.Column="3" >click me</Button>
</Grid>
</Window>

XAML Designer

Step 9: Then add the following code in Program.fs file and your Program.fs window will look like below.

open System
open System.Collections.Generic
open System.Windows
open System.Windows
open System.Windows.Controls
open System.Windows.Markup
open System.Xml

let createWindow (file : string)=
using (XmlReader.Create(file)) (fun stream ->
(XamlReader.Load(stream) :?>Window))
let Window=
let temp= createWindow "Wpf.xaml"
let press= temp.FindName("press") :?> Button
let textbox= temp.FindName("enter") :?> TextBox
let label= temp.FindName("Result") :?> Label
press.Click.Add (fun _ -> label.Content <- textbox.Text)
temp
let main() =
let app = new Application()
app.Run(Window) |> ignore
[<STAThread>]
do main()

WPF Example