Join our Discord server for community support and discussions Icon description

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

[elementor-element k="5806e339aa03f759b30b8b18be48ff65" data="eyJpZCI6IjRhYzA3Y2JhIiwiZWxUeXBlIjoid2lkZ2V0Iiwic2V0dGluZ3MiOnsiZWRpdG9yIjoiPHA+SW4gb3VyIFVJLCB3ZSd2ZSBlc3RhYmxpc2hlZCB0aGUgbGF5b3V0IHRoYXQgd2lsbCBlbmNvbXBhc3MgdGhlIGVudGlyZSBkZXNpZ24uIEJlZm9yZSBkaXZpbmcgaW50byB0aGUgZmlyc3Qgc2VjdGlvbiwgbGV0J3MgdmlzdWFsbHkgaWRlbnRpZnkgd2hpY2ggZWxlbWVudHMgd2Ugd2lsbCBiZSB3b3JraW5nIHdpdGggZm9yIHRoaXMgYmxvY2suPFwvcD4iLCJ0eXBvZ3JhcGh5X3R5cG9ncmFwaHkiOiJjdXN0b20iLCJ0eXBvZ3JhcGh5X2ZvbnRfZmFtaWx5IjoiUm9ib3RvIiwidHlwb2dyYXBoeV9mb250X3dlaWdodCI6IjQwMCIsInRleHRfY29sb3IiOiIjMjQyNDI0IiwicGFfY29uZGl0aW9uX3JlcGVhdGVyIjpbXSwicHJlbWl1bV9tc2Nyb2xsX3JlcGVhdGVyIjpbXSwicGFfY3Vyc29yX2Z0ZXh0IjoiUHJlbWl1bSBGb2xsb3cgVGV4dCIsInBhX2JhZGdlX3RleHQiOiJOZXcifSwiZWxlbWVudHMiOltdLCJ3aWRnZXRUeXBlIjoidGV4dC1lZGl0b3IifQ=="]

Lets Start Coding

Circular Profile Image

[elementor-element k="5806e339aa03f759b30b8b18be48ff65" data="eyJpZCI6IjI4Mjc3OWNlIiwiZWxUeXBlIjoid2lkZ2V0Iiwic2V0dGluZ3MiOnsiZWRpdG9yIjoiPHA+Rm9yIHRoZSBwcm9maWxlIGltYWdlLCB3ZSBiZWdpbiBieSB0cmFuc2Zvcm1pbmcgYW4gaW1hZ2UgaW50byBhIGNpcmN1bGFyIHNoYXBlLiBDb25zaWRlciBhIHNjZW5hcmlvIHdoZXJlIHlvdSB0YWtpbmcgYSBwaG90byBvZiBhbiBBUEkuIFRoaXMgdGVjaG5pcXVlIHdpbGwgZWxpbWluYXRlIHRoZSBuZWNlc3NpdHkgb2YgbWFudWFsbHkgcm91bmRpbmcgdGhlIGltYWdlcywgYXMgdGhlIHRyYW5zZm9ybWF0aW9uIHdpbGwgYmUgYXV0b21hdGVkLiBUbyBhY2hpZXZlIHRoaXMsIHdlIHdpbGwgdXNlIGFuIDxzdHJvbmc+RWxsaXBzZTxcL3N0cm9uZz4sIGFzIHNob3duIGJlbG93LjxcL3A+IiwidHlwb2dyYXBoeV90eXBvZ3JhcGh5IjoiY3VzdG9tIiwidHlwb2dyYXBoeV9mb250X2ZhbWlseSI6IlJvYm90byIsInR5cG9ncmFwaHlfZm9udF93ZWlnaHQiOiI0MDAiLCJ0ZXh0X2NvbG9yIjoiIzI0MjQyNCIsInBhX2NvbmRpdGlvbl9yZXBlYXRlciI6W10sInByZW1pdW1fbXNjcm9sbF9yZXBlYXRlciI6W10sInBhX2N1cnNvcl9mdGV4dCI6IlByZW1pdW0gRm9sbG93IFRleHQiLCJwYV9iYWRnZV90ZXh0IjoiTmV3In0sImVsZW1lbnRzIjpbXSwid2lkZ2V0VHlwZSI6InRleHQtZWRpdG9yIn0="] 
				
					<!-- 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

