(前回の続き。)
DataGrid内の列を選択すると、デフォルトではこんな感じに色が変わります。
縁取りされてるCellがFocusされている場所。
青くなっている列(でデータがセットされているトコロ)が、Selectされている場所。
それぞれの色はデフォルトで、システムカラーなんでしょうね。
なので、ここのStyleを変更してあげる。
<DataGrid x:Name="NameList" AutoGenerateColumns="False"
HorizontalAlignment="Left" Margin="10,10,0,0"
VerticalAlignment="Top" IsReadOnly="True">
<DataGrid.CellStyle>
<Style TargetType="DataGridCell">
<Style.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter Property="Background" Value="Black"/>
<Setter Property="Foreground" Value="White"/>
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="DarkGray"/>
<Setter Property="Foreground" Value="White"/>
</Trigger>
</Style.Triggers>
</Style>
</DataGrid.CellStyle>
<DataGrid.Columns>
<DataGridTextColumn Header="本名"
Binding="{Binding Name}"/>
<DataGridTextColumn Header="源氏名"
Binding="{Binding StageName}"/>
<DataGridTextColumn Header="指名番号"
Binding="{Binding IdNumber}"/>
<DataGridTextColumn Header="登録日"
Binding="{Binding Registered}"/>
</DataGrid.Columns>
</DataGrid>
とすると、こんな感じになりました。
次は、ヘッダの外観も変えたい。
まずは色から。これはStyleを作って設定。
<Window.Resources>
<Style x:Key="DataListColumnHeaderStyle" TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Background" Value="DarkGray"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="BorderBrush" Value="Black"/>
<Setter Property="Padding" Value="5"/>
</Style>
</Window.Resources>
で、これをDataGridのColumnHeaderStyleプロパティにセットする。
<DataGrid x:Name="NameList" AutoGenerateColumns="False"
HorizontalAlignment="Left" Margin="10,10,0,0"
VerticalAlignment="Top" IsReadOnly="True"
ColumnHeaderStyle="{StaticResource DataListColumnHeaderStyle}">
ただ、コレ。GridCellの幅が可変になってるので、
こんな風にもなります。
このとき、選択列内でデータが登録されてないCellは色がつかないんですね。
これはデフォルトの設定のようです。
ここにも選択色をつけたい場合は、DataGridのスタイルを設定します。
DataGrid.CellStyleと同じ階層に、こんな感じでDataGrid.RowStyleを設定。
<DataGrid.RowStyle>
<Style TargetType="DataGridRow">
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="MediumOrchid"/>
</Trigger>
</Style.Triggers>
</Style>
</DataGrid.RowStyle>
そうするとこうなりました。
DataGridRowの頭についてる微妙な部分が気になるトコロ。。。
試作1は終わりです。





0 件のコメント:
コメントを投稿