DataGridをカスタマイズするための土台となるような基本的なプロパティの設定箇所を記述していきます。
上記画像のウィンドウ画面のXAMLを元に説明していきます。画面の作成方法は下記リンクの関連ページをご覧下さい。
DataGridの右端の空白列を非表示にする[HorizontalAlignment]
下記のコード一覧では背景のみをスタイルで変更していますが、各箇所でマージンを指定したり、BorderThicknessで上下左右の枠を非表示させることなどによって様々なカスタマイズをしていくことができます。
列ヘッダーをカスタマイズする
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<Grid> <DataGrid Name="dataGrid01" AutoGenerateColumns="False"> <DataGrid.ColumnHeaderStyle> <Style TargetType="DataGridColumnHeader"> <Setter Property="Background" Value="AliceBlue" /> </Style> </DataGrid.ColumnHeaderStyle> <DataGrid.Columns> <DataGridTextColumn Header="ID" Binding="{Binding Id}"> </DataGridTextColumn> <DataGridTextColumn Header="タイトル" Binding="{Binding Title}"> </DataGridTextColumn> <DataGridTextColumn Header="著者" Binding="{Binding Author}" Width="*"> </DataGridTextColumn> </DataGrid.Columns> </DataGrid> </Grid> |
個々の列ヘッダーをカスタマイズする
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<Grid> <DataGrid Name="dataGrid01" AutoGenerateColumns="False"> <DataGrid.Columns> <DataGridTextColumn Header="ID" Binding="{Binding Id}"> </DataGridTextColumn> <DataGridTextColumn Header="タイトル" Binding="{Binding Title}"> <DataGridTextColumn.HeaderStyle> <Style TargetType="DataGridColumnHeader"> <Setter Property="Background" Value="DarkGray" /> </Style> </DataGridTextColumn.HeaderStyle> </DataGridTextColumn> <DataGridTextColumn Header="著者" Binding="{Binding Author}" Width="*"> </DataGridTextColumn> </DataGrid.Columns> </DataGrid> </Grid> |
全ての行をカスタマイズする
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<Grid> <DataGrid Name="dataGrid01" AutoGenerateColumns="False"> <DataGrid.RowStyle> <Style TargetType="DataGridRow"> <Setter Property="Background" Value="DarkGray" /> </Style> </DataGrid.RowStyle> <DataGrid.Columns> <DataGridTextColumn Header="ID" Binding="{Binding Id}"> </DataGridTextColumn> <DataGridTextColumn Header="タイトル" Binding="{Binding Title}"> </DataGridTextColumn> <DataGridTextColumn Header="著者" Binding="{Binding Author}" Width="*"> </DataGridTextColumn> </DataGrid.Columns> </DataGrid> </Grid> |
全てのセルをカスタマイズする
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<Grid> <DataGrid Name="dataGrid01" AutoGenerateColumns="False"> <DataGrid.CellStyle> <Style TargetType="DataGridCell"> <Setter Property="Background" Value="DarkGray" /> </Style> </DataGrid.CellStyle> <DataGrid.Columns> <DataGridTextColumn Header="ID" Binding="{Binding Id}"> </DataGridTextColumn> <DataGridTextColumn Header="タイトル" Binding="{Binding Title}"> </DataGridTextColumn> <DataGridTextColumn Header="著者" Binding="{Binding Author}" Width="*"> </DataGridTextColumn> </DataGrid.Columns> </DataGrid> </Grid> |
ある特定の列のセルをカスタマイズする 1
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<Grid> <DataGrid Name="dataGrid01" AutoGenerateColumns="False"> <DataGrid.Columns> <DataGridTextColumn Header="ID" Binding="{Binding Id}"> </DataGridTextColumn> <DataGridTextColumn Header="タイトル" Binding="{Binding Title}"> <DataGridTextColumn.ElementStyle> <Style TargetType="TextBlock"> <Setter Property="Background" Value="DarkGray" /> </Style> </DataGridTextColumn.ElementStyle> </DataGridTextColumn> <DataGridTextColumn Header="著者" Binding="{Binding Author}" Width="*"> </DataGridTextColumn> </DataGrid.Columns> </DataGrid> </Grid> |
ある特定の列のセルをカスタマイズする 2
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<Grid> <DataGrid Name="dataGrid01" AutoGenerateColumns="False"> <DataGrid.Columns> <DataGridTextColumn Header="ID" Binding="{Binding Id}"> </DataGridTextColumn> <DataGridTextColumn Header="タイトル" Binding="{Binding Title}"> <DataGridTextColumn.CellStyle> <Style TargetType="DataGridCell"> <Setter Property="Background" Value="DarkGray" /> </Style> </DataGridTextColumn.CellStyle> </DataGridTextColumn> <DataGridTextColumn Header="著者" Binding="{Binding Author}" Width="*"> </DataGridTextColumn> </DataGrid.Columns> </DataGrid> </Grid> |
