プログラミング図書館・本館

データグリッド

最終更新：2011年05月15日 15:31

atachi

- view

管理者のみ編集可

データグリッドの機能 [#mf0696a7]
- データグリッドの設定 [#md3a96c1]
カラム [#h1c86b3c]
参考サイト

データグリッドの機能

カラム自動生成機能

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; }
}