[Enhancement] CSS selectors in XAML styles

[mgierlasinski]

Summary

CSS selectors are great but people who don't like CSS loose all that power. What if I told you selectors could be used with Styles? Concept heavily "inspired" by Avalonia UI.

API Changes

<Style Selector="#container > .largeText">
       <Setter Property="FontSize" Value="24"/>
</Style>

<Label StyleClass="largeText" />

Intended Use Case

There is already concept of selectors, built-in properties for controls (StyleClass, StyleId) reserved for CSS world. Give that power to people who prefer XAML styles over CSS.

[filipoff2]

https://avaloniaui.net/docs/styles/styles

[GalaxiaGuy]

This would make the cases that use it far less verbose. There is no way to implement a style like #container > .largeText at the moment without quite a bit of code. As a concrete example that I exactly want right now:

https://www.tictactoecollection.app/post/assets/screenshots/main_2.png

In the screenshot several instances of a custom frame with a colored border. They also contain matching colored buttons. I have to right code to listen respond to change in the color used in the frames to update the button(s) in the frame.

With CSS selectors I could just use the following structure:

<my:CustomFrame StyleClass="red">
    ...
    <Button StyleClass="coloredButton" />
    ...
</my:CustomFrame>

with the following styles:

<Style Selector=".red .coloredButton">
    <Setter Property="BackgroundColor" Value="Red"/>
</Style>
<Style Selector=".blue .coloredButton">
    <Setter Property="BackgroundColor" Value="Blue"/>
</Style>
<Style Selector=".green .coloredButton">
    <Setter Property="BackgroundColor" Value="Green"/>
</Style>

Now all I have to do is change one property on the parent to change the color of the frame and its relevant children.

For reference, I would like this in XAML since there are things I would like to use it for that can't be done in CSS like VisualStates.

[GiampaoloGabba]

I like this. CSS selectors are so much more powerful than Xaml ones we have in Xamarin.Forms.
It would be great to have some advanced support to these selector to simplify a lot our xaml Styles :)

[yariker]

There's a way to implement a style like @GalaxiaGuy mentioned via nested styles, no additional code is necessary.

You define your panels like so:

<GroupBox Header="Red Panel" Style="{StaticResource Red}">
    <Button Content="Red Button" />
</GroupBox>

<GroupBox Header="Blue Panel" Style="{StaticResource Blue}">
    <Button Content="Blue Button" />
</GroupBox>

And the styles would look something as follows:

<Style x:Key="Red" TargetType="GroupBox">
    <Style.Resources>
        <Style TargetType="Button">
            <Setter Property="Background" Value="Red" />
        </Style>
    </Style.Resources>
</Style>

<Style x:Key="Blue" TargetType="GroupBox">
    <Style.Resources>
        <Style TargetType="Button">
            <Setter Property="Background" Value="Blue" />
        </Style>
    </Style.Resources>
</Style>

Overall, I feel that CSS is something that could be added on top of the existing styles as a library for the people who like CSS, not as something built-in. It's always confusing when a framework provides more than one way of doing something (like Triggers vs VisualStateManager vs Behaviors), as if the developers can't make up their mind.

[leyla559]

Canım