Discussion: Add a new Style.Resources property to simplify Lightweight Styling

[sonnemaf]

Discussion: Add a new Style.Resources property to simplify Lightweight Styling.

It would be nice we could add a Resources property to the Style class. It would allow you to define the Resources for this Style. This would simplify Lightweight Styling.

Setting the Resources in a Style.Setter isn't possible because it isn't a Dependency Property. See error message:

There is a workaround which I documented in my XAML Lightweight styling done right blog. It involves a custom Attached Property and a ResourceDictionaryCloner helper class (stolen from @rudyhuyn). @rudyhuyn has published a XamlPlus project with a similar (better) solution for this.

This workaround is a bit awkward and with a Style.Resources property it wouldn't be necessary. I hope you agree. Let's discuss this.

Related Links

• Lightweight Styling.
• XAML Lightweight styling done right
• XamlPlus
• Tweet

[marcelwgn]

Great idea, would love to be able to set the resources in style and not otherwise. This would probably also make it a lot easier to create new styles/facets of a button, especially when thinking about design tokens (@mdtauk this might be interesting for you).

[mdtauk]

I read the blog post when it first went up, and then noticed Rudy's Twitter response, and noted the blog post was updated.

I can't say I have my head around it tbh, and as light weight styling is still relatively new for Xaml as an approach, I can't speak to the long term affects it may have.

Anything that makes styling controls easy is a good thing.

---

When I was first designing controls back in the WP7 days, I tended to add every visual property I could ever want to customise as control dependency properties. So I could, on Xaml, set every colour, icon, text style etc and have every element in the control templates, collapsing and using visual styles to choose the layout.

Now obviously that leads to a heavy control but has lots of customisation options.

---

So if I am not understanding this I apologise, but the things that come to mind are:

• How do you expose these overridable light weight styles to intellisense, so new developers know what values can be changed?

• How in Xaml would you distinguish between changing a StyleResource for a single control, controls in a parent panel, page level, or all controls in an app?

• Will the designer reflect these changes in real time?

• How will these work with the upcoming Design Token Figma work?

• Will these work well for custom and user controls developers build for their apps?

[marcelwgn]

How do you expose these overridable light weight styles to intellisense, so new developers know what values can be changed?

Good question, this wouldn't really change how we expose lightweight styling resources. This would only make it easier to override them in style instead of defining your new resources globally or on a per instance basis.

How in Xaml would you distinguish between changing a StyleResource for a single control, controls in a parent panel, page level, or all controls in an app?

I would assume that the ResourceDictionary would apply to every instance that uses that style. This would be equivalent to setting the resources property of the control.

Will the designer reflect these changes in real time?

I hope so, but this would depend on the VS integration.

How will these work with the upcoming Design Token Figma work?

Well you could have a different style for every set of tokens which only overrides the specific theme resources and are based on your default style. Having a ghost button style for example would be just a style with a resourecdictionary changing the specific colors.

Will these work well for custom and user controls developers build for their apps?

I don't see why it shouldn't. This should become a XAML language feature in my opinion (WinUI 3.X++).

[mdtauk]

How do you expose these overridable light weight styles to intellisense, so new developers know what values can be changed?

Good question, this wouldn't really change how we expose lightweight styling resources. This would only make it easier to override them in style instead of defining your new resources globally or on a per instance basis.

I think this is a problem that will need to be solved in time, and Lightweight Styles and StyleResources should be formalised in the SDK so Intellisense can provide a list of all the lightweight resources the Control has, and provide autocomplete, as well as property grid entries for viewing and changing them. So almost treating them as if they are dependency properties.

Maybe this could be some kind of grouped tag element in the ResourceDictionary itself?
The intellisense could read the values within this ControlStyleResources tag, to bubble up to the autocomplete and design surface

    <ControlStyleResources TargetType="Button" Name="UglyButton">
        <SolidColorBrush Name="ButtonForegroundTextFillColorBrush" Value="Pink"/>
        <SolidColorBrush Name="ButtonBackgroundTextFillColorBrush" Value="Plum"/>
    </ControlStyleResources>

---

How in Xaml would you distinguish between changing a StyleResource for a single control, controls in a parent panel, page level, or all controls in an app?

I would assume that the ResourceDictionary would apply to every instance that uses that style. This would be equivalent to setting the resources property of the control.

So this would always be at a control level? If I had a StackPanel of Buttons, and put my lightweight Background Colour resource in the StackPanel.Resources tags, it wouldn't override the lightweight resources for all the buttons?

---

Will the designer reflect these changes in real time?

I hope so, but this would depend on the VS integration.

Will these work well for custom and user controls developers build for their apps?

I don't see why it shouldn't. This should become a XAML language feature in my opinion (WinUI 3.X++).

Might be worth talking to the SDK team about including designer and property inspector support for these, and work towards formalising these as part of a wider upgrade to Xaml Styling.

---

How will these work with the upcoming Design Token Figma work?

Well you could have a different style for every set of tokens which only overrides the specific theme resources and are based on your default style. Having a ghost button style for example would be just a style with a resourecdictionary changing the specific colors.

