需要有关WPF中自定义样式的帮助

Question

需要有关WPF中自定义样式的帮助

dev*_*xer 5 wpf xaml datagrid styles wpftoolkit

我正在尝试为WPF Toolkit DataGrid控件构建一些简单的自定义样式.

我有一个整体DataGrid风格和风格DataGridColumnHeader.我没有设置任何控件模板,只有基本属性.

以下是我的示例DataGrid在应用自定义样式时的样子:

alt text http://img86.imageshack.us/img86/43/datagridcustomstyle.jpg

标题有渐变蓝色背景,粗体文本,填充等我想要,但有两件事情已经消失:列标题之间的分隔符和ID列的排序箭头(此列目前对其进行降序排序).

如果我没有搞乱任何控件模板,为什么分隔符和排序箭头会消失？

我甚至尝试明确设置SeparatorBrushto Black和SeparatorVisibilityto Visible,但这没有效果.

如果我恢复到默认样式,下面是我的示例DataGrid:

替代文字http://img42.imageshack.us/img42/6533/datagriddefaultstyle.jpg

分隔符和排序箭头又回来了,所以绝对是我的风格.

这是我的自定义DataGridColumnHeader样式

<Style
    x:Key="DataGrid_ColumnHeaderStyle"
    TargetType="wt:DataGridColumnHeader">
    <Setter
        Property="Padding"
        Value="5,2,5,2" />
    <Setter
        Property="HorizontalContentAlignment"
        Value="Stretch" />
    <Setter
        Property="VerticalContentAlignment"
        Value="Stretch" />
    <Setter
        Property="FontWeight"
        Value="Bold" />
    <Setter
        Property="BorderBrush"
        Value="{StaticResource Media_RaisedBorderBrush}" />
    <Setter
        Property="Background"
        Value="{StaticResource Media_RaisedBackgroundBrush}" />
    <Setter
        Property="Foreground"
        Value="{StaticResource Media_RaisedForegroundBrush}" />
    <Setter
        Property="SeparatorBrush"
        Value="Black" />
    <Setter
        Property="SeparatorVisibility"
        Value="Visible" />
</Style>

Run Code Online (Sandbox Code Playgroud)

这是我的自定义DataGrid样式

<Style
    x:Key="DataGrid_Style"
    TargetType="wt:DataGrid">
    <Setter
        Property="ColumnHeaderStyle"
        Value="{StaticResource DataGrid_ColumnHeaderStyle}" />
    <Setter
        Property="RowBackground"
        Value="{StaticResource Media_OddRowBackgroundBrush}" />
    <Setter
        Property="AlternatingRowBackground"
        Value="{StaticResource Media_EvenRowBackgroundBrush}" />
    <Setter
        Property="HorizontalGridLinesBrush"
        Value="White" />
    <Setter
        Property="VerticalGridLinesBrush"
        Value="LightGray" />
    <Setter
        Property="AutoGenerateColumns"
        Value="False" />
    <Setter
        Property="CanUserAddRows"
        Value="False" />
    <Setter
        Property="CanUserDeleteRows"
        Value="False" />
    <Setter
        Property="CanUserReorderColumns"
        Value="True" />
    <Setter
        Property="CanUserResizeColumns"
        Value="True" />
    <Setter
        Property="CanUserResizeRows"
        Value="False" />
    <Setter
        Property="CanUserSortColumns"
        Value="True" />
    <Setter
        Property="IsReadOnly"
        Value="True" />
</Style>

Run Code Online (Sandbox Code Playgroud)

这是我的示例DataGrid的标记

<wt:DataGrid
    Style="{StaticResource DataGrid_Style}"
    Margin="0,5,0,0"
    ItemsSource="{Binding Source={StaticResource Main_ContactData}, XPath=//Contacts/*}">
    <wt:DataGrid.Columns>
        <wt:DataGridTextColumn
            Binding="{Binding XPath=@Letter}"
            Header="ID" />
        <wt:DataGridTextColumn
            Binding="{Binding XPath=@Name}"
            Header="Name" />
        <wt:DataGridTextColumn
            Binding="{Binding XPath=@IsSaved}"
            Header="Saved?" />
        <wt:DataGridTextColumn
            Binding="{Binding XPath=@IsBackedUp}"
            Header="Backed Up?" />
    </wt:DataGrid.Columns>
