Tạo kiểu dựa trên vị trí trong WPF có thể?

Question

Trong CSS chúng ta có thể phần tử HTML phong cách dựa trên vị trí của họ trong cây yếu tố:

div#container div#menu a 

Tôi muốn làm điều tương tự trong WPF, do đó chỉ có các liên kết trong một phần trình đơn được kiểu.

• Câu hỏi # 1: Cách này hay cách khác, ở trên cũng có thể có trong WPF?

Tôi đã suy nghĩ về những điều sau đây để phân tách lồng trong một 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> 

Đoạn XAML được bao gồm trong một cuốn từ điển tài nguyên. StatusBar hiển thị với nền trong suốt và đệm chính xác. Tuy nhiên, phân cách màu xanh lá cây không may không hiển thị. Nó chỉ hiển thị thanh rộng 1px màu xám mặc định.

• Câu hỏi # 2: Nếu đây là giải pháp đúng, có ai biết tại sao điều này không hiệu quả?

Xin cảm ơn trước.

Answer 1

stumbled khi một câu trả lời bản thân mình. Mã tôi đã đề cập là chính xác cho mọi trường hợp, ngoại trừ Dấu phân cách. Phần tử Dấu tách phải được tạo kiểu bằng một khóa cụ thể, được mô tả chi tiết tại đây: http://devlicio.us/blogs/christopher_bennage/archive/2008/06/19/styling-separators-in-wpf.aspx.

Answer 2

Chắc chắn là có thể. Hãy nhìn vào http://www.klopfenstein.net/lorenz.aspx/nested-cascading-styles-in-wpf

Answer 3

tôi đã viết một blog gửi một khi trở lại nơi tôi mất một cơ CSS selector (Fizzler) và áp dụng nó để WPF:

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

Nó cho phép bạn sử dụng bộ chọn CSS để các yếu tố mục tiêu và áp dụng kiểu cho chúng. Nó cũng kết hợp các kiểu để nếu nhiều bộ chọn CSS khớp nhau, các kiểu từ mỗi bộ lọc được hợp nhất với nhau.

Xem ví dụ sau:

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