F# WPF code behind application

This is how you create an F# WPF code behind application in Visual Studio 2015 or 2017, using the FsXaml type provider.

Although MVVM is very popular these days, I believe it is important that newcomers to F# has a chance to jump in on the shallow end of the pool. Quite many books and online documentation resources demonstrate WPF with code behind in C#, but there is almost no information that explains how to create such an application using the popular FsXaml type provider in F#. I believe this is a loss to the F# community, since I suspect many developers that consider using F# will be looking for this first of all. It is difficult for a beginner to have to deal with the situation without knowing how to get a blank F# code behind application up and running, so that's where this article comes in.

Rather than provide a finished template, I believe there is value in demonstrating how it's done entirely from scratch, which is very easy and quick once you know how. This is almost as quick as using a template, especially if you save a reuse this later.

Start by creating a solution with an F# console application. For this particular demonstration, you can call it WpfDemo.

Delete the file Program.fs from the project. Then add four new source files to the project, in this order below AssemblyInfo.fs.

MainWindow.xaml

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="WpfDemo" Height="400" Width="600">
    <Grid>
        <Button Name="btnTest" Content="Test" HorizontalAlignment="Left" Margin="30,30,0,0" VerticalAlignment="Top" Width="75"/>
    </Grid>
</Window>

MainWindow.fs

namespace WpfDemo

type MainWindowXaml = FsXaml.XAML<"MainWindow.xaml">

type MainWindow() as this =
    inherit MainWindowXaml()

    let thisLoaded _ = ()

    let thisClosing _ = ()

    let thisClosed _ = ()

    let btnTestClick _ =
        let a = 5 / 0
        ()

    do
        this.Loaded.Add thisLoaded
        this.Closing.Add thisClosing
        this.Closed.Add thisClosed
        this.btnTest.Click.Add btnTestClick

App.xaml

<Application
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Application.Resources>
    </Application.Resources>
</Application>

App.fs

namespace WpfDemo

open System
open System.Windows
open System.Windows.Threading

type App = FsXaml.XAML<"App.xaml">

module Main =

    let private applicationUnhandledException (e: DispatcherUnhandledExceptionEventArgs) =
        e.Handled <- true
        MessageBox.Show(e.Exception.Message, "Unhandled exception") |> ignore
        ()

    [<STAThread; EntryPoint>]
    let main _ =
        let mainWindow = new MainWindow()
        let app = App()
        app.DispatcherUnhandledException.Add applicationUnhandledException
        app.MainWindow <- mainWindow
        app.ShutdownMode <- ShutdownMode.OnMainWindowClose
        let exitCode = app.Run(mainWindow)
        exitCode

In the Properties of project WpfDemo, change the Output type to Windows Application.

In the File Properties for MainWindow.xaml and App.xaml, change the Build Action to Resource.

Install FsXaml from NuGet in the WpfDemo project.

When you try to compile and run this, there will be an error message telling you to reference UIAutomationTypes, so you need to add that to the references.

That's all!