horusstudio.maui.materialdesigncontrols.materialcard.md

MaterialCard

Cards display content and actions about a single subject, and follow Material Design Guidelines. See more.

Namespace: HorusStudio.Maui.MaterialDesignControls

Inherits from: MaterialCard → Border

XAML sample

xmlns:material="clr-namespace:HorusStudio.Maui.MaterialDesignControls;assembly=HorusStudio.Maui.MaterialDesignControls"

<material:MaterialCard
    Type="Elevated">
    <VerticalStackLayout
        Spacing="8">
        <material:MaterialLabel
            Type="TitleMedium"
            Text="Elevated type"/>
        <material:MaterialLabel
            Text="Elevated cards provide separation from a patterned background."/>
    </VerticalStackLayout>
</material:MaterialCard/>

C# sample

var label = new MaterialLabel()
{
    Text = "This a card."
};

var vStack = new VerticalStackLayout()
{
    label
};
    
var card = new MaterialCard()
{
    Type = MaterialCardType.Elevated,
    Content = vStack
};

See more example

Properties

BackgroundColor

Gets or sets a color that describes the background color of the card. This is a bindable property.

Property type: Color

Default value: Theme: Light: MaterialLightTheme.SurfaceContainerHighest - Dark: MaterialDarkTheme.SurfaceContainerHighest

BorderColor

Gets or sets a color that describes the border stroke color of the card. This is a bindable property.

Property type: Color

Remarks: This property has no effect if IBorderElement.BorderWidth is set to 0.

BorderWidth

Gets or sets the width of the border, in device-independent units. This is a bindable property.

Property type: Single

Remarks: Set this value to a non-zero value in order to have a visible border.

Command

Gets or sets the command to invoke when the card is clicked. This is a bindable property.

Property type: ICommand

Remarks: This property is used to associate a command with an instance of a card. This property is most often set in the MVVM pattern to bind callbacks back into the ViewModel. VisualElement.IsEnabled is controlled by the Command.CanExecute(object) if set.

CommandParameter

Gets or sets the parameter to pass to the Command property. This is a bindable property.

Property type: Object

Default value: null

CornerRadius

Gets or sets the corner radius for the card, in device-independent units. This is a bindable property.

Property type: CornerRadius

Shadow

Gets or sets the shadow effect cast by the element. This is a bindable property.

Property type: Shadow

ShadowColor

Gets or sets a color that describes the shadow color of the card. This is a bindable property.

Property type: Color

TouchAnimation

Gets or sets a custom animation to be executed when card is clicked. This is a bindable property.

Property type: ITouchAnimation

Default value: null

TouchAnimationType

Gets or sets an animation to be executed when card is clicked. This is a bindable property.

Property type: TouchAnimationTypes

Name	Value	Description
None	0	None: no animation runs.
Fade	1	Fade: Represents an animation that simulates a "fade" effect by changing the opacity over the target element.
Scale	2	Scale: Represents an animation that simulates a "sink" or "sunken" effect by scaling the target element.
Bounce	3	Bounce: Represents an animation that simulates a "sink" or "sunken" effect with a "bounce" effect when the user releases the target element.

Default value: TouchAnimationTypes.Fade

Type

Gets or sets the card type. This is a bindable property.

Property type: MaterialCardType

Name	Value	Description
Elevated	0	Elevated
Filled	1	Filled
Outlined	2	Outlined
Custom	3	Custom

Default value: MaterialCardType.Filled

Events

Clicked

Occurs when the card is clicked/tapped.

Pressed

Occurs when the card is pressed.

Released

Occurs when the card is released.

Touch

Occurs when the card is touched.

Known issues and pending features

• Disable color styles looks a bit weird with the opacities that the guideline specifies, we have to review them.