Microsoft-ui-xaml: Proposal: Enable Resizing of the RatingControl glyphs

[h82258652]

Proposal: Resize RatingControl glyphs

Summary

Enable a way to resize the stars or glyphs in general of the RatingControl.

Rationale

• Limits app-author customization
• Feels like a oversight
• Requires re-templating to fix

Scope

| Capability | Priority |
| :---------- | :------- |
| Can easily resize the RatingControl glyphs through a property | Must |
| Can specify the max size for the glyphs on hover/pointer over | Should |

Important Notes

We can see app and website designs elsewhere that use variable sized ratings controls.

Microsoft Store Reviews Page

Dell Store - Laptop Page

[jevansaks]

@kikisaints do you have any context on why the font size of RatingControl is hardcoded?

@LucasHaines is this a control whose size you were considering when looking at density?

[kikisaints]

@jevansaks I'm pretty sure this control was made to a very specific design based on Store's needs. It's possible that resizing of the stars was not in scope or simply overlooked in the original spec.

I do think it's work it to allow sizing of the stars though.

[h82258652]

@kikisaints
I use the VS debugger to attach the store app and I found it does not use the RatingControl.

It uses a custom control and the control has a StarFontSize property.

[jevansaks]

@h82258652 would you want to contribute a fix for this? Basically making the control consume the FontSize property instead of using a hardcoded value?

[h82258652]

@jevansaks I'm sorry, maybe it is too hard for me. I am not good at C++.
@JustinXinLiu @HHChaos Hey, my friends, can you take a moment to fix it?

[HHChaos]

@jevansaks @h82258652
This is hard to fix because I found that FontSize is set in DataTemplate. It will be a breaking change.
https://github.com/Microsoft/microsoft-ui-xaml/blob/53fb4d96f1b17acecf068fc4f4bb46db4e351578/dev/RatingControl/RatingControl_themeresources.xaml#L44-L62

[kikisaints]

@h82258652 You're probably not seeing it in Store because occasionally we design controls for teams that are either adopted by them later or sometimes not at all. Unfortunate, but it happens.

On the other hand, if they are not using it, perhaps it's because it doesn't have a star size property :smile: .

[jevansaks]

I thought about this more and I don't think just using FontSize property on RatingControl is right because it seems like it should apply to the Header property if the control had one. We should probably add a StarFontSize property like you saw the Store app do.

I think changing that data template to not set the FontSize and instead use one inherited from the ContentPresenter it's in should be fine.

[kikisaints]

Changed this issue to reflect the style of a pitch... so I can pitch it 😄

[mdtauk]

What about having a Width and Height for each Rating Icon, so someone could swap out the Font Glyph for a Path or SVG, and the same property would apply. There could be lightweight styles for the Selected, HalfSelected and Unselected Icons, so instead of a colour change, you could have a hollow and filled icon?

Also, as there is a behaviour which resizes the Icons on hover, perhaps you should also have a PointerOver Width and Height (maybe as a lightweight style) so this too can be customised without re-templating?

[kikisaints]

@mdtauk, I like this, but for the purpose of this proposal, I think enabling svgs is a bit out of scope. However, I will add items around the being able to set the max size for the hovered item - I think that falls within the scope of this.

[mdtauk]

@mdtauk, I like this, but for the purpose of this proposal, I think enabling svgs is a bit out of scope. However, I will add items around the being able to set the max size for the hovered item - I think that falls within the scope of this.

Fair enough, Max hover size and normal size, with font glyphs is a good start.