WPFの練習に、CheckBoxとCLRオブジェクトをデータバインディングする方法を確認します。「Expression Blend」を使って行うことを前提に以下では記載します。
まずBlendで新規プロジェクトを作成し、CheckBoxがある画面を作成します。
CheckBox と DataContext
間のバインドテストですが、DataContext と CheckBox
がバインドできていることを確認するためにもう一つCheckBoxを加え、下記のような画面を作成します。
バインディングするために各部品は名前が定義されている必要があります。各CheckBoxに名前をつけてください。
下図の例では checkBox1,
checkBox2 と名前をつけました。
次にバインディングする CLRオブジェクト 側を定義します。
using System;
using System.Collections.Generic;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
namespace test_Binding_02
{
public class Status
{
public bool IsChecked {
set; get;
}
}
/// <summary>
/// MainWindow.xaml の相互作用ロジック
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
this.InitializeComponent();
// オブジェクト作成に必要なコードをこの点の下に挿入します。
DataContext = new {
Status = new Status(),
};
}
}
}
|
一旦F5を押してコンパイル＆実行します。正しくコンパイルされることを確認してください。
CheckBox の IsChecked と、上記の DataContext.Status.IsChecked をバインディングします。
「データ
バインドの作成」ダイアログが表示されたら、「データ コンテキスト」タブを押して
「カスタムパス式の使用」をチェックし、右側に
”Status.IsChecked” と入力します。
"CheckBox2"についても同じ内容を反復します。
以上でお終い。
以上の作業の結果、XAML
は下図のようになっているはずです。
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:test_Binding_02" xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"
x:Class="test_Binding_02.MainWindow"
x:Name="Window"
Title="MainWindow"
Width="190" Height="137">
<Grid x:Name="LayoutRoot">
<CheckBox x:Name="checkBox1" Content="CheckBox1" Margin="33,22,0,0"
VerticalAlignment="Top" HorizontalAlignment="Left" IsChecked="{Binding Status.IsChecked}"/>
<CheckBox x:Name="checkBox2" Content="CheckBox2" Margin="33,52,0,0"
VerticalAlignment="Top" HorizontalAlignment="Left" IsChecked="{Binding Status.IsChecked}"/>
</Grid>
</Window>
|
完成です。いずれかのチェックボックスをマウスクリックすると他方の✔も同時に変化します。
サンプルプログラム ダウンロード （開発：Expression Blend 4）
記載： 2012年10月14日 木下英俊