Getting a Good Grasp of F# (仮)

関数型言語F#をもっと楽しみたい

F#からWPFのGUIを扱う 《文字列データとしてのXAMLからGUI表示へ》

以前、F#からWPFのGUIを扱う その1その4 にて、C#プロジェクトを混在させてWPFを利用したプログラミングを行いました。
今回はF#のコードだけを使ってWPFを扱ってみます。XAMLファイルは用いずにXAMLコードを F#コード内で文字列データとして持つことにします。今回の開発環境には Visual Studio Community 2017 を使っています。

 

1. 新規のF#プロジェクト(コンソールアプリケーションを選択)を作ります。

2. プロジェクトのプロパティ設定で「出力の種類」を「Windows アプリケーション」に変更します。

 3. WPF に必要なアセンブリ参照を追加します。以下の4つです。

  • WindowsBase
  • PresentationCore
  • PresentationFramework
  • System.Xaml

 参照設定が完了すると以下のような構成になります。

 4. ウィンドウ上に、黒い輪郭線を持ち青く塗られた矩形(Rectangle要素)と黒い輪郭線を持ち赤く塗られた円(Ellipse要素)を配置するF#コードを以下に示します。XamlReaderXAMLコードを文字列として読み込んでWindow クラス (System.Windows) オブジェクトに変換してGUIとして表示しています。

// プロジェクトのプロパティ設定をWindowsアプリケーションとして設定すること
open System.Windows
open System
open System.Windows.Markup
 
// ダブルクォート3連続(""")で XAMLの属性値 "~" を含む文字列もエスケープ文字なしでそのまま扱える
let xamlStr = 
    """
        <Window 
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"              
            Title="MainWindow" Height="350" Width="500">
            <Grid>
                <Rectangle Fill="Blue" HorizontalAlignment="Left" Height="100" Margin="130,70,0,0" Stroke="Black" VerticalAlignment="Top" Width="100"/>
                <Ellipse Fill="Red" HorizontalAlignment="Left" Height="100" Margin="260,120,0,0" Stroke="Black" VerticalAlignment="Top" Width="100"/>
            </Grid>
        </Window>
    """
 
[<EntryPoint; STAThread>] // STAThreadを指定しないとWPFアプリは実行時はエラーとなるので注意
let main _ = 
    let window = XamlReader.Parse(xamlStr) :?> Window
    window.WindowStartupLocation 
        <- WindowStartupLocation.CenterScreen // 表示位置:モニタ中央
    Application().Run(window)

 5. 実行結果:モニタ中央に以下のようなウィンドウが表示されます。デフォルト設定では XAML UI デバッグツールのボタンがウィンドウ上に付いています。

6. XAML UI デバッグツールを非表示にしたい場合は、Visual Studioのメニューバーの「ツール」→「オプション」→「デバッグ」→「全般」へと進み、項目「XAML の UI デバッグツールを有効にする」のチェックボックスOFFにします。

7. 再度実行するとXAML UI デバッグツールのボタンは消えます。