Let's Start Coding
To achieve the rounded effects that overlap the image of the first block, we need to add a Frame. Before adding any elements, we will use a Grid to organize the elements that will be placed inside the Frame. See the example below:
<!-- White Container-->
<Frame Grid.Row="1" CornerRadius="31" TranslationY="-23" BorderColor="Transparent" VerticalOptions="FillAndExpand">
<Grid RowDefinitions="Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto" Padding="20" RowSpacing="5">
<!-- Add here the code explained for Title & description-->
<!-- Add here the code explained for Email & password-->
<!-- Add here the code explained for Continue Button-->
<!-- Add here the code explained for Sign in description-->
</Grid>
</Frame>
Now let's continue by adding the elements that this block contains:
Title and description
<!-- Title & description-->
<Label Grid.Row="0" Text="Let's Travel the world
with us" FontSize="23" HorizontalTextAlignment="Center"/>
<Label Grid.Row="1" Text="Tell us your destination, and we will give
the best experience for you." Margin="0,0,0,18" TextColor="#63909c" HorizontalTextAlignment="Center"/>`
<!-- Add here the code that will be explained in next code block -->
Email and password
For both the email and password descriptions, we will use a Label. To insert the data, we will use an Entry.
💡 Quick tip As you may have noticed, these entries have rounded corners. To achieve this, Borders for .NET MAUI were used! As you can see below:
<!-- Email Information-->
<Label Grid.Row="2" Text="Email" FontSize="16" FontAttributes="Bold"/>
<Border Grid.Row="3" StrokeShape="RoundRectangle 20,20,20,20">
<Entry BackgroundColor="#c7dbe0" TextColor="#578794" HeightRequest="50"/>
</Border>
<!-- Password Information-->
<Label Grid.Row="4" Text="Password" FontSize="16" FontAttributes="Bold"/>
<Border Grid.Row="5" StrokeShape="RoundRectangle 20,20,20,20">
<Entry BackgroundColor="#c7dbe0" TextColor="#578794" IsPassword="True" HeightRequest="50"/>
</Border>
<!-- Add here the code that will be explained in next code block -->
⚠ If you want to know more information about Borders, you can enter to the article Applying borders in .NET MAUI.
Continue Button
Let's continue with the Continue Button. This is a simple button with a blue background and rounded edges as highlight properties.
<!-- Continue Button-->
<Button Grid.Row="6" Text="Continue" FontAttributes="Bold" TextColor="White" Margin="0,20" HeightRequest="50" CornerRadius="10" BackgroundColor="#508390"/>
<!-- Add here the code that will be explained in next code block →
Sign In description
To complete this page, we will add a description of the Sign In feature. One important aspect to highlight is that we are using the same Label to integrate different visual characteristics, which improves the performance of our app. Although another solution would be to define a Label for each style, this is not the optimal approach. To address this issue, we can use the FormattedString, as shown below:
<!-- Sign In Description-->
<Label Grid.Row="7" FontAttributes="Bold">
<Label.FormattedText>
<FormattedString>
<Span Text="Already a member? " TextColor="#aaaaaa"/>
<Span Text="Sign in" TextColor="#63909c"/>
</FormattedString>
</Label.FormattedText>
</Label>
Now that we have the complete code for our second block, we can see a result like the following: