In this series I figured I would test out .NET MAUI’s capabilities by replicating a UI for an existing application. This will be a multi-part series as I will try to replicate multiple views of the application. This first part will involve the main page, or the starting page, of the application. I plan to also do parts for the list view of the different vendors, list view of the different dishes and the details view of a specific dish.
Breaking it up
Let’s first start by dividing this page up into different sections. We’ll call them title section, search section and main section. We also have the main layout of our XAML page, which will contain all the sections mentioned. We’ll use a
Grid to define some rows for this:
The title section consists of the menu button, the location title (“Hjem”, which means “Home” in Norwegian), the favorite button and the cart button. We’ll set up another
Grid here to structure the elements.
For the icons I am using Material design font icons. For instructions on how to do that, go check out this video by Karl Searl. I have also defined a
PrimaryColor in my
App.xaml, which is the pink color used in the app.
Here is the XAML for the different elements:
For the search section I decided to use the
Border control. The more natural choice here would have been to use a
SearchBar control, but I wanted to play around with corner radius and also make sure that the control would look the same on all platforms. So it may not be functional, but it sure looks pretty.
I also use the
FormattedString so that I can combine a font icon and text into the same label.
We’ll split the main section into two parts: the upper part, which contains one rectangle, and the lower part, which contains the three rectangles of different sizes.
The upper part will consist of a
Frame with a
Grid child element. We’ll use
Frame to easily set the corner radius. Here’s the XAML:
The lower part will consist of a root
Grid control. We’ll split this up into rows and columns to reflect the original design.
The first frame on the left will span across both grid rows and the XAML will look like this:
The two frames on the right will be defined in a very similar fashion:
The last three frames are missing an image, but I would use the same trick as done with the upper part to insert an image into these.
That’s it for part 1. The code for this is on my GitHub and I plan to update it with the upcoming parts as well.