Xaml Style Child Control in Universal Windows Platform (UWP) - xaml

Question

I would like to know how to set style targetting child controls on the UWP within a style definition.
WPF seems to have 'Style.Resources' to define sub-styles but this doesn't seem the case for UWP
example in wpf : WPF - How to create a style that applies styles to child types

Answer 1

If you want the styles in separate sheets ( which you should. I showed the Styles in the control itself because I misread and thought that's what you wanted ) you can create a Resources folder and add different ResourceDictionaries. Personally I usually create a separate dictionary for Brushes, Styles, Templates, and Converters. Then you declare them in the ResourceDictionary.MergedDictionaries in App.xaml
<Application
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
RequestedTheme="Light">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/Resources/Brushes.xaml" />
<ResourceDictionary Source="/Resources/Styles.xaml" />
<ResourceDictionary Source="/Resources/Converters.xaml" />
<ResourceDictionary Source="/Resources/Templates.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>

Answer 2

You can define Styles in the ResourceDictionary of the parent control. The Style defined in Window.Resources applies to all Rectangles because it doesn't specify a Key, so the Rectangle in the first StackPanel is yellow and small. The second StackPanel defines it's own Resources, which its children use, and they end up different colors and a larger size. There's also Style inheritance in there using BasedOn
<Window x:Class="GBTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-GBTest"
mc:Ignorable="d"
Title="MainWindow"
Height="350"
Width="525">
<!--Default style defined in the Window Resources-->
<Window.Resources>
<Style TargetType="Rectangle">
<Setter Property="Width"
Value="100" />
<Setter Property="Height" Value="100" />
<Setter Property="Fill"
Value="Yellow" />
</Style>
</Window.Resources>
<StackPanel>
<Rectangle />
<StackPanel>
<!--The styles defined in the resources of this StckPanel will apply to its children, overriding the default style defined in the Window Resources-->
<StackPanel.Resources>
<Style TargetType="Rectangle"
x:Key="BigStyle">
<Setter Property="Height"
Value="200" />
<Setter Property="Width"
Value="200" />
</Style>
<Style TargetType="Rectangle"
x:Key="RedStyle"
BasedOn="{StaticResource BigStyle}">
<Setter Property="Fill"
Value="Red" />
</Style>
<Style TargetType="Rectangle"
BasedOn="{StaticResource BigStyle}"
x:Key="BlueStyle">
<Setter Property="Fill"
Value="Blue" />
</Style>
</StackPanel.Resources>
<Rectangle Style="{StaticResource RedStyle}" />
<Rectangle Style="{StaticResource BlueStyle}" />
</StackPanel>
</StackPanel>