2013年09月23日

WPFサンプル:DataGrid にコレクションをバインドする

   このエントリーをはてなブックマークに追加 Clip to Evernote
まずはサンプルプログラムの実行例です。

DataGrid11

DataGrid12

それでは、上記サンプルのDataGridに表示されているデータを保持するクラスの定義をします。
最初に、一人分のデータを保持する User クラスです。

public class User {
    public string Nickname { get; set; }
    public string Name { get; set; }
    public DateTime Birthday { get; set; }
    public string Birthplace { get; set; }
    public int Age {
        get {
            DateTime today = DateTime.Today;
            int age = today.Year - Birthday.Year;
            if (today.Month < Birthday.Month)
                age--;
            else if (today.Month == Birthday.Month && today.Day < Birthday.Day)
                age--;
            return age;
        }
    }
}

次に、このUserを複数保持するクラス UserList を定義します。
UserListクラスは、メンバーとして ObservableCollection<User> 型の Users プロパティを持っていて、 ここで複数のUserを管理しています。

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="長崎"},
        };
    }
}


サンプルプログラムの便宜上、コンストラクタで固定的にUsersプロパティを初期化しています。
では、XAMLです。

<Window x:Class="DataGrid1Sample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:my="clr-namespace:DataGrid1Sample"
        Title="MainWindow" Height="350" Width="525">
    <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" />
                <DataGridTextColumn Binding="{Binding Path=Birthplace}"
                    CanUserReorder="True" CanUserResize="True"
                    CanUserSort="True" Header="出身地" Width="80" />
                <DataGridTextColumn Binding="{Binding Path=Age}"
                    CanUserReorder="True" CanUserResize="True"
                    CanUserSort="True" Header="年齢" Width="50" />
                <DataGridTextColumn Binding="{Binding Path=Birthday,
                        StringFormat=\{0:yyyy/MM/dd\}}"
                    CanUserReorder="True" CanUserResize="True"
                    CanUserSort="True" Header="生年月日" Width="Auto" />
            </DataGrid.Columns>
        </DataGrid>
    </Grid>
</Window>

DataGridでは、UserListオブジェクトの Users プロパティをバインドしています。
DataGridTextColumn でカラム定義をしていますが、そこで Userオブジェクトのどのプロパティと バインドするのかを指定しています。

DataGridとDataGridTextColumnのプロパティについて間単に触れておくと、AutoGenerateColumnsは、カラムの自動生成有無を指定します。ここでは、falseを指定しているので、 Columns プロパティで、カラムを定義することになります。
DataGridTextColumnの CanUserReorder 列ヘッダーをドラッグして列の表示位置を変更できるかどうかを指定するものです。
CanUserResizeは、マウスを使用して列幅を調整できるかどうかを指定します。
CanUserSortは、列ヘッダーをクリックして列を並べ替えることができるかどうか指定します。

UserListのインスタンス生成は、XAML側で行っています(UserListを生成すると同時に、DataContextにインスタンスを設定しています)ので、C#のコードビハインドでは新たな記述は特にありません。



WPFサンプル・目次


この記事へのコメント
エンバーです。

サンプル提供ありがとうございます。
userlistのコンストラクタのところ
ObservableCollection のままですと、コンパイルエラーになってしまいました。
ObservableCollection<User> にて動作しましたがこれでよろしいですよね
Posted by エンバー at 2014年09月05日 21:04
ご指摘の通りです。<User> が抜けていました。
Posted by Gushwell at 2014年09月08日 20:21
WPFのサンプルが少ない中、大変役にたちました。
ありがとうございました。
Posted by seba at 2015年02月23日 02:27
sabeさん、こちらこそ、当ブログを読んでいただきありがとうございます。お役に立てたようで何よりです。
Posted by gushwell at 2015年02月23日 21:01
 

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

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