Replicating a Hotel Booking UI in .NET MAUI
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (182).NET Core  (28).NET MAUI  (231)Angular  (117)ASP.NET  (49)ASP.NET Core  (81)ASP.NET MVC  (87)Azure  (42)Black Friday Deal  (1)Blazor  (242)BoldSign  (14)DocIO  (24)Essential JS 2  (110)Essential Studio  (201)File Formats  (74)Flutter  (138)JavaScript  (227)Microsoft  (122)PDF  (84)Python  (1)React  (107)Streamlit  (1)Succinctly series  (131)Syncfusion  (985)TypeScript  (33)Uno Platform  (3)UWP  (3)Vue  (46)Webinar  (53)Windows Forms  (59)WinUI  (72)WPF  (164)Xamarin  (159)XlsIO  (38)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (11)Business intelligence  (55)Button  (4)C#  (164)Chart  (152)Chart of the week  (61)Cloud  (16)Company  (440)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (74)Development  (692)Doc  (7)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (7)Essential Tools  (13)Excel  (43)Extensions  (31)File Manager  (8)Gantt  (22)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (526)Mobile MVC  (9)OLAP server  (2)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (46)Performance  (13)PHP  (2)PivotGrid  (5)Predictive Analytics  (6)Report Server  (3)Reporting  (8)Reporting / Back Office  (9)Rich Text Editor  (12)Road Map  (12)Scheduler  (54)Security  (5)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (32)Solution Services  (4)Spreadsheet  (11)SQL  (15)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (420)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (19)Web  (643)What's new  (353)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Replicating a Hotel Booking UI in .NET MAUI

Replicating a Hotel Booking UI in .NET MAUI

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>

Step 1: Principal structure

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

Principal structure

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 -->

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"/>

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>

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>

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 -->

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 -->

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"/>

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<App>() method.
    .ConfigureSyncfusionCore();
  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"

    Avatar View

    xmlns:syncAvatar="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core"
  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>

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 -->

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 -->

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"/>

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 forumsupport portal, or feedback portal. We’re always ready to assist you!

Test Flight
App Center Badge
Google Play Store Badge
Microsoft Badge
Github Store Badge

Related blogs

Tags:

Share this post:

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed