Microsoft-ui-xaml: Proposal: Add Multiple style to one control

[khoshroomahdi]

I think it is useful to add multiple styles to one control like HTML and CSS.

[michael-hawker]

@khoshroomahdi how would you envision this working with templates within styles or conflicting property values? Would the list of styles applied to a control be ordered and be applied FIFO or LIFO?

[khoshroomahdi]

I prefer LIFO.

[mdtauk]

Other than moving closer to CSS and HTML, could you provide some example uses for such a feature?

[jevansaks]

Are you proposing that the Style property is actually a List and we combine the styles together? Some code samples + expected output would be helpful for understanding the suggestion.

[khoshroomahdi]

For example i have some styles for button, some for colors and some for size
I should to use both for one button
Style="{staticresource style1 style2}"

[mdtauk]

I get you now @khoshroomahdi Having a style for a control, made up from a button colour, or a font size. It can be done by making each element a StaticResource, and making a style from those Resources (this is how the default control templates work) - but you want the style to be made dynamically, just by applying a list/collection of styles.

[khoshroomahdi]

I want just applying a list of styles.

[adrientetar]

I don't know if that would play well with the fact that Styles are typed (TargetType=Class), in css you can write any rule in a class and apply to any element and rules that don't apply just get ignored.

[michael-hawker]

@adrientetar that's a good point too. Maybe this needs to be a new concept similar to style but different that can be applied more generically where if the property exists it will get overridden. Then the overrides could be a list that are applied in the given order?

<!-- Resources -->
<StyleOverride x:Key="Alert">
  <Setter Property="FontWeight" Value="ExtraBlack"/>
  <Setter Property="Fill" Value="Red"/>
  <Setter Property="Background" Value="Red"/>
  <Setter Property="Foreground" Value="Black"/>
</StyleOverride>

<StyleOverride x:Key="LargerText">
    <Setter Property="FontSize" Value="16"/>
    <Setter Property="FontWeight" Value="Bold"/>
</StyleOverride>

<!-- Control -->
<Grid StyleOverrides="Alert">
  <TextBlock StyleOverrides="Alert, LargerText">Example Text</TextBlock>
</Grid>

• FIFO
  

• LIFO
  

Not sure which approach between FIFO or LIFO I'd prefer yet. However, it'd be interesting if these could be inherited...

<StackPanel StyleOverrides="Alert">
  <TextBlock StyleOverrides="LargerText">Example Header</TextBlock>
  <TextBlock StyleOverrides="{x:Null}">Some more detailed message...</TextBlock>
</StackPanel>

This would then lean me towards LIFO for the previous scenario... and the ability to stop inheritance?

Thoughts?

[mdtauk]

StyleOverride seems like a neat solution/suggestion.

As for how it applies, and effects inheritence - perhaps it is like a class in CSS, where as the Style with its typing, would be like an ID in CSS. Eitherway it should work like CSS does, as developers will find that familiar.

[Nirmal4G]

There's a BasedOn in XAML Style element, but the resource must be target typed either to a base class of the target type or the target type itself.

[maxkatz6]

There is another Xaml framework, which already supports CSS-like styles - Avalonia.
Each ui element can has multiple classes in "Classes" field separated by space.
And each concrete style can target multiple classes with Or (css-like) selector:
https://github.com/AvaloniaUI/Avalonia/pull/2345/files#diff-acd57219d354b2ac1ad9989ae377db10R14

More information about styles in Avalonia docs:
http://avaloniaui.net/docs/styles/styles
And more about css-like selectors:
http://avaloniaui.net/docs/styles/selectors

Note, that there is no documentation for 'Or' selector for now.

Also Avalonia guys work on xaml AOT-compiling (XamlIL), and style selectors are already parsed and compiled. But they always should be typed for that case, as I know. So it works without additional time wasting in runtime.

I think, WinUI and Avalonia can work more together and share experience.