WPF/DataGrid/スタイル の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• WPF/DataGrid/スタイル へ行く。
• WPF/DataGrid/スタイル の差分を削除

&tag(WPF/DataGrid/スタイル);
*目次 [#ka3a5805]
#contents

*参考情報 [#c10c3f4d]
-[[WPF/DataGrid]]

*参考になるスタイル [#bcfad66d]
-[[Andy McMullan: WPF Toolkit DataGrid is an uggo:http://www.andymcm.com/blog/2009/10/wpf-toolkit-datagrid-is-uggo.html]]が参考になる。セルのボーダーや、ハイライト行の色を薄めするなどしてモダンなスタイルに。
-Toolkit時代のサンプルなのでVisualStudio2010で使用する場合は次のようにする(prefixのtkを削除する)。
#pre{{
    <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 [#f90e27e5]
**セルのスタイルを適用した上でDataGridTextColumnを右寄せにする [#g6e51387]
-セルの見た目をカスタマイズしさらにある特定の列の内容を右寄せして表示する場合、TextBlockのスタイルをまず定義。
#pre{{
    <Style x:Key="RightTextBlock" TargetType="TextBlock">
        <Setter Property="HorizontalAlignment" Value="Right" />
    </Style>
}}
-右よせにしたいDataGridTextColumnのElementStyleに指定する。
#pre{{
    <DataGridTextColumn Header="サイズ" ElementStyle="{StaticResource RightTextBlock}"></DataGridTextColumn>
}}

※次のようにCellStyleを変更すると、その列だけデフォルトのスタイルに戻ってしまうのでだめ。
#pre{{
                <DataGridTextColumn Header="サイズ">
                    <DataGridTextColumn.CellStyle>
                        <Style TargetType="{x:Type DataGridCell}">
                            <Setter Property="HorizontalAlignment" Value="Right"/>
                        </Style>
                    </DataGridTextColumn.CellStyle>
}}