[elementor-element k="5806e339aa03f759b30b8b18be48ff65" data="eyJpZCI6Ijk2YjdkNjQiLCJlbFR5cGUiOiJ3aWRnZXQiLCJzZXR0aW5ncyI6eyJlZGl0b3IiOiI8cD5XZSB3aWxsIHVzZSB0d28gVGV4QmxvY2tzIHRvIGFjaGlldmUgdGhpcy4gU2VlIGNvZGUgYmVsb3c6PFwvcD4iLCJ0eXBvZ3JhcGh5X3R5cG9ncmFwaHkiOiJjdXN0b20iLCJ0eXBvZ3JhcGh5X2ZvbnRfZmFtaWx5IjoiUm9ib3RvIiwidHlwb2dyYXBoeV9mb250X3dlaWdodCI6IjQwMCIsInRleHRfY29sb3IiOiIjMjQyNDI0IiwicGFfY29uZGl0aW9uX3JlcGVhdGVyIjpbXSwicHJlbWl1bV9tc2Nyb2xsX3JlcGVhdGVyIjpbXSwicGFfY3Vyc29yX2Z0ZXh0IjoiUHJlbWl1bSBGb2xsb3cgVGV4dCIsInBhX2JhZGdlX3RleHQiOiJOZXcifSwiZWxlbWVudHMiOltdLCJ3aWRnZXRUeXBlIjoidGV4dC1lZGl0b3IifQ=="] 
				
					<!--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

[elementor-element k="5806e339aa03f759b30b8b18be48ff65" data="eyJpZCI6IjU2YjM0YzhhIiwiZWxUeXBlIjoid2lkZ2V0Iiwic2V0dGluZ3MiOnsiZWRpdG9yIjoiPHA+VG8gY3JlYXRlIHRoZSBub3RpZmljYXRpb24gZmVhdHVyZSwgd2Ugd2lsbCBhZGQgYSBidXR0b24gd2l0aCBhIGNpcmN1bGFyIHNoYXBlIGFuZCBhZGQgYSBiZWxsIGljb24uIFRoaXMgd2lsbCBzZXJ2ZSBhcyBvdXIgbm90aWZpY2F0aW9uIGJ1dHRvbi48XC9wPiIsInR5cG9ncmFwaHlfdHlwb2dyYXBoeSI6ImN1c3RvbSIsInR5cG9ncmFwaHlfZm9udF9mYW1pbHkiOiJSb2JvdG8iLCJ0eXBvZ3JhcGh5X2ZvbnRfd2VpZ2h0IjoiNDAwIiwidGV4dF9jb2xvciI6IiMyNDI0MjQiLCJwYV9jb25kaXRpb25fcmVwZWF0ZXIiOltdLCJwcmVtaXVtX21zY3JvbGxfcmVwZWF0ZXIiOltdLCJwYV9jdXJzb3JfZnRleHQiOiJQcmVtaXVtIEZvbGxvdyBUZXh0IiwicGFfYmFkZ2VfdGV4dCI6Ik5ldyJ9LCJlbGVtZW50cyI6W10sIndpZGdldFR5cGUiOiJ0ZXh0LWVkaXRvciJ9"] 
				
					<!-- 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)

[elementor-element k="5806e339aa03f759b30b8b18be48ff65" data="eyJpZCI6IjFkOTc1ZGQ3IiwiZWxUeXBlIjoid2lkZ2V0Iiwic2V0dGluZ3MiOnsiZWRpdG9yIjoiPHA+VG8gaW1wbGVtZW50IHRoZSBTZWFyY2gsIHdlIHdpbGwgdXNlIHRoZSBBdXRvU3VnZ2VzdEJveCBjb250cm9sIGFuZCBhZGQgYSBtYWduaWZ5aW5nIGdsYXNzIGljb24uIEZvciB0aGUgaWNvbiwgeW91IGp1c3QgaGF2ZSB0byBzZXQgdGhlIFF1ZXJ5SWNvbiBwcm9wZXJ0eSB3aXRoIFwiRmluZFwiIGFzIGEgdmFsdWUuPFwvcD4iLCJ0eXBvZ3JhcGh5X3R5cG9ncmFwaHkiOiJjdXN0b20iLCJ0eXBvZ3JhcGh5X2ZvbnRfZmFtaWx5IjoiUm9ib3RvIiwidHlwb2dyYXBoeV9mb250X3dlaWdodCI6IjQwMCIsInRleHRfY29sb3IiOiIjMjQyNDI0IiwicGFfY29uZGl0aW9uX3JlcGVhdGVyIjpbXSwicHJlbWl1bV9tc2Nyb2xsX3JlcGVhdGVyIjpbXSwicGFfY3Vyc29yX2Z0ZXh0IjoiUHJlbWl1bSBGb2xsb3cgVGV4dCIsInBhX2JhZGdlX3RleHQiOiJOZXcifSwiZWxlbWVudHMiOltdLCJ3aWRnZXRUeXBlIjoidGV4dC1lZGl0b3IifQ=="] 
				
					<!--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

