Replicating a Cruise Travel App UI in .NET MAUI
Tags: dotnetmaui, development, mobile, ui
Published: 2023-01-12 12:23:21

---
title: Replicating a Cruise Travel App UI in .NET MAUI
published: true
date: 2023-01-12 11:25:36 UTC
tags: dotnetmaui, development, mobile, ui
canonical_url: https://www.syncfusion.com/blogs/post/replicating-a-cruise-travel-app-ui-in-net-maui.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dobx1cnoviuiwuvwnj2l.png
---
Howdy! In this blog, we’ll replicate a cruise travel application UI in .NET MAUI. It is a design created by [Ilham Maulana](https://dribbble.com/heyitsilham "Ilham Maulana's Dribbble Account") that they shared on [Dribbble](https://dribbble.com/shots/14636850-Cruise-Travel-App/attachments/6331232?mode=media "Cruise travel app UI on Dribbble").

Let’s start designing the UI by dividing it into the following block structure. 
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/Cruise-Travel-App-UI-in-.NET-MAUI-2-1024x562.png" alt="Cruise Travel App UI in .NET MAUI" style="width:100%">

  <figcaption>Cruise Travel App UI in .NET MAUI</figcaption>

</figure>

## Skills that you’ll develop

In addition to **strengthening your XAML skills** , you will learn to implement the following .NET MAUI features in this article:
- **Appearance modes** : Manage the appearance of visual elements based on your UI design for both light and dark modes.
- **Labels** :
  - Handle **different styles** on the **same label**.
  - Add **line breaks** in the **Text** property.
- **Overlapping visual elements** :
  - Implement the overlay effect on visual elements based on your UI design.
- **Exploration controls** : Use the [Syncfusion .NET MAUI ListView control](https://www.syncfusion.com/maui-controls/maui-listview "Syncfusion .NET MAUI ListView control") to present lists of data vertically or horizontally with different layouts.

## General settings for the project

### Page creation

Here, we are going to design two different pages. So, I recommend creating a **Views** folder and, inside it creating the following pages:

- **CruisePage.xaml** : We will add the list of all the ships available in the app to this page.
- **CruiseDetailsPage.xaml** : We will add the details about a specific cruise to this page.

### Appearance mode

Before you begin, note the following point about the behavior of the appearance modes: It’s not mandatory to add colors to your UI to adapt to the different appearance modes if a visual element does not have a specific value assigned in a property that receives a color. The visual element will take the default values ​​for the appearance mode in which the device is configured (i.e. light or dark).

Let’s understand this better with a use case!

Consider that if you don’t add the **BackgroundColor** property to your page and your device is set to **dark mode** , then your page’s background color will be **black**.

If your device is in **light mode** , your app will take the **white** background color. If you want to use a different color, then you should add the **BackgroundColor** property with the desired value.

Keeping this information in mind, since the **CruisePage** will have a different **BackgroundColor** for light mode, we have to add the following line of code in the **ContentPage** tags:

```csharp
BackgroundColor="{AppThemeBinding Light=#efefef,Dark=Black}"
```

## Step 1: Header

![Designing header of cruise travel app in .NET MAUI](https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/Header-of-Cruise-Travel-app-in-.NET-MAUI.png)

### Main layout

Let’s start building the **CruisePage.xaml** page. First, add the main layout that will contain all the content from blocks one through three.

Refer to the following code example.

```xml
<ScrollView Margin="0,0,0,-30" VerticalScrollBarVisibility="Never">
  <Grid ColumnDefinitions="*,Auto" RowDefinitions="Auto,Auto,Auto,Auto,Auto,Auto,Auto" Padding="25,30,0,0">
   <!-- Add all the information corresponding to block 1 -- >
   <!-- Add all the information corresponding to block 2 -- >
   <!-- Add all the information corresponding to block 3 -- >
  </Grid>
</ScrollView>
```

We have added everything inside a **ScrollView** to make the page content scrollable. Additionally, we added a **Grid** with two columns and seven rows to organize all the page elements.

### Header elements

The header is composed of the following four elements:

- Greetings
- Bell icon
- Main title
- Search bar

Let’s design them!

#### Greetings and a bell icon

Refer to the following code example to render the greetings and bell icon.

```xml
<!-- Greetings and bell icon-->
   <Label Grid.Column="0" Grid.Row="0" Text="Hi, Shalima!" FontSize="17"/>
   <Image Grid.Column="1" Grid.Row="0" Source="bell" HeightRequest="30" WidthRequest="30" Margin="0,0,20,0"/>
<!-- Add here all the information explained in the next code block -- >
```

#### Main title

Here, we are going to use the **FormattedString,** that allows us to add **different styles to the same Label**. You can see our UI title ( **Choose a Cruise Ship to Explore the World** ) has purple text in bold and also black text without bold formatting.

We will also add line breaks using the string **&#10;** that you can see in some text properties.

The **AppThemeBinding** markup extension helps us adapt to the visual characteristics for both light and dark modes. In this case, we will use it to change the text color depending on the configured appearance mode.

**Note:** For more details, refer to the [respond to system theme changes](https://learn.microsoft.com/en-us/dotnet/maui/user-interface/system-theme-changes?view=net-maui-7.0 "Respond to system theme changes documentation") documentation page.

```xml
<!-- Main title-->
 <Label Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2" FontSize="25" Margin="0,20">
  <Label.FormattedText>
   <FormattedString>
    <Span Text="Choose a " TextColor="{ AppThemeBinding Light=#383838, Dark=White}"/>
    <Span Text="Cruise Ship&#10;" TextColor="#625ba5" FontAttributes="Bold" />
    <Span Text="to " TextColor="{ AppThemeBinding Light=#383838, Dark=White}"/>
    <Span Text="Explore The World" TextColor="#625ba5" FontAttributes="Bold" />
   </FormattedString>
  </Label.FormattedText>
 </Label>
<!-- Add here all the information explained in the next code block -- >
```

#### Search bar

The search bar has small gray borders by default which we don’t need for this UI. So, let’s define the borders and negative padding as shown in the following code example to remove them.

```xml
<!—Search bar-->
<Border Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="2" Stroke="Transparent" Padding="0,-20,0,0">
    <SearchBar Placeholder="Search to find a cruise ship" BackgroundColor="{ AppThemeBinding Light=#fafafa, Dark=Transparent}" PlaceholderColor="Silver" Margin="0,10,20,0"/>
</Border>
<!-- Add here all the information explained in the next code block -- >

```

## Step 2: American ships

![American cruise ships](https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/Americal-Crise-Ships-in-MAUI-1024x900.png)

To design the list of **American Cruise Ships** , first, add the labels that contain the ship descriptions. Then, to render the list, let’s use the [Syncfusion .NET MAUI ListView control](https://www.syncfusion.com/maui-controls/maui-listview "Syncfusion .NET MAUI ListView control") by following these steps:

**Note:** Before starting, please refer to the [.NET MAUI ListView getting started](https://help.syncfusion.com/maui/listview/getting-started ".NET MAUI ListView documentation") guide.

1.Add the [**Syncfusion.Maui.ListView**](https://www.nuget.org/packages/Syncfusion.Maui.ListView/ "Syncfusion.Maui.ListView NuGet Package") NuGet package.  

![Syncfusion.Maui.ListView NuGet Package](https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/DotNet-MAUI-ListView-NuGet.png)

2.Go to the **MauiProgram.cs** file and register the handler for the Syncfusion .NET MAUI ListView. To do this, navigate to the **CreateMauiApp** method and then just before the line **return builder.Build();,** add the **builder.ConfigureSyncfusionListView();** method. 

3.Then, add the **Syncfusion.Maui.ListView** namespace in your XAML file.

```csharp
xmlns:syncfusion="clr-namespace:Syncfusion.Maui.ListView;assembly=Syncfusion.Maui.ListView"
```
4.Now, add the following code to your XAML page.

```xml
<!-- American Cruise Ship Descriptions-->
<Label Grid.Column="0" Grid.Row="3" Text="American Cruise Ships" FontSize="17" />
<Label Grid.Column="1" Grid.Row="3" Text="See All" Padding="0,0,30,0" TextColor="#625ba5" HorizontalTextAlignment="End"/>
<!--American Cruise Ship List-->
<syncfusion:SfListView Grid.Column="0" Grid.Row="4" Grid.ColumnSpan="2" Margin="0,10,0,0"
                           ItemsSource="{Binding Cruise}"
                           ItemSize="190" ItemSpacing="5"
                           ScrollBarVisibility="Never"
                           HeightRequest="280"
                           HorizontalOptions="Start"
                           Orientation="Horizontal">
     <syncfusion:SfListView.ItemTemplate>
      <DataTemplate>
       <Frame CornerRadius="10" BorderColor="Transparent" Padding="10,0,0,0" IsClippedToBounds="True" HorizontalOptions="Start" BackgroundColor="{ AppThemeBinding Light=White, Dark=#1c1c1f}">
        <Grid RowDefinitions="Auto,Auto,Auto,Auto,Auto,Auto" Grid.ColumnDefinitions="Auto,*" RowSpacing="10">
         <!-- Main picture-->
          <Image Grid.Column="0" Margin="-10,0" Grid.Row="0" Grid.ColumnSpan="2" Source="{Binding Picture}" WidthRequest="200" Aspect="AspectFill" HeightRequest="100"/>
         <!-- Cruise's name-->
          <Label Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2" Text="{Binding Name}" FontAttributes="Bold"/>
         <!-- Rating-->
          <Image Grid.Column="0" Grid.Row="2" Source="star" HeightRequest="20" WidthRequest="20" />
          <Label Grid.Column="1" Grid.Row="2" Text="{Binding Rate}" Padding="5,0,0,0" TextColor="#B9B9B4"/>
         <!-- Location-->
          <Image Grid.Column="0" Grid.Row="3" Source="location" HeightRequest="20" WidthRequest="20" Aspect="AspectFill"/>
          <Label Grid.Column="1" Grid.Row="3" Text="{Binding Location}" Padding="5,0,0,0" TextColor="#B9B9B4"/>
         <!-- Starting From -->
          <Label Grid.Column="0" Grid.Row="4" Grid.ColumnSpan="2" Text="Starting from" FontSize="13" TextColor="#B9B9B4"/>
          <Label Grid.Column="0" Grid.Row="5" Grid.ColumnSpan="2" Text="{Binding StartingFrom}" FontSize="18" FontAttributes="Bold" TextColor="#7c77b4"/>
        </Grid>
       </Frame>
     </DataTemplate>
  </syncfusion:SfListView.ItemTemplate>
</syncfusion:SfListView>
<!-- Add here all the information explained in the next code block -- >
```

## Step 3: European Ships

![Adding European cruise details in cruise travel app in .NET MAUI](https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/Adding-European-Cruise-Details-in-Cruise-Travel-App-UI-in-.NET-MAUI.png)

To design the list of European cruise ships, we are going to use the same visual elements and steps used in the previous block.

Refer to the following code example.

```xml
<!-- European Cruise Ship Descriptions-->
 <Label Grid.Column="0" Grid.Row="5" Text="Europe Cruise Ship" FontSize="17"/>
 <Label Grid.Column="1" Grid.Row="5" Text="See All" Padding="0,0,30,0" TextColor="#625ba5" HorizontalTextAlignment="End"/>
 
<!--European Cruise Ship List-->
<syncfusion:SfListView Grid.Column="0" Grid.Row="6" Grid.ColumnSpan="2" Margin="0,10,0,0"
                        ItemsSource="{Binding EuropeCruise}"
                        ItemSize="190" ItemSpacing="5"
                        ScrollBarVisibility="Never"
                        HeightRequest="280"
                        HorizontalOptions="Start"
                        Orientation="Horizontal">
  <syncfusion:SfListView.ItemTemplate>
   <DataTemplate>
    <Frame CornerRadius="10" BorderColor="Transparent" Padding="10,0,0,0" IsClippedToBounds="True" HorizontalOptions="Start" BackgroundColor="{ AppThemeBinding Light=White, Dark=#1c1c1f}">
     <Grid RowDefinitions="Auto,Auto,Auto,Auto,Auto,Auto" Grid.ColumnDefinitions="Auto,*" RowSpacing="10">
      <!-- Main picture-->
       <Image Grid.Column="0" Margin="-10,0" Grid.Row="0" Grid.ColumnSpan="2" Source="{Binding Picture}" Aspect="AspectFill" HeightRequest="100" WidthRequest="200"/>
      <!-- Cruise's name-->
       <Label Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2" Text="{Binding Name}" FontAttributes="Bold"/>
      <!-- Rating-->
       <Image Grid.Column="0" Grid.Row="2" Source="star" HeightRequest="20" WidthRequest="20" />
       <Label Grid.Column="1" Grid.Row="2" Text="{Binding Rate}" Padding="5,0,0,0" TextColor="#B9B9B4"/>
      <!-- Location-->
       <Image Grid.Column="0" Grid.Row="3" Source="location" HeightRequest="20" WidthRequest="20" Aspect="AspectFill"/>
       <Label Grid.Column="1" Grid.Row="3" Text="{Binding Location}" Padding="5,0,0,0" TextColor="#B9B9B4"/>
      <!-- Starting From -->
       <Label Grid.Column="0" Grid.Row="4" Grid.ColumnSpan="2" Text="Starting from" FontSize="13" TextColor="#B9B9B4"/>
       <Label Grid.Column="0" Grid.Row="5" Grid.ColumnSpan="2" Text="{Binding StartingFrom}" FontSize="18" FontAttributes="Bold" TextColor="#7c77b4"/>
 
     </Grid>
    </Frame>
   </DataTemplate>
  </syncfusion:SfListView.ItemTemplate>
</syncfusion:SfListView>
```

## Step 4: Cruise’s picture

![Adding cruise images in cruise travel app in .NET MAUI](https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/Adding-Cruise-images-in-Cruise-Travel-App-UI-in-.NET-MAUI.png)

In this block, we will design the second page, the **CruiseDetailsPage.xaml** page, to display the details of a specific ship.

As in the first block, before starting with the code to add the image, let’s define the **main layout**.

### Main layout

Here, we are going to define a Grid with two rows, one for the main image, and the other for the frame which contains all the remaining information of the page.

```xml
<Grid RowDefinitions="Auto,*">
 <!-- Add all the information corresponding to block 4 -- >
 <!-- Add all the information corresponding to blocks 5 and 6 -- >
</Grid>
```

### Cruise picture

Now, add the main picture and place it in row number 0.

```xml
<Image Grid.Row="0" Source="cruise" Aspect="AspectFill" HeightRequest="350" Margin="0,-50,0,0"/>
<!-- Add here all the information explained in the next code block -- >
```

## Step 5: Cruise’s description

![Adding cruise description in cruise travel app in .NET MAUI](https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/Adding-Cruise-description-in-Cruise-Travel-App-UI-in-.NET-MAUI.png)

We are going to design the **cruise’s description** and **price** blocks inside a **Frame**.

First, let’s see how to render the cruise’s description.

### Frame and overlapping

Add a **Frame** and place it in row number 1. Then, add a negative margin to design the rounded edges of the Frame and overlap it on the top of the image of the previous block.

In addition, inside the Frame, add a Grid to organize the additional information. Refer to the following code example.

```xml
<Frame Grid.Row="1" CornerRadius="30" Margin="0,-30,0,0" VerticalOptions="FillAndExpand" BorderColor="Transparent">
 <Grid ColumnDefinitions="*,Auto" RowDefinitions="Auto,Auto,*,Auto,Auto,Auto,Auto" Margin="0,20" RowSpacing="10" Padding="15,0">
   <!-- Add all the information corresponding to blocks 5 and 6 -- >
 </Grid>
</Frame>
```

### Cruise description

We are going to modify this block a bit from the original design by rendering the following components:

- Name
- Location
- Description

Refer to the following code example.

```xml
<!--Name-->
<Label Grid.Column="0" Grid.Row="0" Text="Harmony of the Seas" FontAttributes="Bold" FontSize="18" TextColor="{AppThemeBinding Light=#303030, Dark=White}"/>
<!-- Location-->
<Label Grid.Column="0" Grid.Row="1" Text="Los Angeles, USA" TextColor="#aeaeb2"/>
<!-- Description-->
<Label Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="2" TextColor="#565659" LineHeight="1.5" Padding="0,0,0,20" Text="Harmony of the Seas is an Oasis-class cruise ship built by STX France at the Chantiers de l'Atlanthique shipyard in Saint-Nazaire, France. [citation needed] for Royal Caribbean International. With a gross tonnage of 226,963 GT, She is the second largest passenger ship in the world, surpassing her older sisters Oasis of the Seas."/> 
<!-- Add here all the information explained in the next code block -- >
```

## Step 6: Cruise’s price

![Adding cruise price details in cruise travel app in .NET MAUI](https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/Adding-Cruise-Price-Details-in-Cruise-Travel-App-UI-in-.NET-MAUI.png)

Finally, let’s develop the price block with the following elements:

- Price list
- Separator
- Book Now button

### Price list

Refer to the following code example to design the title and description of the **Cruise Ship** , **Price American Trip,** and **See All** labels.

```xml
<!-- Price American Trip Description-->
<Label Grid.Column="0" Grid.Row="3" Text="Price American Trip" FontSize="17"/>
<Label Grid.Column="1" Grid.Row="3" Text="See All" TextColor="#625ba5" HorizontalTextAlignment="End"/>
<!-- Add here all the information explained in the next code block -- >
```

Now, let’s design the following components:

- Checkboxes for the options to select.
- Checkbox descriptions.
- The price and a label of other text descriptions with different formats. To design this, we’ll use **FormattedText**.

All of this is wrapped in the [Syncfusion .NET MAUI ListView control](https://www.syncfusion.com/maui-controls/maui-listview "Syncfusion .NET MAUI ListView control").

```xml
<syncfusion:SfListView Grid.Column="0" Grid.Row="4" Grid.ColumnSpan="2"
                         ItemsSource="{Binding Plan}"
                         ScrollBarVisibility="Never"
                         HeightRequest="85"
                         HorizontalOptions="Start">
  <syncfusion:SfListView.ItemTemplate>
   <DataTemplate>
    <Grid ColumnDefinitions="Auto,Auto,*">
      <CheckBox Grid.Column="0" Color="#5b50b2" HeightRequest="20" WidthRequest="20" HorizontalOptions="Start"/>
      <Label Grid.Column="1" Text="{Binding Name}" VerticalTextAlignment="Center" />
      <Label Grid.Column="2" HorizontalTextAlignment="End" VerticalTextAlignment="Center">
      <Label.FormattedText>
       <FormattedString>
        <Span Text="{Binding Price}" TextColor="#5b50b2" FontAttributes="Bold" FontSize="25"/>
        <Span Text=" per trip" TextColor="#a9a9a9"/>
       </FormattedString>
      </Label.FormattedText>
     </Label>
    </Grid>
   </DataTemplate>
  </syncfusion:SfListView.ItemTemplate>
</syncfusion:SfListView>
<!-- Add here all the information explained in the next code block -- >
```

### Separator and button

To design the separator line, we will use a BoxView, and for the booking option, we are going to add a button.

Refer to the following code example.

```xml
<!--Separator and Button-->
<BoxView Grid.Column="0" Grid.Row="5" Grid.ColumnSpan="2" HorizontalOptions="FillAndExpand" HeightRequest="1" Color="#d8d5d5" Margin="-35,10"/>
<Button Grid.Column="0" Grid.Row="6" Grid.ColumnSpan="2" BackgroundColor="#594ad5" TextColor="White" Text="Book Now" FontAttributes="Bold" HeightRequest="60" FontSize="16" CornerRadius="13"/>
```

That’s all! We have now finished developing our cruise travel app UI!

## GitHub reference

To see the complete code structure, refer to our [Cruise Travel App UI in .NET MAUI demo on GitHub.](https://github.com/SyncfusionExamples/cruise-travel-app-ui-.net-maui "Cruise Travel App UI in .NET MAUI GitHub demo")

## Conclusion

Thanks for reading! In this blog, we saw how to replicate a cruise travel app UI using the Syncfusion [.NET MAUI](https://www.syncfusion.com/maui-controls "Syncfusion .NET MAUI Controls") controls. Try out the steps in this blog post and leave your feedback in the comments section below!

Syncfusion [.NET MAUI](https://www.syncfusion.com/maui-controls "Syncfusion .NET MAUI controls") 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 elite cross-platform mobile and desktop apps!

Also, if you have any questions, you can contact us through our [support forum](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://www.syncfusion.com/identity/login "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/ "Syncfusion Feedback Portal"). We are always happy to assist you!

See you next time!

## Related blogs

- [Achieve Outlook-Like Swiping Using .NET MAUI ListView](https://www.syncfusion.com/blogs/post/achieve-outlook-like-swiping-using-net-maui-listview.aspx "Blog: Achieve Outlook-Like Swiping Using .NET MAUI ListView")
- [Replicating an Invoice Page UI in .NET MAUI](https://www.syncfusion.com/blogs/post/invoice-page-ui-in-net-maui.aspx "Blog: Replicating an Invoice Page UI in .NET MAUI")
- [How to Draw 2D Graphics in .NET MAUI’s GraphicsView](https://www.syncfusion.com/blogs/post/draw-2d-graphics-in-dotnet-maui-graphicsview.aspx "Blog: How to Draw 2D Graphics in .NET MAUI’s GraphicsView")
- [4 Impressive Features of .NET MAUI in .NET 7](https://www.syncfusion.com/blogs/post/4-impressive-features-of-net-maui-in-net-7.aspx "Blog: 4 Impressive Features of .NET MAUI in .NET 7")

<!-- /wp:paragraph -->