Display a Message When the ListView Becomes Empty in Windows Store Apps

In my experience of creating Windows Store apps I have noticed that there are times where, once a list view no longer has any items in it, it is beneficial to let the user know that the list view they were looking at no longer has any items.

 

This is very simple to do and can be done with very little coding. To get things started we need to create a blank Windows Store app project as in the following:

Now that we have our project created, we are greeted with a blank XAML page. Let's provide some controls for us to use, such as a ListView, a TextBlock and a Button.

<Page
    x:Class="CSharpCornerTestProject.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:CSharpCornerTestProject"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Page.Resources>
        <DataTemplate x:Key="listViewItems">
            <StackPanel>
                <TextBlock
                    Margin="5,5,5,5"
                    Text="{Binding Name}"
                    Style="{StaticResource BaseTextBlockStyle}"/>

                <TextBlock
                    Margin="5,5,5,5"
                    Text="{Binding Ripeness}"
                    Style="{StaticResource BaseTextBlockStyle}"/>
            </StackPanel>
        </DataTemplate>
    </Page.Resources>

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <ListView
            x:Name="listViewTest"
            Margin="5,5,5,5"
            VerticalAlignment="Center"
            HorizontalAlignment="Center"
            ItemsSource="{Binding}"
            SelectionMode="None"
            IsItemClickEnabled="False"
            ItemTemplate="{StaticResource listViewItems}"
            ContainerContentChanging="listViewUpdated">
        </ListView>

        <TextBlock
            x:Name="listViewNoItems"
            Margin="5,5,5,5"
            VerticalAlignment="Center"
            HorizontalAlignment="Center"
            Text="There are no fruits in your list to display!"
            Style="{StaticResource BaseTextBlockStyle}"
            Visibility="Collapsed"/>

        <Button
            Width="150"
            Height="50"
            Margin="20"
            VerticalAlignment="Center"
            HorizontalAlignment="Right"
            Content="Clear fruit"
            Click="clearFruitBasket"/>
    </Grid>
</Page>

Notice the "ContainerContentChanging" event on the list view? That is what we will be using to detect if the list view has any items left at all.

 

Now, delving into the code side of things in our MainPage.xaml.cs file:

using System.Collections.ObjectModel;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace CSharpCornerTestProject
{
    public class Fruit
    {
        public string Name { get; set; }
        public string Ripeness { get; set; }
    }

    public sealed partial class MainPage : Page
    {
        private ObservableCollection<Fruit> fruitList = new ObservableCollection<Fruit>();
        public MainPage()
        {
            this.InitializeComponent();

            fruitList.Add(new Fruit() { Name = "Apple", Ripeness = "Ok" });
            fruitList.Add(new Fruit() { Name = "Banana", Ripeness = "Bad" });
            fruitList.Add(new Fruit() { Name = "Kiwi", Ripeness = "Rotten" });

            listViewTest.ItemsSource = fruitList;
        }

        private void listViewUpdated(ListViewBase sender, ContainerContentChangingEventArgs args)
        {
            if (listViewTest.Items.Count == 0)
            {
                listViewNoItems.Visibility = Visibility.Visible;
                listViewTest.Visibility = Visibility.Collapsed;
            }
            else
            {
                listViewNoItems.Visibility = Visibility.Collapsed;
                listViewTest.Visibility = Visibility.Visible;
            }
        }

        private void clearFruitBasket(object sender, RoutedEventArgs e)
        {
            // clear the fruit list!
            if (fruitList != null)
                fruitList.Clear();
        }
    }
}

You will seethat at the top we have made a very simple class for storing some information for our list view. When the app is loaded it will create a new instance of ObservableCollection<Fruit> for us to add some fruits to.

private ObservableCollection<Fruit> fruitList = new ObservableCollection<Fruit>();

When the MainPage is loaded the constructor will be fired and this is where our fruit basket gets some items added to it. In the code example we add three items (Apple, Banana and Kiwi) into the fruitList ObservableCollection. 

public MainPage()
{
    this.InitializeComponent();

    fruitList.Add(new Fruit() { Name = "Apple", Ripeness = "Ok" });
    fruitList.Add(new Fruit() { Name = "Banana", Ripeness = "Bad" });
    fruitList.Add(new Fruit() { Name = "Kiwi", Ripeness = "Rotten" });
}

Once we've done that, the bulk of setting things up is done with, just set the item source of our list view to the ObservableCollection that is storing our information on our fruit basket.

public MainPage()
{
    this.InitializeComponent();

    fruitList.Add(new Fruit() { Name = "Apple", Ripeness = "Ok" });
    fruitList.Add(new Fruit() { Name = "Banana", Ripeness = "Bad" });
    fruitList.Add(new Fruit() { Name = "Kiwi", Ripeness = "Rotten" });

    listViewTest.ItemsSource = fruitList;
}

Excellent! Alright, so we've got our list full of fruits, but how will we know when the items have all vanished? That is where the ContainerContentChanging="listViewUpdated" part of the XAML we did earlier is relevant.

private void listViewUpdated(ListViewBase sender, ContainerContentChangingEventArgs args)
{
    if (listViewTest.Items.Count == 0)
    {
        listViewNoItems.Visibility = Visibility.Visible;
        listViewTest.Visibility = Visibility.Collapsed;
    }
    else
    {
        listViewNoItems.Visibility = Visibility.Collapsed;
        listViewTest.Visibility = Visibility.Visible;
    }
}

This event will be called whenever there is a change to the items inside the list view that we created earlier. It simply checks the item count of our ListView control and if it is empty it hides itself and brings the TextBlock telling us that there are no items in the view.

We can clear the list view by simply clicking on our Button control that will empty the ObservableCollection if it has items in it.

private void clearFruitBasket(object sender, RoutedEventArgs e)
{
    // clear the fruit list!
    if (fruitList != null)
        fruitList.Clear();
}

Once the event fires it will clear our basket and you should now have a message on the screen telling us that the list view doesn't have any items in it anymore.

.

And that is all there is to it; a very simple method of showing a message once your list view is empty if the user needs some information about why their basket of fruit has suddenly vanished from the screen!

 

Thanks for reading! If you want to keep up-to-date with what I'm working on then be sure you follow me on Twitter, @Forceh91.