Style resource inheriting from parent - xaml

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://learn.microsoft.com/en-us/dotnet/framework/wpf/controls/styling-and-templating) and applying it individually to my images?

Answer 1

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.