ContextQMD
Back to Devexpress

.NET MAUI Buttons as Cards with Custom Content

maui-404734-utility-controls-button-button-as-card.md

latest4.4 KB
Original Source

.NET MAUI Buttons as Cards with Custom Content

  • Mar 06, 2024
  • 2 minutes to read

The DXButton control allows you to imitate cards and fill them with custom content.

Card Content

You can place custom content directly into DXButton as shown in the example below:

xml
<VerticalStackLayout>  
    <dx:DXButton ... >
        <Grid ColumnDefinitions="*, Auto" RowDefinitions="*,*">
            <Label FontAttributes="Bold" Text="Active Users" VerticalOptions="Start"/>
            <Image Source="online" Grid.Column="2" VerticalOptions="Start"/>
            <HorizontalStackLayout Grid.Row="1" VerticalOptions="End">
                <Label Text="120" FontAttributes="Bold"/>
                <Label TextColor="DarkGray" Text="online" Margin="4,0,0,0"/>
            </HorizontalStackLayout>
        </Grid>
    </dx:DXButton>
</VerticalStackLayout>

You can also use the ContentTemplate property to specify custom content. (The only difference between this and previous examples is that you explicitly define a template property. Content management capabilities remain the same.)

xml
<VerticalStackLayout>  
    <dx:DXButton ... >
        <dx:DXButton.ContentTemplate>
            <DataTemplate>
                <Grid ColumnDefinitions="*, Auto" RowDefinitions="*,*">
                    <Label FontAttributes="Bold" Text="Active Users222" VerticalOptions="Start"/>
                    <Image Source="online" Grid.Column="2" VerticalOptions="Start"/>
                    <HorizontalStackLayout Grid.Row="1" VerticalOptions="End">
                        <Label TextColor="Black" Text="120" FontAttributes="Bold"/>
                        <Label TextColor="DarkGray" Text="online" Margin="4,0,0,0"/>
                    </HorizontalStackLayout>
                </Grid>
            </DataTemplate>
        </dx:DXButton.ContentTemplate>
    </dx:DXButton>
</VerticalStackLayout>

Card Appearance

You can customize a DXButton control to make it look like a card. For this purpose, use the following properties:

BackgroundColorGets or sets the background color of the button.PressedBackgroundColorGets or sets the background color of the button in the pressed state. This is a bindable property.BorderColorGets or sets the border color of the button. This is a bindable property.PressedBorderColorGets or sets the border color of the button in the pressed state. This is a bindable property.BorderThicknessGets or sets the border thickness of the button. This is a bindable property.CornerRadiusGets or sets the corner radius of the button. This is a bindable property.PressedScaleGets or sets the scale for the button in the pressed state.

xml
<VerticalStackLayout>  
    <dx:DXButton 
            BackgroundColor="Transparent"
            PressedBackgroundColor="Transparent"
            BorderColor="Gray"
            PressedBorderColor="Gray"
            BorderThickness="1"
            CornerRadius="20"
            PressedScale="1"
            HeightRequest="100" 
            WidthRequest="300">
        <dx:DXButton.ContentTemplate>
            <DataTemplate>
                <!-- ... -->
            </DataTemplate>
        </dx:DXButton.ContentTemplate>
    </dx:DXButton>
</VerticalStackLayout>

Cards with Custom Content

This example turns DXButton controls into clickable cards with custom content.