Create Stunning Gym Subscription UI in .NET MAUI

Jollen Moyani - Sep 30 - - Dev Community

TL;DR: Learn how to create a modern gym subscription UI using .NET MAUI. This step-by-step guide shows you how to set up layouts with grids, add eye-catching gradients, and use the responsive Syncfusion .NET MAUI Button control.

Practicing is the best way to continue learning, improving, and strengthening our skills. In this article, we will develop a gym subscription UI step by step. Before converting the design to code, let’s analyze the parts and divide them into blocks to speed up development.

We’ll break down the creation of the UI into three steps, as illustrated by the following image.

Replicating gym subscription UI in .NET MAUI

Replicating gym subscription UI in .NET MAUI

Through the course of the process, we will learn to use:

  • LinearGradientBrush: To apply a gradient to the main image, we will use a native .NET MAUI control called LinearGradientBrush.
  • Syncfusion.NET MAUI Button: As you can see in the reference UI, it has two buttons. To design those buttons, we’ll use Syncfusion .NET MAUI Button control.

Main layout

The first step is to establish the main layout that will contain the entire design of our UI. Layouts help organize and group user interface controls in the app.

For this example, we will use the MainPage.xaml page included in the default project created by .NET MAUI. We will add a DataGrid layout with two columns and five rows.

Refer to the following code example.

<!-- Main layout-->
<Grid RowDefinitions="*,Auto,Auto,Auto,Auto" RowSpacing="15">
   <!-- Step 1: Add all the elements contained in the Background image block --> 
   <!-- Step 2: Add all the elements contained in the Gradient block-->                          
   <!-- Step 3: Add all the elements contained in the Description block-->           
   <!-- Step 4: Add all the elements contained in the Buttons block -->
</Grid>
Enter fullscreen mode Exit fullscreen mode

Step 1: Adding a background image

In this first step, we will learn how to add a background image. Please place all the code for this step exactly in the comment of the previous code block that says “<!– Step 1: Add all the elements contained in the Background image block –>”.

<!-- Background image -->
<Image Grid.Row="0" Grid.RowSpan="4" Source="alice" Aspect="AspectFill"/>
<-- Add the following code block here -->
Enter fullscreen mode Exit fullscreen mode

To display the complete background image, you only need this line! In the above code, the key properties that allow us to show the entire event on screen are:

  • Grid.RowSpan=”4″ : This spans all existing rows within our primary DataGrid.
  • Aspect=”AspectFill” : This allows the image to fill the allocated screen space. There are different values that let us adjust our image’s appearance. For more details, refer to the article on Image Scaling in .NET MAUI.

And finally, your code should give you a result like the following image.

Adding background image in the gym subscription UI

Adding background image in the gym subscription UI

Step 2: Adding gradient effect

The example we’re replicating includes a black gradient to highlight the readings and buttons on the image. To achieve this, we’ll add a VerticalStackLayout and use a LinearGradientBrush as its background. The gradient will start with a transparent color and transition to black. For more details, refer to the Linear gradient brushes.

Please add the following code exactly in place of the previous code that says “ <!– Step 2: Add all the elements contained in the Gradient block–> “.

<VerticalStackLayout Grid.Row="0" Grid.RowSpan="4">
  <VerticalStackLayout.Background>
    <LinearGradientBrush EndPoint="0,1">
       <GradientStop Color="Transparent" Offset="0.6"/>
       <GradientStop Color="Black" Offset="0.7"/>
    </LinearGradientBrush>
  </VerticalStackLayout.Background>
</VerticalStackLayout>
<-- Add the following code block here -->
Enter fullscreen mode Exit fullscreen mode

Finally, your code will produce a result similar to the following image. Don’t worry if you only see the gradient without the description above it. In the next step, you’ll learn how this setup allows the background image to remain visible while keeping the text readable.

Adding gradient effect in gym subscription UI in .NET MAUI

Adding gradient effect in gym subscription UI in .NET MAUI

Step 3: Adding description

In this section, we’ve some special text to add, and you will learn how to handle it. Note that in the description, there are two pieces of text with different styles. You have two options:

  • Adding two labels, each with its respective characteristics (styles).
  • Adding a single label and apply the corresponding styles to each part of the text.

Here, we’ll choose the second option so you can learn how to use FormattedText, which helps us optimize and save controls while achieving the same objective.

Please add the following code exactly in place of the previous code that says “ <!– Step 3: Add all the elements contained in the Description block –> “.

<Label VerticalOptions="End" Grid.Row="0" FontSize="25" Margin="20,0">
 <Label.FormattedText>
   <FormattedString>
     <Span Text="Create your account&#10;" TextColor="White"/>
     <Span Text="and unlock your potential anytime, anywhere." TextColor="#a8a7a5"/>
   </FormattedString>
  </Label.FormattedText>
 </Label>
 <-- Add the following code block here -->
Enter fullscreen mode Exit fullscreen mode

Tip: we use the &#10 ; combination to make a line break.

And finally, you will get a result like the following image.

Adding description in the gym subscription UI in .NET MAUI

Adding description in the gym subscription UI in .NET MAUI

Step 4: Designing the UI elements

Finally, let’s add the remaining part to complete our UI! It consists of three elements:

  • A green button to create an account.
  • A white button for login.
  • Text with highlighted terms and conditions.

