Easily Replicate a Waiting List UI in .NET MAUI

Gayathri-github7 - Feb 9 - - Dev Community

In this article, we will enhance your XAML skills by replicating a waiting list UI inspired by this Dribble design.

Start by knowing the structure

Let’s start by grasping the fundamental structure of the waiting list UI. To facilitate this, we’ve divided the article into clear steps, each representing a cluster of visual elements essential for replicating the UI.

Refer to the following image.

The Waiting List UI We Will Replicate

The Waiting List UI We Will Replicate

What specific skills will you be learning in XAML?

In addition to strengthening your XAML skills, you will learn to use:

Schedule header

In the schedule header, we’ll render the following UI elements:

Main layout

First, we’ll generate a page named MainPage.xaml, which serves as the container for the main layout that organizes the blocks outlined in the previous image. The chosen layout is VerticalStackLayout , to optimize the utilization of screen space.

Refer to the following code example.

<!-- Main layout -->
<VerticalStackLayout BackgroundColor="#e1eaf8"
                     Margin="0,0,0,-65">
    <!-- Step 1: Add all the elements contained in the schedule header -->
    <!-- Step 2: Add all the elements contained in the schedule item -->
</VerticalStackLayout>
Enter fullscreen mode Exit fullscreen mode

We have finished implementing the main layout, so let’s design the schedule header in XAML.

Designing the schedule header

The schedule header encompasses an avatar, name, role, description, minutes, and a Get Help button. Notably, the design incorporates rounded bottom edges, achieved using the Border control.

Refer to the following code example.

<!-- 1. Schedule header -->
<Border StrokeShape="RoundRectangle 0,0,25,25"
        StrokeThickness="0"
        BackgroundColor="White">

    <Grid RowDefinitions="Auto,Auto,Auto,Auto,Auto"
          ColumnDefinitions="Auto,*"
          Padding="30">
        <!-- Add the Avatar element -->
        <!-- Add name & role elements -->
        <!-- Add description & minutes elements -->
        <!-- Add the Get Help button element -->
    </Grid>
</Border>
Enter fullscreen mode Exit fullscreen mode

Adding .NET MAUI Avatar View reference

To display the user image, we will use thre Syncfusion .NET MAUI Avatar View:

1.To add the .NET MAUI Avatar Viewto your project, open the NuGet package manager in Visual Studio, search for Syncfusion.Maui.Core, and then install it.Syncfusion MAUI Core NuGet Package
2.To register the handler for Syncfusion core, go to your MauiProgram.cs file. Add the Syncfusion.Maui.Core.Hosting namespace. Then, add the following line of code just after the line .UseMauiApp() in the CreateMauiApp method.

.ConfigureSyncfusionCore();
Enter fullscreen mode Exit fullscreen mode

3.Then, add the namespace for .NET MAUI Avatar View.

xmlns:syncAvatar="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core"
Enter fullscreen mode Exit fullscreen mode

4.Initialize and configure the Avatar Viewusing the ImageSource property.

<!-- Avatarview -->
<sfControl:SfAvatarView Grid.Column="0" Grid.Row="0" Grid.RowSpan="2"
                        ContentType="Custom"
                        ImageSource="model.jpeg"
                        VerticalOptions="Start"
                        Stroke="Transparent"
                        HorizontalOptions="Start"
                        WidthRequest="60"
                        HeightRequest="60"
                        CornerRadius="30"/>
Enter fullscreen mode Exit fullscreen mode

Designing the UI elements

To enhance the user experience, let’s enhance specific UI elements within the schedule header.

Designing name and role elements

Refer to the following code example to design the name and role elements.

 <!-- Name & role -->
<Label Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" HorizontalTextAlignment="Center" Text="Dr. Brooklyn Simmons" FontSize="21"/>  
<Label Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2" HorizontalTextAlignment="Center" Text="Family Medicine, Primary Care" FontSize="15" TextColor="Silver" Margin="0,0,0,35"/>
Enter fullscreen mode Exit fullscreen mode

Designing description and minutes

Refer to the following code example to design the description and minutes elements to ensure transparency about the estimated waiting time.

 <!-- Description & minutes -->
<Label Grid.Column="0" Grid.Row="2" Text="Estimated waiting time:"/>
<Label Grid.Column="0" Grid.Row="3" Text="~16 minutes" TextColor="#224785"/>
Enter fullscreen mode Exit fullscreen mode

Streamlining assistance with a Get help button

Refer to the following code example to design the Get help button.

