Build together, debug together. Join the community on Discord.→

Replicating a Mobile Travel UI in .NET with Uno Platform

Welcomeđź‘‹ ! In this article, I will guide you through the process of developing a travel user interface using Uno Platform XAML. This type of XAML is fully aligned with the one used in WinUI and UWP apps making it highly beneficial for those with knowledge of XAML for Xamarin.Forms/MAUI or WPF.

You can follow along with the sample app source code here.

To ensure clarity, we will divide this article into different sub-topics, including:

Breaking Down the Visual Structure of the UI: When it comes to creating a user interface, “Where do I start?” is one of the most common questions. My recommendation is to divide your user interface into subparts so that you fully understand how to build each one. For this example, I will define a visual UI structure to replicate, which will be divided into blocks.

Subsequently, these blocks will allow us to develop each one of them as they are organized in the visual structure for a better understanding of each step carried out.

Code explanation: We will see step by step each one of the components obtained from the breakdown, and we will learn how to convert it to XAML code.

Join us and let’s learn how to create a stunning travel user interface step-by-step!

Breaking Down the Visual Structure of the UI

This UI was slightly modified to achieve the explanation goals of the post, it was based on the UI created by YoÄźa Pratama and you can see the reference on Dribbble.

To start, we will add the main layout structure, in which we will include all the code blocks discussed in this article. In this case, we will use a Grid.

				
					<!-- Page layout structure →

<Grid RowDefinitions="Auto,Auto,Auto,Auto,Auto,Auto,Auto"
            ColumnDefinitions="Auto,*,Auto"
            Padding="30,30,0,0">
            
<!-- Add the "Profile & main elements" code block"-- >
<!-- Add the "Popular destination" code block"-- >
<!-- Add the "Special for you" code block"-- >
</Grid>

1. Profile and Main Elements Block

In our UI, we’ve established the layout that will encompass the entire design. Before diving into the first section, let’s visually identify which elements we will be working with for this block.

Lets Start Coding

Circular Profile Image

For the profile image, we begin by transforming an image into a circular shape. Consider a scenario where you taking a photo of an API. This technique will eliminate the necessity of manually rounding the images, as the transformation will be automated. To achieve this, we will use an Ellipse, as shown below.

				
					<!-- Profile image-->

<Ellipse Grid.Column="0" Grid.Row="0" Grid.RowSpan="2"
HorizontalAlignment="Left" Margin="0,0,20,0" Height="50" Width="50"
VerticalAlignment="Center">
    <Ellipse.Fill>
        <ImageBrush ImageSource="jose" Stretch="UniformToFill"/>
    </Ellipse.Fill>
</Ellipse>

<!-- Add the following block of code here -- >

Name & Description

We will use two TexBlocks to achieve this. See code below:

				
					<!--Name & description -->

<TextBlock Grid.Column="1" Grid.Row="0" Text="William Borbon,"
FontSize="16" FontWeight="Bold" />

<TextBlock Grid.Column="1" Grid.Row="1" Text="Where do you want to go?"
FontSize="15" Foreground="Silver" VerticalAlignment="Top" />

<!-- Add the following block of code here -- >

Notifications Button

To create the notification feature, we will add a button with a circular shape and add a bell icon. This will serve as our notification button.

				
					<!-- Notification Button -->

<Button Grid.Column="2" Grid.Row="0" Grid.RowSpan="2"
Background="White" Height="50" Width="50" CornerRadius="25"
VerticalAlignment="Center" HorizontalAlignment="Right"
Margin="0,0,30,0">
                <Image Source="bell"/>
</Button>

<!-- Add the following block of code here -- >

Search (AutoSuggestBox)

To implement the Search, we will use the AutoSuggestBox control and add a magnifying glass icon. For the icon, you just have to set the QueryIcon property with “Find” as a value.

				
					<!--Search any location -->

<AutoSuggestBox Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3"
PlaceholderText="Place any location" QueryIcon="Find"
Margin="0,20,30,0"/>

<!-- Add the following block of code Here-- >

Destinations List

Finally, let’s build a horizontal list. Each item is composed of a small image and a text.

				
					<!-- Destination type -->

<ListView Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="3"
ItemsSource="{x:Bind destinationType}" SelectionMode="None"
Padding="0,20">
                <ListView.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
                </ListView.ItemsPanel>
                <ListView.ItemTemplate>
                <DataTemplate x:DataType="local:DestinationType">
                    <Grid ColumnDefinitions="Auto,Auto"
RowDefinitions="Auto" Width="100">
                      <Image Grid.Row="0" Grid.Column="0"
Source="{x:Bind Icon}" Height="25" Width="25" Margin="0,0,10,0"/>
                     <TextBlock Grid.Row="0" Grid.Column="1"
Text="{x:Bind Description}" Foreground="#868a8c" FontSize="11"
VerticalAlignment="Center"/>
                    </Grid>
                </DataTemplate>
                </ListView.ItemTemplate>
</ListView>

<!-- Add the following block of code here -- >

When executing the code above, you will have a result like the following:

2. Popular Destinations

Moving on to the second block, we need to focus on two elements: The main title and a list of cards representing popular destinations.  Let’s break down the card and identify the elements we’ll work with visually before we start writing code.

Title

				
					<!-- Title-->

<TextBlock Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="2"
Text="Popular Destination" FontWeight="Bold"/>

<!-- Add here the following block of code -- >

Creating the List Structure

Take into account that both the main image, like button, name location and price will go inside a list. That’s why we’ll do the ListView first. To shape each card, we will use the Borders in order to round the corners and inside we will add another Grid to organize the elements.

				
					<!--Popular destination list-->

