question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Proposal: Provide a Card control or CardStyle in WinUI 3

See original GitHub issue

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.

image

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?

Issue Analytics

  • State:open
  • Created 2 years ago
  • Reactions:19
  • Comments:10 (6 by maintainers)

github_iconTop GitHub Comments

4reactions
jp-webercommented, Jan 8, 2022

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

grafik

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

3reactions
ozanyasindogancommented, Sep 7, 2022

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}">

Read more comments on GitHub >

github_iconTop Results From Across the Web

Build XAML controls with C# - Windows apps
This article walks you through creating a XAML templated control for WinUI 3 with C#.
Read more >
Telerik Web Forms RadPageLayout Grid Types - Documentation
The RadPageLayout control has three available types of Grid Based Layout that specify ... <telerik:LayoutColumn Span="3"> <div class="card" style="height: ...
Read more >
Windows Controls and patterns - Windows app development
The articles in this section provide design guidance and coding instructions for adding controls & patterns to your Windows app.
Read more >
TextBlock - Schema Explorer
Displays text, allowing control over font sizes, weight, and color. Property, Type, Required, Description, Version. type, "TextBlock", Yes, Must be ...
Read more >
Is it possible to fully customize ProgressBar colors in WinUI ...
I am working on a theme in WinUI 3, and customizing colors for many different controls. For the Infobar control I managed to...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found