データグリッド
最終更新:
atachi
データグリッドの機能
カラム自動生成機能
DataGrid.ItemsSourceに設定されたデータの型情報を元に、データグリッドのカラムを自動生成する機能を持ちます。
カラムの定義を記述する必要がなく、データを与えるだけですべての情報が表示されることができます。
逆に表示するデータの項目を制限したい場合やカラムの順番の変更、表示形式の変更などを行いたい場合はこの機能を無効にし、カラムの定義を記述していく必要があります。
カラム自動生成機能の制御はDataGrid.AutoGenerateColumns プロパティのフラグで設定できます。
データグリッドの設定
名前 | プロパティ名 | 設定例 | 備考 |
読み込み専用モード | DataGrid.IsReadOnly | True | グリッド全体を読み取り専用モードにする。編集モードにならない |
ソートの有効 | DataGrid.AllowSorting | True | レコードのソートを許可する |
ユーザーによるレコードの追加 | DataGrid.CanUserAddRows | True | 実行時にユーザーによってレコードの追加を許可する |
ユーザーによるレコードの削除 | DataGrid.CanUserDeleteRows | True | 実行時にユーザーによってレコードの削除を許可する |
ユーザーによるカラム位置の変更 | DataGrid.CanUserReorderColumns | True | 実行時にユーザーによってカラムの場所の移動を許可する |
ユーザーによるカラム幅の変更 | DataGrid.CanUserResizeColumns | True | 実行時にユーザーによってカラムの幅の変更を許可する |
カラムの自動生成機能 | DataGrid.AutoGeneratingColumn | True | データソースから自動的にカラムの生成を行う |
カラム
カラムの設定
名前 | プロパティ名 | 設定例 | 備考 |
ヘッダー名 | DataGridColumn.Header | 文字列 | ヘッダー名に設定したい文字列 |
ヘッダーの幅 | DataGridColumn.Width | 数字 | ヘッダーの幅 |
* | すべてのカラムの幅の合計がグリッドの幅より小さい場合に、グリッド幅まで広げる | ||
SizeToCells | 列の中でセルの幅が最大のものに合わせる | ||
SizeToHeader | セルの幅をヘッダー名の幅に合わせる | ||
読み取り専用列 | DataGridColumn.IsReadOnly | True |
カラムを読み取り専用にする グリッド全体を読み取り専用にするにはデータグリッドの設定を参照。 |
カラムの種類
定義済みのカラムを使用する。または、独自のカラムを定義することも可能。
カラム名 | 説明 |
DataGridTextColumn | TextBlockまたはTextBoxによるカラムの描画を行う。文字列の表示や編集を必要とする場合に使用するカラム |
DataGridCheckBoxColumn | データがBoolean型でCheckBoxによるカラムの描画を行う。 |
DataGridComboBoxColumn | ComboBoxによるカラムの描画を行う。 |
DataGridHyperlinkColumn | データをURIとして扱う。Hyperlinkによるカラムの描画を行う。 |
DataGridTemplateColumn | データテンプレートを使用して独自のコントロールを使用してカラムの描画を行う。 |
ボタンをカラムに表示する
DataGridTemplateColumnを使ってカラムを定義することで、カラムに任意のレイアウトで表示することができる。
下記の例はカラムにボタンを表示するサンプルです。
<DataGrid>
<DataGrid.Columns>
<DataGridTemplateColumn>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Button Content="テスト" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
コンボボックスをカラムに表示する
DataGridのカラム設定でDataGridComboBoxColumnを使用します。
表示されるコンボボックスの選択項目をDataGridのアイテム以外から設定する場合には、少し工夫が必要となります。
なぜかDataGridComboBoxColumn.ItemsSourceに直接バインドすることができないので、EditingElementStyleプロパティとElementStyleプロパティを使って直接コンボボックスのItemsSourceに表示させたい項目のコレクションをバインドします。
<Window>
<Grid>
<DataGrid AutoGenerateColumns="False" Height="232" HorizontalAlignment="Left" Margin="12,12,0,0" Name="dataGrid1" VerticalAlignment="Top" Width="479"
ItemsSource="{Binding Studios}">
<DataGrid.Columns>
<DataGridTextColumn Header="映画名" Binding="{Binding Label}" Width="150"/>
<DataGridComboBoxColumn Header="DataGridComboBoxのテスト"
SelectedItemBinding="{Binding CategoryType}">
<DataGridComboBoxColumn.ElementStyle>
<Style TargetType="{x:Type ComboBox}">
<Setter Property="DisplayMemberPath" Value="ViewName" />
<Setter Property="ItemsSource" Value="{Binding RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type Window} },Path=DataContext.Types}" />
</Style>
</DataGridComboBoxColumn.ElementStyle>
<DataGridComboBoxColumn.EditingElementStyle>
<Style TargetType="{x:Type ComboBox}">
<Setter Property="DisplayMemberPath" Value="ViewName" />
<Setter Property="ItemsSource" Value="{Binding RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type Window} },Path=DataContext.Types}" />
</Style>
</DataGridComboBoxColumn.EditingElementStyle>
</DataGridComboBoxColumn>
<!-- ↓の方法ではコンボボックスの一覧にItemsSourceを使うことができない -->
<DataGridComboBoxColumn Header="DataGridComboBoxのテスト"
SelectedItemBinding="{Binding CategoryType}"
ItemsSource="{Binding RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type Window} },Path=DataContext.Types}"
DisplayMemberPath="ViewName"/>
</DataGrid.Columns>
</DataGrid>
</Grid>
</Window>
MyDataはXAMLの分離コードでWindowのDataContextに設定します。
public class MyData
{
public MyData()
{
_Types.Add(new CategoryType { ViewName = "Type A" });
_Types.Add(new CategoryType { ViewName = "Type B" });
_Types.Add(new CategoryType { ViewName = "Type C" });
_Studios.Add(new Studio { Label = "A", CategoryType = _Types.ElementAt(0) });
_Studios.Add(new Studio { Label = "B", CategoryType = _Types.ElementAt(2) });
}
public ICollection<Studio> Studios
{
get { return _Studios; }
}
public ICollection<CategoryType> Types
{
get { return _Types; }
}
private ICollection<Studio> _Studios = new ObservableCollection<Studio>();
private ICollection<CategoryType> _Types = new List<CategoryType>();
}
public class Studio
{
public string Label { get; set; }
public CategoryType CategoryType { get; set; }
}
public class CategoryType
{
public string ViewName { get; set; }
}