How to show empty message when ListView has no items in .NET MAUI?
You can display a message indicating that there are no items to show in a .NET MAUI ListView (SfListView) by updating the visibility property of the ListView and a Label. This guide provides a step-by-step demonstration of how to achieve this.
XAML
Set up your XAML layout with a Button to change the item source, a Label for the empty message, and an SfListView to display the items.
<StackLayout>
<Button Margin="50,10,50,10"
Text="Change Item Source"
HorizontalOptions="Center"
VerticalOptions="Center"
Command="{Binding ChangeItemsSource}"/>
<Label Margin="50,300,50,100"
FontSize="Large"
IsVisible="{Binding IsVisible}"
Text="NO ITEMS :("
HorizontalOptions="Center"
VerticalOptions="End"/>
<sync:SfListView x:Name="listView"
ItemsSource="{Binding ContactsInfo}"
ItemSize="70"
IsScrollingEnabled="True"
SelectionMode="SingleDeselect"
ItemSpacing="6,3,6,3"
IsVisible="{Binding IsVisible,Converter={StaticResource visibilityConverter}}">
<sync:SfListView.ItemTemplate>
<DataTemplate>
<Grid x:Name="grid" RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="1" />
</Grid.RowDefinitions>
<Grid RowSpacing="0" Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="70" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="70" />
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="{Binding ContactImage}" VerticalOptions="Start" Margin="0,13,0,0" HeightRequest="50" WidthRequest="50"
HorizontalOptions="Center"/>
<Grid Grid.Row="0" Grid.Column="1" RowSpacing="2" Padding="10,0,0,0" VerticalOptions="Center">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label LineBreakMode="NoWrap"
Grid.Row="0"
TextColor="DimGray"
Text="{Binding ContactName}"
FontFamily="Roboto-Medium"
VerticalOptions="Start"
Margin="0,12,0,0"
VerticalTextAlignment="End"
FontSize="{OnPlatform Android={OnIdiom Phone=16, Tablet=18}, iOS=16, UWP=16}" />
<Label Grid.Row="1"
Grid.Column="0"
TextColor="Gray"
FontFamily="Roboto-Regular"
LineBreakMode="NoWrap"
VerticalOptions="Start"
VerticalTextAlignment="Start"
Text="{Binding ContactNumber}"
FontSize="{OnPlatform Android={OnIdiom Phone=14, Tablet=14}, iOS=14, UWP=14}" />
</Grid>
<Grid Grid.Row="0"
Grid.Column="2"
RowSpacing="0"
HorizontalOptions="End"
VerticalOptions="Start"
Padding="0,12,20,0">
<Label LineBreakMode="NoWrap"
WidthRequest="60"
TextColor="Gray"
FontFamily="Roboto-Regular"
VerticalOptions="Start"
HorizontalOptions="EndAndExpand"
HorizontalTextAlignment="End"
Text="{Binding ContactType}"
FontSize="{OnPlatform Android={OnIdiom Phone=12, Tablet=12}, iOS=12, UWP=14}" />
</Grid>
</Grid>
<BoxView Grid.Row="1" BackgroundColor="#E4E4E4" HeightRequest="1"/>
</Grid>
</DataTemplate>
</sync:SfListView.ItemTemplate>
</sync:SfListView>
</StackLayout>
C#
Implement a visibility converter and view model to handle visibility logic and changing the item source.
public class VisibilityConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
return !(bool)value;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}public class ViewModel : INotifyPropertyChanged
{
//
…
…
//
private void OnChangeItemsSource(object obj)
{
if (IsVisible)
{
IsVisible = false;
GenerateSource();
}
else
{
ContactsInfo.Clear();
IsVisible = true;
}
}
}
Output
Download the complete sample on GitHub
Conclusion
I hope you enjoyed learning how to show an empty message when a ListView has no items in .NET MAUI.
You can refer to our .NET MAUI ListView feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. Explore our .NET MAUI ListView example to understand how to create and manipulate data.
