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="{DynamicResource 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

Typography & Layout

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="{DynamicResource 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.