How to show an empty message when ListView has no items in Xamarin.Forms?
You can show an empty message when the listview does not contain items to load by updating the visibility property of the Xamarin ListView and label.
XAML
Add command to change the ItemsSource through Button Command, also IsVisible property of SfListView will update based on ItemsSource changed using converters.
<ContentPage xmlns:sync="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms">
<ContentPage.Resources>
<ResourceDictionary>
<local:VisibilityConverter x:Key="visibilityConverter"/>
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
<Grid Padding="{OnPlatform iOS='0,40,0,0'}">
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button x:Name="ItemSource" Grid.Row="0"
Text="Change ItemSource"
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand"
Command="{Binding OnItemsSourceChanged }"/>
<Grid IsVisible="{Binding IsVisible}" Grid.Row="1">
<Label x:Name="label"
Text = "No Items :("
FontSize ="Default"
HorizontalOptions = "FillAndExpand"
HorizontalTextAlignment = "Center"
VerticalTextAlignment = "Center"
VerticalOptions = "FillAndExpand"/>
</Grid>
<syncfusion:SfListView x:Name="listView" Grid.Row="1" ItemsSource="{Binding ContactsInfo}"
IsVisible="{Binding Path=IsVisible, Converter={StaticResource visibilityConverter}}"
ItemSpacing="2" ItemSize="30">
<syncfusion:SfListView.ItemTemplate>
<DataTemplate>
<Label Text="{Binding ContactName}" BackgroundColor="YellowGreen"/>
</DataTemplate>
</syncfusion:SfListView.ItemTemplate>
</syncfusion:SfListView>
</Grid>
</ContentPage.Content>
</ContentPage>
C#
The Converter will return the bool value, which bound to the IsVisible property of SfListView.
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)
{
return value;
}
}
In the ViewModel class, data will be generated based on the IsVisible value.
public class ViewModel : INotifyPropertyChanged
{
public ViewModel()
{
ContactsInfo = new ObservableCollection<ListViewContactsInfo>();
isVisible = true;
OnItemsSourceChanged = new Command<object>(OnChangeItemsSource);
}
public void GenerateSource()
{
Random random = new Random();
Assembly assembly = typeof(MainPage).GetTypeInfo().Assembly;
for (int i = 0; i < CustomerNames.Count(); i++)
{
var details = new ListViewContactsInfo()
{
ContactType = contactType[random.Next(0, 5)],
ContactNumber = random.Next(100, 400).ToString() + "-" + random.Next(500, 800).ToString() + "-" + random.Next(1000, 2000).ToString(),
ContactName = CustomerNames[i],
ContactImage = ImageSource.FromResource("SfListViewSample.Images.Image" + random.Next(0, 28) + ".png", assembly),
};
ContactsInfo.Add(details);
}
}
private void OnChangeItemsSource(object obj)
{
if (IsVisible)
{
IsVisible = false;
GenerateSource();
}
else
{
ContactsInfo.Clear();
IsVisible = true;
}
}
}
|
|
Take a moment to peruse the documentation to learn more about Binding to ItemsSource property in the SfListView with code examples.
Conclusion
I hope you enjoyed learning about how to show an empty message when ListView has no items in Xamarin.Forms (SfListView).
You can refer to our Xamarin.Forms ListView feature tour page to know about its other groundbreaking feature representations. You can also explore our Xamarin.Forms ListView documentation to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
