DaisyCard

Overview

DaisyCard provides a panel for grouping content with padding, rounded corners, and optional glass effects. It supports 3 layout variants (Normal, Compact, Side), color variants for semantic styling, configurable body/title typography, and an opt-in glassmorphism stack with tint/blur controls. You can also use the built-in header API (Title/Description/Icon) for a ready-made card layout. Use it for dashboards, feature tiles, or content groupings; compose headers, bodies, and action rows inside.

Variant Options

Color Variants

Use ColorVariant to apply semantic palette colors:

Auto-Foreground Detection

When you set a custom Background using a Daisy palette brush, the card automatically detects the matching foreground color. No need to manually set Foreground on child elements!

<!-- Auto-foreground detection - Foreground is automatically set to DaisyPrimaryContentBrush -->
<controls:DaisyCard Background="{ThemeResource DaisyPrimaryBrush}">
    <TextBlock Text="Hello World"/>  <!-- Inherits correct foreground automatically -->
</controls:DaisyCard>

<!-- Equivalent to (but more concise): -->
<controls:DaisyCard ColorVariant="Primary">
    <TextBlock Text="Hello World"/>
</controls:DaisyCard>

This feature:

• Works with any Daisy palette color (Primary, Secondary, Accent, Info, Success, Warning, Error, Base variants)
• Automatically updates when themes change
• Respects explicit Foreground settings if you need to override

Patterned Card Colors

• Set PatternMode="Tiled" and provide a high-contrast Foreground so the pattern tint stays visible.
• Lock colors per card by defining DaisyCardBackground and DaisyCardForeground in the card's Resources (keeps the sample or one instance theme-independent).
• Keep SvgAsset mode and ensure the card background contrasts with the theme's black/white assets.
• If content text should match the pattern tint, set a local TextBlock style or explicit Foreground in the card content.

<controls:DaisyPatternedCard Pattern="Grid" PatternMode="Tiled" Foreground="White" Background="Black">
    <TextBlock Text="Fixed colors, theme-independent pattern." />
</controls:DaisyPatternedCard>

Glass Effect Settings

Windows Contrast Themes

In a Windows contrast theme, the card uses an opaque system-colored surface and a visible border.

Blur captures, tint overlays, reflections, and decorative shadows are disabled.

The original glass settings apply again after Windows contrast mode ends.

This behavior also applies to derived patterned and expandable cards.

Typography & Layout

Automatic Body Padding

These values apply to all four sides, in device-independent pixels:

Changing Size or Variant updates automatic padding.

A local BodyPadding value remains unchanged during these updates.

Call card.ClearValue(DaisyCard.BodyPaddingProperty) to restore automatic padding for the current size and variant.

Batteries-Included Header

Set these properties to get a ready-made header (icon + title + description) without custom XAML. Any Content you provide renders below the description.

<controls:DaisyCard Title="Launch Plan"
                    Description="Ready to ship this release. Confirm the checklist and roll out."
                    IconImageSource="{x:Bind ViewModel.LaunchIcon}"
                    IconBackground="{ThemeResource DaisyBase200Brush}"
                    IconBorderBrush="{ThemeResource DaisyBase300Brush}">
    <controls:DaisyButton Content="Open" Variant="Primary" HorizontalAlignment="Right" />
</controls:DaisyCard>

Content Structure

Place any layout/content inside the card; common patterns:

• Title + body text
• Media (images/charts) with CTA buttons
• Form sections

<!-- Standard card -->
<controls:DaisyCard>
    <StackPanel Spacing="10">
        <TextBlock Text="Card Title" FontWeight="SemiBold" FontSize="18" />
        <TextBlock Text="Supporting description goes here." TextWrapping="Wrap" />
        <StackPanel Orientation="Horizontal" Spacing="8">
            <controls:DaisyButton Content="Action" Variant="Primary" />
            <controls:DaisyButton Content="Secondary" Variant="Ghost" />
        </StackPanel>
    </StackPanel>
</controls:DaisyCard>

<!-- Color variant card -->
<controls:DaisyCard ColorVariant="Primary">
    <StackPanel Spacing="6">
        <TextBlock Text="Primary Card" FontWeight="Bold" />
        <TextBlock Text="Uses DaisyPrimaryBrush background with auto foreground." />
    </StackPanel>
</controls:DaisyCard>

<!-- Custom background with auto-foreground -->
<controls:DaisyCard Background="{ThemeResource DaisySuccessBrush}">
    <StackPanel Spacing="6">
        <TextBlock Text="Success Card" FontWeight="Bold" />
        <TextBlock Text="Foreground auto-detected from background!" />
    </StackPanel>
</controls:DaisyCard>

<!-- Compact card -->
<controls:DaisyCard Variant="Compact">
    <StackPanel Spacing="6">
        <TextBlock Text="Compact Card" FontWeight="Bold" />
        <TextBlock Text="Tighter padding for dense layouts." />
    </StackPanel>
</controls:DaisyCard>

<!-- Glass card -->
<controls:DaisyCard IsGlass="True" Width="260">
    <StackPanel Spacing="8">
        <TextBlock Text="Glass Card" FontWeight="Bold" FontSize="18" />
        <TextBlock Text="Subtle tint with frosted layers." TextWrapping="Wrap" />
    </StackPanel>
</controls:DaisyCard>

<!-- Glass with custom tint -->
<controls:DaisyCard IsGlass="True" GlassTint="#000000" GlassOpacity="0.4" GlassTintOpacity="0.6" Width="260">
    <StackPanel Spacing="8">
        <TextBlock Text="Dark Glass" FontWeight="Bold" />
        <TextBlock Text="Higher tint opacity for contrast." TextWrapping="Wrap" />
    </StackPanel>
</controls:DaisyCard>

<!-- Real blur glass card -->
<controls:DaisyCard IsGlass="True" EnableBackdropBlur="True" BlurMode="SkiaSharp" 
                    GlassBlur="30" GlassSaturation="0.8" Width="260">
    <StackPanel Spacing="8">
        <TextBlock Text="Skia Blur" FontWeight="Bold" FontSize="18" />
        <TextBlock Text="Real backdrop blur effect." TextWrapping="Wrap" />
    </StackPanel>
</controls:DaisyCard>

Tips & Best Practices

• Use ColorVariant for semantic coloring - it's the cleanest approach.
• When setting custom Background, the card auto-detects and applies matching foreground.
• Use Compact when cards are nested in grids or lists to conserve space.
• Glass mode removes the default shadow - place on contrasting backgrounds to maintain depth.
• For real blur effects, use EnableBackdropBlur="True" with BlurMode="SkiaSharp" or BlurMode="BitmapCapture".
• Adjust BodyPadding for edge-to-edge media (e.g., set to 0 and pad inner content manually).
• Set explicit Width or use layout constraints for uniform card grids.
• Pair with DaisyButton variants for clear primary/secondary actions inside the card.