WinUI - XAML Styling children of another Style

Question

I have the following style declared globally in the App.XAML file of my WinUI project:

<Style TargetType="Grid" x:Key="PageContentGrid">
    <Setter Property="Margin" Value="5"/>
    <Setter Property="RowSpacing" Value="5"/>
    <Setter Property="ColumnSpacing" Value="5"/>
</Style>

My goal is to add another Style defenition that will only target Buttons that are part of a Grid that implements the PageContentGrid Style (see sample xaml code below). Is there any way to do this?

<Grid Style={StaticResource PageContentGrid}>
    <Button/> <!-- STYLED -->
</Grid>
<Grid>
    <Button/><!-- NOT STYLED -->
</Grid>

score 2 · Answer 1 · answered Oct 03 '22 at 12:39

AFAIK, you can do that in WPF but not in WinUI 3 or UWP. You can do something similar like this.

App.xaml.cs

<Style
    x:Key="PageContentGrid"
    TargetType="Grid">
    <Setter Property="BorderBrush" Value="HotPink" />
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="Margin" Value="5" />
    <Setter Property="RowSpacing" Value="5" />
    <Setter Property="ColumnSpacing" Value="5" />
</Style>
<Style TargetType="Button" x:Key="PageContentGridButton">
    <Setter Property="Foreground" Value="HotPink" />
</Style>

.xaml

<Grid RowDefinitions="*,*">
    <Grid
        Grid.Row="0"
        Style="{StaticResource PageContentGrid}">
        <Grid.Resources>
            <Style
                BasedOn="{StaticResource PageContentGridButton}"
                TargetType="Button" />
        </Grid.Resources>
        <Button Content="Button with style" />
    </Grid>
    <Grid Grid.Row="1">
        <Button Content="Button without style" />
    </Grid>
</Grid>

WinUI - XAML Styling children of another Style

1 Answers1