SilverlightのDataGridのセルのチェックボックスをワンクリックで反転できるようにする

Controls Silverlight

SilverlightのDataGridでチェックボックスのセルを表現したい場合は、通常DataGridCheckBoxColumn使用します。しかし、DataGridCheckBoxColumnは微妙に使い勝手良くありません。そこで、DataGridCheckBoxColumnを使わない方法を紹介します。

アジェンダ

DataGridCheckBoxColumnのチェックボックスの挙動

DataGridCheckBoxColumnでチェックボックスカラムを定義するXAMLは下記のようになります。

<sdk:DataGrid x:Name="DgrSample" AutoGenerateColumns="False">
    <sdk:DataGrid.Columns>
        <sdk:DataGridCheckBoxColumn Header="Check" Binding="{Binding IsTrue, Mode=TwoWay}"/>
    </sdk:DataGrid.Columns>
</sdk:DataGrid>
セルのチェックボックスをクリックするときの挙動

DataGridCheckBoxColumnのセルをクリックすると、下記のような挙動になります。


チェックボックスをクリックするとチェック状態が反転してほしいのですが、DataGridCheckBoxColumnはそうなっていません。DataGridのセルには表示モードと編集モードがあります。フォーカスがないセルをクリックしたときは、セルが編集モードに移行しないため、上記のような挙動になります。

バインディングソースへの反映のタイミング

チェックボックスの状態をバインディングでソースに反映します。ソースに反映するタイミングはフォーカスアウト時となっています。

通常はこのタイミングで問題ないのですが、チェックボックスの状態が変わった瞬間に他のコントロールの状態を変えたい、などを実現したいときは困ります。

DataGridTemplateColumnでチェックボックスカラムを作成

チェックボックスカラムを以下のような挙動にするために、DataGridTemplateColumnを使用します。

  • ワンクリックでチェック状態を反転させる。
  • チェック状態が変更されるたびにバインディングソースへ通知する。

XAMLの定義の仕方は以下の通りです。

<sdk:DataGridTemplateColumn IsReadOnly="True">
    <sdk:DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <CheckBox IsChecked="{Binding IsTrue, Mode=TwoWay}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </DataTemplate>
    </sdk:DataGridTemplateColumn.CellTemplate>
</sdk:DataGridTemplateColumn>

これで、上記の挙動をもったチェックボックスカラムを実現できます。

まとめ

DataGridCheckBoxColumnでチェックボックスが表示されたセルを使用した場合、以下のような挙動をします。

上記の挙動を、

  • ワンクリックでチェック状態を反転させる。
  • チェック状態が変更されるたびにバインディングソースへ通知する。

にするために、DataGridTemplateColumnを使用したチェックボックスカラムの設定の仕方を紹介しました。