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

Replicating Food Delivery App UI with Uno Platform

29 Nov 2022

Welcome to this article! 👋 Together, we will develop a mobile user interface using Uno Platform XAML. As you might know, the XAML Uno Platform uses is 100% aligned with XAML used for WinUI and UWP applications. Even if you are more familiar with other XAML variations, such as Xamarin.Forms / MAUI or WPF, you will find it very familiar. It is the default XAML used by modern Windows applications.

Since introducing our Figma plugin, Uno Platform has slowly shifted to introducing Figma as the starting point for new project product design and high-fidelity prototyping. However, using Figma is not a default entry point for developing UI with Uno Platform. On the contrary, we have been deploying consumer-facing mobile apps using only XAML for over 13 years with our parent agency, nventive. With this article, we’d like to show you what you can do with Uno Platform alone.

We will divide this article into different sub-topics, which are as follows:

Analyzing the visual structure of the user interface.
Code explanation: We will see step by step each one of the components obtained from the analysis, and we will learn how to convert it to XAML code.

Breaking Down the Visual Structure of the UI

For a better understanding, we will explain how to translate each of these blocks into functional code. The structure will be divided into three blocks:

Profile
Menu to Eat
Recommended

To begin, we will add the main layout structure in which we will add all the code blocks explained in this article; in this case, we will use a Grid.

				
					<!-- Page layout structure-->
<Grid Padding="30,30,30,0" ColumnSpacing="20" RowDefinitions="Auto,Auto,Auto,Auto,Auto,Auto,Auto" ColumnDefinitions="*,*,Auto">
    <!-- Add the "Profile main elements" code block"-- >
    <!-- Add the "Menu to eat" code block"-- >
    <!-- Add the "Recommended" code block"-- >
 </Grid>

Code Explanation

Now that we have the main layout structure ready let’s start!

In this block, we will build all the elements of the application’s header. It’s composed of three different elements, which I mention below:

Profile Image
Search Button
Location Button

Let’s locate these elements graphically:

Let's Start Coding

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

				
					<!-- Profile image-->
        <Image Grid.Column="0" Grid.Row="0" HorizontalAlignment="Left" Source="mari" Height="50" Width="50" />
        <!-- Search and Book Buttons-->
        <Button Grid.Column="1" Grid.Row="0" Background="#1a204e" Height="50" Width="50" CornerRadius="25" HorizontalAlignment="Right">
            <Image Source="find"/>
        </Button>
        <!-- Location Button-->
        <Button Grid.Column="2" Grid.Row="0" Background="#1a204e" Height="50" Width="50" CornerRadius="25" HorizontalAlignment="Right">
            <Image Source="book"/>
        </Button>

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

Block 2

Let’s continue with the second block; in this case, the UI needs to present the different eating options. Analyzing the elements that we will pass to code this has the following:

Greeting Label
Welcome label
Frames: Two upper frames in which they are presented:
- Food image
- Food Category
- Restaurants’ available description
Horizontal Frame to see all the categories; it has a Label with a general description, another Label for the number of categories, and an icon.

Let’s locate these elements graphically:

Let's Start Coding

Greeting and Welcome labels.

				
					<!-- 2. Menu to Eat-->

        <!-- Greeting label -->
        <TextBlock Grid.Column="0" Grid.ColumnSpan="3" Grid.Row="1" Text="Hello, Rachel!" FontSize="30" Foreground="White" FontWeight="Bold" Margin="0,20,0,0" />
        <!-- Welcome Label-->
        <TextBlock Grid.Column="0" Grid.ColumnSpan="3" Grid.Row="2" Text="Wanna eat tonight?" FontSize="15" Foreground="White"/>

Menu List

Here we use a ListView and mock data to present the information on the screen; the crucial point is that with this, our XAML will not have hard code but will read it directly from the source that we assign to the ListView (in this case mock data).

Also, use the ItemContainerStyle to make it so that when you select an option, it is shaded in precisely the same way with rounded edges as the original option.

				
					<!-- Menu list-->
