Xaml Style Child Control in Universal Windows Platform (UWP)

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

You can throw them in Whatever.Resources and they'll be inherited. — Chris W., Apr 08 '16 at 15:58

score 1 · Answer 1 · answered Apr 14 '16 at 01:06

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>

Sorry for being unclear i'm new to xaml , that part I understand. Let's take your Styles.xaml in MergedDictionaries , how would I define styles for a custom control and it's subcontrols. Taking your earlier example with the StackPanel, i imagine you would have a Style with StackPanel as TargetType and then set the Style on the StackPanel as StaticResource but what about the rectangles defined inside it ? With Style.Resources it seems I would be able to get a style hierarchy for a custom control in my Styles.xaml, but there is none in UWP and that's what i want. Thanks for your time. — NicolasL, Apr 15 '16 at 07:26

score 0 · Answer 2 · answered Apr 12 '16 at 03:48

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>

Thanks for your replay, while this would do the job, this still means i'm defining styles in the control itself. What I want is to have completely separated styles and controls. A bit like CSS where i define everything in an apart file. That's why i thought the Style.Resources was nice to have — NicolasL, Apr 13 '16 at 06:50

Xaml Style Child Control in Universal Windows Platform (UWP)

2 Answers2