¿Estilo basado en ubicación en WPF posible?

Question

En CSS es posible elementos HTML de estilo en función de su ubicación en el árbol de elementos:

div#container div#menu a 

me gustaría hacer lo mismo en WPF, por lo que sólo los eslabones de una sección del menú son de estilo.

• Pregunta # 1: De un modo u otro, es lo anterior también es posible en WPF?

estaba pensando acerca de lo siguiente para los separadores anidados en una barra de estado:

<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> 

Esta pieza de XAML se incluye en un diccionario de recursos. El StatusBar aparece con un fondo transparente y un relleno correcto. Sin embargo, el separador verde desafortunadamente no se muestra. Simplemente muestra la barra gris predeterminada de 1px.

• Pregunta # 2: Si esta es la solución correcta, nadie sabe por qué esto no funciona?

Gracias de antemano.

Answer 1

Tropezamos con una respuesta a mí mismo. El código que mencioné es correcto para cada caso, excepto el Separador. El elemento separador se debe diseñar con una clave específica, detallada que se describe aquí: http://devlicio.us/blogs/christopher_bennage/archive/2008/06/19/styling-separators-in-wpf.aspx.

Answer 2

Es ciertamente posible. Echar un vistazo a http://www.klopfenstein.net/lorenz.aspx/nested-cascading-styles-in-wpf

Answer 3

escribí una entrada de blog hace un tiempo donde tomé un motor selector CSS (Fizzler) y lo aplicó a WPF:

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

Se permite el uso de selectores CSS para elementos de destino y aplicar estilos a ellos. También combina estilos para que, si coinciden varios selectores de CSS, los estilos de cada uno se fusionen.

Véase el siguiente ejemplo:

<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>