Posted onSep 14, 2022 • Originally published atsyncfusion.com onSep 14, 2022

Replicating an Immersive UI in .NET MAUI

#mobile #csharp #dotnet #maui

Howdy! In this blog, we’ll be replicating an immersive UI in .NET MAUI based on thisDribbble design.

We are going to break down this UI as shown in the following screenshot to implement it step by step.

We will make some modifications to the original UI to get the most out of the controls with which we will be working.

Before starting, let’s have a glance at what will learn in this blog:

Render images with rounded borders.
Use the Syncfusion.NET MAUI Avatar ViewandBadge View controls to render a profile image with a badge.

Let’s start the coding!

Main layout

First, let’s design the main layout of the UI.

Inside theScrollView , we will use a new layout that .NET MAUI provides us, theVerticalStackLayout. It helps us organize the controls on our screen vertically.

Refer to the following code example.

<ScrollViewVerticalScrollBarVisibility="Never"><!--Main layout--><VerticalStackLayoutMargin="20,0"VerticalOptions="Center"><!-- Add all your UI content here --></VerticalStackLayout></ScrollView>

Step 1: Main information

To understand the code clearly, we have divided the implementation into several steps.

Rounding the edges of an image

Images with rounded borders provide a more modern and fresh look to our UI. To achieve this, please follow these steps:

Add a frame.

First, let’s add a frame and customize the following properties:

Padding: Set the padding value to 0. This will eliminate the blank spaces and allow our image to occupy the entire space of the frame.
IsClippedToBounds: Set this property with the valueTrue. This indicates that the content will be clipped beyond its bounds.
CornerRadius: This represents the value that the edges will take to give the rounded corner effect.

After adding the frame, add the image. Refer to the following code example.

<!-- Main home image--><FramePadding="0"IsClippedToBounds="True"HasShadow="False"CornerRadius="20"Margin="10,25,10,0"><ImageSource="mainhome.png"Aspect="AspectFill"HeightRequest="250"/></Frame><!-- You must write here what is explained in the next code block -->

Add profile image with a badge

To design the profile image, we are going to use theSyncfusion .NET MAUI Avatar View andBadge View controls:

Add theSyncfusion.Maui.Core NuGet package.
Go to theMauiProgram.cs file and register the handler for Syncfusion core by going to theCreateMauiApp method and adding the.ConfigureSyncfusionCore() method just below the.UseMauiApp() line *. *
Now, add theSyncfusion.Maui.Core namespace in your XAML page.

            xmlns:sfControl="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core"

Then, add the Syncfusion .NET MAUI Avatar View and Badge View controls inside a grid to make it easier to organize the controls.

Refer to the following code.

<!--Profile information--><GridRowDefinitions="Auto,Auto,Auto"ColumnDefinitions="Auto,*,Auto"Padding="25,30"><!-- Avatar & Badge view--><sfControl:SfBadgeViewGrid.Row="0"Grid.Column="0"Grid.RowSpan="2"BadgeText="1"HeightRequest="70"WidthRequest="60"HorizontalOptions="Center"VerticalOptions="Center"><sfControl:SfBadgeView.Content><sfControl:SfAvatarViewContentType="Default"VerticalOptions="Center"HorizontalOptions="Center"BackgroundColor="LightBlue"BorderColor="Transparent"WidthRequest="50"HeightRequest="50"CornerRadius="25"/></sfControl:SfBadgeView.Content><sfControl:SfBadgeView.BadgeSettings><sfControl:BadgeSettingsType="Success"Position="BottomRight"/></sfControl:SfBadgeView.BadgeSettings></sfControl:SfBadgeView><!-- Add the basic information here: user's name, status, and phone button information here. →</Grid><!-- You must write here what is explained in the next code block -->

Add name, status, and call button.

Now, add the basic user information: name, status, and call button.

