2013年09月30日

WPFサンプル:DataGridTemplateColumnでDataGridをカスタマイズする

   このエントリーをはてなブックマークに追加 Clip to Evernote
「DataGrid にコレクションをバインドする」「プロパティ値を変更してDataGridの見た目と動作を変更する」では、DataGridのColumnsプロパティには、テキストを表示するDataGridTextColumnを指定してきましたが、その他、DataGridCheckBoxColumn、DataGridHyperlinkColumn、DataGridComboBoxColumn、DataGridTemplateColumnなどを指定することができます。
今回は、DataGridCheckBoxColumnとDataGridTemplateColumnを使ったサンプルを書いてみました。

まずは、実行時のスクリーンショットをお見せします。

DataGrid31

DataGridにバインドするオブジェクト以下のとおりです。

    public class User {
        public string Nickname { get; set; }
        public string Name { get; set; }
        public DateTime Birthday { get; set; }
        public string Birthplace { get; set; }
        public bool IsRegular { get; set; }
    }

    public class UserList {
        public ObservableCollection<User> Users { get; set; }
        public UserList() {
            Users = new ObservableCollection<User> {
                new User { Name="芥川 隆乃輔", Nickname="ryu", 
                           Birthday= new DateTime(1950,3,6), Birthplace="東京"},
                new User { Name="名都目 漱石", Nickname="natsu", 
                           Birthday= new DateTime(1982,11,13), Birthplace="神奈川"},
                new User { Name="宮沢 健治", Nickname="miya", 
                           Birthday= new DateTime(1964,7,24), Birthplace="宮城"},
                new User { Name="島咲 藤村", Nickname="saki", 
                           Birthday= new DateTime(1971,2,5), Birthplace="長野"},
                new User { Name="紀久地 寛", Nickname="kan", 
                           Birthday= new DateTime(1963,12,15), Birthplace="長崎"},
            };
        }
    }

前回示したものほぼ同じですが、UserクラスにIsRegular プロパティを追加しています。

モデル側の定義ができましたので、次は、UI側の定義に移りましょう。
チェックボックスを表示するのに、DataGridCheckBoxColumnを利用しています。
DataGridCheckBoxColumnのXAMLでの記述は以下のようになります。

<DataGridCheckBoxColumn
    Binding="{Binding Path=IsRegular}" CanUserReorder="True"
    CanUserResize="True"
    CanUserSort="True" Header="正会員" Width="50" />

bool値をバインドする以外は、DataGridTextColumnと同じですね。

次に、DataGridTemplateColumnです。

<DataGridTemplateColumn
    CanUserReorder="True" CanUserResize="True" CanUserSort="True"
    Width="Auto"
    CellTemplate="{StaticResource DateTemplate}" Header="生年月日"
    CellEditingTemplate="{StaticResource DateEditTemplate}" />

CellTemplatetとCellEditingTemplateという2つのプロパティで、表示のときと編集のときの2つのテンプレートを指定しています。
この2つのテンプレート(DateTemplateとDateEditTemplate)は、Windows.Resourcesで以下のように定義しています。

<Window.Resources>
    <DataTemplate x:Key="DateTemplate">
        <StackPanel Orientation="Horizontal" Margin="5,0" VerticalAlignment="Center">
            <TextBlock Text="{Binding Birthday, StringFormat=yyyy年MM月dd日}" />
        </StackPanel>
    </DataTemplate>
    <DataTemplate x:Key="DateEditTemplate">
        <DatePicker SelectedDateFormat="Short" SelectedDate="{Binding Birthday, Mode=TwoWay}" />
    </DataTemplate>
</Window.Resources>

このように定義することで、日付編集時にDatePickerを使うことが可能になります。

最後にXAML全体を示します。

<Window x:Class="DataGrid3Sample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:my="clr-namespace:DataGrid3Sample"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <DataTemplate x:Key="DateTemplate">
            <StackPanel Orientation="Horizontal" Margin="5,0" VerticalAlignment="Center">
                <TextBlock Text="{Binding Birthday, StringFormat=yyyy年MM月dd日}" />
            </StackPanel>
        </DataTemplate>
        <DataTemplate x:Key="DateEditTemplate">
            <DatePicker SelectedDateFormat="Short" SelectedDate="{Binding Birthday, Mode=TwoWay}" />
        </DataTemplate>
    </Window.Resources>
    <Window.DataContext>
        <my:UserList x:Name="userList"/>
    </Window.DataContext>
    <Grid x:Name="LayoutRoot" Background="White">
        <DataGrid AutoGenerateColumns="False" Margin="10" Name="dataGrid1"
                  ItemsSource="{Binding Path=Users}">
            <DataGrid.Columns>
                <DataGridTextColumn
                    Binding="{Binding Path=Nickname}" CanUserReorder="True"
                    CanUserResize="True"
                    CanUserSort="True" Header="ユーザ名" Width="80" />
                <DataGridTextColumn
                    Binding="{Binding Path=Name}" CanUserReorder="True"
                    CanUserResize="True"
                    CanUserSort="True" Header="氏名" Width="100" />
                <DataGridCheckBoxColumn
                    Binding="{Binding Path=IsRegular}" CanUserReorder="True"
                    CanUserResize="True"
                    CanUserSort="True" Header="正会員" Width="50" />
                <DataGridTemplateColumn
                    CanUserReorder="True" CanUserResize="True" CanUserSort="True"
                    Width="Auto"
                    CellTemplate="{StaticResource DateTemplate}" Header="生年月日"
                    CellEditingTemplate="{StaticResource DateEditTemplate}" />
            </DataGrid.Columns>
        </DataGrid>
    </Grid>
</Window>

このサンプルでは、コードビハインドへのC#での追加コーディングはありません。



WPFサンプル・目次


 

この記事へのトラックバックURL

http://trackback.blogsys.jp/livedoor/gushwell/52334608