Style resource inheriting from parent

Question

I've got two stack panels nested within another stackpanel, the nested stack panels both have images in which need to be the same size, so I've used a style resorce. But this means duplicating the style resources in each stack panel. As shown;

<StackPanel Orientation="Vertical">
    <StackPanel Orientation="Horiztonal">
        <StackPanel.Resources>
            <Style TargetType="Image">
                <Setter Property="Width" Value="20"/>
            </Style>
        </StackPanel.Resources>
        <Image />
        <Image />
        <Image />
        <Image />
    </StackPanel>

    <StackPanel Orientation="Horiztonal">
        <StackPanel.Resources>
            <Style TargetType="Image">
                <Setter Property="Width" Value="20"/>
            </Style>
        </StackPanel.Resources>
        <Image />
        <Image />
        <Image />
        <Image />
    </StackPanel>
</StackPanel>

Is there a way to set this style on my surrounding stackpanel and have the children inherit that style, or would I be looking at making a style template (as shown; https://docs.microsoft.com/en-us/dotnet/framework/wpf/controls/styling-and-templating) and applying it individually to my images?

kurakura88 kurakura88 · Accepted Answer · 2018-04-23T10:22:18

I do not recommend inheriting style using "previous style" as the base. Instead, I would define the style explicitly as the base style as a static resource, and then apply the style to any control that needs that style (or inherit the style). For ex:

In the User Control level, let's define the base style.

<UserControl>
   <UserControl.Resources>
      <!--Define StackPanel Style with a key as the base-->
      <Style x:Key="ImageStyle" TargetType="{x:Type Image}">
          <Setter .... />
      </Style>
      <!-- To apply the style above, you need to explicitly set the style using Style="{StaticResource ImageStyle}"-->
   </UserControl.Resources>
</UserControl>

In the body, we can apply the style to specific Control, but in our case we want to apply to all Images inside the OuterStackPanel, therefore:

<StackPanel x:Name="OuterStackPanel">
   <StackPanel.Resources>
      <!-- Without specifying the key, this will apply the style to all Images inside this StackPanel including NestedStackPanels -->
      <!-- Also, with BasedOn, this will inherit the style from ImageStyle defined above -->
      <Style TargetType="{x:Type Image}" BasedOn="{StaticResource ImageStyle}">
         <Setter .../> <!-- In Case if you want to add another setter, for ex: Width=20. Or don't add any other Setter to have the original style-->
      </Style>
   </StackPanel.Resources>
   <StackPanel x:Name="NestedStackPanel1">
      <Image />
      <Image />
      <Image />
      <Image />
   </StackPanel>
   <StackPanel x:Name="NestedStackPanel2">
      <Image />
      <Image />
      <Image />
      <Image />
   </StackPanel>
</StackPanel>

If you need to have different style for each nestedStackPanel, you can move the styling inside the nestedStackPanel, instead.

Style resource inheriting from parent

1 Answers