DaisyCard

Overview

DaisyCard is a container control with DaisyUI styling, supporting built-in layouts (title, description, icon) and advanced effects like glass morphism with optional backdrop blur.

Properties

Size

DaisySize

default:"Medium"

The size/scale of the card. Affects padding and font sizing.Available sizes:

ExtraSmall
Small
Medium
Large
ExtraLarge

Variant

DaisyCardVariant

default:"Normal"

The layout variant of the card.Available variants:

Normal - Standard padding
Compact - Reduced padding

ColorVariant

DaisyColor

default:"Default"

The color theme of the card.Available colors:

Default - Uses Base100 background
Neutral, Primary, Secondary, Accent
Info, Success, Warning, Error
Base200, Base300

CardStyle

DaisyCardStyle

default:"Default"

The visual style of the card.Available styles:

Default - Flat card with standard border radius
Beveled - Raised appearance with inner highlights
Inset - Sunken appearance with inner shadows
Panel - Flat panel with subtle border
Glass - Frosted glass effect

Layout Properties

BodyPadding

Thickness

default:"32"

Padding of the card body. Automatically scales with Size if not set.

BodyFontSize

double

default:"14.0"

Font size of the card body text.

TitleFontSize

double

default:"20.0"

Font size of the card title.

Built-In Content

Title

string

Built-in title text for the card header.

Description

string

Built-in description text for the card body.

IconImageSource

ImageSource

Image source for the built-in card icon.

IconBackground

Brush

Background brush for the built-in icon container.

IconBorderBrush

Brush

Border brush for the built-in icon container.

IconSize

double

default:"56.0"

Size of the built-in icon container.

Glass Effect Properties

IsGlass

bool

default:"false"

Whether the card uses a glass effect. Equivalent to setting CardStyle="Glass".

GlassBlur

double

default:"40.0"

Blur amount for the glass effect.

GlassOpacity

double

default:"0.3"

Opacity of the glass effect background.

GlassTint

Color

default:"White"

Tint color for the glass effect.

GlassTintOpacity

double

default:"0.5"

Opacity of the glass tint.

GlassBorderOpacity

double

default:"0.2"

Opacity of the glass border.

GlassReflectOpacity

double

default:"0.15"

Opacity of the glass reflection highlight.

GlassSaturation

double

default:"1.0"

Saturation of the glass background (0.0 = grayscale, 1.0 = normal). Only effective with BlurMode set to BitmapCapture or SkiaSharp.

Backdrop Blur

EnableBackdropBlur

bool

default:"false"

Whether to enable real backdrop blur using Skia (performance intensive). When false, uses simulated glass effect.

BlurMode

GlassBlurMode

default:"Simulated"

The blur rendering mode for glass effect.Options:

Simulated - Fast overlay-based glass effect (no real blur)
BitmapCapture - Real backdrop blur via bitmap capture
SkiaSharp - Real backdrop blur via Skia rendering

Methods

RefreshBackdrop()

Manually refresh the backdrop blur effect. Call this after the background behind the card has changed.

public void RefreshBackdrop()

Usage Examples

XAML - Basic Card

<!-- Simple card with custom content -->
<controls:DaisyCard>
    <StackPanel Spacing="8">
        <TextBlock Text="Card Title" FontSize="20" FontWeight="SemiBold" />
        <TextBlock Text="This is a card with custom content." TextWrapping="Wrap" />
    </StackPanel>
</controls:DaisyCard>

XAML - Built-In Layout

<controls:DaisyCard 
    Title="Welcome" 
    Description="This card uses built-in title and description properties." 
    IconImageSource="ms-appx:///Assets/icon.png" />

XAML - Color Variants

<!-- Primary colored card -->
<controls:DaisyCard ColorVariant="Primary">
    <TextBlock Text="Primary Card" />
</controls:DaisyCard>

<!-- Success colored card -->
<controls:DaisyCard ColorVariant="Success">
    <TextBlock Text="Success Card" />
</controls:DaisyCard>

XAML - Card Styles

<!-- Beveled card (raised appearance) -->
<controls:DaisyCard CardStyle="Beveled">
    <TextBlock Text="Beveled Card" />
</controls:DaisyCard>

<!-- Inset card (sunken appearance) -->
<controls:DaisyCard CardStyle="Inset">
    <TextBlock Text="Inset Card" />
</controls:DaisyCard>

<!-- Panel card -->
<controls:DaisyCard CardStyle="Panel">
    <TextBlock Text="Panel Card" />
