SilverlightのDataGridのカラムを明示的に指定する。

Controls Silverlight

SiverlightのDataGridハローワールド - y_maeyamaの日記で、AutoGenerateColumnsを用いてカラムを生成する方法でデータグリッドにデータを表示しました。
DataGridTextColumnを使用して明示的にデータグリッドのカラムを設定する方法を紹介します。

アジェンダ

  • アイテムクラスの定義
  • カラムの設定
  • データをセット
  • 注意
  • まとめ

アイテムクラスの定義

データグリッドのロウのデータソースとなるアイテムクラスを定義します。

public class BMIRecord
{
    /// <summary>BMIを記録した日付</summary>
    public DateTime Date { get; set; }

    /// <summary>BMI</summary>
    public double BMI { get; set; }

    /// <summary>標準値22とBMIとの差分</summary>
    public double HyojunSa { get; set; }

    /// <summary>身長</summary>
    public double Height { get; set; }

    /// <summary>体重</summary>
    public double Weight { get; set; }
}

カラムの設定

XAMLで、DataGrid.ColumnsプロパティにDataGridTextColumnをセットします。

<Grid x:Name="LayoutRoot" Background="White">
    <sdk:DataGrid x:Name="DgrBmiRecords" AutoGenerateColumns="False">
        <sdk:DataGrid.Columns>
            <sdk:DataGridTextColumn Binding="{Binding Date}" Header="日付"/>
            <sdk:DataGridTextColumn Binding="{Binding BMI}" Header="BMI"/>
            <sdk:DataGridTextColumn Binding="{Binding HyojunSa}" Header="標準値(22)との差分"/>
            <sdk:DataGridTextColumn Binding="{Binding Height}" Header="身長"/>
            <sdk:DataGridTextColumn Binding="{Binding Weight}" Header="体重"/>
        </sdk:DataGrid.Columns>
    </sdk:DataGrid>
</Grid>

DataGridTextColumnのBindingプロパティにアイテムクラスのプロパティ名を設定します。

データをセット

xaml.csのコンストラクタに、DataGridのItemsSourceにデータを設定します。

this.DgrBmiRecords.ItemsSource = new List<BMIRecord>()
{
    new BMIRecord 
    { 
        Date=DateTime.Today, 
        BMI=23.18, 
        HyojunSa=1.18, 
        Height = 175, 
        Weight = 71
    },
};

以上で、データグリッドの設定は終了となります。Silverlightアプリを起動するとデータグリッドが表示されます。

注意

AutoGenerateColumnsをFlaseにしておかないと、セットしたDataGridTextColumnとは別にアイテムクラスのプロパティから自動生成されたカラムが表示されてしまうので注意が必要です。

まとめ

DataGridTextColumnを使用して明示的にデータグリッドのカラムを設定する方法を紹介しました。