Wouldn't the Figma plugin being developed, need to take into account these new StyleResources, for when a UI designer wants to call out a specific button, or a specific group of buttons, using a non-default set of colours/sizes etc?

[marcelwgn]

I think this is a problem that will need to be solved in time, and Lightweight Styles and StyleResources should be formalised in the SDK so Intellisense can provide a list of all the lightweight resources the Control has, and provide autocomplete, as well as property grid entries for viewing and changing them. So almost treating them as if they are dependency properties.

Maybe this could be some kind of grouped tag element in the ResourceDictionary itself?

This definitely sounds like an interesting idea. How would this differ from the regular resources though? Do I have to use every resource in there? My concern is that this might make getting started with XAML even more difficult as it already is.

Might be worth talking to the SDK team about including designer and property inspector support for these, and work towards formalising these as part of a wider upgrade to Xaml Styling.

Yes, the support should be better for these kind of things.

Wouldn't the Figma plugin being developed, need to take into account these new StyleResources, for when a UI designer wants to call out a specific button, or a specific group of buttons, using a non-default set of colours/sizes etc?

Not entirely sure how this would work as I'm not really familiar how that plugin will work, however I would assume that that would be possible.

[mdtauk]

I think this is a problem that will need to be solved in time, and Lightweight Styles and StyleResources should be formalised in the SDK so Intellisense can provide a list of all the lightweight resources the Control has, and provide autocomplete, as well as property grid entries for viewing and changing them. So almost treating them as if they are dependency properties.

Maybe this could be some kind of grouped tag element in the ResourceDictionary itself?

This definitely sounds like an interesting idea. How would this differ from the regular resources though? Do I have to use every resource in there? My concern is that this might make getting started with XAML even more difficult as it already is.

Because lightweight styling is just using Resources listed in the Resource/Theme Dictionaries - there is no way I know of, for Intellisense and the Designer to know which of these is currently used/intended to be used by the control.

My thinking is that by putting them into a group, with a TargetType - they will still be treated like Resources by the Dictionary, but that would be a hint to the IDE to display those resources as being applicable to the control, in the designer and for Intellisense and Autocomplete.

psudo code function
When placing a Button, also list these StyleResources that have a TargetType of Button.

---

Wouldn't the Figma plugin being developed, need to take into account these new StyleResources, for when a UI designer wants to call out a specific button, or a specific group of buttons, using a non-default set of colours/sizes etc?

Not entirely sure how this would work as I'm not really familiar how that plugin will work, however I would assume that that would be possible.

I also am in the dark somewhat about the Plugin, beyond it seemingly acting like the Fluent Theme Editor with it's settings - and that it outputs CSS and XAML which gets imported into your app code.

But I mention it, as if this is added either in WinUI or as a Language feature - the people working on the Pipeline may need to make allowances for it, to make use of it, or to support the same Lightweight styling

[marcelwgn]

Because lightweight styling is just using Resources listed in the Resource/Theme Dictionaries - there is no way I know of, for Intellisense and the Designer to know which of these is currently used/intended to be used by the control.

You could scan inside the template the resource dictionary is in if it's used in there or not, but that is only a partial solution here.

My thinking is that by putting them into a group, with a TargetType - they will still be treated like Resources by the Dictionary, but that would be a hint to the IDE to display those resources as being applicable to the control, in the designer and for Intellisense and Autocomplete.

I like the idea, but the issue I see is that we introduce even more classes and concepts to the XAML world. And when should you use those new resourcedictionaries over a style? My guess would be that the general developer guidance would be "just use a style with resources set" since at some you might need to change more than lightweightstyling resources (e.g. adjust margin) and then you need to switch anyway.

I also am in the dark somewhat about the Plugin, beyond it seemingly acting like the Fluent Theme Editor with it's settings - and that it outputs CSS and XAML which gets imported into your app code.

But I mention it, as if this is added either in WinUI or as a Language feature - the people working on the Pipeline may need to make allowances for it, to make use of it, or to support the same Lightweight styling

Got it. Very good idea of bringing that up here, this should definitely be though about if this proposal will be implemented!

[mdtauk]

Because lightweight styling is just using Resources listed in the Resource/Theme Dictionaries - there is no way I know of, for Intellisense and the Designer to know which of these is currently used/intended to be used by the control.

You could scan inside the template the resource dictionary is in if it's used in there or not, but that is only a partial solution here.

My thinking is that by putting them into a group, with a TargetType - they will still be treated like Resources by the Dictionary, but that would be a hint to the IDE to display those resources as being applicable to the control, in the designer and for Intellisense and Autocomplete.

I like the idea, but the issue I see is that we introduce even more classes and concepts to the XAML world. And when should you use those new resourcedictionaries over a style? My guess would be that the general developer guidance would be "just use a style with resources set" since at some you might need to change more than lightweightstyling resources (e.g. adjust margin) and then you need to switch anyway.

The solution should always be to make the IDE/Intellisense/Autocomplete/SDK smarter - rather than adding things to try to hint or help. If there is a way for the Designer and IDE to surface these lightweight styles for the developers - this would be preferable.

Even adding a comment or a XAML Region around the lightweight style resources, to help the tooling expose these, would be preferable.

[HppZ]

any update?