<!-- Get help button -->
<Button Grid.Column="1" Grid.Row="2" Grid.RowSpan="3" WidthRequest="120" HorizontalOptions="End" Text="Get help" BackgroundColor="Transparent" TextColor="Black" CornerRadius="10" BorderWidth="1" VerticalOptions="Center" BorderColor="#cddefa" Margin="10,0,0,0"/>
Enter fullscreen mode Exit fullscreen mode

Building the schedule items

Let’s create a list of cards for the schedule, like in the following image.

Building the schedule items in .NET MAUI

Building the schedule items in .NET MAUI

This section includes the following elements:

  • Populating the cards list.
  • Designing the individual elements in a card.

Populating the cards list

We’ll add some mock data to visualize the final list result by following these steps. Feel free to use any data you prefer.

1. Create a Model folder

Set up a Model folder and add the Schedule.cs class to it. Define the necessary attributes that we’ll be utilizing.

Refer to the following code example.

public class Schedule
{
    private string picture;
    private string minutes;
    private string description;
    private string time;
    private bool playBasket;
    private bool readArticle;

    public string Picture
    {
        get { return picture; }
        set { picture = value; }
    }

    public string Minutes
    {
        get { return minutes; }
        set { minutes = value; }
    }

    public string Description
    {
        get { return description; }
        set { description = value; }
    }

    public string Time
    {
        get { return time; }
        set { time = value; }
    }

    public bool PlayBasket
    {
        get { return playBasket; }
        set { playBasket = value; }
    }

    public bool ReadArticle
    {
        get { return readArticle; }
        set { readArticle = value; }
    }
}
Enter fullscreen mode Exit fullscreen mode

2. Develop a ViewModel with mock data

Let’s set up a ViewModel populated with mock data. First, create a folder named ViewModel. Then, create a file called ScheduleViewModel. cs in it.

public class ScheduleViewModel
{
    private ObservableCollection<Schedule> scheduleCollection;

    public ObservableCollection<Schedule> Schedule
    {
        get { return scheduleCollection; }
        set { scheduleCollection = value; }
    }

    internal void GenerateInfo()
    {
        scheduleCollection = new ObservableCollection<Schedule>();
        scheduleCollection.Add(new Schedule { Time = "1:40 PM", Picture = "", Minutes = "16 minutes", Description = "Maybe you want to make your waiting more pleasant?", PlayBasket = true, ReadArticle = false });
        scheduleCollection.Add(new Schedule { Time = "1:25 PM", Picture = "", Minutes = "25 minutes", Description = "We are actively preparing for your visit. Thank you for your patience. Our dedicated team is ensuring a smooth, efficient, and prompt service for you.", PlayBasket = false, ReadArticle = true });
        scheduleCollection.Add(new Schedule { Time = "1:28 PM", Picture = "", Minutes = "20 minutes", Description = "Maybe you want to make your waiting more pleasant?", PlayBasket = true, ReadArticle = false });
    }

    public ScheduleViewModel()
    {
        GenerateInfo();
    }
}
Enter fullscreen mode Exit fullscreen mode

Then, populate this ViewModel with mock data to simulate the appearance of the schedule list. Lastly, ensure that your XAML includes references to this ViewModel.

public MainPage()
{
    InitializeComponent();
    BindingContext = new ViewModels.ScheduleViewModel();
}
Enter fullscreen mode Exit fullscreen mode

3. Adding the ListView

Once we have the mock data ready to display in the UI list, let’s add a list view. This will enable us to visualize the previously added mock data. For this, we will use the Syncfusion .NET MAUI ListView control.

First, refer to the Getting started with .NET MAUI ListView documentation. Then, follow these steps to implement the control:
1.Add the Syncfusion.Maui.ListView NuGet package.Add the Syncfusion.Maui.ListView NuGet package

  1. Go to the MauiProgram.cs file and register the handler for the Syncfusion .NET MAUI ListView. To do so, navigate to the CreateMauiApp method and then, just before the line return builder.Build();, add the builder.ConfigureSyncfusionListView(); method.
  2. Now, add Syncfusion.Maui.ListView namespace in the XAML page. 
xmlns:syncfusion="clr-namespace:Syncfusion.Maui.ListView;assembly=Syncfusion.Maui.ListView"
Enter fullscreen mode Exit fullscreen mode
  1. Finally, initialize the ListView control using the following code example in your XAML page. 
<listView:SfListView ItemsSource="{Binding Schedule}"
                     ItemSize="215" 
                     ScrollBarVisibility="Never">
    <listView:SfListView.ItemTemplate>
        <DataTemplate>
            <Grid ColumnDefinitions="Auto,*"
                  RowDefinitions="Auto,Auto,*,Auto,Auto,Auto"
                  Padding="15,20,20,0">
                <!-- Add the time, avatar, and line elements. -->   
                <!-- Add the border: minutes, and description elements. -->                       
            </Grid>
        </DataTemplate>
    </listView:SfListView.ItemTemplate>
