WPF/DataGrid/スタイル の履歴(No.2)

• 履歴一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• WPF/DataGrid/スタイル へ行く。
  • 1 (2011-07-25 (月) 02:17:06)
  • 2 (2011-07-25 (月) 02:22:00)

Tag: WPF/DataGrid/スタイル

目次†

参考になるスタイル†

• Andy McMullan: WPF Toolkit DataGrid is an uggoが参考になる。セルのボーダーや、ハイライト行の色を薄めするなどしてモダンなスタイルに。
• Toolkit時代のサンプルなのでVisualStudio2010で使用する場合は次のようにする(prefixのtkを削除する)。

      <Style TargetType="DataGrid">
          <!-- Make the border and grid lines a little less imposing -->
          <Setter Property="BorderBrush" Value="#DDDDDD" />
          <Setter Property="HorizontalGridLinesBrush" Value="#DDDDDD" />
          <Setter Property="VerticalGridLinesBrush" Value="#DDDDDD" />
  
          <Setter Property="RowStyle">
              <Setter.Value>
                  <Style TargetType="DataGridRow">
                      <Style.Triggers>
                          <!-- Highlight a grid row as the mouse passes over -->
                          <Trigger Property="IsMouseOver" Value="True">
                              <Setter Property="Background" Value="Lavender" />
                          </Trigger>
                      </Style.Triggers>
                  </Style>
              </Setter.Value>
          </Setter>
          <Setter Property="CellStyle">
              <Setter.Value>
                  <Style TargetType="DataGridCell">
                      <Style.Triggers>
                          <!-- Highlight selected rows -->
                          <Trigger Property="IsSelected" Value="True">
                              <Setter Property="Background" Value="Lavender" />
                              <Setter Property="BorderBrush" Value="Lavender" />
                              <Setter Property="Foreground" Value="Black" />
                          </Trigger>
                      </Style.Triggers>
                      <!-- Add some padding around the contents of a cell -->
                      <Setter Property="Padding" Value="4,3,4,3" />
                      <Setter Property="Template">
                          <Setter.Value>
                              <ControlTemplate TargetType="DataGridCell">
                                  <Border Padding="{TemplateBinding Padding}" 
                                  Background="{TemplateBinding Background}">
                                      <ContentPresenter />
                                  </Border>
                              </ControlTemplate>
                          </Setter.Value>
                      </Setter>
                      <Setter Property="FocusVisualStyle">
                          <Setter.Value>
                              <Style TargetType="Control">
                                  <Setter Property="BorderBrush" Value="Transparent" />
                              </Style>
                          </Setter.Value>
                      </Setter>
                  </Style>
              </Setter.Value>
          </Setter>
      </Style>
  

Tips†

セルのスタイルを適用した上でDataGridTextColumnを右寄せにする†

• セルの見た目をカスタマイズしさらにある特定の列の内容を右寄せして表示する場合、TextBlockのスタイルをまず定義。

      <Style x:Key="RightTextBlock" TargetType="TextBlock">
          <Setter Property="HorizontalAlignment" Value="Right" />
      </Style>
  

• 右よせにしたいDataGridTextColumnのElementStyleに指定する。

      <DataGridTextColumn Header="サイズ" ElementStyle="{StaticResource RightTextBlock}"></DataGridTextColumn>
  

※次のようにCellStyleを変更すると、その列だけデフォルトのスタイルに戻ってしまうのでだめ。

                <DataGridTextColumn Header="サイズ">
                    <DataGridTextColumn.CellStyle>
                        <Style TargetType="{x:Type DataGridCell}">
                            <Setter Property="HorizontalAlignment" Value="Right"/>
                        </Style>
                    </DataGridTextColumn.CellStyle>