Please add the following code examples exactly in place of the previous code that says “<!– Step 4: Add all the elements contained in the Buttons block –>”.

Buttons: Green and white

Let’s start with the buttons. We’ll use the Syncfusion .NET MAUI Button control.

1.First, add the Syncfusion.Maui.Buttons NuGet package. Syncfusion.Maui.Buttons NuGet package
2.Navigate to your MauiProgram.cs file and register the handler. To do so, go to the CreateMauiApp method and add the following line of code after the line “.UseMauiApp()”:

.ConfigureSyncfusionCore();
Enter fullscreen mode Exit fullscreen mode

Note: Don’t forget to add the Syncfusion.Maui.Core.Hosting namespace.

3.Now, in the Xaml file, add the following namespace:

xmlns:buttons="clr-namespace:Syncfusion.Maui.Buttons;assembly=Syncfusion.Maui.Buttons
Enter fullscreen mode Exit fullscreen mode

4.To add the Syncfusion .NET MAUI Button control to the app, use the alias “buttons” (from the namespace we added previously) and call the SfButton. Its properties are similar to the native button, making it easy to work with this control. The main difference is that while the native button uses the backgroundColor property for a colored background, this button uses the background property.

<buttons:SfButton Grid.Row="1" Text="Create an account"
                            FontAttributes="Bold"
                            TextColor="Black"
                            Background="#bfff0c"
                            Margin="20,0"
                            CornerRadius="20"
                            VerticalOptions="End"/>

<buttons:SfButton Grid.Row="2" Text="Sign In"
                            FontAttributes="Bold"
                            TextColor="Black"
                            Background="White"
                            Margin="20,0"
                            CornerRadius="20"
                            VerticalOptions="End"/>  
<-- Add the following code block here -->
Enter fullscreen mode Exit fullscreen mode

Text with highlighted terms and conditions

And finally, let’s add the highlighted text with terms and conditions.

<Label Grid.Row="3" HorizontalTextAlignment="Center" Margin="0,0,0,30">
 <Label.FormattedText>
   <FormattedString>
     <Span Text="By signing up you'll be accepted&#10;" TextColor="White"/>
     <Span Text="our terms and policies." TextDecorations="Underline" TextColor="White"/>
   </FormattedString>
 </Label.FormattedText>
</Label>
Enter fullscreen mode Exit fullscreen mode

Once you apply the previously explained code, you should see a visual result like the following one.

Replicating gym subscription UI in .NET MAUI

Replicating gym subscription UI in .NET MAUI

GitHub reference

To see the complete code structure of this project, go to our Gym subscription UI in the .NET MAUI demo on GitHub.

Conclusion

Thanks for reading! Replicating a gym subscription UI in .NET MAUI is not only a great exercise for honing your UI development skills, but also an opportunity to delve deep into the capabilities of .NET MAUI, XAML, and various controls like the LinearGradientBrush and Syncfusion’s Button control. By breaking down the design into manageable blocks and tackling each step with precision, we’ve demonstrated how to transform a static design into a dynamic and user-friendly interface.

Remember, the key to mastering .NET MAUI lies in consistent practice and a willingness to experiment with different UI elements. Happy coding, and let your creativity lead the way to innovative and engaging user interfaces!

Build powerful cross-platform apps with Syncfusion’s.NET MAUI controls. From data visualization to file processing, get everything you need for responsive, high-performance app development!

The existing customers can download the latest version of Essential Studio from the License and Downloads page. If you are new, try our 30-day free trial to explore our incredible features.

If you need assistance, please do not hesitate to contact us via our support forum, support portal, or feedback portal. We are always eager to help you!

Related blogs

Image
Building Resilient GenAI pipeline with Open-source AI Gateway

portkey, ai, genai, aiops
Image
Horizontal privilege escalation

webdev, security
Image
Data Analysis and Visualization in Python 📊🐍
Image
https://www.facebook.com/share/p/p5KDPx91D67LXC6g/
Image
The Future of AI Voice Assistants and Sista AI: A Seamless Integration

ai, chatgpt, voicebot, voiceui
Image
What is Flux?

crypto, asic, bitcoin, cryptocurrency
Image
15 Bifold Door Replacement Benefits Everyone Must Be Able To
Image
🚀 Introducing LlamaPReview - Free AI PR Review Assistant That Actually Understand Your Repo

ai, productivity, github, opensource
Image
Creating a Custom Theme in Magento: A Step-by-Step Guide

magneto, ecommerce, uk, tutorial
Image
Introducing WasteBin: A Geo-Based Community for Sustainable Waste Management

devchallenge, wixstudiochallenge, webdev, javascript
Image
Advanced Paradigms in Data Ingestion: Integrating Big Data Ecosystems with Linux, SQL

sql
Image
Hospital Engineering GmbH
Image
10 Quick Tips For Key Lost
Image
10 Wrong Answers To Common Replace Bifold Doors Questions: Do You Know The Right Ones?
Image
The Most Hilarious Complaints We've Received About Repair Bifold Door Bottom Pivot
Image
5 Lost Car Key Leçons From The Pros
Image
How Key Lost Became The Hottest Trend Of 2023
Image
10 Healthy How Much Is A Spare Car Key Habits
Image
Essential Cybersecurity Tools Every Security Engineer Should Know
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .