Replicating a Hotel Booking UI in .NET MAUI

Jollen Moyani - Jul 18 '23 - - Dev Community

The user interface (UI) is the primary way we connect with our users. We should develop it to be as enjoyable as possible and maintain good performance so that our users will be satisfied. In this article, you will learn how to reinforce your XAML skills by developing a hotel booking UI based on this Dribbble design.

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

Replicating a Hotel Booking UI in .NET MAUI

Replicating a Hotel Booking UI in .NET MAUI

In this article, we will learn to use:

Let’s start!

Main layout

To design the main layout, create a folder called Views and add a file named DetailPage.xaml inside it.

In this case, we are going to use a DataGrid to design the main layout because it provides good performance and will also help creating the floating buttons (we’ll create them later).

<!-- Main layout -->
<Grid RowDefinitions="*"
      ColumnDefinitions="Auto,*"
      Margin="0,-120,0,50”> 

   <!-- Start step 1: Add the content of this step, which will contain steps 
     2 and 3-->

     <!-- Step 2: Add all the elements contained in this step -->
     <!-- Step 3: Add all the elements contained in this step -->

   <!-- End step 1 -->
</Grid>
Enter fullscreen mode Exit fullscreen mode

Step 1: Principal structure

Now that we have configured the initial setup, let’s get started with the UI design!

This block contains the following elements:

  • Main image
  • White box with rounded edges
  • Floating buttons

In addition to containing these elements, it is responsible for generating the structure containing all the elements to be developed in steps 2 and 3.

This structure can be later slid without affecting the position of the Like and Book Now buttons. Thus, it generates a feeling of floating buttons. Although this floating aspect has yet to be apparent, it is important to lay the foundation now.

Preparing the structure to scroll

To prepare the main layout to scroll, we should add the following code in the previously mentioned step where it says “<!– Start Step 1: Add the content of this step, which will contain steps 2 and 3–>.”

<!-- Step 1: Rounded border & Floating Buttons-->

<ScrollView Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" VerticalScrollBarVisibility="Never">   
  <Grid RowDefinitions="Auto,*">

   <!-- Add the main picture here --> 
   <!-- Add the White box here --> 

  </Grid>
</ScrollView>

<!-- Add the floating buttons here -->
Enter fullscreen mode Exit fullscreen mode

Main picture

Let’s add the main picture! You previously saw a comment that said, “<!—Add the main picture here ->” . Right there, add the image with the following code.

<!-- Main Image-->
<Image Grid.Row="0" Source="hotelmodel.jpeg" Aspect="AspectFill" VerticalOptions="Start" HeightRequest="380"/>
Enter fullscreen mode Exit fullscreen mode

White box with rounded edges

Here, we’ll work with a Frame (you can also use a border) to design the white box with rounded edges. This code block is the one that will officially contain the elements of steps 2 and 3.

<!-- White box with rounded edges-->

<Frame Grid.Row="1" CornerRadius="40" HasShadow="False" Margin="0,-40,0,0" BorderColor="Transparent">
  <Grid RowDefinitions="Auto,Auto,Auto,Auto,Auto,Auto,Auto" 
           ColumnDefinitions="*,Auto" Padding="20,20,20,60">

    <!-- Add the elements of steps 2 and 3 here -- >

  </Grid>
</Frame>
Enter fullscreen mode Exit fullscreen mode

Creating the floating buttons

Finally, add the following code in the comment line that says “<!– Add the floating buttons here –>.”

<!-- Floating Buttons --> 

<Button Grid.Row="1" Grid.Column="0"
                     HeightRequest="55"
                     WidthRequest="55"
                     ImageSource="heart"
                     VerticalOptions="End"
                     BackgroundColor="White"
                     Margin="30,0">
  <Button.Shadow>
   <Shadow Brush="Silver"
           Offset="5,5"
           Radius="20"
           Opacity="0.9"/>
  </Button.Shadow>
</Button>
<Button Grid.Row="1" Grid.Column="1"
                    Margin="0,0,30,0"
                    Text="Book Now"
                    HeightRequest="55" 
                    VerticalOptions="End"
                    BackgroundColor="#2094ff">
 <Button.Shadow>
  <Shadow Brush="Silver"
          Offset="5,5"
          Radius="20"
          Opacity="0.9"/>
 </Button.Shadow>
</Button>
Enter fullscreen mode Exit fullscreen mode