</wt:DataGrid>

Run Code Online (Sandbox Code Playgroud)

这是一个错误吗？

如果没有,你能告诉我如何修改我的样式,这样我就不会丢失分隔线和排序箭头吗？

编辑

我尝试BasedOn按照@Aran的建议(下面)添加属性,但这似乎没有任何效果.有没有其他想法？

Answer 1

dev*_*xer 5

Thanks to @Aran's answer as well as a couple posts I found in Codeplex Discussions (see http://wpf.codeplex.com/Thread/View.aspx?ThreadId=65069), I managed to come up with a set of styles that allows the background of the header row to be set without giving up functionality (sort arrows, separators, etc.).

一个例外是"细胞选择"功能.DataGrid有一个SelectionUnit属性,可以设置为Cell,FullRow或CellOrRowHeader,但它似乎不起作用.如果我将它设置为FullRow(无论你在哪一行点击它都应该只选择整行),当你点击它们时,它仍会在视觉上选择单个单元格.下图显示了DataGrid(未应用样式)的示例SelectionUnit="FullRow".正如您所看到的,确实看起来已经选择了一个单元格(Name列的G行).由于我目前不需要选择单元格,因此我设计了我的样式来抑制单击单元格时出现的深黑色边框.

替代文字http://img80.imageshack.us/img80/4757/datagriddefaultcellsele.jpg

下面是按ID排序的样式化DataGrid的示例.如您所见,ID标签旁边会出现向下箭头,并且该列的大小适当,以便为排序箭头腾出空间.

替代文字http://img377.imageshack.us/img377/3836/datagridcustomfixed.jpg

这是样式化DataGrid的另一个示例.这个按升序排序"已保存？".请注意,标题是居中的,但它仍然为排序箭头留下足够的空间.

替代文字http://img203.imageshack.us/img203/5140/datagridcustomfixed2.jpg

以下是实现这种外观所需的样式.

刷

There are a number of brush settings in these styles, all of the form Property="{StaticResource Media_...}". I'm going to leave out the definitions for now because it would take me some time to compile them all, but if anyone is interested in duplicating the exact colors I used, leave a comment.

Sort Arrow Style

(the arrows themselves are contained in the Column Header Style)

<Style
    x:Key="DataGrid_ArrowStyle"
    TargetType="Polygon">
    <Setter
        Property="Grid.Column"
        Value="1" />
    <Setter
        Property="HorizontalAlignment"
        Value="Right" />
    <Setter
        Property="VerticalAlignment"
        Value="Bottom" />
    <Setter
        Property="StrokeThickness"
        Value="1" />
    <Setter
        Property="Stroke"
        Value="{StaticResource Media_BrightGraphicBorderBrush}" />
    <Setter
        Property="Fill"
        Value="{StaticResource Media_BrightGraphicBackgroundBrush}" />
    <Setter
        Property="Visibility"
        Value="Hidden" />
</Style>

Run Code Online (Sandbox Code Playgroud)

Column Header Thumb Style

(the thumbs themselves are contained in the Column Header Style)

<Style
    x:Key="DataGrid_ColumnHeaderThumbStyle"
    TargetType="Thumb">
    <Setter
        Property="Width"
        Value="8" />
    <Setter
        Property="Background"
        Value="{StaticResource Media_RaisedSeparatorBackgroundBrush}" />
    <Setter
        Property="Cursor"
        Value="SizeWE" />
    <Setter
        Property="Template">
        <Setter.Value>
            <ControlTemplate
                TargetType="Thumb">
                <Border
                    Padding="{TemplateBinding Padding}"
                    Background="Transparent">
                    <Border
                        Padding="0,2,0,2">
                        <Rectangle
                            HorizontalAlignment="Center"
                            Width="2"
                            Fill="{TemplateBinding Background}" />
                    </Border>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Run Code Online (Sandbox Code Playgroud)

