.net column
.NET開発者のためのブログメディア

データバインディング

WPFのデータバインディングとは?C#によるデータの操作方法

2020年09月04日

WPFには、UI要素とデータソースを接続する「データバインディング」という機能があります。データソースには、.NETオブジェクト / XML / ADO.NETなどの様々なデータを設定することが可能です。 データバインディングは、WPF開発おける重要な役割を担っており、必須知識ともいえるでしょう。

SE
WPFのデータバインディングがなかなか理解できません……
PL
WPFのデータバインディングは多機能な反面、最初は理解が難しいかもしれません。実際にアプリを作りながら理解していきましょう!

WPFのデータバインディングの概要

データバインディングとは、アプリUI(ビュー)と、そこに表示されるモデルなどのデータソースを接続するための機能です。
例えば、TextBoxとモデル(.NETクラスなど)のプロパティをバインディングで接続しておくと、TextBoxの入力内容に変更があった時に、自動的にモデル(C#などで作られたクラス)に入力値を反映することができます。

データバインディングにおける重要な4つの要素

WPFのデータバインディングを理解する上で、次の4つの要素(用語)について知っておく必要があります。

  • ◆バインディング ターゲット:データ反映先のオブジェクト(主にUI要素)
  • ◆ターゲット プロパティ:データ反映先のバインディング ターゲットのプロパティ
  • ◆バインディング ソース:データ提供元(.NET オブジェクト、ADO.NET、XML など)
  • ◆ソース プロパティ:データ提供元のバインディング ソースのプロパティ

注意点として、「ターゲット プロパティ」には、依存関係プロパティを指定する必要があります。実際は、TextBoxのTextプロパティなど、WPFのUI要素の多くのプロパティは依存関係プロパティになっており、そこまで強く意識する必要はありません。
また、依存関係プロパティでも、読み取り専用のプロパティは「ターゲット プロパティ」に指定できません。

XAMLにデータバインディングを書く方法

データバインディングはマークアップ拡張機能を使って行い、XAMLファイルのUI要素に対し、Bindingキーワードに続く一連の宣言文字列で、「バインディング ソース」や「ソースプロパティ」を指定します。

「.NETオブジェクト」とWPFの「UI要素」を接続

次のようなC#のParsonクラスと、Label要素をデータバインディングで接続する簡単な例を見てみましょう。

上記クラスのNameプロパティを、データバインディングする時は、XAMLには次のように書きます。

バインディング ソースとなる、クラスのインスタンスは、DataContextプロパティに設定します。

実行結果
Nameプロパティのバインディング

ほかのUI要素を参照する方法

同じ画面のUI要素間で、データバインディングをすることも可能です。 例えば、次のようなスライダー要素と、テキストボックスをBindingで接続し、スライダーとテキストボックスの値を双方向に同期することができます。

実行結果
スライダーのデータバインディング

上で紹介した2つの方法以外にも、WPFでは「XML」「ADO.NET」など、様々なオブジェクトをバインディングソースに設定できます。

C#とWPFのデータバインディング活用例

WPFアプリケーション開発で実際に使える活用例として、IValueConverterを使ったデータ変換を解説します。

IValueConverterでデータ変換

データベースを使用するWPFアプリでは、チェックボックスなどのBooleanの値を、データベース上では「YES/NO」や、「0/1」のような文字列で管理することがあります。
チェックボックスの値はtrue or falseのBoolaen型であるため、データベースの値をそのままチェックボックスにデータバインディングすると、正しく動作しません。

そのような時に、IValueConverterインターフェイスを実装した「コンバーター」を作成し、String型からBooladn型に変換することで、バインドの間にデータを変換を行うことができます。

コンバーターの作成

実際にC#で「コンバーター」を作ってみましょう。 今回は、文字列の“YES”と“NO”を、それぞれBoolean型のtrueとfalseに変換するコンバーターを作成します。

まず、次のようなIValueConverterインターフェイスを実装した新しいクラスを作成し、ConvertとConvertBackメソッドを実装します。

チェックボックスのIsCheckedに、上で作成したYesNoBooleanConverterを使用するようにXAMLを次のように編集します。

ここまでの準備ができたら、バインディングソース(DataContext)に“YES/NO”のそれぞれの値を設定し、プログラム実行してみましょう。

バインディングソースにYESを設定した場合

実行結果
yesのデータバインディング

バインディングソースにNOを設定した場合

実行結果
noのデータバインディング

SE
実際にアプリを作ってみて、データバインディングへの理解が深まりました!
PL
データバインディングは、WPFの「MVVMモデル」開発において重要な概念のため、理解しておくと便利ですよ。

データバインディングはMVVMフレームワークでも重要な概念

WPFアプリ開発の現場では、MVVMパターン開発を支援する「Prism」などのフレームワークを利用することが多く、これらのフレームワークを利用するためには、データバインディングに関する知識が必要になります。WPFとデータバインディングを活用し、自身のスキルアップを図りましょう。

>>>C#の案件を探すならFEnet .NET Navi


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)

Search

Popular

reccomended

Categories

Tags