何?

F#とWPFとReactivePropertyで簡単なアプリケーション作る流れです。

目標

ボタンを押すと数字が1増えるという素晴らしいアプリの作成

方法

F# Empty Windows App(使わない)

F#でWPFを作るための素晴らしいプロジェクト
…なのだが、ReactivePropertyと一緒に使おうとしたら

FS2024: 静的リンクでは、別のプロファイルを対象にしたアセンブリは使用されない場合があります。

TypeProviderとPCLライブラリ回りで何かあるらしい?
よくわからんので、とりあえずF# Empty Windows Appは使わずにやります。

プロジェクト生成~豆腐画面を出す

普通にF#コンソールプロジェクトを生成します。
こいつをWPF相当の環境まで改造します。

大筋はCreating a WPF application in F#を参考にしました

プロジェクト設定の変更

プロパティで、出力の種類をコンソールからWindowsアプリケーションに変えます。

参照

参照に

PresentationCore
PresentationFramework
System.Xaml
WindowsBase

を追加します。

Program.fs書き換え

無心でコピペします。

Program.fs

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


[<STAThread>]
[<EntryPoint>]
let main argv = 
    let application = Application.LoadComponent(
                        new System.Uri("/<アセンブリ名>;component/App.xaml", UriKind.Relative)) :?> Application

    application.Run()

「App.xamlなんてない」だって?
今から作ります。

App.xamlの作成

テキストファイルでもコードでも何でも良いので追加し、App.xamlというファイルを用意します。
こいつに限らず、xamlはビルドアクションをResourceにしましょう。
実行時にリソースがないと文句を言われます。30分ぐらい悩みます。悩みました。

そして無心でコピペ

App.xaml

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

「MainWindow.xamlなんてない」だって?
今から作ります。

MainWindow.xamlの作成

App.xamlと同様にファイルを用意して中身を適当に作る

MainWindow.xaml

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

実行

豆腐が表示されます。お疲れ様でした。

ボタンを押すとカウントアップする素晴らしいアプリにする

NuGet!

ReactivePropertyを導入します。以上。

ViewModelを作る

MainWindowVM.fs

namespace FsWpfTrial.ViewModels

open System.Reactive.Linq
open Reactive.Bindings

type MainWindowVM() =
    let addOne = new ReactiveCommand()
    let count = addOne.Scan(0,fun a _ -> a + 1).ToReadOnlyReactiveProperty(0)

    member x.AddOne = addOne
    member x.Count = count

なんかC#っぽいですが気にしません。

Viewを作る

MainWindow.xamlにいろいろ追記
ちなみにちゃんとデザイナ使えます。