DataContextとBinding-簡単なサンプル

Windows Presentation Foundation Station

DataContextとBinding-簡単なサンプル

簡単にDataContextとBindingの関係を理解する為に、全く役に立たないサンプルを交えて説明していきます。

DataContext(データコンテキスト)は、FrameworkElement?、FrameworkContentElement?に存在するオブジェクト型を格納するプロパティです。
これに対してBinding（バインディング）を行い、DataContextのデータ(プロパティ)とBindingするターゲット・プロパティを指定して、適切な値を利用します。
言葉での説明より、実際にコーディングしてみる方がいいので、コードを見ながら説明していきます。説明には、Customerというありふれたクラスを利用します。

サンプルで利用するCustomerクラス bookmark

Public Class Customer Public Sub New(ByVal firstname As String, _ ByVal lastname As String) Me._firstName = firstname Me._lastName = lastname End Sub Private _firstName As String Public Property FirstName() As String Get Return Me._firstName End Get Set(ByVal value As String) Me._firstName = value End Set End Property Private _lastName As String Public Property LastName() As String Get Return Me._lastName End Get Set(ByVal value As String) Me._lastName = value End Set End Property End Class

説明するまでもないですが、FirstName?(姓)、LastName?(名)プロパティを持つ単純なクラスです。
このクラスをメインのデータとして利用していきます。

画面レイアウト bookmark

簡単なサンプルとして、単純にテキストボックスにBindingを行い、表示するプログラムを作成します。
画面レイアウトは以下のようにします。

上記画面レイアウトのXAMLは、以下のようになっています。

<Window x:Class="Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="DataContextとBinding" Height="120" Width="300" > <Grid> <Grid.RowDefinitions> <RowDefinition Height="0.5*" /> <RowDefinition Height="0.5*" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="0.2*" /> <ColumnDefinition Width="0.8*" /> </Grid.ColumnDefinitions> <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Column="0" Grid.Row="0">姓</TextBlock> <TextBox Name="txtFirstName" Height="25" Width="200" Grid.Column="1" Grid.Row="0"/> <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Column="0" Grid.Row="1">名</TextBlock> <TextBox Name="txtLastName" Height="25" Width="200" Grid.Column="1" Grid.Row="1"/> </Grid> </Window>

コード bookmark

では、txtFirstName?、txtLastName?にデータが表示されるように、DataContextの設定とBindingの設定をコードに記述します。
記述する場所は、ウインドウがロードされた時に発生するLoadedイベントに記述します。

Partial Public Class Window1 Inherits Window Public Sub New() InitializeComponent() End Sub Private Sub Window1_Loaded(ByVal sender As Object, _ ByVal e As System.Windows.RoutedEventArgs) Handles Me.Loaded ''DataContextを設定 Me.DataContext = New Customer("樋口", "忠洋") ''txtFirstName.TextにCustomer.FirstNameをバインディング Me.txtFirstName.SetBinding(TextBox.TextProperty, _ New Binding("FirstName")) ''txtLastName.TextにCustomer.LastNameをバインディング Me.txtLastName.SetBinding(TextBox.TextProperty, _ New Binding("LastName")) End Sub End Class

11行目でDataContextにCustomerクラスを設定しています。ここでのMe.DataContextとは、Window.DataContextを指しています。
13、16行目で、TextプロパティにBindingし、データが表示されるようにします。
ここでは、コードよりBindingを行っていますが、直接XAMLのタグ内に記述する事もできます。

タグでのBinding bookmark

<Window x:Class="Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="DataContextとBinding" Height="120" Width="300" > <Grid> <Grid.RowDefinitions> <RowDefinition Height="0.5*" /> <RowDefinition Height="0.5*" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="0.2*" /> <ColumnDefinition Width="0.8*" /> </Grid.ColumnDefinitions> <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Column="0" Grid.Row="0">姓</TextBlock> <TextBox Name="txtFirstName" Height="25" Width="200" Grid.Column="1" Grid.Row="0" Text="{Binding Path=FirstName}" /> <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Column="0" Grid.Row="1">名</TextBlock> <TextBox Name="txtLastName" Height="25" Width="200" Grid.Column="1" Grid.Row="1" Text="{Binding Path=LastName}" /> </Grid> </Window>

21、26行目のText="{Binding Path=xxxxxxx}"でBindingを行っています。
ここで疑問に思えるのが、Binding時に対象となるCustomerクラスのプロパティしか指定していない点です。これについては、DataContextを参照して下さい。

コメント bookmark

お名前: