WPFバインディング（データバインディング）の使用方法

I. 基本事項

1、データバインディングの役割。WPFシステムのデータバインディングは、この高速道路で、処理されたデータが自動的に表示するユーザーインターフェイスに到達し、ユーザーが変更したデータは、自動的にロジック層に戻されるデータハイウェイの役割を果たす。

データバインディングとは、データをグラフィカルユーザーインターフェース（GUI）上の制御要素に関連付け、ユーザーがGUI上の制御要素を通じてデータを操作できるようにするプロセスです。従来のデータバインディングは、GUIの制御要素のプロパティと相互作用するバックエンドコードでしたが、機能的データバインディングを使用することにより、コード量を減らすことができます。

2. コンポジション WPFのバインディングは バインディングソースとバインディングターゲットの連動 . バインディングは多くの場合、バインディングソース、パス、バインディングターゲット、ターゲットプロパティの4つの部分で構成されていますが、コンバータも非常に重要なコンポーネントです。

(1) バインディングのソース

Bindingのソースは、データのソースです。データのソースは、それがオブジェクトであり、プロパティを通してそのデータを公開する限り、バインディングのソースになることができます。

Bindingのソースの概要です。

• Sourceとして一般的なCLR型のオブジェクトを1つ指定します。.NET Framework自身の型のオブジェクトとユーザー定義型のオブジェクトが含まれます。
• Array, List<T>, ObservableCollection<T> などのコレクション型が含まれます。
• DataTableとDataViewオブジェクトを含む、ADO.NETデータオブジェクトをSourceとして指定します。
• ソースとして依存オブジェクトを指定します。
• コンテナDataContextをSourceとして指定する。

1) Bindingタグの拡張でコントロールをBindingソースとして使用する

<Window x:Class="testBinding2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <StackPanel>
            <TextBox x:Name="textBox1" Text="{Binding Path=Value,ElementName=slider1}"/>
            <Slider x:Name="slider1" Maximum="100" Minimum="0"/>
        </StackPanel>   
    </Grid>
</Window>

  <TextBox x:Name="textBoxName" BorderBrush="Black" Margin="5" /> C#と同等のBindingマークアップ拡張構文を使ってください。

this.textBox.SetBinding(TextBox.TextProperty,new Binding("Value"){ ElementName="slider1"});

2) リストコントロールのItemsSourceとしてコレクションオブジェクトを使用する場合

     WPFのリスト型コントロールはItemsControlクラスを継承しており、ItemsSourceプロパティは当然ながらIEnumerableインターフェース由来のクラスのインスタンスを自身の値として受け取ることが可能です。注：リストコントロールのItemsSourceとしてコレクション型を使用する場合、一般的にはList<T&g;ではなく、ObservableCollection<T&g;の使用を検討してください。ObservableCollection<T&g;はINotifyCollectionChanged、INotifyPropertyChangedインターフェースの実装を受け継ぎ、コレクションに対する変更点を表示するリストコントロールにすぐに通知して、変更をすぐに表示してくれるからです。

応用例です。

フロントエンドのコードです。

<Window x:Class="testBinding2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <StackPanel>
            <TextBlock Text="Student ID:" FontWeight="Bold" Margin="5" />
            <TextBox x:Name="textBoxId" Margin="5"/>
            <TextBlock Text="Student List:" FontWeight="Bold" Margin="5"/>
            <ListBox x:Name="listBoxStudents" Height="180" Margin="5"/>
                <! --<ListBox.ItemTemplate>
                </ListBox.ItemTemplate>-->
        </StackPanel>   
    </Grid>
</Window>

バックエンドのコードです。

namespace testBinding2
{
    /// <summary>
    //// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            List<Student> stuList = new List<Student>()
            {
                new Student() { Id = 0, Name = "Tim", Age = 29 }
                new Student() { Id = 1, Name = "Tom", Age = 28 }
                new Student() { Id = 2, Name = "Kyle", Age = 27 }, new Student() { Id = 2, Name = "Kyle", Age = 27 }
                new Student() { Id = 3, Name = "Tony", Age = 24 }, new Student() { Id = 3, Name = "Tony", Age = 24 }
                new Student() { Id = 4, Name = "Vina", Age = 23 }, new Student() { Id = 4, Name = "Vina", Age = 23 },
                new Student() { Id = 5, Name = "Mike", Age = 22 }
            };
            // Set Binding for ListBox
            This.listBoxStudents.ItemsSource = stuList;//DataSource
            This.listBoxStudents.DisplayMemberPath = "Name";//path
            // set Binding for TextBox
            Binding binding = new Binding("SelectedItem.Id") { Source=this.listBoxStudents};
            this.textBoxId.SetBinding(TextBox.TextProperty,binding);
        }
    }
    // Create a class named Student, which has three properties Id, Name, Age
    public class Student
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public int Age { get; set; }
    }
}

 効果

2) バインディングのためのデータの流れの方向（バインディングのモード）

デフォルトでは、データはバインディングを通してターゲットに送られるか、ターゲットからソースに返されるかのどちらかです。Bindingのデータフローの方向を制御するプロパティはModeで、BindingMode型で、TowWay ,OneWay,OnTime, OneWayToSource, and Defaultの列挙があります。

OneWay（通常のデータフロー）。データソースはデータコレクションで、ターゲットはコントロールエレメントです。

TowWay。データソースとターゲットが随時変更された場合に更新される。

(2) バインディングのパス

BindingのPathプロパティは、Bindingのソースとなるオブジェクトのどのプロパティかを指定します。上図のように、Slinderコントロールオブジェクトがソースとして使用され、そのValueプロパティがパスとして使用されています。

特殊：パスのないバインディング、つまりバインディングのソースそのものがデータである。

II. アプリケーション

ボタンがクリックされるとテキストボックスコントロールの内容が変化する

1. インターフェースデザイン

<Window x:Class="testBinding.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <StackPanel>
            <TextBox x:Name="textBoxName" BorderBrush="Black" Margin="5" />
            <Button Content="Add Age" Margin="5" Click="Button_Click"/>
        </StackPanel>
    </Grid>
</Window>

 2. バックエンドデザイン

ComponentModel;

namespace testBinding
{
    /// <summary>
    //// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        Student stu;
        public MainWindow()
        {
            InitializeComponent();

            //prepare the data source       
            stu = new Student();
            //prepare Binding
            Binding binding = new Binding();//create Binding instance
            binding.Source = stu;//specify the data source
            binding.Path = new PropertyPath("Name");//specify the access path 

            //Use Binding to connect the data source to the Bingding target
            BindingOperations.SetBinding(this.textBoxName,TextBox.TextProperty,binding);//use the binding instance to associate the data source with the target
            // the parameters are target; a property of the target


        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
           stu.Name+="Name11";
        }


    }

    class Student:INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        private string name;

        public string Name
        { get { return name; }
            get { return name; }
            set
            set
                name = value;
                if(this.PropertyChanged!=null)
                {
                    Invoke(this, new PropertyChangedEventArgs("Name"));//PropertyChanged event fires when the property value of Name changes
                }
            }
        }

       
    }
}