Column Header Style

(refers to the Sort Arrow Style and the Column Header Thumb Style defined above)

<Style
    x:Key="DataGrid_ColumnHeaderStyle"
    TargetType="wt:DataGridColumnHeader">
    <Setter
        Property="Padding"
        Value="5,2,3,3" />
    <Setter
        Property="HorizontalContentAlignment"
        Value="Stretch" />
    <Setter
        Property="VerticalContentAlignment"
        Value="Stretch" />
    <Setter
        Property="FontWeight"
        Value="Bold" />
    <Setter
        Property="BorderBrush"
        Value="{StaticResource Media_RaisedBorderBrush}" />
    <Setter
        Property="Background"
        Value="{StaticResource Media_RaisedBackgroundBrush}" />
    <Setter
        Property="Foreground"
        Value="{StaticResource Media_RaisedForegroundBrush}" />
    <Setter
        Property="SeparatorBrush"
        Value="{StaticResource Media_RaisedBorderBrush}" />
    <Setter
        Property="SeparatorVisibility"
        Value="Visible" />
    <Setter
        Property="Template">
        <Setter.Value>
            <ControlTemplate
                TargetType="wt:DataGridColumnHeader">
                <Grid>
                    <wt:DataGridHeaderBorder
                        Name="HeaderBorder"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        Padding="{TemplateBinding Padding}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        Background="{TemplateBinding Background}"
                        SortDirection="{TemplateBinding SortDirection}"
                        IsClickable="{TemplateBinding CanUserSort}"
                        IsHovered="{TemplateBinding IsMouseOver}"
                        IsPressed="{TemplateBinding IsPressed}"
                        SeparatorVisibility="{TemplateBinding SeparatorVisibility}"
                        SeparatorBrush="{TemplateBinding SeparatorBrush}">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition
                                    Width="*" />
                                <ColumnDefinition
                                    Width="12" />
                            </Grid.ColumnDefinitions>
                            <ContentPresenter
                                Name="HeaderContent"
                                Grid.Column="0"
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                ContentStringFormat="{TemplateBinding ContentStringFormat}"
                                ContentTemplate="{TemplateBinding ContentTemplate}"
                                Content="{TemplateBinding Content}" />
                            <Polygon
                                Name="UpArrow"
                                Style="{StaticResource DataGrid_ArrowStyle}"
                                Margin="0,0,0,2"
                                Points="0,0 8,0 4,-6 0,0" />
                            <Polygon
                                Name="DownArrow"
                                Margin="0,0,0,1"
                                Style="{StaticResource DataGrid_ArrowStyle}"
                                Points="0,0 8,0 4,5 0,0" />
                        </Grid>
                    </wt:DataGridHeaderBorder>
                    <Thumb
                        x:Name="PART_LeftHeaderGripper"
                        Style="{StaticResource DataGrid_ColumnHeaderThumbStyle}"
                        Margin="-4,0,0,0"
                        HorizontalAlignment="Left" />
                    <Thumb
                        x:Name="PART_RightHeaderGripper"
                        Style="{StaticResource DataGrid_ColumnHeaderThumbStyle}"
                        Margin="0,0,-4,0"
                        HorizontalAlignment="Right"></Thumb>
                </Grid>
                <ControlTemplate.Triggers>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition
                                Property="CanUserSort"
                                Value="True" />
                            <Condition
                                Property="IsMouseOver"
                                Value="True" />
                        </MultiTrigger.Conditions>
                        <Setter
                            TargetName="HeaderBorder"
                            Property="TextBlock.Foreground"
                            Value="{StaticResource Media_MousedOverForegroundBrush}" />
                    </MultiTrigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition
                                Property="CanUserSort"
                                Value="True" />
                            <Condition
                                Property="IsPressed"
                                Value="True" />
                        </MultiTrigger.Conditions>
                        <Setter
                            TargetName="HeaderBorder"
                            Property="BorderBrush"
                            Value="{StaticResource Media_PressedBorderBrush}" />
                        <Setter
                            TargetName="HeaderBorder"
                            Property="Background"
                            Value="{StaticResource Media_PressedBackgroundBrush}" />
                        <Setter
                            TargetName="HeaderBorder"
                            Property="TextBlock.Foreground"
                            Value="{StaticResource Media_PressedForegroundBrush}" />
                    </MultiTrigger>
                    <Trigger
                        Property="SortDirection"
                        Value="Ascending">
                        <Setter
                            TargetName="UpArrow"
                            Property="Visibility"
                            Value="Visible" />
                    </Trigger>
                    <Trigger
                        Property="SortDirection"
                        Value="Descending">
                        <Setter
                            TargetName="DownArrow"
                            Property="Visibility"
                            Value="Visible" />
                    </Trigger>
                    <Trigger
                        Property="CanUserSort"
                        Value="False">
                        <Setter
                            TargetName="HeaderContent"
                            Property="Grid.ColumnSpan"
                            Value="2" />
                    </Trigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition
                                Property="HorizontalContentAlignment"
                                Value="Center" />
                            <Condition
                                Property="CanUserSort"
                                Value="True" />
                        </MultiTrigger.Conditions>
                        <Setter
                            TargetName="HeaderContent"
                            Property="Grid.ColumnSpan"
                            Value="2" />
                        <Setter
                            TargetName="HeaderContent"
                            Property="Margin"
                            Value="12,0,12,0" />
                    </MultiTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Run Code Online (Sandbox Code Playgroud)

