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.
Tip
In some scenarios, content may not be automatically detected. For instance, if a DataTemplate
is used to define content without setting the corresponding content property, the card will not know that content is available. Use the IsCoverVisible, IsHeaderVisible, IsThumbnailVisible, and IsFooterVisible properties to manually control the visibility of each content area.
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:shared="http://schemas.actiprosoftware.com/winfx/xaml/shared"
...
<shared:Card>
<TextBlock Text="This is the content of the card." />
</shared: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
.
Tip
The CoverTemplateSelector is pre-configured with a default ImageTemplateSelector, so it supports ImageSource
and Geometry
data values. See the Template Selectors topic for more details.
The following example demonstrates creating a Card with a cover image docked to the left:
xmlns:shared="http://schemas.actiprosoftware.com/winfx/xaml/shared"
...
<shared:Card CoverDock="Left">
<shared:Card.Cover>
<Image Source="/Images/Cover.png" MaxWidth="150" Stretch="Uniform" />
</shared:Card.Cover>
<!-- Insert Card Content Here -->
</shared: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 TitleStyle and DescriptionStyle properties to customize the appearance of each element.
The following example demonstrates creating a Card with both Title and Description defined:
xmlns:shared="http://schemas.actiprosoftware.com/winfx/xaml/shared"
...
<shared:Card Title="Title Here" Description="This is a description or sub-title">
<!-- Insert Card Content Here -->
</shared: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:shared="http://schemas.actiprosoftware.com/winfx/xaml/shared"
...
<shared:Card>
<shared:Card.Header>
<TextBlock FontWeight="Bold">Title Here</TextBlock>
</shared:Card.Header>
<!-- Insert Card Content Here -->
</shared: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.
Tip
The ThumbnailTemplateSelector is pre-configured with a default ImageTemplateSelector, so it supports ImageSource
and Geometry
data values. See the Template Selectors topic for more details.
By default, the Thumbnail is vertically centered with a right margin to separate it from the Header. Use the ThumbnailStyle property to customize the appearance.
The following example demonstrates creating a Card with top-aligned image and a custom margin:
xmlns:shared="http://schemas.actiprosoftware.com/winfx/xaml/shared"
...
<shared:Card>
<shared:Card.Thumbnail>
<Image Width="32" Height="32" Source="/Images/Icons/Actipro.ico" />
</shared:Card.Thumbnail>
<shared:Card.ThumbnailStyle>
<Style TargetType="ContentPresenter">
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="Margin" Value="0,0,10,0" />
</Style>
</shared:Card.ThumbnailStyle>
<!-- Insert Card Content Here -->
</shared: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:shared="http://schemas.actiprosoftware.com/winfx/xaml/shared"
...
<shared:Card>
<!-- Insert Card Content Here -->
<actipro:Card.Footer>
<TextBlock FontStyle="Italic" Text="This is the footer" />
</actipro:Card.Footer>
</shared:Card>
Appearance
The appearance of the control can be fully customized.
Brushes
The following brush properties are available:
Property | Description |
---|---|
Foreground |
The default foreground for all areas. |
Background |
The default background for all areas. |
BorderBrush |
The brush for the outer border. |
HeaderForeground | The foreground for the header area, overriding the default foreground. |
HeaderBackground | The background for the header area, overriding the default background. |
HeaderBorderBrush | The brush for the bottom border of the header. |
FooterForeground | The foreground for the footer area, overriding the default foreground. |
FooterBackground | The background for the footer area, overriding the default background. |
FooterBorderBrush | The brush for the top border of the footer. |
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.
Important
When setting the border thickness, only Thickness.Bottom
is used by the header and Thickness.Top
is used by the footer.
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.
Note
The Cover area does not have any default padding applied so the content can be displayed edge-to-edge.
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
.
Tip
If the Command
property is assigned a non-null
value, the IsClickEnabled property is automatically coerced to true
, so no additional configuration is necessary.
Note
Setting the IsClickEnabled property to true
will also trigger hover effects to emphasize the control is actionable.
Badge Adornment
Card includes built-in support for adding a Badge adornment. Refer to the Badge documentation for details on working with a badge.
The following properties are available for configuring the badge, which correspond to attached properties on BadgeService:
Property | Description |
---|---|
Badge | Set to an instance of a Badge. |
BadgeHorizontalAlignment | Set to one of the AdornmentHorizontalAlignment values to alter the horizontal alignment. (Default = CenterOnTargetRightEdge ) |
BadgeHorizontalOffset | An explicit offset to be applied after alignment. Positive values shift to the right while negative values shift to the left. |
BadgeVerticalAlignment | Set to one of the AdornmentVerticalAlignment values to alter the vertical alignment. (Default = CenterOnTargetTopEdge ) |
BadgeVerticalOffset | An explicit offset to be applied after alignment. Positive values shift down while negative values shift up. |
Elevated Appearance
By default, the IsShadowEnabled property is set to true
and gives the Card an elevated appearance.
When also used as a Button
, an animation is applied when the mouse is over the Card that slides the control up while raising the elevation of the shadow.
Animations are automatically disabled, as appropriate, based on system settings. To manually turn off animations, set the IsAnimationEnabled property to false
.
Theme Assets
See the Theme Reusable Assets topic for more details on using and customizing theme assets. The following reusable assets are used by SettingsCard:
Asset Resource Key | Description |
---|---|
CardBorderNormalThicknessKey | The default BorderThickness . |
CardBorderNormalCornerRadiusKey | The default CornerRadius. |
CardBorderNormalThicknessKey | The default Padding . |