Note: If you want to know more about the floating effect of the buttons, I invite you to look at the article Simple way to create a floating button.

Step 2: Hotel description

Replicating hotel description

We are going to replicate the hotel description with the following elements:

  • Name, price, and hotel description.
  • Reviews with frame and its main layout.

Name, price, and hotel description

Refer to the following code example to display the hotel name, price, and description.

<!-- Step 2: Hotel Description-->

<!--Hotel name-->
<Label Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Text="Hotel LightSky" FontSize="22"/>

<!--Price-->
<Label Grid.Row="0" Grid.Column="1" Text="128$" HorizontalTextAlignment="End" FontSize="22"/> 

<!--Price description-->
<Label Grid.Row="1" Grid.Column="1" Text="per person" Margin="0,10,0,0" TextColor="Silver"/>

<!--Hotel description-->
<Label Grid.Row="1" Grid.Column="0" Text="2 guest 1 bedroom 1 bath" Margin="0,10,0,0" TextColor="Silver"/>           

<!-- Add here all the code explained in the following code block -->
Enter fullscreen mode Exit fullscreen mode

Reviews

The Reviews section includes star icons, a description, an arrow icon, and a list of profile images of the reviewers .

Add a frame and its main layout

To design the review section, add a frame and a layout to organize the information it will contain. Refer to the following code example.

<!--Reviews-->
<Frame Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" BorderColor="Transparent" CornerRadius="10" HasShadow="False" BackgroundColor="#f2f6fc" HeightRequest="80" Margin="0,35">
 <Grid RowDefinitions="*,*" ColumnDefinitions="Auto,*,Auto">

      <!-- Add the star icon and description here --> 
      <!-- Add the list of reviewers here -->

 </Grid>
</Frame>

<!-- Add here all the code explained in the following code block -->
Enter fullscreen mode Exit fullscreen mode

Adding the star icon and description

Replace the comment line that says “<!– Add the star icon and description here –>” with the following code.

<!-- Start icons-->
<Label Grid.Row="0" Grid.Column="0" Text=" ![⭐][⭐][⭐][⭐]"/>

<!-- Start description-->
<Label Grid.Row="1" Grid.Column="0" Text="129 reviews" VerticalTextAlignment="Center" TextColor="#70747a"/>

<!-- Arrow icon-->
<Image Grid.Row="1" Grid.Column="1" Source="arrow" HorizontalOptions="Start"/>
Enter fullscreen mode Exit fullscreen mode

Reviews list

To display a list with the profile pictures of the reviewers, we will use the Syncfusion .NET MAUI ListView and Avatar View controls. To implement them in your project:

1.Add the Syncfusion.Maui.ListView and Syncfusion.Maui.Core NuGet packages. Adding the Syncfusion.Maui.ListView NuGet package Adding the Syncfusion.Maui.Core NuGet package
2.Now, register the handler for the Syncfusion .NET MAUI ListView and Avatar View controls in the MauiProgram.cs file. To do so, go to the CreateMauiApp method, then add the following code, next to the .UseMauiApp() method.

.ConfigureSyncfusionCore();
Enter fullscreen mode Exit fullscreen mode

3.Add the following namespaces for the .NET MAUI ListView and Avatar View controls in your XAML file.
ListView

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

Avatar View

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

4.Finally, add the following code right in the comment where it says ” <!– Add the list of reviewers here –>.”

<!--Avatar collections-->

<syncListView:SfListView Grid.Row="0" Grid.RowSpan="2" Grid.Column="2" ItemsSource="{Binding Reviews}" SelectionBackground="Transparent" ItemSpacing="-9" WidthRequest="140" ScrollBarVisibility="Never" Orientation="Horizontal">
 <syncListView:SfListView.ItemTemplate>
  <DataTemplate>
   <Grid Margin="5,0,0,0">
    <syncAvatar:SfAvatarView ContentType="Default" Padding="5" ImageSource="{Binding Picture}" Stroke="Transparent" WidthRequest="50" HeightRequest="50" CornerRadius="25"/>
   </Grid>
  </DataTemplate>
 </syncListView:SfListView.ItemTemplate>
</syncListView:SfListView>
Enter fullscreen mode Exit fullscreen mode

Step 3: Hotel offers

Replicating hotel offers

We’ve come to the last step to complete our UI. We need the following elements:

  • Title and More button.
  • A list of services offered.
  • Description title and text.

Title and More button