[elementor-element k="5806e339aa03f759b30b8b18be48ff65" data="eyJpZCI6IjMwOTk5NjM4IiwiZWxUeXBlIjoid2lkZ2V0Iiwic2V0dGluZ3MiOnsiZWRpdG9yIjoiPHA+RmluYWxseSwgbGV0XHUyMDE5cyBidWlsZCBhIGhvcml6b250YWwgbGlzdC4gRWFjaCBpdGVtIGlzIGNvbXBvc2VkIG9mIGEgc21hbGwgaW1hZ2UgYW5kIGEgdGV4dC48XC9wPiIsInR5cG9ncmFwaHlfdHlwb2dyYXBoeSI6ImN1c3RvbSIsInR5cG9ncmFwaHlfZm9udF9mYW1pbHkiOiJSb2JvdG8iLCJ0eXBvZ3JhcGh5X2ZvbnRfd2VpZ2h0IjoiNDAwIiwidGV4dF9jb2xvciI6IiMyNDI0MjQiLCJwYV9jb25kaXRpb25fcmVwZWF0ZXIiOltdLCJwcmVtaXVtX21zY3JvbGxfcmVwZWF0ZXIiOltdLCJwYV9jdXJzb3JfZnRleHQiOiJQcmVtaXVtIEZvbGxvdyBUZXh0IiwicGFfYmFkZ2VfdGV4dCI6Ik5ldyJ9LCJlbGVtZW50cyI6W10sIndpZGdldFR5cGUiOiJ0ZXh0LWVkaXRvciJ9"] 
				
					<!-- 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 -- >
[elementor-element k="5806e339aa03f759b30b8b18be48ff65" data="eyJpZCI6ImY0NmQzMGMiLCJlbFR5cGUiOiJ3aWRnZXQiLCJzZXR0aW5ncyI6eyJlZGl0b3IiOiI8cD5XaGVuIGV4ZWN1dGluZyB0aGUgY29kZSBhYm92ZSwgeW91IHdpbGwgaGF2ZSBhIHJlc3VsdCBsaWtlIHRoZSBmb2xsb3dpbmc6PFwvcD4iLCJ0eXBvZ3JhcGh5X3R5cG9ncmFwaHkiOiJjdXN0b20iLCJ0eXBvZ3JhcGh5X2ZvbnRfZmFtaWx5IjoiUm9ib3RvIiwidHlwb2dyYXBoeV9mb250X3dlaWdodCI6IjQwMCIsInRleHRfY29sb3IiOiIjMjQyNDI0IiwicGFfY29uZGl0aW9uX3JlcGVhdGVyIjpbXSwicHJlbWl1bV9tc2Nyb2xsX3JlcGVhdGVyIjpbXSwicGFfY3Vyc29yX2Z0ZXh0IjoiUHJlbWl1bSBGb2xsb3cgVGV4dCIsInBhX2JhZGdlX3RleHQiOiJOZXcifSwiZWxlbWVudHMiOltdLCJ3aWRnZXRUeXBlIjoidGV4dC1lZGl0b3IifQ=="]

2. Popular Destinations

[elementor-element k="5806e339aa03f759b30b8b18be48ff65" data="eyJpZCI6IjRiZWJkMzZkIiwiZWxUeXBlIjoid2lkZ2V0Iiwic2V0dGluZ3MiOnsiZWRpdG9yIjoiPHA+TW92aW5nIG9uIHRvIHRoZSBzZWNvbmQgYmxvY2ssIHdlIG5lZWQgdG8gZm9jdXMgb24gdHdvIGVsZW1lbnRzOiBUaGUgbWFpbiB0aXRsZSBhbmQgYSBsaXN0IG9mIGNhcmRzIHJlcHJlc2VudGluZyBwb3B1bGFyIGRlc3RpbmF0aW9ucy5cdTAwYTAgTGV0J3MgYnJlYWsgZG93biB0aGUgY2FyZCBhbmQgaWRlbnRpZnkgdGhlIGVsZW1lbnRzIHdlJ2xsIHdvcmsgd2l0aCB2aXN1YWxseSBiZWZvcmUgd2Ugc3RhcnQgd3JpdGluZyBjb2RlLjxcL3A+IiwidHlwb2dyYXBoeV90eXBvZ3JhcGh5IjoiY3VzdG9tIiwidHlwb2dyYXBoeV9mb250X2ZhbWlseSI6IlJvYm90byIsInR5cG9ncmFwaHlfZm9udF93ZWlnaHQiOiI0MDAiLCJ0ZXh0X2NvbG9yIjoiIzI0MjQyNCIsInBhX2NvbmRpdGlvbl9yZXBlYXRlciI6W10sInByZW1pdW1fbXNjcm9sbF9yZXBlYXRlciI6W10sInBhX2N1cnNvcl9mdGV4dCI6IlByZW1pdW0gRm9sbG93IFRleHQiLCJwYV9iYWRnZV90ZXh0IjoiTmV3In0sImVsZW1lbnRzIjpbXSwid2lkZ2V0VHlwZSI6InRleHQtZWRpdG9yIn0="]

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

[elementor-element k="5806e339aa03f759b30b8b18be48ff65" data="eyJpZCI6IjE4ZDE4ZjY1IiwiZWxUeXBlIjoid2lkZ2V0Iiwic2V0dGluZ3MiOnsiZWRpdG9yIjoiPHA+VGFrZSBpbnRvIGFjY291bnQgdGhhdCBib3RoIHRoZSBtYWluIGltYWdlLCBsaWtlIGJ1dHRvbiwgbmFtZSBsb2NhdGlvbiBhbmQgcHJpY2Ugd2lsbCBnbyBpbnNpZGUgYSBsaXN0LiBUaGF0J3Mgd2h5IHdlJ2xsIGRvIHRoZSBMaXN0VmlldyBmaXJzdC4gVG8gc2hhcGUgZWFjaCBjYXJkLCB3ZSB3aWxsIHVzZSB0aGUgQm9yZGVycyBpbiBvcmRlciB0byByb3VuZCB0aGUgY29ybmVycyBhbmQgaW5zaWRlIHdlIHdpbGwgYWRkIGFub3RoZXIgR3JpZCB0byBvcmdhbml6ZSB0aGUgZWxlbWVudHMuPFwvcD4iLCJ0eXBvZ3JhcGh5X3R5cG9ncmFwaHkiOiJjdXN0b20iLCJ0eXBvZ3JhcGh5X2ZvbnRfZmFtaWx5IjoiUm9ib3RvIiwidHlwb2dyYXBoeV9mb250X3dlaWdodCI6IjQwMCIsInRleHRfY29sb3IiOiIjMjQyNDI0IiwicGFfY29uZGl0aW9uX3JlcGVhdGVyIjpbXSwicHJlbWl1bV9tc2Nyb2xsX3JlcGVhdGVyIjpbXSwicGFfY3Vyc29yX2Z0ZXh0IjoiUHJlbWl1bSBGb2xsb3cgVGV4dCIsInBhX2JhZGdlX3RleHQiOiJOZXcifSwiZWxlbWVudHMiOltdLCJ3aWRnZXRUeXBlIjoidGV4dC1lZGl0b3IifQ=="] 
				
					<!--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

[elementor-element k="5806e339aa03f759b30b8b18be48ff65" data="eyJpZCI6IjNkMjIzODhiIiwiZWxUeXBlIjoid2lkZ2V0Iiwic2V0dGluZ3MiOnsiZWRpdG9yIjoiPHA+TWFrZSBzdXJlIHRoZSBpbWFnZXMgeW91IHdvcmsgd2l0aCBhcmUgb2YgZ29vZCBxdWFsaXR5IGZvciBhIGJldHRlciBVSS4gSW4gdGhpcyBjYXJkIHRoZSBpbWFnZSBpcyBjb21wbGV0ZWx5IGdsdWVkIHRvIHRoZSBlZGdlcyBvZiBib3RoIHNpZGVzIGFuZCB0aGUgdG9wLiBUaGUgZm9sbG93aW5nIGNvZGUgbXVzdCBiZSBhZGRlZCBpbiB0aGUgcG9zaXRpb24gd2hlcmUgdGhlIGNvbW1lbnQgdGhhdCBzYXlzOjxcL3A+PHA+Jmx0OyEtLSBBZGQgdGhlIFwiTWFpbiBwaWN0dXJlXCIgZWxlbWVudC0tICZndDsgYXMgSSBzaG93IHlvdSBiZWxvdzo8XC9wPiIsInR5cG9ncmFwaHlfdHlwb2dyYXBoeSI6ImN1c3RvbSIsInR5cG9ncmFwaHlfZm9udF9mYW1pbHkiOiJSb2JvdG8iLCJ0eXBvZ3JhcGh5X2ZvbnRfd2VpZ2h0IjoiNDAwIiwidGV4dF9jb2xvciI6IiMyNDI0MjQiLCJwYV9jb25kaXRpb25fcmVwZWF0ZXIiOltdLCJwcmVtaXVtX21zY3JvbGxfcmVwZWF0ZXIiOltdLCJwYV9jdXJzb3JfZnRleHQiOiJQcmVtaXVtIEZvbGxvdyBUZXh0IiwicGFfYmFkZ2VfdGV4dCI6Ik5ldyJ9LCJlbGVtZW50cyI6W10sIndpZGdldFR5cGUiOiJ0ZXh0LWVkaXRvciJ9"] 
				
					<!-- 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 -- >
