Introducing .NET MAUI Cards: Craft Modern UIs with Beautiful Interfaces
Tags: dotnetmaui, mobile, whatsnew, ui
Published: 2023-12-28 05:34:50

---
title: Introducing .NET MAUI Cards: Craft Modern UIs with Beautiful Interfaces
published: true
date: 2023-12-22 10:36:04 UTC
tags: dotnetmaui, mobile, whatsnew, ui
canonical_url: https://www.syncfusion.com/blogs/post/dotnet-maui-cards-control.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yos7hvuce6k7mtr5ekuu.png
---
We’re excited to share some fantastic news with our community! In the latest Syncfusion Essential Studio [2023 Vol. 4 release](https://www.syncfusion.com/forums/185916/essential-studio-2023-volume-4-main-release-v24-1-41-is-available-for-download "Essential Studio 2023 Volume 4"), we added a new control to transform how you design and interact with your apps: the [.NET MAUI Cards control!](https://www.syncfusion.com/maui-controls/maui-cards ".NET MAUI Cards")

This control allows you to create dismissible cards or a stack of cards. You can organize a sequence of cards where only one card is visible at a time. You can easily navigate through the stack by swiping to reveal the next card in the sequence.

Let’s explore its features and the steps to get started!

## Key features

The key features of the .NET MAUI Cards control are as follows:

- [Card layout](#Card)
- [Swiped card edge](#Swiped)
- [Dismissible cards](#Dismissible)
- [Border customization](#Border)
- [Corner radius](#Corner)
- [Indicator customization](#Indicator)

### <a name="Card">Card layout</a>

This feature allows you to create an appealing stack of cards where only one is visible at a time. Easily swipe through the stack to reveal the next card in the sequence. Stack the cards on the left, right, top, or bottom of the layout, and navigate effortlessly in all four directions.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/Card-Layout-in-.NET-MAUI-Cards.gif" alt="Card Layout in .NET MAUI Cards" style="width:100%">

  <figcaption>Card Layout in .NET MAUI Cards</figcaption>

</figure>

### <a name="Swiped">Swiped cards at the edge</a>

Cards that have been swiped will be visually represented at the edge, providing a clear cue that they have already been swiped.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/Showing-swiped-cards-using-.NET-MAUI-Cards-control-2.png" alt="Showing swiped cards using .NET MAUI Cards control" style="width:100%">

  <figcaption>Showing swiped cards using .NET MAUI Cards control</figcaption>

</figure>

### <a name="Dismissible">Dismissible cards</a>

Customize the dismissal experience by allowing cards to be dismissed with or without a fade-out effect. Control the dismissal direction—left or right—and restrict dismissals when needed. This flexibility ensures seamless and tailored user interaction.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/Dismissing-Cards-Using-the-.NET-MAUI-Cards-Control.gif" alt="Dismissing Cards Using the .NET MAUI Cards Control" style="width:100%">

  <figcaption>Dismissing Cards Using the .NET MAUI Cards Control</figcaption>

</figure>

### <a name="Border">Border customization</a>

Easily customize the border of your cards to match your app’s theme. Effortlessly define the border’s color and thickness, allowing you to align the cards with your overall design aesthetic.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/Customizing-the-Border-in-.NET-MAUI-Cards.png" alt="Customizing the Border in .NET MAUI Cards" style="width:100%">

  <figcaption>Customizing the Border in .NET MAUI Cards</figcaption>

</figure>

### <a name="Corner">Corner radius</a>

Elevate the appeal of your cards by customizing the corner radius. Achieve rounded edges and provide different corner radii to different edges, allowing for a polished and refined look.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/Customizing-Corner-Radius-in-.NET-MAUI-Cards.png" alt="Customizing Corner Radius in .NET MAUI Cards" style="width:100%">

  <figcaption>Customizing Corner Radius in .NET MAUI Cards</figcaption>

</figure>

### <a name="Indicator">Indicator customization</a>

Make cards easier to understand with customizable indicators positioned at the edges of a card. These indicators signify specific states based on the current content of the card, providing users with valuable context.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/Indicator-Customization-in-.NET-MAUI-Cards.png" alt="Indicator Customization in .NET MAUI Cards" style="width:100%">

  <figcaption>Indicator Customization in .NET MAUI Cards</figcaption>

</figure>

**Note:** For more details, refer to the [.NET MAUI Cards control documentation](https://help.syncfusion.com/maui/cards/getting-started "Getting started with .NET MAUI Cards").

## Getting started with the .NET MAUI Cards control

We have seen the key features of the .NET MAUI Cards control. Let’s learn how to integrate it into your .NET MAUI app and utilize its features:

### Step 1: Create a .NET MAUI app

First, create a [.NET MAUI application.](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?view=net-maui-7.0&tabs=vswin&pivots=devices-android "Build your first .NET MAUI app")

### Step 2: Add the .NET MAUI Cards NuGet package

Syncfusion .NET MAUI controls are available in the [NuGet gallery](https://www.nuget.org/ "NuGet gallery"). To add the .NET MAUI Cards control to your project, open the NuGet package manager in [Visual Studio](https://visualstudio.microsoft.com/ "Visual Studio"), search for [Syncfusion.Maui.Cards](https://www.nuget.org/packages/Syncfusion.Maui.Cards "Syncfusion.Maui.Cards NuGet package"), and then install it.

### Step 3: Register the handler

In the **MauiProgram.cs** file, register the handler for **Syncfusion core**.

```csharp
using Syncfusion.Maui.Core.Hosting;

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
          .UseMauiApp<App>()
          .ConfigureSyncfusionCore()
          .ConfigureFonts(fonts =>
          {
              fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
              fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
              fonts.AddFont("Roboto-Medium.ttf", "Roboto-Medium");
              fonts.AddFont("Roboto-Regular.ttf", "Roboto-Regular");
          });
        return builder.Build();
    }
}
```

### Step 4: Add the namespace

Now, add the **Syncfusion.Maui.Cards** namespace in your XAML page.

```xml
xmlns:cards= "clr-namespace:Syncfusion.Maui.Cards;assembly=Syncfusion.Maui.Cards"
```

### Step 5: Initialize the Syncfusion .NET MAUI Cards control

Finally, initialize the Syncfusion .NET MAUI Cards control. Refer to the following code example.

```xml
xmlns:cards="clr-namespace:Syncfusion.Maui.Cards;assembly=Syncfusion.Maui.Cards"

<Grid>
 <cards:SfCardLayout x:Name="cardLayout" HeightRequest="220" WidthRequest="{OnPlatform Android=340, iOS=340, Default=360}" HorizontalCardSpacing="10" VerticalCardSpacing="0" Padding="20,20,20,10">
  <cards:SfCardView x:Name="thirdCard" BorderColor="#9D6B1F" CornerRadius="20" Padding="-1,-1,0,0">
   <Grid>
    <Image Source="eyes.jpg" Aspect="AspectFill"/>
    <Grid Padding="20" Background="#9D6B1F" Opacity="0.9">
     <Grid.RowDefinitions>
      <RowDefinition Height= "Auto"/>
      <RowDefinition Height= "Auto"/>
      <RowDefinition Height= "Auto"/>
      <RowDefinition Height= "Auto"/>
      <RowDefinition Height= "Auto"/>
     </Grid.RowDefinitions>
     <Grid Grid.Row= "1">
      <Grid.ColumnDefinitions>
       <ColumnDefinition Width= "60"/>
       <ColumnDefinition Width="*"/>
      </Grid.ColumnDefinitions>
      <Image Source="cardchip.png" WidthRequest="40" HeightRequest="50" HorizontalOptions="Start" VerticalOptions="Start" Margin="0,20,0,0"/>
      <Label Grid.Column="1" Text="Wells Fargo" HorizontalOptions="End" VerticalOptions="Start" TextColor="White" FontSize="16" FontFamily="Roboto-Medium"/>
     </Grid>
     <Label Grid.Row="2" HorizontalOptions="Start" VerticalOptions="Start" Text=" 8 5 7 1 7 2 7 2 9 5 8 0 3 1 5 7" TextColor="White" FontFamily="Roboto-Regular"/>
     <Label Grid.Row="3" HorizontalOptions="Start" VerticalOptions="Start" Text="Valid till : 12/24" FontSize="12" TextColor="#f2debf" Padding="0,10,0,0" FontFamily="Roboto-Regular"/>
     <Label Grid.Row="4" HorizontalOptions="Start" VerticalOptions="End" Text="Rick Sanchez" Padding="0,10,0,0" FontSize="16" TextColor="White" FontFamily="Roboto-Medium"/>
    </Grid>
   </Grid>

  </cards:SfCardView>

  <cards:SfCardView x:Name="secondCard" BorderColor="#224AD8" CornerRadius="20" Padding="-1,-1,0,0">
   <Grid>
    <Image Source="coinslandscape.jpg" Aspect="AspectFill"/>
    <Grid Padding="20" Background="#224AD8" Opacity="0.9">
     <Grid.RowDefinitions>
      <RowDefinition Height= "Auto"/>
      <RowDefinition Height= "Auto"/>
      <RowDefinition Height= "Auto"/>
      <RowDefinition Height= "Auto"/>
      <RowDefinition Height= "Auto"/>
     </Grid.RowDefinitions>
     <Grid Grid.Row= "1">
      <Grid.ColumnDefinitions>
       <ColumnDefinition Width= "60"/>
       <ColumnDefinition Width="*"/>
      </Grid.ColumnDefinitions>
      <Image Source="cardchip.png" WidthRequest="40" HeightRequest="50" HorizontalOptions="Start" VerticalOptions="Start" Margin="0,20,0,0"/>
      <Label Grid.Column="1" Text="Chase" HorizontalOptions="End" VerticalOptions="Start" TextColor="White" FontSize="16" FontFamily="Roboto-Medium"/>
     </Grid>
     <Label Grid.Row="2" HorizontalOptions="Start" VerticalOptions="Start" Text=" 2 6 1 9 0 9 3 8 4 8 1 9 9 9 1 7" TextColor="White" FontFamily="Roboto-Regular"/>
     <Label Grid.Row="3" HorizontalOptions="Start" VerticalOptions="Start" Text="Valid till : 04/25" FontSize="12" TextColor="#bdc9f5" Padding="0,10,0,0" FontFamily="Roboto-Regular"/>
     <Label Grid.Row="4" HorizontalOptions="Start" VerticalOptions="End" Text="Rick Sanchez" Padding="0,10,0,0" FontSize="16" TextColor="White" FontFamily="Roboto-Medium"/>
    </Grid>
   </Grid>

  </cards:SfCardView>

  <cards:SfCardView x:Name="firstCard" BorderColor="#5716B0" CornerRadius="20" Padding="-1,-1,0,0">
   <Grid>
    <Image Source="buildinglandscape.jpg" Aspect="AspectFill"/>
    <Grid Padding="20" Background="#5716B0" Opacity="0.9">
     <Grid.RowDefinitions>
      <RowDefinition Height= "Auto"/>
      <RowDefinition Height= "Auto"/>
      <RowDefinition Height= "Auto"/>
      <RowDefinition Height= "Auto"/>
      <RowDefinition Height= "Auto"/>
     </Grid.RowDefinitions>
     <Grid Grid.Row= "1">
      <Grid.ColumnDefinitions>
       <ColumnDefinition Width= "60"/>
       <ColumnDefinition Width="*"/>
      </Grid.ColumnDefinitions>
      <Image Source="cardchip.png" WidthRequest="40" HeightRequest="50" HorizontalOptions="Start" VerticalOptions="Start" Margin="0,20,0,0"/>
      <Label Grid.Column="1" Text="Synchrony Financial" HorizontalOptions="End" VerticalOptions="Start" TextColor="White" FontSize="16" FontFamily="Roboto-Medium"/>
     </Grid>
     <Label Grid.Row="2" HorizontalOptions="Start" VerticalOptions="Start" Text=" 5 9 0 1 8 0 2 3 7 1 9 2 3 3 0 4" TextColor="White" FontFamily="Roboto-Regular"/>
     <Label Grid.Row="3" HorizontalOptions="Start" VerticalOptions="Start" Text="Valid till : 06/26" FontSize="12" Padding="0,10,0,0" TextColor="#b88ef1" FontFamily="Roboto-Regular"/>
     <Label Grid.Row="4" HorizontalOptions="Start" VerticalOptions="End" Text="Rick Sanchez" Padding="0,10,0,0" FontSize="16" TextColor="White" FontFamily="Roboto-Medium"/>
    </Grid>
   </Grid>
  </cards:SfCardView>
 </cards:SfCardLayout>
</Grid>
```

After executing the previous code examples, you’ll get an output like in the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/Integrating-the-Cards-Control-in-.NET-MAUI-App.png" alt="Integrating the Cards Control in .NET MAUI App" style="width:100%">

  <figcaption>Integrating the Cards Control in .NET MAUI App</figcaption>

</figure>

## GitHub references

For more details, refer to the [.NET MAUI Cards control demo on GitHub.](https://github.com/syncfusion/maui-demos/tree/master/MAUI/Cards/SampleBrowser.Maui.Cards ".NET MAUI Cards control GitHub demo")

## Conclusion

Thanks for reading! In this blog, I explored the features of the new Syncfusion [.NET MAUI Cards Control](https://www.syncfusion.com/maui-controls/maui-cards ".NET MAUI Cards Control") that rolled out in the [2023 Volume 4 release](https://www.syncfusion.com/forums/185916/essential-studio-2023-volume-4-main-release-v24-1-41-is-available-for-download "Essential Studio 2023 Volume 4"). You can learn more about the latest .NET MAUI advancements on our [Release Notes](https://help.syncfusion.com/common/essential-studio/release-notes/v23.1.36 "Essential Studio Release Notes") and [What’s New](https://www.syncfusion.com/products/whatsnew "Essential Studio What’s New") pages. Try them out and leave your feedback in the comments section below!

Download [Essential Studio for .NET MAUI](https://www.syncfusion.com/downloads/maui "Get free evaluation of Essential Studio for .NET MAUI") to start evaluating them immediately.

If you have any questions, contact us through our [support forum](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/ "Syncfusion Feedback Portal"). We are always happy to help you!

## Related blogs

- [Syncfusion Essential Studio 2023 Volume 4 Is Here!](https://www.syncfusion.com/blogs/post/essential-studio-2023-volume-4.aspx "Blog: Syncfusion Essential Studio 2023 Volume 4 Is Here!")
- [Introducing the New .NET MAUI Sunburst Chart Control](https://www.syncfusion.com/blogs/post/dotnet-maui-sunburst-chart.aspx "Blog: Introducing the New .NET MAUI Sunburst Chart Control")
- [Introducing the New .NET MAUI Switch Control](https://www.syncfusion.com/blogs/post/dotnet-maui-switch-control.aspx "Blog: Introducing the New .NET MAUI Switch Control")
- [What’s New in 2023 Volume 4: .NET MAUI Charts](https://www.syncfusion.com/blogs/post/dotnet-maui-charts-2023-volume-4.aspx "Blog: What’s New in 2023 Volume 4: .NET MAUI Charts")