Quickstart WPF F#-only app in VSCode - Part 3

How to quickly create WPF F# project was shown in the first part. FsXaml and paket was added in the second part. This part will go reactive: add ReactiveUI and show how to update the view model asynchronously from F#.

This part starts where the second part ends, from the fsxaml branch of the WPFFSharpQuickStart repository.

ReactiveUI framework can be added to the project by referencing it in the paket.dependencies file and in the MyApp/paket.references as follows:

paket.depenencies

source https://www.nuget.org/api/v2
nuget FsXaml.Wpf 3.1.6
nuget reactiveui !~> 7.4.0

packet.references

FsXaml.Wpf
reactiveui

The paket install will download referenced packages and include them into the project file.

PS C:\...> ./paket install

ReactiveObject is a base class for the view model classes of the application. Instead of implementing INotifyPropertyChanged in view models, they can just be inherited from the ReactiveObject.

Instead of checking whether the property value is changed and then raising the PropertyChanged event the RaiseAndSetIfChanged can be used with mutable class fields:

Welcome.fs

namespace MyApp

open ReactiveUI
open MyApp.Library

type WelcomeViewModel () as this =
  inherit ReactiveObject ()

  let welcomeTextProvider = WelcomeTextProvider ()

  let mutable welcomeText = ""

  do
      welcomeTextProvider.Text
      |> Event.add (fun text -> this.WelcomeText <- text)

  member vm.WelcomeText
    with get() = welcomeText
    and set value = this.RaiseAndSetIfChanged (&welcomeText, value, "WelcomeText")
                    |> ignore

The service provides data asynchronously so it looks like animation:

Service.fs

namespace MyApp.Library

type WelcomeTextProvider () =
  let event = new Event<string> ()

  let lines = [ "Hi there!"; "I'm a new awesome app." ]

  do
    async {
      for line in lines do
        for i in 0..line.Length do
          do! Async.Sleep 75
          event.Trigger (line.Substring (0, i))
        do! Async.Sleep 1000
    } |> Async.Start

  member x.GetWelcomeText() =
    lines.[0] + " " + lines.[1]

  member x.Text with get() = event.Publish

The final version of the WPF F# Quick Start project with paket, FsXaml, and reactiveui is available in the WPFFSharpQuickStart repository.