Question

我想知道是否有一个简单（我相信那里有一个复杂的解决方法）来设置一组潜在的嵌套元素，同时引用它们XAML / WPF中父元素级别的一种样式。

在HTML / CSS中可以这样做：

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

然后通过以下方式设置样式：

.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;}

这使得可以参考风格＆＃34;等级＆＃34;只有一次在父元素上然后再担心引用，所以当稍后在父元素下添加新元素时（在xaml中或在代码中动态添加），您不需要记住也要添加＆＃34;类= levelx＆＃34;到新的元素。

在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

你的意思是这样吗？

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

Answer 2

你想要的可能不太可能。特别是对于n级。这样的事情可以让你在两个层面上获得理想的行为。

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 DEFINITION

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

如何使用一个样式引用设置一组（嵌套）元素的样式

2 个答案: