title: Display message when ListView contains no items with MVVM in a UWP
body: <p>This is my first MVVM project and the code I need to write to manipulate controls in the view somehow seems way too complicated than it has to be.</p>
  
  <p>I'm finding it hard to fully understand MVVM and to decide when I can put stuff in code behind. </p>
  
  <p>Basically my problem is that I want to show a message telling the user that the listview is empty when the ObservableCollection it is bound to contains no items. The idea was to have a TextBlock in the view and only have its visibility property set to <em>Visible</em> when there are no items to display (Before user creates an item and after he deletes all items)</p>
  
  <p>I cannot use this solution as UWP don't support BooleanToVisibilityConverter:
   <a href="https://stackoverflow.com/questions/20570148/wpf-mvvm-hiding-button-using-booleantovisibilityconverter">WPF MVVM hiding button using BooleanToVisibilityConverter</a></p>
  
  <p><strong>View:</strong></p>
  
  <pre><code>&lt;Page
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:EventMaker3000.View"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:ViewModel="using:EventMaker3000.ViewModel"
      xmlns:Interactivity="using:Microsoft.Xaml.Interactivity" xmlns:Core="using:Microsoft.Xaml.Interactions.Core"
      x:Class="EventMaker3000.View.EventPage"
      mc:Ignorable="d"&gt;
      &lt;Page.BottomAppBar&gt;
          &lt;CommandBar&gt;
              &lt;CommandBar.Content&gt;
                  &lt;Grid/&gt;
              &lt;/CommandBar.Content&gt;
              &lt;AppBarButton Icon="Delete" Label="Delete" IsEnabled="{Binding DeletebuttonEnableOrNot}"&gt;
                  &lt;Interactivity:Interaction.Behaviors&gt;
                      &lt;Core:EventTriggerBehavior EventName="Click"&gt;
                          &lt;Core:NavigateToPageAction/&gt;
                          &lt;Core:InvokeCommandAction Command="{Binding DeleteEventCommand}"/&gt;
                      &lt;/Core:EventTriggerBehavior&gt;
                  &lt;/Interactivity:Interaction.Behaviors&gt;
              &lt;/AppBarButton&gt;
              &lt;AppBarButton Icon="Add" Label="Add"&gt;
                  &lt;Interactivity:Interaction.Behaviors&gt;
                      &lt;Core:EventTriggerBehavior EventName="Click"&gt;
                          &lt;Core:NavigateToPageAction TargetPage="EventMaker3000.View.CreateEventPage"/&gt;
                      &lt;/Core:EventTriggerBehavior&gt;
                  &lt;/Interactivity:Interaction.Behaviors&gt;
              &lt;/AppBarButton&gt;
          &lt;/CommandBar&gt;
      &lt;/Page.BottomAppBar&gt;
  
      &lt;Page.DataContext&gt;
          &lt;ViewModel:EventViewModel/&gt;
      &lt;/Page.DataContext&gt;
  
      &lt;Grid Background="WhiteSmoke"&gt;
          &lt;Grid.RowDefinitions&gt;
              &lt;RowDefinition Height="Auto"/&gt;
              &lt;RowDefinition/&gt;
          &lt;/Grid.RowDefinitions&gt;
  
          &lt;!--Header--&gt;
          &lt;TextBlock 
              Text="Events" 
              Foreground="Black" 
              Margin="0,20,0,0" 
              Style="{ThemeResource HeaderTextBlockStyle}" 
              HorizontalAlignment="center" 
              VerticalAlignment="Center"/&gt;
  
          &lt;ListView
              ItemsSource="{Binding EventCatalogSingleton.Events, Mode=TwoWay}"
              SelectedItem="{Binding SelectedEvent, Mode=TwoWay}"
              Grid.Row="1"    
              Background="WhiteSmoke"
              Padding="0,30,0,0"&gt;
              &lt;Interactivity:Interaction.Behaviors&gt;
                  &lt;Core:EventTriggerBehavior EventName="SelectionChanged"&gt;
                      &lt;Core:InvokeCommandAction Command="{Binding EnableOrNotCommand}"/&gt;
                  &lt;/Core:EventTriggerBehavior&gt;
              &lt;/Interactivity:Interaction.Behaviors&gt;
  
              &lt;ListView.ItemTemplate&gt;
                  &lt;DataTemplate&gt;
                      &lt;Grid VerticalAlignment="Center" Margin="5,0"&gt;
                          &lt;Grid.ColumnDefinitions&gt;
                              &lt;ColumnDefinition Width="Auto" /&gt;
                              &lt;ColumnDefinition Width="*" /&gt;
                          &lt;/Grid.ColumnDefinitions&gt;
  
                          &lt;Grid.RowDefinitions&gt;
                              &lt;RowDefinition Height="Auto"/&gt;
                              &lt;RowDefinition Height="Auto"/&gt;
                              &lt;RowDefinition Height="Auto"/&gt;
                              &lt;RowDefinition Height="Auto"/&gt;
                          &lt;/Grid.RowDefinitions&gt;
  
                          &lt;TextBlock Grid.Column="0"
                              Grid.Row="0"
                              Margin="5" 
                              Text="{Binding Name, Mode=TwoWay}" 
                              Style="{ThemeResource TitleTextBlockStyle}" Foreground="Black"/&gt;
                          &lt;TextBlock Grid.Column="1"
                              Grid.Row="1"
                              Margin="5" 
                              Text="{Binding Place, Mode=TwoWay}"
                              HorizontalAlignment="Right"
                              Style="{ThemeResource CaptionTextBlockStyle}" Foreground="Black"/&gt;
                          &lt;TextBlock Grid.Column="0"
                              Grid.Row="2"
                              Margin="5" 
                              Text="{Binding Description, Mode=TwoWay}"
                              Style="{ThemeResource BodyTextBlockStyle}" Foreground="Black"/&gt;
  
                          &lt;TextBlock Grid.Column="0"
                              Grid.Row="1" 
                              Margin="5" 
                              Text="{Binding DateTime, Mode=TwoWay}" 
                              Style="{ThemeResource CaptionTextBlockStyle}" Foreground="Black"/&gt;
                      &lt;/Grid&gt;
                  &lt;/DataTemplate&gt;
              &lt;/ListView.ItemTemplate&gt;
  
              &lt;!--Sets each listview item to stretch--&gt;
              &lt;ListView.ItemContainerStyle&gt;
                  &lt;Style TargetType="ListViewItem"&gt;
                      &lt;Setter Property="HorizontalContentAlignment" Value="Stretch"/&gt;
                  &lt;/Style&gt;
              &lt;/ListView.ItemContainerStyle&gt;
          &lt;/ListView&gt;
  
          &lt;!-- TextBlock for empty list view--&gt;
  
          &lt;TextBlock 
              Grid.Row="1"
              Margin="5,5,5,5"  
              VerticalAlignment="Center"  
              HorizontalAlignment="Center"  
              Text="You have no events"  
              Style="{StaticResource BaseTextBlockStyle}"  
              Visibility="{Binding TextBlockVisibility}"/&gt;
      &lt;/Grid&gt;
  &lt;/Page&gt;
  </code></pre>
  
  <p><strong>ViewModel:</strong></p>
  
  <p>public class EventViewModel : INotifyPropertyChanged
  {</p>
  
  <pre><code>private bool _deleteButtonEnableOrNot = false;
  private ICommand _enableOrNotCommand;
  
  //TextBlock
  private string _textBlockVisibility = "Visible";
  private ICommand _textBlockVisibilityCommand;
  
  
  public EventCatalogSingleton EventCatalogSingleton { get; set; }
  public Handler.EventHandler EventHandler { get; set; }
  
  // Disable or enable Deletebutton
  public bool DeletebuttonEnableOrNot
  {
      get { return _deleteButtonEnableOrNot;}
      set
      {
          _deleteButtonEnableOrNot = value;
          OnPropertyChanged();
      }            
  }
  
  public ICommand EnableOrNotCommand
  {
      get { return _enableOrNotCommand; }
      set { _enableOrNotCommand = value; }
  }
  
  // Set TextBlock visibility
  public string TextBlockVisibility
  {
      get { return _textBlockVisibility; }
      set
      {
          _textBlockVisibility = value;
          OnPropertyChanged();
      }
  }
  
  public ICommand TextBlockVisibilityCommand
  {
      get { return _textBlockVisibilityCommand; }
      set { _textBlockVisibilityCommand = value; }
  }
  
  // Constructor
  public EventViewModel()
  {
      //Initializes Date and Time with some values that are bound to controls.
      DateTime dt = System.DateTime.Now;
      _date = new DateTimeOffset(dt.Year, dt.Month, dt.Day, 0, 0, 0, 0, new TimeSpan());
      _time = new TimeSpan(dt.Hour, dt.Minute, dt.Second);
  
      EventCatalogSingleton = EventCatalogSingleton.getInstance();
      EventHandler = new Handler.EventHandler(this);
  
      // Creates an instance of the RelayCommand and passes necessary method as a parameter
      _createEventCommand = new RelayCommand(EventHandler.CreateEvent);
  
      _deleteEventCommand = new RelayCommand(EventHandler.GetDeleteConfirmationAsync);
  
      _enableOrNotCommand = new RelayCommand(EventHandler.EnableOrNot);
  
      _textBlockVisibilityCommand = new RelayCommand(EventHandler.TextBlockVisibility);
  
  }
  </code></pre>
  
  <p><strong>Singleton:</strong></p>
  
  <p>public class EventCatalogSingleton
  {
      private static EventCatalogSingleton _instance;</p>
  
  <pre><code>private EventCatalogSingleton()
  {
      Events = new ObservableCollection&lt;Event&gt;();
  
      // Creates instances of events and adds it to the observable collection.
      LoadEventAsync();
  }
  
  //Checks if an instance already exists, if not it will create one. Makes sure we only have one instance
  public static EventCatalogSingleton getInstance()
  {
      if (_instance != null)
      {
          return _instance;
      }
      else
      {
          _instance = new EventCatalogSingleton();
          return _instance;
      }
  }
  
  // Creates the observable collection
  public ObservableCollection&lt;Event&gt; Events { get; set; }
  
  public void AddEvent(Event newEvent)
  {
      Events.Add(newEvent);
      PersistencyService.SaveEventsAsJsonAsync(Events);
  }
  
  public void AddEvent(int id, string name, string description, string place, DateTime date)
  {
      Events.Add(new Event(id, name, description, place, date));
      PersistencyService.SaveEventsAsJsonAsync(Events);
  }
  
  
  public void RemoveEvent(Event myEvent)
  {
      Events.Remove(myEvent);
      PersistencyService.SaveEventsAsJsonAsync(Events);
  }
  
  public async void LoadEventAsync()
  {
  
      var events = await PersistencyService.LoadEventsFromJsonAsync();
      if (events != null)
          foreach (var ev in events)
          {
              Events.Add(ev);
          }
  
  }
  </code></pre>
  
  <p>}</p>
  
  <p><strong>Handler:</strong></p>
  
  <p>public class EventHandler
  {</p>
  
  <pre><code>public EventViewModel EventViewModel { get; set; }
  
  public EventHandler(EventViewModel eventViewModel)
  {
      EventViewModel = eventViewModel;
  }
  
  public void CreateEvent()
  {
      EventViewModel.EventCatalogSingleton.AddEvent(EventViewModel.Id,    EventViewModel.Name, EventViewModel.Description, EventViewModel.Place, DateTimeConverter.DateTimeOffsetAndTimeSetToDateTime(EventViewModel.Date, EventViewModel.Time));
  }
  
  
  private void DeleteEvent()
  {
      EventViewModel.EventCatalogSingleton.Events.Remove(EventViewModel.SelectedEvent);
  }
  
  // Confirmation box that prompts user before deletion
  public async void GetDeleteConfirmationAsync()
  {
      MessageDialog msgbox = new MessageDialog("Are you sure you want to permenantly delete this event?", "Delete event");
  
      msgbox.Commands.Add(new UICommand
      {
          Label = "Yes",
          Invoked = command =&gt; DeleteEvent()
      }
      );
  
      msgbox.Commands.Add(new UICommand
      {
          Label = "No",
      }
      );
      msgbox.DefaultCommandIndex = 1;
      msgbox.CancelCommandIndex = 1;
      msgbox.Options = MessageDialogOptions.AcceptUserInputAfterDelay;
  
      await msgbox.ShowAsync();
  }
  
  public void EnableOrNot()
  {
      EventViewModel.DeletebuttonEnableOrNot = EventViewModel.DeletebuttonEnableOrNot = true;
  }
  
  public void TextBlockVisibility()
  {
      if (EventViewModel.EventCatalogSingleton.Events.Count &lt; 1)
      {
          EventViewModel.TextBlockVisibility = EventViewModel.TextBlockVisibility = "Visible";
      }        
  }
  </code></pre>
  
  <p>}</p>
  
  <p>Its a lot of code to include, I know - didn't know what to leave out. 
  I included the code for when I enable a delete-button when an item in the listview has been selected - which works fine.</p>
  
  <p>Why doesn't the TextBlock in view show after I delete all items in the listview? And is it really necessary for me to have properties and ICommands in the viewmodel in order to change apperance and other things of controls in the view?</p>