Microsoft-ui-xaml: Proposal: Support more border/background options on Panels

[micahl]

Proposal: Support more border/background options on Panels

Summary

Enable Panel (or a derived Panel) to support more options for borders and background. Specifically, support:

• Per-edge border colors
• Per-corner radius
• Per-edge border thickness
• Support for showing a solid, dotted, or dashed border stroke
• The equivalent of backfaceVisibility in CSS (minimally 'visible' and 'hidden')

Rationale

React Native's type supports a number of options for borders and background that in the Windows version do not map cleanly to any one element in XAML. As a result, it must manage a combination of various elements to achieve the desired result. Given the prevalence of <View/> in a RN-based app it's worth investigating the potential for reducing the # of native elements with the expectation of achieving better performance.

Related to https://github.com/Microsoft/react-native-windows/issues/2245.

Functional Requirements

It could be that Panel exposes a number of protected methods to toggle these options and then any derived Panel-type can choose what options to expose.

Important Notes

Open Questions

[mdtauk]

Good rule of thumb for future additions to XAML...

If its possible in CSS, it should be possible in XAML.

[michael-hawker]

For CornerRadius is this about moving it to the base Panel? As it already supports per-corner values, eh?

[micahl]

Yes, this idea would be about enabling the base Panel type to have built-in support for rendering something like borders such that a derived Panel could easily have that behavior. This proposal is to track exploring whether that idea may or may not be useful for the React Native on Windows project.

CSS has been around a while and does a lot of things. I'm not taking the default position that they're all good things to do. :)