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

.NET
C#
WPF
プログラミング言語

公開日時: 2020-09-04 　更新日時: 2022-06-01

この記事でわかること

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

システム エンジニア: WPFのデータバインディングがなかなか理解できません……

プロジェクト リーダー: 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要素をデータバインディングで接続する簡単な例を見てみましょう。

public class Parson {
  public string Name { get; set; }
}

public class Parson {

public string Name { get; set; }

}

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

<Label Name="label" Text="{Binding Name}"/>

1	<Label Name="label" Text="{Binding Name}"/>

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

this.DataContext = new Parson() { Name = "山田　太郎" };

1	this.DataContext = new Parson() { Name = "山田　太郎" };

実行結果

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

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

<TextBox Name="textbox" Width="50" Text="{Binding ElementName=slider, Path=Value}" />
<Slider Name="slider" Maximum="100" Minimum="0" SmallChange="1" IsSnapToTickEnabled="True"/>

1 2	<TextBox Name="textbox" Width="50" Text="{Binding ElementName=slider, Path=Value}" /> <Slider Name="slider" Maximum="100" Minimum="0" SmallChange="1" IsSnapToTickEnabled="True"/>

実行結果

上で紹介した２つの方法以外にも、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メソッドを実装します。

[ValueConversion(typeof(bool), typeof(bool))]
public class YesNoBooleanConverter: IValueConverter
{

    //バインディング ソース→バインディングターゲットへの変換処理
    public object Convert(object value, Type targetType, object parameter,
                          System.Globalization.CultureInfo culture) {
      return "YES".eq(targetType);
    }

    //バインディングターゲット→バインディングソースの変換処理
    public object ConvertBack(object value, Type targetType, object parameter,
                              System.Globalization.CultureInfo culture) {
      return true.eq(value) ? "YES”NO";
    }
}

[ValueConversion(typeof(bool), typeof(bool))]

public class YesNoBooleanConverter: IValueConverter

{

//バインディングソース→バインディングターゲットへの変換処理

public object Convert(object value, Type targetType, object parameter,

System.Globalization.CultureInfo culture) {

return "YES".eq(targetType);

}

//バインディングターゲット→バインディングソースの変換処理

public object ConvertBack(object value, Type targetType, object parameter,

System.Globalization.CultureInfo culture) {

return true.eq(value) ? "YES”NO";

}

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

<Window x:Class="SampleNaviApplication.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:SampleNaviApplication"
        mc:Ignorable="d"
        Title="MainWindow" Height="200" Width="300">
    <Window.Resources>
        <local:YesNoBooleanConverter x:Key="YesNoBooleanConverter"/>
    </Window.Resources>
    <Grid>
        <CheckBox IsChecked="{Binding StringFlag, Converter={StaticResource YesNoBooleanConverter}}"/>
    </Grid>
</Window>

<Window x:Class="SampleNaviApplication.Window1"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

xmlns:local="clr-namespace:SampleNaviApplication"

mc:Ignorable="d"

Title="MainWindow" Height="200" Width="300">

<Window.Resources>

<local:YesNoBooleanConverter x:Key="YesNoBooleanConverter"/>

</Window.Resources>

<Grid>

</Grid>

</Window>

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

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

this.DataContext = new SampleClass { StringFlag = "YES" };

1	this.DataContext = new SampleClass { StringFlag = "YES" };

実行結果

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

this.DataContext = new SampleClass { StringFlag = "NO" };

1	this.DataContext = new SampleClass { StringFlag = "NO" };

実行結果

システム エンジニア: 実際にアプリを作ってみて、データバインディングへの理解が深まりました！

プロジェクト リーダー: データバインディングは、WPFの「MVVMモデル」開発において重要な概念のため、理解しておくと便利ですよ。

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

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

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

FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。

株式会社オープンアップシステムはこんな会社です

秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。

スマホアプリから業務系システムまで

スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
充実した研修制度

毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
資格取得を応援

スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
東証プライム上場企業グループ

オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。

安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

株式会社オープンアップシステムに興味を持った方へ

株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

株式会社オープンアップシステムへ応募する
会員登録不要! カンタン45秒!

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

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

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

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

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

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

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

IValueConverterでデータ変換

コンバーターの作成

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

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

C＃新着案件New Job

システム開発/東京都新宿区/【WEB面談可/C#経験者/20代前半の方活躍中/経験1年以上の方活躍中】/在宅勤務

システム開発/東京都新宿区/【WEB面談可/C#経験者/20代後半～40代の方活躍中/経験年数不問】/在宅勤務

デバック、テスト項目の作成/神奈川県横浜市/【WEB面談可/C#経験者/20代前半の方活躍中/経験1年以上の方活躍中】/在宅勤務

デバック、テスト項目の作成/神奈川県横浜市/【WEB面談可/C#経験者/20代後半～40代の方活躍中/経験年数不問】/在宅勤務

基幹システム開発導入/東京都新宿区/【WEB面談可/C#経験者/20代前半の方活躍中/経験1年以上の方活躍中】/在宅勤務

基幹システム開発導入/東京都新宿区/【WEB面談可/C#経験者/20代後半～40代の方活躍中/経験年数不問】/在宅勤務

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

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

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

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

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

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

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

IValueConverterでデータ変換

コンバーターの作成

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

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

C＃新着案件New Job

システム開発/東京都新宿区/【WEB面談可/C#経験者/20代前半の方活躍中/経験1年以上の方活躍中】/在宅勤務

システム開発/東京都新宿区/【WEB面談可/C#経験者/20代後半～40代の方活躍中/経験年数不問】/在宅勤務

デバック、テスト項目の作成/神奈川県横浜市/【WEB面談可/C#経験者/20代前半の方活躍中/経験1年以上の方活躍中】/在宅勤務

デバック、テスト項目の作成/神奈川県横浜市/【WEB面談可/C#経験者/20代後半～40代の方活躍中/経験年数不問】/在宅勤務

基幹システム開発導入/東京都新宿区/【WEB面談可/C#経験者/20代前半の方活躍中/経験1年以上の方活躍中】/在宅勤務

基幹システム開発導入/東京都新宿区/【WEB面談可/C#経験者/20代後半～40代の方活躍中/経験年数不問】/在宅勤務

関連記事Related Posts

【C#活用】WPFでMVVMパターンを実装する際の注意点

WPFのListBoxコントロールをご解説。要素の追加や削除の方法

C#とWPFで実装するListView。項目を追加する方法

【WPF入門】デスクトップアプリケーションが作成できるUI「WPF」とは

WPFとVisual Studioで画面遷移を実装する方法