Centered Column Header Style

(use this to center a header; will automatically make room for a sort arrow if the column is sortable)

<Style
    x:Key="DataGrid_CenteredColumnHeaderStyle"
    TargetType="wt:DataGridColumnHeader"
    BasedOn="{StaticResource DataGrid_ColumnHeaderStyle}">
    <Setter
        Property="HorizontalContentAlignment"
        Value="Center" />
</Style>

Run Code Online (Sandbox Code Playgroud)

Wrapping Column Header Style

(use this to allow the text for a header to word-wrap--only works if you set the width manually or the user manually shrinks the column)

<Style
    x:Key="DataGrid_WrappingColumnHeaderStyle"
    TargetType="wt:DataGridColumnHeader"
    BasedOn="{StaticResource DataGrid_ColumnHeaderStyle}">
    <Setter
        Property="VerticalContentAlignment"
        Value="Top" />
    <Setter
        Property="ContentTemplate">
        <Setter.Value>
            <DataTemplate>
                <TextBlock
                    TextWrapping="WrapWithOverflow"
                    Text="{TemplateBinding Content}" />
            </DataTemplate>
        </Setter.Value>
    </Setter>
</Style>

Run Code Online (Sandbox Code Playgroud)

细胞风格

<Style
    x:Key="DataGrid_CellStyle"
    TargetType="wt:DataGridCell">
    <Setter
        Property="Padding"
        Value="5,2,5,2" />
    <Setter
        Property="BorderThickness"
        Value="1" />
    <Setter
        Property="BorderBrush"
        Value="Transparent" />
    <Setter
        Property="Background"
        Value="Transparent" />
    <Setter
        Property="Template">
        <Setter.Value>
            <ControlTemplate
                TargetType="wt:DataGridCell">
                <Border
                    BorderThickness="{TemplateBinding BorderThickness}"
                    Background="{TemplateBinding Background}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    SnapsToDevicePixels="True"
                    Padding="{TemplateBinding Padding}">
                    <ContentPresenter
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                        SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                        ContentTemplate="{TemplateBinding ContentTemplate}"
                        ContentStringFormat="{TemplateBinding ContentStringFormat}"
                        Content="{TemplateBinding Content}" />
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger
            Property="IsSelected"
            Value="True">
            <Setter
                Property="BorderBrush"
                Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
            <Setter
                Property="Background"
                Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
            <Setter
                Property="Foreground"
                Value="Black" />
        </Trigger>
        <Trigger
            Property="IsKeyboardFocusWithin"
            Value="True">
            <Setter
                Property="BorderBrush"
                Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
            <Setter
                Property="Background"
                Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
            <Setter
                Property="Foreground"
                Value="Black" />
            <!--<Setter
                Property="BorderBrush"
                Value="{DynamicResource {ComponentResourceKey ResourceId=FocusBorderBrushKey, TypeInTargetAssembly=wt:DataGrid}}" />-->
        </Trigger>
    </Style.Triggers>
