In this article, we will enhance your XAML skills by replicating a waiting list UI inspired by this Dribble design.
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.
In addition to strengthening your XAML skills, you will learn to use:
In the schedule header, we’ll render the following UI elements:
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> We have finished implementing the main layout, so let’s design the schedule header in XAML.
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> To display the user image, we will use thre Syncfusion .NET MAUI Avatar View:
.ConfigureSyncfusionCore();
xmlns:syncAvatar="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core"
<!-- 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"/> To enhance the user experience, let’s enhance specific UI elements within the schedule header.
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"/>
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"/>
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"/>
Let’s create a list of cards for the schedule, like in the following image.
This section includes the following elements:
We’ll add some mock data to visualize the final list result by following these steps. Feel free to use any data you prefer.
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; }
}
} 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();
}
} 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();
} 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:
xmlns:syncfusion="clr-namespace:Syncfusion.Maui.ListView;assembly=Syncfusion.Maui.ListView"
<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> Let’s design the individual elements within each schedule card.
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"/> 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> That’s all! Our UI is done!
Check out the complete example for this on GitHub demos.
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!