Skip to content

DashboardCard.md

Latest commit

 

History

History
129 lines (99 loc) · 3.56 KB

DashboardCard.md

File metadata and controls

129 lines (99 loc) · 3.56 KB

DashboardCard

A card control with a structured header (title + optional toolbar) and a scrollable content area. Designed for dashboard panels, metric cards, and data displays.

Basic usage

<DashboardCard Header="Sales Overview">
    <StackPanel Spacing="10">
        <TextBlock Text="$12,345" FontSize="24" FontWeight="Bold" />
        <TextBlock Text="+15% from last month" Foreground="Green" />
    </StackPanel>
</DashboardCard>

Properties

Property Type Default Description
Header string? — Title shown in the card header (inherited from HeaderedContentControl)
Subtitle string? — Subtitle shown below the header
HeaderContent object? — Arbitrary content placed in the header's right slot
HeaderContentTemplate IDataTemplate? — Data template for HeaderContent
FooterContent object? — Content shown in the card footer
FooterContentTemplate IDataTemplate? — Data template for FooterContent
ContentPadding Thickness 16 Padding applied to the content area
ShowScrollViewer bool true Whether the content area is wrapped in a SmoothScrollViewer
ToolbarItems AvaloniaList<object> — Collection of toolbar items shown in the header's right slot

Subtitle

Add a subtitle below the header:

<DashboardCard Header="Revenue"
              Subtitle="Monthly report">
    <TextBlock Text="$45,000" />
</DashboardCard>

Toolbar items

Add toolbar buttons or other controls to the header:

<DashboardCard Header="Users">
    <DashboardCard.ToolbarItems>
        <Button Content="Add" />
        <Button Content="Refresh" />
    </DashboardCard.ToolbarItems>
    
    <ItemsControl ItemsSource="{Binding Users}" />
</DashboardCard>

Header content

Place custom content in the header's right slot:

<DashboardCard Header="Settings">
    <DashboardCard.HeaderContent>
        <CheckBox Content="Enable" />
    </DashboardCard.HeaderContent>
    
    <!-- Card content -->
</DashboardCard>

Footer content

Add a footer with action buttons or summary information:

<DashboardCard Header="Tasks">
    <ItemsControl ItemsSource="{Binding Tasks}" />
    
    <DashboardCard.FooterContent>
        <Border Background="{DynamicResource ControlFillColor1}"
                Padding="12">
            <TextBlock Text="5 pending tasks" />
        </Border>
    </DashboardCard.FooterContent>
</DashboardCard>

Content padding

Adjust the padding inside the content area:

<DashboardCard ContentPadding="24" />

Scroll viewer

By default, content is wrapped in a SmoothScrollViewer. Disable this if you want custom scrolling behavior:

<DashboardCard ShowScrollViewer="False">
    <!-- Custom scrollable content -->
</DashboardCard>

Complex example

<DashboardCard Header="Project Status"
              Subtitle="Q4 2024">
    <DashboardCard.ToolbarItems>
        <Button Content="Edit" />
        <Button Content="Delete" />
    </DashboardCard.ToolbarItems>
    
    <StackPanel Spacing="12">
        <ProgressBar Value="75" Maximum="100" />
        <TextBlock Text="75% complete" />
    </StackPanel>
    
    <DashboardCard.FooterContent>
        <StackPanel Orientation="Horizontal"
                    HorizontalAlignment="Right"
                    Spacing="8">
            <Button Content="Cancel" />
            <Button Content="Save" Theme="{DynamicResource AccentButtonTheme}" />
        </StackPanel>
    </DashboardCard.FooterContent>
</DashboardCard>