<!-- Basic information: user's name, status, and phone button--><LabelGrid.Row="0"Grid.Column="1"Text="Mark Won"FontAttributes="Bold"TextColor="Black"Padding="20,0,0,0"VerticalTextAlignment="End"FontSize="15"/><LabelGrid.Row="1"Grid.Column="1"Text="Available"FontAttributes="Bold"TextColor="Silver"Padding="20,0,0,0"VerticalTextAlignment="Start"FontSize="13"/><ButtonGrid.Row="0"Grid.Column="2"Grid.RowSpan="2"ImageSource="phone"CornerRadius="25"HeightRequest="50"WidthRequest="50"BackgroundColor="White"BorderColor="Silver"BorderWidth="1"VerticalOptions="Center"/>

Step 2: Details

First, let’s build the frame in which all the information of this block must be added.

<!-- General details--><FrameCornerRadius="10"BorderColor="Silver"Padding="0,20,0,0"HasShadow="False"><GridRowDefinitions="Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto"ColumnDefinitions="Auto,*,Auto"VerticalOptions="Center"HorizontalOptions="FillAndExpand"Padding="25,0"><!-- You must write here what is explained in the details block →</Grid></Frame><!-- You must write here what is explained in the next code block -->

Then, add a set of information inside the previously added frame. For better understanding, we divided the explanation into sub-blocks.

Note: The names of these sub-blocks will be the same as those contained in the design line.

Pre-approved

We add two labels and aBoxView to achieve a dividing line. We can also achieve this design using theline shape feature in .NET MAUI.

Refer to the following code example.

<!--Pre-approved--><LabelGrid.Row="0"Grid.Column="0"Text="Pre-approved"FontAttributes="Bold"TextColor="Black"FontSize="12"/><LabelGrid.Row="0"Grid.Column="2"Text="Yes"TextColor="White"BackgroundColor="#00a77c"HorizontalOptions="End"FontSize="10"Padding="9,4"/><BoxViewGrid.Row="1"Grid.Column="0"Grid.ColumnSpan="3"HeightRequest="1"Color="Silver"Margin="-25,15"/><!-- You must write here what is explained in the next code block -->

Plan to buy

This information contains the same elements as the previous code block, except that this time, we will also start working with theFormattedText.

Refer to the following code to add different styles to the same label. This helps avoid declaring different labels.

<!--Plan to buy--><LabelGrid.Row="2"Grid.Column="0"Text="Plan to buy"FontAttributes="Bold"TextColor="Black"FontSize="12"/><LabelGrid.Row="2"Grid.Column="1"HorizontalOptions="End"TranslationX="25"><Label.FormattedText><FormattedString><SpanText="Opendoor"TextColor="Black"FontAttributes="Bold"FontSize="13"/><SpanText=" Home Loans"TextColor="Black"FontSize="11"/></FormattedString></Label.FormattedText></Label><ImageGrid.Row="2"Grid.Column="2"HorizontalOptions="End"VerticalOptions="Center"Source="arrow"/><BoxViewGrid.Row="3"Grid.Column="0"Grid.ColumnSpan="3"HeightRequest="1"Color="Silver"Margin="-25,15"/><!-- You must write here what is explained in the next code block -->

Down payment

Refer to the following code example to render the down payment details.

<!--Down payment--><LabelGrid.Row="4"Grid.Column="0"Text="Down payment"FontAttributes="Bold"TextColor="Black"FontSize="12"/><LabelGrid.Row="4"Grid.Column="1"Text="$100,000"TextColor="Silver"FontSize="12"HorizontalTextAlignment="End"TranslationX="20"/><LabelGrid.Row="4"Grid.Column="2"Text="20%"TextColor="Black"FontSize="12"HorizontalTextAlignment="End"/><BoxViewGrid.Row="5"Grid.Column="0"Grid.ColumnSpan="3"HeightRequest="1"Color="Silver"Margin="-25,15"/><!-- You must write here what is explained in the next code block -->

Offer Amount

