WPF/DataGrid/スタイル

Tag: WPF/DataGrid/スタイル

目次†

参考情報†

• 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>

Contents

メニュー

• about
• blog
• blog(はてな)

配布物

• FaEdit
  • ヘルプ
  • BugTrack
• WikiHelpMaker
  • ヘルプ
  • BugTrack

ゲーム

• 時のオカリナ3DS
• ドラゴンズドグマ
• スプラトゥーン2
• DQB2
• ジョイコン

ショートカット

• 用語集A-Z
• 用語集ア-ワ

今日の20件

最新の20件