</controls:DaisyCard>

XAML - Glass Effect

<!-- Simulated glass effect (fast) -->
<controls:DaisyCard 
    CardStyle="Glass" 
    GlassOpacity="0.3" 
    GlassTint="White">
    <TextBlock Text="Glass Card" />
</controls:DaisyCard>

<!-- Real backdrop blur (performance intensive) -->
<controls:DaisyCard 
    CardStyle="Glass" 
    EnableBackdropBlur="True" 
    BlurMode="SkiaSharp" 
    GlassBlur="40" 
    GlassSaturation="1.0">
    <TextBlock Text="Real Blurred Glass Card" />
</controls:DaisyCard>

XAML - Sizes and Variants

<!-- Compact card with small size -->
<controls:DaisyCard 
    Size="Small" 
    Variant="Compact">
    <TextBlock Text="Small Compact Card" />
</controls:DaisyCard>

<!-- Large card with normal variant -->
<controls:DaisyCard 
    Size="Large" 
    Variant="Normal">
    <TextBlock Text="Large Card" />
</controls:DaisyCard>

XAML - Custom Padding

<controls:DaisyCard BodyPadding="48">
    <TextBlock Text="Card with extra padding" />
</controls:DaisyCard>

C# - Dynamic Card

var card = new DaisyCard
{
    ColorVariant = DaisyColor.Primary,
    Size = DaisySize.Large,
    Title = "Dynamic Card",
    Description = "Created programmatically"
};

C# - Glass Card with Custom Content

var glassCard = new DaisyCard
{
    CardStyle = DaisyCardStyle.Glass,
    GlassOpacity = 0.2,
    GlassTint = Colors.Blue,
    GlassTintOpacity = 0.3,
    Content = new StackPanel
    {
        Children =
        {
            new TextBlock { Text = "Glass Card", FontSize = 18, FontWeight = FontWeights.SemiBold },
            new TextBlock { Text = "With custom content", Opacity = 0.8 }
        }
    }
};

C# - Refresh Backdrop on Background Change

// After changing the background behind the card
glassCard.RefreshBackdrop();

Notes

Glass Performance: Real backdrop blur (EnableBackdropBlur="True") is performance-intensive. Use simulated glass for better performance.
Built-In vs Custom: You can use built-in properties (Title, Description, IconImageSource) or provide custom Content.
Padding Behavior: When Variant="Compact", padding scales with Size. Set BodyPadding explicitly to override.
Color Auto-Detection: If you set a custom Background that matches a palette color, foreground is automatically adjusted.
Backdrop Refresh: Call RefreshBackdrop() when the background behind a glass card changes to update the blur effect.

Controls

Theming

Kanban

Color Picker

Overview

Properties

Size

Variant

ColorVariant

CardStyle

Layout Properties

Built-In Content

Glass Effect Properties

Backdrop Blur

Methods

RefreshBackdrop()

Usage Examples

XAML - Basic Card

XAML - Built-In Layout

XAML - Color Variants

XAML - Card Styles

XAML - Glass Effect

XAML - Sizes and Variants

XAML - Custom Padding

C# - Dynamic Card

C# - Glass Card with Custom Content

C# - Refresh Backdrop on Background Change

Notes

Build docs developers (and LLMs) love

Controls

Theming

Kanban

Color Picker

​Overview

​Properties

​Size

​Variant

​ColorVariant

​CardStyle

​Layout Properties

​Built-In Content

​Glass Effect Properties

​Backdrop Blur

​Methods

​RefreshBackdrop()

​Usage Examples

​XAML - Basic Card

​XAML - Built-In Layout

​XAML - Color Variants

​XAML - Card Styles

​XAML - Glass Effect

​XAML - Sizes and Variants

​XAML - Custom Padding

​C# - Dynamic Card

​C# - Glass Card with Custom Content

​C# - Refresh Backdrop on Background Change

​Notes

Build docs developers (and LLMs) love

Overview

Properties

Size

Variant

ColorVariant

CardStyle

Layout Properties

Built-In Content

Glass Effect Properties

Backdrop Blur

Methods

RefreshBackdrop()

Usage Examples

XAML - Basic Card

XAML - Built-In Layout

XAML - Color Variants

XAML - Card Styles

XAML - Glass Effect

XAML - Sizes and Variants

XAML - Custom Padding

C# - Dynamic Card

C# - Glass Card with Custom Content

C# - Refresh Backdrop on Background Change

Notes