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#コードを以下に示します。XamlReader で XAMLコードを文字列として読み込んで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 デバッグツールのボタンは消えます。