WPF中是否可以实现基于位置的样式？

Question

在CSS中，可以根据元素在元素树中的位置来设置HTML元素的样式：

div#container div#menu a

我希望在WPF中做同样的事情，以便只为菜单部分中的链接设置样式。

• 问题1：无论如何，在WPF中是否也可能实现上述功能？

我正在考虑在StatusBar中嵌套分隔符的以下内容：

<Style TargetType="{x:Type StatusBar}">
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="Padding" Value="0,0,20,0" />
    <Style.Resources>
        <Style TargetType="{x:Type Separator}">
            <Setter Property="Width" Value="20" />
            <Setter Property="Background" Value="Green" />
        </Style>
    </Style.Resources>
</Style>

这段XAML代码包含在资源字典中。状态栏以透明背景和正确的填充显示。然而，绿色分隔符不幸地没有显示出来。它只显示默认的灰色1像素宽的条。

• 问题 #2: 如果这是正确的解决方案，有人知道为什么它不起作用吗？

提前感谢。

- Herman Cordes

---

我可以告诉你，样式资源没有被翻译成与样式定义的类型相对应，这些资源仅限于样式实例本身。 - user1228

是的，我想我们在这里需要一个“Setter”来设置样式，其属性是应用样式的元素的“Resources”属性。不过，我觉得<Setter Property="Resources">...</Setter>可能行不通。这可能需要一个代码解决方案。 - Dana Cartwright

Answer 1

我自己找到了答案。 我提到的代码对于每种情况都是正确的，除了分隔符。 分隔符元素应该用特定的键进行样式化，详细描述在这里：http://devlicio.us/blogs/christopher_bennage/archive/2008/06/19/styling-separators-in-wpf.aspx。

- Herman Cordes

Answer 2

我之前写过一篇博客文章，其中我将一个CSS选择器引擎（Fizzler）应用于WPF：

http://www.scottlogic.co.uk/blog/colin/2009/03/using-css-selectors-for-styling-in-wpf/

它允许您使用CSS选择器来定位元素并对其应用样式。它还合并样式，因此如果多个CSS选择器匹配，则每个选择器的样式将被合并在一起。

请参考以下示例：

<css:StyleSheet x:Key="cssStyles">
    <css:StyleSheet.Rules>

        <css:StyleRule Selector=".form Grid *" SelectorType="LogicalTree">
            <css:StyleRule.DeclarationBlock>
                <css:StyleDeclarationBlock>
                    <css:StyleDeclaration Property="Margin" Value="4,4,4,4"/>
                </css:StyleDeclarationBlock>
            </css:StyleRule.DeclarationBlock>
        </css:StyleRule>

        <css:StyleRule Selector=".form TextBlock.mandatory">
            <css:StyleRule.DeclarationBlock>
                <css:StyleDeclarationBlock>
                    <css:StyleDeclaration Property="Foreground" Value="Red"/>
                </css:StyleDeclarationBlock>
            </css:StyleRule.DeclarationBlock>
        </css:StyleRule>

        <css:StyleRule Selector="Border.form">
            <css:StyleRule.DeclarationBlock>
                <css:StyleDeclarationBlock>
                    <css:StyleDeclaration Property="BorderThickness" Value="2"/>
                    <css:StyleDeclaration Property="BorderBrush" Value="Black"/>
                    <css:StyleDeclaration Property="CornerRadius" Value="5"/>
                    <css:StyleDeclaration Property="Margin" Value="10,10,10,10"/>
                </css:StyleDeclarationBlock>
            </css:StyleRule.DeclarationBlock>
        </css:StyleRule>

        <css:StyleRule Selector=".form .title">
            <css:StyleRule.DeclarationBlock>
                <css:StyleDeclarationBlock>
                    <css:StyleDeclaration Property="HorizontalAlignment" Value="Stretch"/>
                    <css:StyleDeclaration Property="HorizontalContentAlignment" Value="Center"/>
                    <css:StyleDeclaration Property="Background" Value="DarkBlue"/>
                    <css:StyleDeclaration Property="Foreground" Value="White"/>
                    <css:StyleDeclaration Property="FontSize" Value="13"/>
                    <css:StyleDeclaration Property="Padding" Value="3,3,3,3"/>
                    <css:StyleDeclaration Property="FontWeight" Value="Bold"/>
                </css:StyleDeclarationBlock>
            </css:StyleRule.DeclarationBlock>
        </css:StyleRule>

    </css:StyleSheet.Rules>
</css:StyleSheet>

- ColinE