Refer to the following code example to design the title, “What this place offers,” and More button.

<!-- Step 3: Hotel Offers>

<!-- Offers: Title -->
<Label Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" Text="What this place offers" FontAttributes="Bold" FontSize="18"/>

<!-- Offers: More -->
<Label Grid.Row="3" Grid.Column="1" Text="More" FontAttributes="Bold" HorizontalTextAlignment="End" VerticalTextAlignment="Center" TextColor="#3394ee"/>

<!-- Add the service offers list here -->
Enter fullscreen mode Exit fullscreen mode

Services offers list

We will use the Syncfusion .NET MAUI ListView control to display the offers list .

<!-- Offer collection-->

<syncListView:SfListView Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="2" Padding="0,15,0,0" ItemsSource="{Binding Services}" ItemSize="100" ItemSpacing="10" SelectionBackground="Transparent" ScrollBarVisibility="Never" HeightRequest="120" HorizontalOptions="Start" Orientation="Horizontal">
 <syncListView:SfListView.ItemTemplate>
  <DataTemplate>  
   <Border WidthRequest="100" StrokeShape="RoundRectangle 15,15,15,15">
    <VerticalStackLayout VerticalOptions="Center" HorizontalOptions="Center">
     <Image Source="{Binding Picture}" HeightRequest="45"/>
     <Label Text="{Binding Title}" TextColor="#4a587d"/> 
    </VerticalStackLayout>
   </Border> 
  </DataTemplate>
 </syncListView:SfListView.ItemTemplate>
</syncListView:SfListView> 

<!-- Add the description header and text here -->
Enter fullscreen mode Exit fullscreen mode

Description header and text

Refer to the following code example to display the Description header and text details.

<!--Description header-->
<Label Grid.Row="5" Grid.Column="0" Text="Description" Padding="0,15" FontAttributes="Bold" FontSize="18"/>

<!--Description-->
<Label Grid.Row="6" Grid.Column="0" Grid.ColumnSpan="2" Text="A deluxe room type in the hive Condotel, a 4-star hotel managed by the Best Western Premier group. A deluxe room type in the hive condotel, a 4-star hotel managed by the Best Western Premier group." Padding="0,0,0,30" FontAttributes="Bold" FontSize="16"/>
Enter fullscreen mode Exit fullscreen mode

And our UI is done!

GitHub reference

To see the complete code structure of this project, go to our demo on GitHub.

Conclusion

Thanks for reading! In this blog, we saw how to replicate a hotel booking UI using Syncfusion .NET MAUI controls. Try out the steps in this blog post and leave your feedback in the comments section 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 cross-platform mobile and desktop apps!

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

You can also contact us via our support forum, support portal, or feedback portal. We’re always ready to assist you!

Related blogs

Image
Why Nobody Cares About Asbestos Personal Injury Lawsuit
Image
15 Top Compensation Asbestos Bloggers You Should Follow
Image
How Asbestos Class Action Litigation Its Rise To The No. 1 Trend On Social Media
Image
Experience Authentic Italian Flavors at Spago: Italian Restaurant in Windsor, Ontario
Image
A Comparative Analysis between RK3588 and RK3576 Chips: Unveiling the Technological Distinctions

opensource, linux
Image
Some Wisdom On Mesothelioma Attorney From A Five-Year-Old
Image
Jenis faedah Dari Judi Online yang Mesti Anda Tahu.
Image
🎨 All the Colors You Need with Tailwind CSS

javascript, themes, beginners, tailwindcss
Image
Why Docker is Essential for Modern Development Environments and Its Alternatives

docker
Image
The Most Popular Coffee Drip Maker It's What Gurus Do 3 Things
Image
Integrate PDF Conversion by Deploying Open-source Stirling PDF with Docker

stirling, pdf, conversion
Image
Kanapy, które zmieniają przestrzeń - stwórz swoje idealne miejsce relaksu!
Image
Head Injury Lawyers Near Me It's Not As Hard As You Think
Image
SWITCH STATEMENT

beginners, coding, basic
Image
Outlier Detection: What You Need to Know?
Image
How To Invest in Artificial Intelligence (AI) Tokens?

cryptocurrency, blockchain, crypto
Image
Internal Injury Compensation: What's No One Is Talking About
Image
napi-rs的使用

rust
Image
Simplifying System Design: Scaling (Vertical VS Horizontal)

systemdesign, architecture, learning, makingtecheasy
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .