.Net MAUI - Card Views Using Border Control

In this tutorial series, we will see how to create a CardView in .Net MAUI using Border control. In .NET Maui provided Microsoft.Maui.Graphics library which provides us a consistent UI drawing API based on native graphics engines, thus making it easier for us to add borders, corners customizations, and shadows for most of the controls and layout contained in .NET MAUI. The new Border Control allows us to add Borders to a single element as content (can be both a control and a Layout). This brings us a very flexible behavior to control of each corner: top-left, top-right, bottom-left, bottom-right, with our user interface, some of those cases can be adding the border to a button and rounding the upper left and lower right corners.

Project Setup

Launch Visual Studio 2022, and in the start, window click Create a new project to create a new project.

In the Create a new project window, select MAUI in the All project types drop-down, select the .NET MAUI App template, and click the Next button:

In the configure your new project window, name your project, choose a suitable location for it, and click the Next button:

In the Additional information window, click the Create button:

Once the project is created, we can able to see the Android, iOS, Windows and other running options in the toolbar. Press the emulator or run button to build and run the app

Implementation

Open the MainPage.xaml file and add the following border control.

<Border  
	Stroke="Black"
	Background="LightGray"
	StrokeThickness="2"
	Padding="30,20"
	HorizontalOptions="Center">
	<Label TextColor="Black"
		   Text="Welcome to.NET MAUI"                
		   FontSize="15"
		   FontAttributes="Bold" />
</Border>

Border Properties

Stroke	Sets the color that the border will take on.
StrokeThickness	It’s the thickness (width) of the Border.
StrokeDashOffset	It’s the distance within the dash pattern.
StrokeDashArray	Collection of values, which is responsible for specifying the Dash pattern and the spaces used for the border to implement.
StrokeLineCap	Defines the start and end stroke that the border will have. For the stroke shape, it receives the following values: Flat, Round, and Square.
StrokeMiterLimit	Limit the ratio of the miter length to half of the stroke thickness.

We also have the StrokeShape property, which allows modifying the shape of the Stroke based on a Shape (the one you want), in addition to this Shape you can modify the edges as you need.

<Border  
	Stroke="Black"
	Background="LightGray"
	StrokeThickness="2"
	Padding="30,20"
	HorizontalOptions="Center">
	<Border.StrokeShape>
		<RoundRectangle CornerRadius="0,20,20,0"/>
	</Border.StrokeShape>
	<Label TextColor="Black"
		   Text="Welcome to.NET MAUI"                
		   FontSize="15"
		   FontAttributes="Bold" />
</Border>

We also add shadow property to apply in CardView.

<Border  
	Stroke="Black"
	Background="LightGray"
	StrokeThickness="2"
	Padding="30,20"
	HorizontalOptions="Center">
	<Border.StrokeShape>
		<RoundRectangle CornerRadius="0,20,20,0"/>
	</Border.StrokeShape>
	<Border.Shadow>
		<Shadow Brush="Black"
				Offset="10,10"
				Radius="20"
				Opacity="0.8" />
	</Border.Shadow>
	<Label TextColor="Black"
		   Text="Welcome to.NET MAUI"                
		   FontSize="15"
		   FontAttributes="Bold" />
</Border>

The final output will be like the one below when we come all the above properties come together.

Full Code

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiTutorial3.MainPage">

    <ScrollView>
        <VerticalStackLayout 
            Spacing="25" 
            Padding="30,0" 
            VerticalOptions="Center">

            <Image
                Source="dotnet_bot.png"
                SemanticProperties.Description="Cute dot net bot waving hi to you!"
                HeightRequest="200"
                HorizontalOptions="Center" >
                <Image.Shadow>
                    <Shadow Brush="Black"
                            Offset="10,10"
                            Radius="45"
                            Opacity="0.8" />
                </Image.Shadow>
            </Image>

            <Border  
                Stroke="Black"
                Background="LightGray"
                StrokeThickness="2"
                Padding="30,20"
                HorizontalOptions="Center">
                <Border.StrokeShape>
                    <RoundRectangle CornerRadius="0,20,20,0"/>
                </Border.StrokeShape>
                <Border.Shadow>
                    <Shadow Brush="Black"
                            Offset="10,10"
                            Radius="20"
                            Opacity="0.8" />
                </Border.Shadow>
                <Label TextColor="Black"
                       Text="Welcome to.NET MAUI"                
                       FontSize="15"
                       FontAttributes="Bold" />
            </Border>

        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

Download Code

You can download the code from GitHub. If you have any doubts, feel free to post a comment. If you liked this article, and it is useful to you, do like, share the article & star the repository on GitHub.