skills.rest
unoplatform
unoplatformOFFICIAL
Explore all skills by this author →
Website𝕏@unoplatformGitHub

uno-toolkit-card

Replace Card and Border patterns with CardContentControl in XAML layouts.

9|1|Updated Dec 10, 2024
Search Tags:#theming#ui design#card#xaml#elevation#cardcontentcontrol#uno toolkit
One-click install
npx skills add https://github.com/unoplatform/studio --skill uno-toolkit-card
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: uno-toolkit-card
Source: https://github.com/unoplatform/studio/tree/main/plugins/uno-platform-studio/skills/uno-toolkit-card
Command: npx skills add https://github.com/unoplatform/studio --skill uno-toolkit-card

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Card-based and Border-based patterns constrain layout flexibility and theming. This Skill guides developers to adopt CardContentControl to deliver elevated, fillable or outlined cards with consistent styling and better accessibility.

Core Features & Use Cases

  • Recommends CardContentControl over Card and Border for flexible, theme-aware cards.
  • Emphasizes using ContentTemplate and proper Content binding inside DataTemplates to ensure data context flows correctly.
  • Documents style variants: ElevatedCardContentControlStyle, FilledCardContentControlStyle, OutlinedCardContentControlStyle.
  • Provides guidance on sizing and alignment to ensure cards fill space when required.

Quick Start

Create a CardContentControl with Content bound to your item and provide a ContentTemplate to render its data.

Frequently Asked Questions about uno-toolkit-card

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create theme-aware cards in XAML without using Border elements?▼

Use CardContentControl instead of Border to create theme-aware XAML cards. It enforces a no-Border-as-card rule and exposes ElevatedCardContentControlStyle, FilledCardContentControlStyle, and OutlinedCardContentControlStyle for consistent styling.

Why does my card data binding break inside a Uno Toolkit DataTemplate?▼

Card data binding breaks when Content is not explicitly bound inside DataTemplates. You must bind the Content property of CardContentControl to your data item and use a ContentTemplate to render the inner UI for correct data context flow.

What's the best way to apply elevation and styling to Uno Toolkit cards?▼

The best way to apply elevation is using CardContentControl style variants. Uno Toolkit provides ElevatedCardContentControlStyle, FilledCardContentControlStyle, and OutlinedCardContentControlStyle to handle elevation and consistent theming automatically.

When should I replace Card controls with CardContentControl in my UI layout?▼

Replace Card and Border-based patterns with CardContentControl whenever you need flexible layout, proper elevation, or theme-aware styling. It is specifically designed for XAML-based UI layouts including lists, templates, and data-bound cards.

Can I use CardContentControl for data-bound cards in list layouts?▼

Yes, CardContentControl is designed for data-bound cards in list layouts. You must bind Content to your data item inside DataTemplates and provide a ContentTemplate to drive the inner UI, ensuring proper sizing and alignment to fill space.

Does Uno Toolkit CardContentControl support outline and filled card styles?▼

Uno Toolkit CardContentControl supports outline and filled card styles. It exposes three style keys: ElevatedCardContentControlStyle, FilledCardContentControlStyle, and OutlinedCardContentControlStyle for varied visual elevation and theming.

Related Skills

Explore More Software Engineering Skills→
unoplatformunoplatform
9

uno-toolkit-tabbaritem-extensions

Configure TabBarItem on-click navigation via XAML using TabBarItemExtensions.

Official
Basic
heyitsnoahheyitsnoah
2.6k

obsidian-bases

Define YAML-based Obsidian Base (.base) files with views, filters, formulas, and summaries for notes.

Community
Advanced
rudironsonirudironsoni

dotnet-uno-platform

Guide cross-platform app development with Uno Platform on .NET 8+.

Community
Intermediate
maxnormmaxnorm
26

magento-css-specialist

Develop modular LESS and CSS styles for Magento 2 themes.

Community
Intermediate