<ListView Grid.Row="5" Padding="0,20" Margin="0,0,0,20" Grid.Column="0"
Grid.ColumnSpan="3" ItemsSource="{x:Bind popularDestination}"
SelectionMode="None">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate x:DataType="local:PopularDestination">
<Border BorderBrush="Transparent" CornerRadius="8"
BorderThickness="0.8" Width="185" Height="220">
<Grid RowDefinitions="*,Auto,Auto"
ColumnDefinitions="*,Auto">
<!-- Add the "Main picture" element-- >
<!-- Add the "Like button" element-- >
<!-- Add the "Name, location & price" element-- >
</Grid>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

<!-- Add here the following block of code -- >

Main Picture

Make sure the images you work with are of good quality for a better UI. In this card the image is completely glued to the edges of both sides and the top. The following code must be added in the position where the comment that says:

<!– Add the “Main picture” element– > as I show you below:

				
					<!-- Add the "Main picture" element-- >

<Image Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"
Grid.RowSpan="2" Source="{x:Bind Picture}" Height="150" Stretch="Fill"
VerticalAlignment="Top" />

<!-- Add the following block of code here -- >

Like Button

				
					<Button Grid.Row="0" Grid.Column="1" BorderThickness="0"
Background="White" Height="40" Width="40" CornerRadius="25"
VerticalAlignment="Top" HorizontalAlignment="Right" Margin="0,10,5,0">
<Image Source="heart"/>
</Button>
<!-- Add here the following block of code -- >

Name, Location and Price

				
					<Image Grid.Row="2" Grid.Column="0" Source="location" Height="15"
Width="15" Stretch="Fill" Margin="10,0,5,0" HorizontalAlignment="Left"
/>
<TextBlock Grid.Row="2" Grid.Column="0"
Text="{x:Bind Location}" FontSize="12" Foreground="Silver"
Padding="30,0,0,0"/>
<TextBlock Grid.Row="1" Grid.Column="1"
Text="{x:Bind Price}" FontWeight="Bold" FontSize="20"
Foreground="#3696f0" HorizontalAlignment="Right" Padding="0,0,10,0"/>
<TextBlock Grid.Row="2" Grid.Column="1"
Text="/person" FontSize="12" HorizontalAlignment="Right"
Foreground="Silver" Padding="10,0,0,0"/>
<!-- Add here the following block of code -- >

Now let’s see the result obtained from the code developed for this block:

3. Special for You​

We are almost done! We only need to develop the last block! It is a very simple block because it uses abilities/elements that we already learned to use in previous blocks. Let’s visually identify the elements we will build.

Translating into XAML

Title and Explore All

				
					<!-- Name & Explore all description-->

<TextBlock Grid.Row="6" Grid.Column="0" Grid.ColumnSpan="2"
Text="Special for you" FontWeight="Bold"/>
<TextBlock Grid.Row="6" Grid.Column="2" Grid.ColumnSpan="2"
Text="Explore All" FontSize="12" FontWeight="Bold" Foreground="#3696f0"
HorizontalAlignment="Right" Margin="0,0,30,0"/>
<!-- Add here the following block of code -- >

Special for You List

				
					<!-- Special for you list-->
<ListView Grid.Row="7" Padding="0,20" Margin="0,20" Grid.Column="0"
Grid.ColumnSpan="3" ItemsSource="{x:Bind specialForYou}"
SelectionMode="None">
<ListView.ItemTemplate>
<DataTemplate x:DataType="local:SpecialForYou">
<Grid RowDefinitions="Auto,Auto,Auto"
ColumnDefinitions="Auto,*,Auto" Padding="0,0,0,10">
<Border Grid.Row="0" Grid.Column="0"
Grid.RowSpan="2" BorderBrush="Transparent" CornerRadius="8"
BorderThickness="0.8" Height="70">
<Image Source="{x:Bind Picture}"
Width="100" Height="70" Stretch="Fill" VerticalAlignment="Top" />
</Border>
<TextBlock Grid.Row="0" Grid.Column="1"
Text="{x:Bind Name}" FontWeight="Bold" Padding="10,0,0,0"/>
<Image Grid.Row="1" Grid.Column="1"
Source="location" Height="15" Width="15" Stretch="Fill"
Margin="10,0,5,0" VerticalAlignment="Top" HorizontalAlignment="Left" />
<TextBlock Grid.Row="1" Grid.Column="1"
Text="{x:Bind Location}" FontSize="12" Foreground="Silver"
Padding="30,0,0,0" />
<Button Grid.Row="0" Grid.Column="2"
Grid.RowSpan="2" BorderThickness="0" Background="White" Height="40"
Width="40" CornerRadius="25" VerticalAlignment="Top"
HorizontalAlignment="Right" Margin="0,10,5,0">
<Image Source="silverheart"/>
</Button>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

And our final and already completed result is the following

We’ve finally got our complete UI ready! 💥📋 Remember to follow the step-by-step instructions so that your code looks great! I leave you the GitHub repository where you can explore the complete project!

See you in the next one!

Travel UI Sample

Next Steps

To upgrade to the latest release of Uno Platform, please update your packages to 4.8 via your Visual Studio NuGet package manager! If you are new to Uno Platform, following our official getting started guide is the best way to get started. (5 min to complete)

Get Started

Tags:

Related Posts

Uno Platform

360 rue Saint-Jacques, suite G101,
Montréal, Québec, Canada
H2Y 1P5

USA/CANADA toll free: +1-877-237-0471
International: +1-514-312-6958

Tools
Platform
Migration
Resources
Support

Uno Platform 5.2 LIVE Webinar – Today at 3 PM EST – Watch