Getting a Good Grasp of F# (仮)

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

WPF で NumericUpDown コントロールを使う その1 [C#編]

WPF には Spin コントロールがありません。一方で、WinForms には Spin コントロールとしての機能を持つ NumericUpDown クラス が存在します。C#WPF の Window 上にこの NumericUpDown コントロールを配置してみます。このとき WPF に WinForms コントロールを混在させるために WindowsHost クラスを利用します。後に F# でも実装を試みる予定です。

NumericUpDownコントロールの例

C#での実装

C#WPF プロジェクトの作成

C#の新規プロジェクトをWPFアプリケーション用に作成します。今記事ではプロジェクト名は「WPF_SpinControlCs」にしています。

C#でWPFアプリの新規プロジェクトを作成

アセンブリ参照の追加

まず、WinForms に属するコントロールを使うため、必要なアセンブリ参照(以下2つ)をプロジェクトに追加します

    • System.Windows.Forms
    • WindowsFormsIntegration

プロジェクトの参照するアセンブリ一覧は以下のようになったはずです。

XAMLファイルの書き替え

デフォルトで生成された MainWindow.xaml のコードを以下のように書き替えます。今記事ではコードビハインド( MainWindow クラスのC#コード)には一切手を加えていません。

7行目アセンブリ System.Windows.Forms の NumericUpDown クラス を参照するために XAMLコードのルート要素( Window )において、新たな属性として、名前空間URIを追加しました。接頭辞(prefix)は、ここでは仮に wfm と設定しましたが、任意の識別子が使えます。

注意:名前空間に指定するURI文字列にホワイトスペースを混在させないこと

16行目WindowsFormsHost クラスは WPF のコントロール上に NumericUpDown コントロールを配置するために必要なラッパーとして機能します。

18行目: NumericUpDown コントロールを配置するための要素です。7行目で宣言した接頭辞 wfm を付けた形( wfm:NumericUpDown )で参照します。x:Name 属性は必須です。コントロールのプロパティを、初期値:5、最大値:10、最小値:0、ユーザによる編集は不可( ReadOnly="True" )として設定してあります。

ただし、上記のようなXAMLコードを書いても、XAMLデザイナーのデザインビューでは NumericUpDown のような WinForms に属するコントロールの外観を見ることはできません。以下のような灰色に塗りつぶされた表示になってしまいます。

21行目WPF TextBlock コントロールです。NumericUpDown コントロールValue プロパティと 自身の Text プロパティとの間でデータバインディングを行い、最新の値を表示します。

実行結果

コンパイルして実行すると以下のようなウィンドウが表示されます。もちろん、上下ボタンを押せばコントロール上の数値が増減します。XAMLでプロパティ設定した通り、上限・下限に設定した値を超えることもありません。WPF TextBlock コントロールにも値の更新が反映されています。

f:id:pongitsune:20181123221521p:plain