</Style>

Run Code Online (Sandbox Code Playgroud)

中心细胞样式

(用它来居中细胞的内容)

<Style
    x:Key="DataGrid_CenteredCellStyle"
    TargetType="wt:DataGridCell"
    BasedOn="{StaticResource DataGrid_CellStyle}">
    <Setter
        Property="HorizontalContentAlignment"
        Value="Center" />
</Style>

Run Code Online (Sandbox Code Playgroud)

数据网格样式

(为多个属性建立一组默认值,包括上面定义的列标题样式和单元格样式)

<Style
    x:Key="DataGrid_Style"
    TargetType="wt:DataGrid">
    <Setter
        Property="ColumnHeaderStyle"
        Value="{StaticResource DataGrid_ColumnHeaderStyle}" />
    <Setter
        Property="CellStyle"
        Value="{StaticResource DataGrid_CellStyle}" />
    <Setter
        Property="RowBackground"
        Value="{StaticResource Media_OddRowBackgroundBrush}" />
    <Setter
        Property="AlternatingRowBackground"
        Value="{StaticResource Media_EvenRowBackgroundBrush}" />
    <Setter
        Property="HorizontalGridLinesBrush"
        Value="LightGray" />
    <Setter
        Property="VerticalGridLinesBrush"
        Value="LightGray" />
    <Setter
        Property="SelectionMode"
        Value="Single" />
    <Setter
        Property="SelectionUnit"
        Value="FullRow" />
    <Setter
        Property="AutoGenerateColumns"
        Value="False" />
    <Setter
        Property="CanUserAddRows"
        Value="False" />
    <Setter
        Property="CanUserDeleteRows"
        Value="False" />
    <Setter
        Property="CanUserReorderColumns"
        Value="True" />
    <Setter
        Property="CanUserResizeColumns"
        Value="True" />
    <Setter
        Property="CanUserResizeRows"
        Value="False" />
    <Setter
        Property="CanUserSortColumns"
        Value="True" />
    <Setter
        Property="IsReadOnly"
        Value="True" />
    <Setter
        Property="HeadersVisibility"
        Value="Column" />
</Style>

Run Code Online (Sandbox Code Playgroud)

示例DataGrid使用这些样式

(注意:要求支持数据 - 一个XML文件 - 才能工作)

<wt:DataGrid
    Style="{StaticResource DataGrid_Style}"
    Margin="0,5,0,0"
    ItemsSource="{Binding Source={StaticResource Main_ContactData}, XPath=//Contacts/*}">
    <wt:DataGrid.Columns>
        <wt:DataGridTextColumn
            Binding="{Binding XPath=@Letter}"
            Header="ID" />
        <wt:DataGridTextColumn
            Binding="{Binding XPath=@Name}"
            Header="Name" />
        <wt:DataGridTextColumn
            HeaderStyle="{StaticResource DataGrid_CenteredColumnHeaderStyle}"
            CellStyle="{StaticResource DataGrid_CenteredCellStyle}"
            Binding="{Binding XPath=@IsSaved}"
            Header="Saved?" />
        <wt:DataGridTextColumn
            HeaderStyle="{StaticResource DataGrid_CenteredColumnHeaderStyle}"
            CellStyle="{StaticResource DataGrid_CenteredCellStyle}"
            Binding="{Binding XPath=@IsBackedUp}"
            Header="Backed Up?" />
    </wt:DataGrid.Columns>
</wt:DataGrid>

Run Code Online (Sandbox Code Playgroud)

归档时间：	16 年，2 月前
查看次数：	7105 次
最近记录：	15 年，2 月前