</listView:SfListView>
Enter fullscreen mode Exit fullscreen mode

Designing the individual item elements in a card

Let’s design the individual elements within each schedule card.

Time, avatar, and line

We will display the time description using a simple Label. For the avatar, we will use the Syncfusion AvatarView again (since it’s already implemented, you won’t need to implement it again).

We’ll use a BoxView to create the line. Note that it’s also possible to create this line using a .NET MAUI line shape. However, for this exercise, we’ll use the BoxView.

Refer to the following code example.

<!-- Time -->
<Label Grid.Row="0" Grid.Column="1" Text="{Binding Time}" TextColor="#1b4485" Margin="10,0,0,5"/>

<!-- Avatar -->
<sfControl:SfAvatarView Grid.Column="0" Grid.Row="1"   
                        ContentType="Default" 
                        VerticalOptions="Start" 
                        Stroke="Transparent"
                        BackgroundColor="White"
                        HorizontalOptions="Start" 
                        WidthRequest="40"
                        HeightRequest="40"
                        CornerRadius="20"/>

<!-- Line -->
<BoxView Grid.Column="0" Grid.Row="2" Grid.RowSpan="2" Opacity="0.3" HorizontalOptions="FillAndExpand" WidthRequest="1" Color="#1690F4"/>
Enter fullscreen mode Exit fullscreen mode

Border: minutes and description

We’ve reached the final section of code to complete our UI! Here, we’ll add a Border control to achieve the card’s rounded effect and include necessary information like the duration in minutes and description.

Refer to the following code example.

<Border Grid.Column="1" Grid.Row="1" Grid.RowSpan="2"
        Margin="10,0,0,0"
        StrokeShape="RoundRectangle 15"
        StrokeThickness="0"
        BackgroundColor="White"
        HeightRequest="170">
    <VerticalStackLayout Padding="15" Spacing="10">
        <!-- Minutes -->
        <Label>
            <Label.FormattedText>
                <FormattedString>
                    <Span Text="Updated estimated waiting time:" FontSize="15"/>
                    <Span Text="{Binding Minutes, StringFormat='~{0} minutes.'}" FontSize="14"/>
                </FormattedString> 
            </Label.FormattedText> 
        </Label>
        <!-- Description -->
        <Label Text="{Binding Description}" TextColor="#636c7a" />
        <Button Text="Play Basketball" BackgroundColor="#e0ecff" IsEnabled="True" IsVisible="{Binding PlayBasket}" CornerRadius="20" TextColor="#1b4485"/>
    </VerticalStackLayout>
</Border>
Enter fullscreen mode Exit fullscreen mode

That’s all! Our UI is done!

Conclusion

Thanks for reading! In this blog, we enhanced your XAML knowledge by teaching you how to replicate a waiting list UI using Syncfusion .NET MAUI controls. Try out the steps outlined in the post and leave your thoughts in the comments section below.

Syncfusion’s .NET MAUI controls were created from the ground up using .NET MAUI, which makes them feel like native framework controls. These controls are optimized to manage large amounts of data, making them ideal for building top-notch, cross-platform mobile and desktop apps.

If you have any questions or need assistance, don’t hesitate to reach out to us through our support forum, support portal, or feedback portal. We are always available to help you!

Related blogs

Image
Its History Of Need Spare Car Key
Image
Hi there Developers
Image
What Are The Myths And Facts Behind Lost Car Keys No Spare
Image
A Brief History Of Legit Crypto Casino History Of Legit Crypto Casino
Image
12 Stats About Best Accident Attorney To Make You Look Smart Around Other People
Image
Hacktoberfest - Week 5
Image
Spring Batch: Handling Large-Scale Batch Processing

spring, batchprocessing, springbatch
Image
Why You Should Concentrate On Improving Lost Car Key Replacement
Image
I need help.
Image
The complicated relation between React and derivation

javascript, react, beginners
Image
Placeholder Maintainer

hack23maintainer
Image
Question: How Much Do You Know About Best Crypto Online Casino?
Image
argumen kenapa slots online bola digemari beberapa orang.
Image
kiat peroleh jekpot games slots online paling besar
Image
How To Identify The How Much Is A Spare Car Key That Is Right For You
Image
15 Gifts For The Asbestos Lawsuit Settlement Lover In Your Life
Image
Reagan Customer Service
Image
14 Companies Doing An Excellent Job At Asbestos Exposure Lawsuit
Image
D-Smart.io AWS Web Application

python, aws, terraform, systemdesign
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .