WPF > コンポーネント > コントロール > データグリッド


※上記の広告は60日以上更新のないWIKIに表示されています。更新することで広告が下部へ移動します。

データグリッドの機能

カラム自動生成機能

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

参考サイト

読んでいる本


Effective C#

QLOOKアクセス解析

ここを編集