Let’s make a fun Christmas-themed .NET MAUI app UI!
Happy Holidays! 🎄✨
The Christmas season is a special time to enjoy with our loved ones, full of health, love and joy. As we celebrate, it’s also an opportunity to keep our skills sharp and continue learning practices that will benefit us all in the new year.
In this article, we’ll take on a fun challenge: Replicating a Christmas UI inspired by a Dribbble design. 🎨 We will explore native .NET MAUI controls and even incorporate some from the Progress Telerik UI for .NET MAUI library in a super easy and fast way! 🚀
Before diving into the code, here’s a piece of advice I always give: Take a moment to analyze the task at hand. Thoroughly understanding the challenge will help you identify the best approaches, saving time and effort during development.
Now, let’s get started!
Our first step will be to analyze the user interface we are going to replicate. The design consists of three screens, each divided into one or more steps that are numbered and highlighted with different colors to make them easier to identify.
We will explain each one of these steps along with the corresponding code snippets. Now, let’s take a look at the structural division in the following image:
Now that we know the order in which to start coding, let’s dive in! 😎
Step one includes all the elements that complement the Intro page, basically it is an image, with a rounded button and two texts. All the code we’ll add here will be placed in a file called IntroPage.xaml.cs.
To begin, it’s necessary to select a main layout, which will contain all the UI components. In this case, due to the flexibility it provides for replicating this UI, as well as its performance, we’ll select the Grid layout.
Set the BackgroundColor of the ContentPage to #275653. (This is the greenish color you see on the first page.) For the main layout, we’ll use a Grid divided into three rows, with a RowSpacing of 40 to provide better separation between them.
<Grid RowDefinitions="*,Auto,*" VerticalOptions="Center" Padding="25" RowSpacing="40">
<!-- Add all the code from step one here -->
</Grid>
Next, we’ll add an image of Santa Claus along with two additional text labels.
<Image Grid.Row="0" Source="santa" Aspect="AspectFit" HeightRequest="400"/>
<Label Grid.Row="1" FontSize="40" Margin="0,20,0,0">
<Label.FormattedText>
<FormattedString>
<Span Text="Gift from " TextColor="White"/>
<Span Text="Santa" FontAttributes="Bold" TextColor="White"/>
</FormattedString>
</Label.FormattedText>
</Label>
<Label Grid.Row="2" FontSize="20" Text="Buy a gift with delivery by Santa himself." TextColor="White"/>
<-- Add the next code block here -→
⚠️ Note that for the “Gift from Santa” text, we used FormattedText. I chose this approach to show you an optimal and different way of creating the same label with multiple styles! I also used which is another tip that allows you to insert a line break in your text.
To finish this first step, we’ll add a circular button positioned on the right side, with only a part of it visible. There are two key points to consider here:
Achieving the circular shape: Just set both the HeightRequest and WidthRequest properties to the same value, then set the CornerRadius property to half of that value. (For example, set the HeightRequest and WidthRequest to 100, and the CornerRadius to 50.) This will give you a perfectly circular button!
Creating the illusion that the button is split in half: This is easily done by adjusting the margins. Set Margin="0,50,-50,0" where the -50 margin on the right side hides part of the button, giving the appearance that it’s only halfway visible.
In code, it will look like this:
<Button Grid.Row="2" HorizontalOptions="End" BackgroundColor="White" HeightRequest="100" WidthRequest="100" CornerRadius="50" Padding="0" ImageSource="arrow" Margin="0,50,-50,0" />
The result of our first step will look like this:
✍️ For Steps 2 and 3, let’s create a file named GiftListPage.xaml.cs.
For the header block, we’ll start by adding the components required by our UI: the hamburger menu icon on the left, the main text in the center and the cart icon on the right.
<Grid ColumnDefinitions="*,auto,*" RowDefinitions="Auto,Auto">
<Image Grid.Column="0" Grid.Row="0" Source="hamburger" HorizontalOptions="Start"/>
<Label Grid.Column="1" Grid.Row="0" Text="Gifts" FontAttributes="Bold"/>
<Image Grid.Column="2" Grid.Row="0" Source="shoppingcart" HorizontalOptions="End"/>
<!-- Add the code that will be explained in the following paragraph here. –>
</Grid>
To complete the header, we just need to add a rounded container with the following elements:
Since we’ll be using the Telerik Button, it’s important to prepare the project to use this control. The same installation process will also work for other Telerik controls for .NET MAUI.
Keep in mind that the installation steps only need to be done once, so you don’t need to repeat them for each control. To start, please follow these steps:
.UseTelerik() right after .UseMauiApp<App>(), like this:.UseMauiApp<App>()
.UseTelerik();
⚠️ For a more detailed installation guide, I recommend checking out the official documentation: First Steps with Telerik UI for .NET MAUI in Visual Studio.
We are now ready to add both the Telerik Button and the other controls:
<Border Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="3" BackgroundColor="#e6efef"
Stroke="Transparent"
StrokeShape="RoundRectangle 20,20,20,20"
HeightRequest="150"
Margin="0,20,0,0"
Padding="20">
<VerticalStackLayout Spacing="8">
<Label Text="Do you need to use" />
<Label Text="Elves help?" FontAttributes="Bold" />
<telerik:RadButton x:Name="button" Text="Try it now" TextColor="White" BackgroundColor="#c42f21" FontAttributes="Bold" CornerRadius="15" HorizontalOptions="Start" WidthRequest="80" HeightRequest="35" Padding="0" FontSize="11" Margin="0,15,0,0"/>
</VerticalStackLayout>
</Border>
✍️ For the rounded edges, I used the Border visual element. It’s incredibly useful and allows you to customize each edge individually! If you’d like to learn more about the Border, I recommend checking out this material.
The visual result of our step will look like this:
To develop this, we’ll divide it into two parts:
Let’s begin by adding the title of the list and a .NET MAUI CollectionView, which will allow us to display a list of items—in this case, the Christmas categories. Within the CollectionView, I’ll also include the layout that will contain all the list elements.
⚠️ It’s important to note that since Progress Telerik has already been set up in our project, there’s no need to repeat the process. You can now simply add the controls you need.
Let’s add the RadCollectionView:
<Label Text="Categories" FontAttributes="Bold" FontSize="16" Margin="0,20"/>
<telerik:RadCollectionView x:Name="collectionView"
ItemsSource="{Binding categories}"
DisplayMemberPath="Categories">
<telerik:RadCollectionView.ItemTemplate>
<DataTemplate>
<Border Grid.Column="0" Grid.ColumnSpan="2" BackgroundColor="#f5f7f7"
Stroke="Transparent"
StrokeShape="RoundRectangle 20,20,20,20"
HeightRequest="100"
Margin="0,5"
Padding="10">
<Grid RowDefinitions="Auto,Auto" ColumnDefinitions="Auto,*,Auto" RowSpacing="5" Padding="10" VerticalOptions="Center">
<!-- Add all the code here for the elements of this step –>
</Grid>
</Border>
</DataTemplate>
</telerik:RadCollectionView.ItemTemplate>
</telerik:RadCollectionView>
The card we’ll create will have rounded edges, an image, two text elements and an arrow icon.
<Image Grid.Column="0" Grid.Row="0" Source="{Binding Picture}" HeightRequest="70" WidthRequest="70" Grid.RowSpan="2" Margin="0,0,10,0"/>
<Label Grid.Column="1" Grid.Row="0" Text="{Binding Description}" FontAttributes="Bold" VerticalTextAlignment="End"/>
<Label Grid.Column="1" Grid.Row="1" Text="{Binding Count}" TextColor="Silver" VerticalTextAlignment="Start"/>
<Image Grid.Column="2" Grid.Row="0" Source="smallarrow" HeightRequest="15" WidthRequest="15" Grid.RowSpan="2" />
The visual result of our step will look like this:
Next, we will create the third page, which we will name GiftDetailsPage.xaml.cs. This page will include Steps 4 and 5, featuring a “floating” button effect, where the buttons in Step 5 stay fixed on top of the content and remain stationary even when scrolling. While the effect originates in Step 5, from this point forward, we need to set up the structure that will enable us to build everything.
We will achieve this “floating” effect by adding the following elements:
The code will look like this:
<Grid RowDefinitions="*">
<ScrollView Grid.Row="0">
<Grid ColumnDefinitions="*,*" RowDefinitions="Auto,Auto,Auto,Auto,Auto" Margin="10" RowSpacing="5">
<!--Add the step number 4 here-->
<!--Add the step number 5 here-->
</Grid>
</ScrollView>
<!--Add Floating Buttons form the step number 5 here -->
</Grid>
Next, add the image with rounded borders from Step 4. To round the edges, we’ll use the Borders control, just like in the previous steps.
<Border Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" BackgroundColor="#f5f7f7"
Stroke="Transparent"
Margin="0,0,0,20"
StrokeShape="RoundRectangle 20,20,20,20"
HeightRequest="380">
<Image Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Source="cake" HorizontalOptions="Fill" Aspect="Fill"/>
</Border>
The visuals result of our step will look like this:
Let’s move on by adding the elements for the “New” title, the product name and the price, structured as follows:
<!-- New title-->
<Label Grid.Row="1" Grid.Column="0" TextColor="#275653" FontSize="15" Text="New" Padding="15,0" FontAttributes="Bold"/>
<!-- Product name-->
<Label Grid.Row="1" Grid.Column="1" TextColor="#872017" FontSize="20" Text="$2.99" FontAttributes="Bold" HorizontalTextAlignment="End" Padding="15,0"/>
<!-- Price-->
<Label Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" FontSize="25" Padding="15,0">
<Label.FormattedText>
<FormattedString>
<Span Text="Christmas#10;" />
<Span Text="chocolate muffins" FontAttributes="Bold"/>
</FormattedString>
</Label.FormattedText>
</Label>
<Label Grid.Row="3" Grid.Column="0" TextColor="#275653" FontSize="15" Text="Description" Padding="15,0" FontAttributes="Bold" Margin="0,20,0,0"/>
<Label Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="2" TextColor="#99a5a5" Padding="15,0" Text="Chocolate muffins are an ideal gift for someone close to you, especially for chocolate lovers. These delightful treats are beautifully wrapped and adorned with gingerbread cookies, adding a festive touch to their presentation. Their rich chocolatey flavor and soft, moist texture make them perfect for any special moment, whether it's a holiday celebration, a cozy family gathering, or simply to show someone you care. Not only do they make a thoughtful gift, but they also pair wonderfully with a warm cup of coffee, hot cocoa, or tea, making them the perfect companion for those quiet, indulgent moments. Each muffin is crafted with care to bring a smile to the faces of your loved ones, reminding them of the joy and comfort that the holiday season brings.. Ingredients:Made with the finest baking powder, sugar, butter milk, water, chocolate chips, and natural unsweetened cocoa powder."/>
Finally, we’ve reached the floating buttons! Now that we have a well-designed structure in place, navigate to the grid section where it says: <!-- Add Floating Buttons from Step 5 here -> and insert the following code:
<!--Floating Buttons-->
<Grid ColumnDefinitions="Auto,*" Grid.Row="0" HorizontalOptions="Fill" BackgroundColor="White" VerticalOptions="End" Padding="20,5,20,10" >
<Button Grid.Column="0" FontAttributes="Bold" ImageSource="heart" BackgroundColor="#e6efef" WidthRequest="60" CornerRadius="20" VerticalOptions="End" HeightRequest="45" />
<Button Grid.Column="1" Text="Buy now" FontAttributes="Bold" BackgroundColor="#c42f21" CornerRadius="20" TextColor="White" HeightRequest="45" Margin="15,0,0,0"/>
</Grid>
✨ And voilà! 🎉 Your screen should now look like the one shown below:
That’s it! 🤩 In just a few simple and quick steps, you now have three complete screens for an app in .NET MAUI, using a mix of native elements and Telerik controls! I hope this article has been incredibly helpful and adds value to your development journey. 🚀
Get Started with UI for .NET MAUI
Thanks for reading this article! 💚💕 See you next time! 🙋♀️
Leomaris Reyes is a Software Engineer from the Dominican Republic, with more than 5 years of experience. A Xamarin Certified Mobile Developer, she is also the founder of Stemelle, an entity that works with software developers, training and mentoring with a main goal of including women in Tech. Leomaris really loves learning new things! 💚💕 You can follow her: Twitter, LinkedIn , AskXammy and Medium.