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.

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.

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.

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

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>

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()

Step 10: Now press F5 to execute the code.

Output

Note- If you get an exception like file not found than please copy your XAML file in program name/bin/debug folder, your error will remove.

Summary

In this article I have discussed how to create a simple WPF application using F#.