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>

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2016-04-13 (水) 16:47:45 (1101d)