Refer to the following code example to render the offer amount details.

<!--Offer amount--><LabelGrid.Row="6"Grid.Column="0"Text="Offer Amount"FontAttributes="Bold"TextColor="Black"FontSize="12"/><LabelGrid.Row="6"Grid.Column="2"Text="$500,000"TextColor="Black"FontSize="12"HorizontalOptions="End"/><!-- You must write here what is explained in the next code block -->

Black space

Now, use another frame to simulate the footer of the main frame. This must have a black background.

Using theMargin property, we recover the borders required by the previous controls so that this frame will completely cover the footer of the parent frame. We achieve that by adding negative values to the edges.

Here, we also use another new layout calledHorizontalStackLayout. It organizes the controls horizontally.

Refer to the following code example.

<!--Black space--><FrameGrid.Row="7"Grid.Column="0"Grid.ColumnSpan="3"HasShadow="False"BackgroundColor="Black"Margin="-25,20,-25,0"><HorizontalStackLayout><ButtonImageSource="mark"CornerRadius="25"HeightRequest="50"WidthRequest="50"BackgroundColor="White"VerticalOptions="Center"/><LabelText="Mark will go over this with you beforewe make our all-cas offer."VerticalTextAlignment="Center"FontSize="12"Padding="15,0,0,0"TextColor="White"/></HorizontalStackLayout></Frame>

Send for review button

Finally, add theSend offer for review button using the following code.

<ButtonText="Send offer for review"FontAttributes="Bold"TextColor="White"CornerRadius="10"HeightRequest="50"BackgroundColor="#1c85e8"Margin="0,20"/>

Step 3: Offer

To finish with the third step, create another page namedOfferPage.xaml. Add the following code to render the Offer details.

<GridRowDefinitions="*,Auto"><!-- Main image--><ImageGrid.Row="0"Source="mainhome.png"Aspect="AspectFill"Margin="0,-50,0,0"/><!-- General information--><FrameGrid.Row="1"CornerRadius="20"VerticalOptions="StartAndExpand"HasShadow="False"BackgroundColor="White"HeightRequest="400"Margin="0,-10,0,0"><GridRowDefinitions="*,*,*,*,*"><ImageGrid.Row="0"Source="key.png"WidthRequest="70"HeightRequest="70"Aspect="AspectFill"HorizontalOptions="Center"/><LabelGrid.Row="1"Text="Offer Accepted"FontSize="23"FontAttributes="Bold"TextColor="Black"HorizontalTextAlignment="Center"/><LabelGrid.Row="2"Text="Welcome home! We are wishing you all the best in your new home."FontSize="18"HorizontalTextAlignment="Center"TextColor="Silver"/><ButtonGrid.Row="3"Text="Schedule final walkthrough"FontAttributes="Bold"TextColor="White"CornerRadius="10"HeightRequest="55"BackgroundColor="#1c85e8"/><LabelGrid.Row="4"Text="SKIP"TextColor="Silver"HorizontalTextAlignment="Center"Padding="0,15,0,0"/></Grid></Frame></Grid>

And our UI is done! You can see the full design here.

GitHub reference

To see the complete code structure of this project, refer to ourImmersive UI in .NET MAUI demo on GitHub.

Conclusion

Thanks for reading! In this blog, we have seen how to replicate an immersive UI using Syncfusion.NET MAUI controls. Try out the steps discussed in this blog and leave your feedback in the comments below.

Syncfusion.NET MAUI controls were built from scratch using .NET MAUI, so they feel like framework controls. They are fine-tuned to work with a huge volume of data. Use them to build your elite, cross-platform mobile and desktop apps.

For current customers, the new Essential Studio version is available for download from theLicense and Downloads page. If you are not yet a Syncfusion customer, you can always download ourfree evaluation to see all our controls in action.

For questions, you can contact us through oursupport forum,support portal, orfeedback portal. We are always happy to assist you!

See you next time!