WPF中基于位置的样式可能吗？答案

【问题标题】：Location based styling in WPF possible?WPF中基于位置的样式可能吗？
【发布时间】：2011-07-14 13:37:18
【问题描述】：

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

div#container div#menu a

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

问题 #1： 一种方法或另一种方法，上述方法在 WPF 中也可以吗？

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

<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 包含在资源字典中。 StatusBar 以透明背景和正确的填充显示。但是，不幸的是，绿色分隔符没有显示。它只显示默认的灰色 1px 宽条。

问题 #2：如果这是正确的解决方案，有谁知道为什么这不起作用？

提前致谢。

【问题讨论】：

我可以告诉你，样式的资源没有被转换为样式定义所针对的类型，这些资源的范围是样式实例本身。
是的，我想我们在这里寻找的是样式的“Setter”，其属性是应用样式的元素的“Resources”属性。不知何故，我不认为 ... 会工作。这可能需要代码解决方案。

标签： .net wpf xaml resources styling

【解决方案1】：

自己偶然发现了一个答案。我提到的代码对每种情况都是正确的，除了分隔符。 Separator 元素应使用特定键设置样式，详细描述如下：http://devlicio.us/blogs/christopher_bennage/archive/2008/06/19/styling-separators-in-wpf.aspx。

【讨论】：

【解决方案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>

【讨论】：