Proposal: Provide a Card control or CardStyle in WinUI 3

[harvinders]

Proposal: Provide a Card Control or a CardStyle

Summary

Currently there are no card control or a card style that developers can readily use as defined here. We only have few styles like card stroke, card fill colour etc but not a complete style that also incorporate elevation of 8.

Rationale

• Allows developer to easily implement cards matching fluent design

Open Questions

Should there be a Card Control or a Card Style on a Border?

[marcelwgn]

I think this a very good idea, I think a style could be enough for this.

[mdtauk]

I think this a very good idea, I think a style could be enough for this.

A Style alone would not handle the Solid and Layered backgrounds, along with the elevation (which requires manually adding the shadow and translations, or using helpers from the toolkit)

[jp-weber]

A custom Card control is really great implemented in the PowerToys app, but it needed some further improvements (Setting, SettingExpander, e.g.): https://github.com/microsoft/PowerToys/tree/main/src/settings-ui/Settings.UI/Controls

It would be great if Card control is implemented in WinUI, because there are already a few things to adjust for the content.

[JaiganeshKumaran]

Expander can be used for some of this stuff but it doesn't support putting controls on the right.

[StephenLPeters]

@chigy FYI

[ozanyasindogan]

Basically adding these property values and styles to a grid/stackpanel-like content presenter actually does the job;

<StackPanel 
                    CornerRadius="8"
                    Padding="12"
                    BorderThickness="1"
                    BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
                    Background="{ThemeResource CardBackgroundFillColorDefaultBrush}">

[niels9001]

@harvinders @chingucoding Interested in this idea - besides having a simple style (that @ozanyasindogan mentioned), what kind of value would be in a control? Adding some additional properties like e.g. a Title, interactive/hover states? Would love to hear more!

For those looking at the referenced settingscontrols: we just released our latest version of our SettingsCard and SettingsExpander for Windows Community Toolkit Labs: https://github.com/CommunityToolkit/Labs-Windows/tree/main/labs/SettingsControls/src

This allows you to set create a Settings page very easily with just a few lines of XAML and does all of the styling etc. for you!

[mdtauk]

Making it a XAML element will add some complexity to the visual tree.

I think ideally, it would be nice to be able to attach it to existing panels like StackPanel, Grid, RelativePanel etc as a which could have properties like Elevation="4" which controls the shadow rendering, and VisualType="Layer".

VisualTypes could include Acrylic, Mica, Layer, Surface - to match the Design Kit guidance.

---

Inbox styles could be done, but it will not handle the elevation aspect from within XAML. AFAIU Z value translation can only be done by code behind right now

[DmitryBorodiy]

WinUI 2 needs also.

[Mysterious-Dev]

WinUI 2 needs also.

Why add new stuff for a deprecated solution ?