2012年6月30日土曜日

[WPF]DataGrid--試作1のつづき

DataGrid内の列が選択された時の色を、任意の色に変更したい!
(前回の続き。)

DataGrid内の列を選択すると、デフォルトではこんな感じに色が変わります。

これは、黒の縁取りがされてるCellをマウスで選択した状態です。
縁取りされてる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 件のコメント:

コメントを投稿