2013年01月18日

[C# WPF]Bindingを使ってみる

今回からBindingの基礎について解説していきます。
Bindingはビジネスロジックと表示処理を分離する為には非常に有効な機能です。
Bindingに慣れてしまうとC#のFormアプリケーションでの開発に戻れなくなります。
といっても過言ではないぐらいにすばらしい機能です。

では実際にサンプルを作成しながら見ていきます。

xamlコードです。

<Grid>
<TextBox Height="23" Width="70" Margin="5"
HorizontalAlignment="Left" VerticalAlignment="Top"
Text="{Binding Message}" />
<Button Content="Button" Height="23" Width="70" Margin="5,35,0,0"
HorizontalAlignment="Left" VerticalAlignment="Top"
Click="Button_Click"/>
</Grid>

HelloWorldの時と同じようにTextBoxとButtonを配置します。

ButtonのClickプロパティはボタンクリック時のイベントハンドラを設定しています。
イベントハンドラはxaml.csに実装します。

そして、赤字で示したTextBoxのTextプロパティがBindingの記述です。
この記述はTextプロパティにMessageプロパティを割り当てるという意味になります。
MessageプロパティはMainWindowクラスのプロパティで.csファイルに定義しています。

csコードです。

public partial class MainWindow : Window
{
public string Message { get; set; }

public MainWindow()
{
InitializeComponent();

this.DataContext = this;
}

private void Button_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show(Message);
}
}


見て頂きたいのは赤字の部分です。
MessageプロパティはTextBoxのTextプロパティにBindするプロパティの定義です。
Bindingソースとするプロパティはpublicでなければなりません。

そして

this.DataContext = this;

これはMainWindow.xamlで使用するBindingソースを検索する基準を
自分自身(MainWindowクラスオブジェクト)にするという記述です。
上記のように指定するとxamlに以下のように記述した場合、
MessageプロパティはMainWindowクラスのメンバから検索されます。

{Binding Message}


xamlも合わせて以上のように記述する事で
TextBoxのTextプロパティにMainWindowクラスのMessageプロパティが割り当てられ、
TextBoxに入力した値がMessageプロパティに設定されるようになります。

それでは実行して動作を確認してみましょう。
1.jpg

TextBoxを編集するとTextプロパティの値(入力した文字列)が
BindingソースであるMessageプロパティに設定されます。
ボタンを押すと入力した文字列をダイアログ表示します。

このサンプルを見て気付かれたと思いますが
xaml.csコードにはデータに対する処理しか書かれておらず、
データの表示のしかた、編集のしかたはすべてxamlにのみ記述されています。
これが表示とビジネスロジックを分離するという事です。


posted by cw at 16:30| Comment(0) | Binding | このブログの読者になる | 更新情報をチェックする

[C# WPF]Binding DataContextを設定する

前回の記事で解説しましたが
DataContextにはBindingソースプロパティを検索する基準になるオブジェクトを指定するのでした。
このDataContextについてもう少し見ていきます。

サンプルは前回のものをそのまま使用します。
xamlコードは前回のままで結構です。

csコードを以下のように変更します。

public partial class MainWindow : Window
{
public string Message { get; set; }

public TestData Data { get; set; }

public MainWindow()
{
InitializeComponent();

Data = new TestData();

this.DataContext = Data;
}

private void Button_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show("MainWindow.Massage=" + Message + "\nTestData.Message=" + Data.Message);
}
}

public class TestData
{
public string Message { get; set; }

public TestData()
{
}
}


Messageプロパティを持つTestDataクラスを定義して
MainWindowクラスのメンバにTestDataクラスオブジェクトを持ちます。
そしてMainWindowのDataContextにはこのTestDataオブジェクトを設定します。
こうすることによりTextBoxのTextプロパティにBindするMessageプロパティは
TestDataオブジェクトのメンバが使用されます。

では実行してみましょう
1.jpg

TextBoxに入力した値はTestDataオブジェクトのMessageプロパティに設定されます。
MainWindowオブジェクトのMessageプロパティはデフォルト値(空)のままです。

BindingソースがDataContextに指定したクラスから設定されるという事がわかって頂けたと思います。
posted by cw at 16:00| Comment(0) | Binding | このブログの読者になる | 更新情報をチェックする

[C# WPF]Bindingソースの階層指定

今回はBindingソースの階層指定についてです。

xamlにBindingソースを"."で区切って指定する事で
DataContextで指定したオブジェクト以下の階層を辿って指定する事ができます。

サンプルはまた前回のものを変更して使用します。

まずはxamlを以下のように変更します。

<Grid>
<TextBox Height="23" Width="70" Margin="5"
HorizontalAlignment="Left" VerticalAlignment="Top"
Text="{Binding Data.Message}" />
<Button Content="Button" Height="23" Width="70" Margin="5,35,0,0"
HorizontalAlignment="Left" VerticalAlignment="Top"
Click="Button_Click"/>
</Grid>


Textプロパティの設定部分(赤字部分)を変更しています。
DataContextであるMainWindowオブジェクトのメンバから階層を辿って指定します。

次にcsコードを以下のように変更します。

public partial class MainWindow : Window
{
public string Message { get; set; }

public TestData Data { get; set; }

public MainWindow()
{
InitializeComponent();

Data = new TestData();

this.DataContext = this;
}

private void Button_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show("MainWindow.Massage=" + Message + "\nTestData.Message=" + Data.Message);
}
}

public class TestData
{
public string Message { get; set; }

public TestData()
{
}
}


DataContextにはMainWindowクラスを指定しています。
xamlでMainWindowのメンバのTestDataオブジェクトの
Messageプロパティを辿って指定しているので
TextBoxに入力したデータはTestDataオブジェクトのMessageに設定されます。

実行結果は前回のサンプルと同じ結果になります。
posted by cw at 15:30| Comment(1) | Binding | このブログの読者になる | 更新情報をチェックする

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

この広告は180日以上新しい記事の投稿がないブログに表示されております。