Card

The Card control is typically used to present visually grouped information for a single subject.

Card control with optional cover, footer, thumbnail, and default header

Content Areas

The Card control is defined by multiple content areas:

• Content (Body) - The default content area of the card.
• Cover - Typically used for a high-quality image which can be docked to any side of the card.
• Header - Displayed above the content, and typically contains a title and/or description.
• Thumbnail - Typically a small image or icon displayed on the left side of the header.
• Footer - Displayed at the bottom of the card.

Each content area can optionally be set to any value supported by ContentPresenter and the layout will adjust to only show the areas where content is defined.

Content (Body)

Card is a ContentControl, and the default content of the control will be displayed in the body area of the card. The content can be set to any value supported by ContentPresenter.

The following example demonstrates defining the content of a Card:

xmlns:actipro="http://schemas.actiprosoftware.com/avaloniaui"
...
<actipro:Card>
	<TextBlock Text="This is the content of the card." />
</actipro:Card>

Cover

The Cover can be docked to any side of the card using the CoverDock property. While a high-quality image is typically used for the Cover, it can be set to any value supported by ContentPresenter.

The following example demonstrates creating a Card with a cover image docked to the left:

xmlns:actipro="http://schemas.actiprosoftware.com/avaloniaui"
...
<actipro:Card CoverDock="Left">

	<actipro:Card.Cover>
		<Image Source="/Images/Cover.png" MaxWidth="150" Stretch="Uniform" />
	</actipro:Card.Cover>

	<!-- Insert Card Content Here -->

</actipro:Card>

Header

The Title and Description properties can be used to define a header with a default template where the Title is displayed with typography consistent with a heading, and the Description, if defined, is displayed immediately below it.

Use the TitleTheme and DescriptionTheme properties to customize the appearance of each element.

The following example demonstrates creating a Card with both Title and Description defined:

xmlns:actipro="http://schemas.actiprosoftware.com/avaloniaui"
...
<actipro:Card Title="Title Here" Description="This is a description or sub-title">
	<!-- Insert Card Content Here -->
</actipro:Card>

Alternatively, the Header can be set to any value supported by ContentPresenter. In this case, the explicit content will be used instead of the default template based on the Title and Description properties.

The following example demonstrates creating a Card with an explicit Header defined:

xmlns:actipro="http://schemas.actiprosoftware.com/avaloniaui"
...
<actipro:Card>

	<actipro:Card.Header>
		<TextBlock FontWeight="Bold">Title Here</TextBlock>
	</actipro:Card.Header>

	<!-- Insert Card Content Here -->

</actipro:Card>

Thumbnail

The Thumbnail is displayed in the header area, but is separate from the Header content. Thumbnail can be set to any value supported by ContentPresenter but is typically used to display a small image.

By default, the Thumbnail is vertically centered with a right margin to separate it from the Header. Use the ThumbnailTheme property to customize the appearance.

The following example demonstrates creating a Card with top-aligned image and a custom margin:

xmlns:actipro="http://schemas.actiprosoftware.com/avaloniaui"
...
<actipro:Card>

	<actipro:Card.Thumbnail>
		<Image Width="32" Height="32" Source="/Images/Icons/Actipro.ico" />
	</actipro:Card.Thumbnail>

	<actipro:Card.ThumbnailTheme>
		<ControlTheme TargetType="ContentPresenter">
			<Setter Property="VerticalAlignment" Value="Top" />
			<Setter Property="Margin" Value="0,0,10,0" />
		</ControlTheme>
	</actipro:Card.ThumbnailTheme>

	<!-- Insert Card Content Here -->

</actipro:Card>

Footer

The Footer can be set to any value supported by ContentPresenter.

The following example demonstrates creating a Card with italicized text in the footer:

xmlns:actipro="http://schemas.actiprosoftware.com/avaloniaui"
...
<actipro:Card>

	<!-- Insert Card Content Here -->

	<actipro:Card.Footer>
		<TextBlock FontStyle="Italic" Text="This is the footer" />
	</actipro:Card.Footer>

</actipro:Card>

Appearance

The appearance of the control can be fully customized.

Brushes

The following brush properties are available:

Header and Footer Borders

Use the HeaderBorderThickness and FooterBorderThickness properties to insert a border below the header or above the footer. In the event header and footer both define a border when no content is defined between them, only the header border will be displayed.

Padding

Card controls with the same padding shown with and without separation between then content and the header/footer

By default, the Padding is consistently applied around the header, content, and footer areas instead of having separate values for each area. When there is visual separation between the content and the header/footer (either by a border or an explicit background color), the padding will be consistently applied to both sides of the separation.

Using Card as a Button

Card derives from Button, so it supports the same Command model and Click event as Button. Unlike a Button, though, not all instances of Card will be interactive and the control has been configured to appear non-interactive by default.

Set the IsClickEnabled property to true to enable clicking the card. The Click event will not be raised if this property is false.

Themes

Card control in the outline, solid, soft, and elevated themes

The following control themes are supported:

• CardBase - Base control theme used by several others.
• CardElevated (theme-elevated) - Has an elevated appearance with a shadow.
• CardOutline (theme-outline) - Has an outline appearance.
• CardSoft (theme-soft) - Has a soft fill appearance.
• CardSolid (theme-solid) - Has a solid appearance.

The following example demonstrates how to define a card using the elevated theme:

xmlns:actipro="http://schemas.actiprosoftware.com/avaloniaui"
...
<actipro:Card Classes="theme-elevated" ... />

Elevated Button Animation

When used as a Button and the elevated theme is applied (theme-elevated style class name), an animation is applied when the pointer is over the Card that slides the control up while raising the elevation of the shadow.

Animations are automatically enabled. To turn off animations, set the IsAnimationEnabled property to false.

Theme Resources

The following theme resources are available for customizing the appearance of the control: