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.
Through the course of the process, we will learn to use:
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>
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 -->
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:
And finally, your code should give you a result like the following image.
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 --> 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.
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:
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 " TextColor="White"/>
<Span Text="and unlock your potential anytime, anywhere." TextColor="#a8a7a5"/>
</FormattedString>
</Label.FormattedText>
</Label>
<-- Add the following code block here --> Tip: we use the combination to make a line break.
And finally, you will get a result like the following image.
Finally, let’s add the remaining part to complete our UI! It consists of three elements:
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 –>”.
Let’s start with the buttons. We’ll use the Syncfusion .NET MAUI Button control.
.ConfigureSyncfusionCore();
Note: Don’t forget to add the Syncfusion.Maui.Core.Hosting namespace.
xmlns:buttons="clr-namespace:Syncfusion.Maui.Buttons;assembly=Syncfusion.Maui.Buttons
<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 --> 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 " TextColor="White"/>
<Span Text="our terms and policies." TextDecorations="Underline" TextColor="White"/>
</FormattedString>
</Label.FormattedText>
</Label> Once you apply the previously explained code, you should see a visual result like the following one.
To see the complete code structure of this project, go to our Gym subscription UI in the .NET MAUI demo on GitHub.
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!