[elementor-element k="5806e339aa03f759b30b8b18be48ff65" data="eyJpZCI6IjM5ZTg1ZmM0IiwiZWxUeXBlIjoid2lkZ2V0Iiwic2V0dGluZ3MiOnsiZWRpdG9yIjoiPHA+Tm93IGxldCdzIHNlZSB0aGUgcmVzdWx0IG9idGFpbmVkIGZyb20gdGhlIGNvZGUgZGV2ZWxvcGVkIGZvciB0aGlzIGJsb2NrOjxcL3A+IiwidHlwb2dyYXBoeV90eXBvZ3JhcGh5IjoiY3VzdG9tIiwidHlwb2dyYXBoeV9mb250X2ZhbWlseSI6IlJvYm90byIsInR5cG9ncmFwaHlfZm9udF93ZWlnaHQiOiI0MDAiLCJ0ZXh0X2NvbG9yIjoiIzI0MjQyNCIsInBhX2NvbmRpdGlvbl9yZXBlYXRlciI6W10sInByZW1pdW1fbXNjcm9sbF9yZXBlYXRlciI6W10sInBhX2N1cnNvcl9mdGV4dCI6IlByZW1pdW0gRm9sbG93IFRleHQiLCJwYV9iYWRnZV90ZXh0IjoiTmV3In0sImVsZW1lbnRzIjpbXSwid2lkZ2V0VHlwZSI6InRleHQtZWRpdG9yIn0="]

3. Special for You​

[elementor-element k="5806e339aa03f759b30b8b18be48ff65" data="eyJpZCI6IjdkN2E4MmM2IiwiZWxUeXBlIjoid2lkZ2V0Iiwic2V0dGluZ3MiOnsiZWRpdG9yIjoiPHA+V2UgYXJlIGFsbW9zdCBkb25lISBXZSBvbmx5IG5lZWQgdG8gZGV2ZWxvcCB0aGUgbGFzdCBibG9jayEgSXQgaXMgYSB2ZXJ5IHNpbXBsZSBibG9jayBiZWNhdXNlIGl0IHVzZXMgYWJpbGl0aWVzXC9lbGVtZW50cyB0aGF0IHdlIGFscmVhZHkgbGVhcm5lZCB0byB1c2UgaW4gcHJldmlvdXMgYmxvY2tzLiBMZXQncyB2aXN1YWxseSBpZGVudGlmeSB0aGUgZWxlbWVudHMgd2Ugd2lsbCBidWlsZC48XC9wPiIsInR5cG9ncmFwaHlfdHlwb2dyYXBoeSI6ImN1c3RvbSIsInR5cG9ncmFwaHlfZm9udF9mYW1pbHkiOiJSb2JvdG8iLCJ0eXBvZ3JhcGh5X2ZvbnRfd2VpZ2h0IjoiNDAwIiwidGV4dF9jb2xvciI6IiMyNDI0MjQiLCJwYV9jb25kaXRpb25fcmVwZWF0ZXIiOltdLCJwcmVtaXVtX21zY3JvbGxfcmVwZWF0ZXIiOltdLCJwYV9jdXJzb3JfZnRleHQiOiJQcmVtaXVtIEZvbGxvdyBUZXh0IiwicGFfYmFkZ2VfdGV4dCI6Ik5ldyJ9LCJlbGVtZW50cyI6W10sIndpZGdldFR5cGUiOiJ0ZXh0LWVkaXRvciJ9"]

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 5.2 LIVE Webinar – Today at 3 PM EST – Watch