<ListView Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="3" Margin="0,20,0,0" ItemsSource="{x:Bind food}">
               <ListView.ItemsPanel>
                   <ItemsPanelTemplate>
                       <StackPanel Orientation="Horizontal"/>
                   </ItemsPanelTemplate>
               </ListView.ItemsPanel>
               <ListView.ItemContainerStyle>
                   <Style TargetType="ListViewItem">
                       <Setter Property="BorderThickness" Value="1" />
                       <Setter Property="BorderBrush" Value="#1a204e" />
                       <Setter Property="CornerRadius" Value="15" />
                       <Setter Property="Margin" Value="10" />
                       <Setter Property="Padding" Value="0" />
                       <Setter Property="Height" Value="200" />
                       <Setter Property="Width" Value="150" />
                   </Style>
               </ListView.ItemContainerStyle>
               <ListView.ItemTemplate>
                   <DataTemplate x:DataType="local:Food">
                       <Border Background="Transparent" BorderThickness="0.8" Height="200" Width="150" CornerRadius="15">
                           <Grid Padding="10" RowDefinitions="*,Auto,Auto">
                               <Image Grid.Row="0" Source="{x:Bind Picture}" Height="100" Width="100"/>
                               <TextBlock Grid.Row="1" Text="{x:Bind Name}" FontWeight="Bold" Foreground="White" HorizontalAlignment="Center"/>
                               <TextBlock Grid.Row="2" Text="{x:Bind Description}" Foreground="White" HorizontalAlignment="Center"/>
                           </Grid>
                       </Border>
                   </DataTemplate>
               </ListView.ItemTemplate>
           </ListView>

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

Horizontal Frame

I added a Border which allows me to give the rounded appearance of this category.

				
					<!-- Horizontal category-->
<Border Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="3" CornerRadius="15" BorderBrush="#1a204e" BorderThickness="0.8" HorizontalAlignment="Stretch"  Height="100" Margin="0,10">
                 <Grid Padding="10" RowDefinitions="*,*" ColumnDefinitions="*,Auto">
                     <TextBlock Grid.Row="0" Grid.Column="0" Text="See All Categories" FontWeight="Bold" Foreground="White" VerticalAlignment="Bottom" />
                     <TextBlock Grid.Row="1" Grid.Column="0" Text="100 Categories" Foreground="White" />
                     <Image Grid.Row="0" Grid.Column="1" Grid.RowSpan="2" Source="food3" Height="100" Width="100" VerticalAlignment="Bottom" HorizontalAlignment="Right" />
                 </Grid>
             </Border>

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

Block 3

Finally, we will work with a recommended list of meals, plus a title that we will reflect with a Label. Here we will work with dynamic information by implementing a ListView; we will use mock data to reflect that list!

The most important thing about this is that with this structure, you don’t have to change the XAML and what we have built as Mocks data; you replace it with an API / endpoint, and your information can grow at any time without having to alter the code! 💚

Again, let’s check the specific elements to replicate from our UI:

Title

				
					<!-- 3. Recommended-->
        
 <!-- Title-->
<TextBlock Grid.Row="5" Grid.Column="0" Text="RECOMMENDED" FontWeight="Bold" Foreground="White" Margin="0,20"/>

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

Recommended Menu

				
					 <!-- Recommended menu -- >

<ListView Grid.Row="6" Grid.Column="0" Grid.ColumnSpan="3"  ItemsSource="{x:Bind recommendations}" SelectionMode="None">
               <ListView.ItemTemplate>
                   <DataTemplate x:DataType="local:Recommendation">
                       <Grid RowDefinitions="Auto,Auto,Auto" ColumnDefinitions="Auto,*" Padding="0,0,0,15">
                           <Image Grid.Row="0" Grid.Column="0" Grid.RowSpan="3" Source="{x:Bind Picture}" VerticalAlignment="Center" Height="45" Width="45"

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

About Uno Platform

For those new to Uno Platform, it allows for creating pixel-perfect, single-source C# and XAML apps that run natively on Windows, iOS, Android, macOS, Linux, and Web via WebAssembly. It offers Figma integration for design-development handoff and extensions to bootstrap your projects. Uno Platform is free, open-source (Apache 2.0), and available on GitHub.

Next Steps

To upgrade to the latest release of Uno Platform, please update your packages to 4.6 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)