I did a recent post on implementing WPF with F#. Today I would like to expand on this posting to give a simple implementation of the MVVM pattern in F#. A good read about this topic can also be found on Dean Chalk’s blog although my example of the pattern is possibly simpler.

With the MVVM pattern one typically has 3 segments, the view, viewmodel and model. With the beauty of WPF binding one is able to link the state based viewmodel to the view. In my implementation I have kept the same principles. I have a view (MainView.xaml), and and a ViewModel (MainViewModel.fs).

What I would really like to illustrate in this posting is the binding between the View and the ViewModel so I am going to jump to that…

In Program.fs I have the following code…

module Program

open System
open System.Windows
open System.Windows.Controls
open System.Windows.Markup
open myViewModels

// Create the View and bind it to the View Model
let myView = Application.LoadComponent(new System.Uri("/FSharpWPF;component/MainView.xaml", System.UriKind.Relative)) :?> Window
myView.DataContext <- new MainViewModel() :> obj

// Application Entry point
[<STAThread>]
[<EntryPoint>]
let main(_) = (new Application()).Run(myView)
    
    

You can see that I have simply created the view (myView) and then created an instance of my viewmodel (MainViewModel) and then bound it to the data context with the code…

myView.DataContext <-

If I have a look at my viewmodel (MainViewModel) it looks like this…

module myViewModels
open System
open System.Windows
open System.Windows.Input
open System.ComponentModel
open ViewModelBase

type MainViewModel() =          
    // private variables
    let mutable _title = "Bound Data to Textbox"    

    // public properties
    member x.Title 
        with get() = 
                _title 
        and set(v) = 
                _title <- v

    // public commands
    member x.MyCommand = 
        new FuncCommand
            (
                (fun d -> true), 
                (fun e -> x.ShowMessage) 
            )

    // public methods
    member public x.ShowMessage = 
        let msg = MessageBox.Show(x.Title)
        ()    

I have exposed a few things, namely a property called Title that is mutable, a command and a method called ShowMessage that simply pops up a message box when called.

If I then look at my view which I have created in xaml (MainView.xaml) it looks as follows…

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="F# WPF MVVM" Height="350" Width="525">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <TextBox Text="{Binding Path=Title, Mode=TwoWay}" Grid.Row="0"/>
        <Button Command="{Binding MyCommand}" Grid.Row="1">
            <TextBlock Text="Click Me"/>
        </Button>
    </Grid>
</Window>

It is also very simple. It has a button that’s command is bound to the MyCommand and a textbox that has its text bound to the Title property.

One other module that I have created is my ViewModelBase. Right now it is used to store my commanding function but I would look to expand on it at a later stage to implement other commonly used functions…

module ViewModelBase

open System
open System.Windows
open System.Windows.Input
open System.ComponentModel

type FuncCommand (canExec:(obj -> bool),doExec:(obj -> unit)) =
    let cecEvent = new DelegateEvent<EventHandler>()
    interface ICommand with
        [<CLIEvent>]
        member x.CanExecuteChanged = cecEvent.Publish
        member x.CanExecute arg = canExec(arg)
        member x.Execute arg = doExec(arg)

Put this all together and you have a basic project that implements the MVVM pattern in F#.

For me this is quite exciting as it turned out to be a lot simpler to do than I originally thought possible. Also because I have my view in XAML I can use the XAML designer to design forms in F# which I believe is a much cleaner way to go rather than implementing it all in code. Finally if I look at my viewmodel code, it is actually quite clean and compact…