(前回の続き。)
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 件のコメント:
コメントを投稿