DataGridで表を表示させた時に下記の画像のように右端の枠線の重なりが気になる場合があります。この枠線を非表示にする方法を2つ紹介します。
上記画像のウィンドウ画面の作成方法は下記リンクの関連ページをご覧下さい。
DataGridを利用する[XAML][WPF][ItemsSource]
DataGridの右端の空白列を非表示にする[HorizontalAlignment][XAML][WPF]
まず一つ目の方法として、右端の列のセルのMarginをValue=”0,0,-1,0″にします。
|
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 |
<Grid> <DataGrid Name="dataGrid01" AutoGenerateColumns="False"> <DataGrid.Columns> <DataGridTextColumn Header="ID" Binding="{Binding Id}"></DataGridTextColumn> <DataGridTextColumn Header="タイトル" Binding="{Binding Title}"></DataGridTextColumn> <DataGridTextColumn Header="著者" Binding="{Binding Author}" Width="*"> <DataGridTextColumn.CellStyle> <Style TargetType="DataGridCell"> <Setter Property="Margin" Value="0,0,-1,0"></Setter> </Style> </DataGridTextColumn.CellStyle> </DataGridTextColumn> </DataGrid.Columns> </DataGrid> </Grid> |
15〜20行目
DataGridTextColumn要素のCellStyleプロパティに対してValue=”0,0,-1,0″のようにマージンを指定しています。ちょうど線が隠れて非表示になっているように見えるテクニックを利用しています。
二つ目の方法は、DataGrid全体の線を非表示にした上で、各列のセルに対して枠線を設定していく方法です。
|
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
<Grid> <DataGrid Name="dataGrid01" AutoGenerateColumns="False" GridLinesVisibility="None"> <DataGrid.Columns> <DataGridTextColumn Header="ID" Binding="{Binding Id}"> <DataGridTextColumn.CellStyle> <Style TargetType="DataGridCell"> <Setter Property="BorderThickness" Value="0,0,0,1" /> <Setter Property="BorderBrush" Value="Black" /> </Style> </DataGridTextColumn.CellStyle> </DataGridTextColumn> <DataGridTextColumn Header="タイトル" Binding="{Binding Title}"> <DataGridTextColumn.CellStyle> <Style TargetType="DataGridCell"> <Setter Property="BorderThickness" Value="1,0,0,1" /> <Setter Property="BorderBrush" Value="Black" /> </Style> </DataGridTextColumn.CellStyle> </DataGridTextColumn> <DataGridTextColumn Header="著者" Binding="{Binding Author}" Width="*"> <DataGridTextColumn.CellStyle> <Style TargetType="DataGridCell"> <Setter Property="BorderThickness" Value="1,0,0,1" /> <Setter Property="BorderBrush" Value="Black" /> </Style> </DataGridTextColumn.CellStyle> </DataGridTextColumn> </DataGrid.Columns> </DataGrid> </Grid> |
4行目
GridLinesVisibilityプロパティをNoneに指定し、まず全体的に内部のセルを区切る線を非表示にしています。
あとは各列のセルにおいて、上下左右の枠線の表示／非表示を設定していきます。最後の著者の列のセルに対しては、左と下の枠線だけ表示させるようにしています（39〜46行目）。
