🕓 7 MIN Figma is notably regarded …
Menu
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!
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>
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.
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 -- >
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 -- >
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 -- >
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-- >
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:
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-->
<TextBlock Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="2"
Text="Popular Destination" FontWeight="Bold"/>
<!-- Add here the following block of code -- >
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 -- >
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 -- >
<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 -- >
<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:
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.
<!-- 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-->
<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!
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)
🕓 7 MIN Figma is notably regarded …
🕓 3 MIN Welcome to this article! …
🕓 6 MIN In the previous articles, …
Join the Uno Platform 5.2 LIVE Webinar – Tomorrow, April 30th at 3 PM EST – Save to calendar
