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.
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:
Menu to Eat
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.
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.