1つのスタイル参照を使用して（ネストされた）要素のスタイルを設定する方法

Question

（単純に）（参考にしながら、潜在的にネストされた要素のグループをスタイルする方法XAML/WPFの親要素レベルのスタイルは1つだけです。その後、

<div class="levels"><!--1st level; only reference to the style--> 
    <div><!--2nd level--> 
    <div></div><!--3rd level--> 
    </div> 
    <div></div><!--2nd level--> 
</div> 

とによって、それをスタイル：：HTML/CSSで

それを行うことが可能である。これは、親に一度だけのスタイル「レベル」を参照することが可能になる

.levels { 
    width: 400px; height: 400px; 
    background-color:red;} 

.levels div { 
    width: 100px; height: 100px; 
    background-color:green;} 

.levels div div { 
    width: 50px; height: 50px; 
    background-color:yellow;} 

新しい要素に親要素（xamlまたは動的にコードのいずれか）の下に新しい要素が追加されたときに、新しい要素に「class = levelx」を追加する必要はありません素子。

XAML/WPFでも同じことができますか？ BasedOnプロパティは、私が望むものではないようです：a）プロパティの継承を探していません。b）新しいスタイルに定義されたx：Keyがないかぎり、それは指定されたTargetTypeのすべての要素に適用され、そうであれば、再び指定された要素（Style="{static resource levelx}"）で参照する必要があります。 <Setter Property="Grid.Grid.Background" Value"Red">は残念ながら動作しません。

このような要素グループをスタイルする適切な方法は何ですか？それぞれのネストされた要素の特定のスタイルを参照することは、不必要に乱雑に思えます。ここで

は、素子構造の具体的な例ですが、私は、これは、多くの異なる状況のための一般的な問題であることを考慮してください。

<Grid Style="{StaticResource Levels}"><!--1st level--> 
    <Grid><!--2nd level--> 
     <Grid></Grid><!--3rd level--> 
     <Image Source="/Resources/xxx.png"/><!--3rd level--> 
    </Grid> 
    <Grid><!--2nd level--> 
     <Grid></Grid><!--3rd level--> 
     <Image Source="/Resources/yyy.png" x:Name="yyy"/><!--3rd level--> 
    </Grid> 
    <Grid><!--2nd level--> 
     <Image Source="/Resources/zzz.png"/><!--3rd level--> 
    </Grid> 
</Grid> 

は、これはおそらく重複しているが、私は答えを見つけることができませんでした。

Answer 1

あなたが望むものは、正確には不可能かもしれません。特にnレベルの場合。このようなことは、あなたに2つのレベルで望ましい行動を与えるでしょう。

CONTENT

<Grid Style="{StaticResource Levels}"> 
     <Grid VerticalAlignment="Top" Margin="20 20 0 0" Height="60"> 
      <Grid Height="40" VerticalAlignment="Center"> 
       <Grid Height="20" VerticalAlignment="Center"></Grid> 
       <Label></Label> 
      </Grid> 
     </Grid> 
     <Grid VerticalAlignment="Top" Margin="20 100 0 0" Height="60"> 
      <Grid Height="40" VerticalAlignment="Center"> 
       <Grid Height="20" VerticalAlignment="Center"></Grid> 
      </Grid> 
     </Grid> 
     <Grid VerticalAlignment="Top" Margin="20 180 0 0" Height="60"> 
      <Grid Height="40" VerticalAlignment="Center"> 
       <Grid Height="20" VerticalAlignment="Center"></Grid> 
      </Grid> 
     </Grid> 
    </Grid>  

スタイル定義

<Style x:Key="Levels" TargetType="Grid"> 
     <Setter Property="Background" Value="Blue"></Setter> 
     <Setter Property="Width" Value="400"></Setter> 
     <Style.Resources> 
      <Style TargetType="Grid"> 
       <Setter Property="Grid.Background" Value="Purple"/> 
       <Setter Property="Width" Value="200"></Setter> 
       <Style.Resources> 
        <Style TargetType="Grid"> 
         <Setter Property="Background" Value="Yellow"></Setter> 
         <Style.Resources> 
          <Style TargetType="Grid"> 
           <Setter Property="Background" Value="Tomato"></Setter> 
          </Style> 
          <Style TargetType="Label"> 
           <Setter Property="Height" Value="20"/> 
           <Setter Property="Width" Value="20"/> 
           <Setter Property="Background" Value="Azure"/> 
          </Style> 
         </Style.Resources> 
        </Style> 
       </Style.Resources> 
      </Style> 
     </Style.Resources> 
    </Style> 

Answer 2

このような意味ですか？

<Grid Margin="20"> 
    <Grid.Resources> 
    <Style TargetType="Grid"> 
    <Setter Property="Background" Value="Blue"></Setter> 
    </Style> 
    </Grid.Resources> 
    <Grid.RowDefinitions> 
    <RowDefinition Height="Auto"/> 
    <RowDefinition Height="Auto"/> 
    <RowDefinition Height="Auto"/> 
    </Grid.RowDefinitions> 
    <Grid Margin="20" Height="20" Grid.Row="0"> 
    </Grid> 
    <Grid Margin="20" Height="20" Grid.Row="1" Background="Yellow"> 
    </Grid> 
    <Grid Margin="20" Height="20" Grid.Row="2"> 
    </Grid> 
</Grid>