How to update visibility at runtime in WPF

Question

I am currently developing a hamburger style menu in WPF. In this menu, there are some categories that each have an icon. When the menu is collapsed you can still see those icons. When you expand the menu, there should appear text next to it. My idea was to just set their visibility to Visible as soon as the menu opens but I've had a lot of trouble realizing this. Right now I'm trying to change their visibility by binding them to a property.

XAML:

<ListView x:Name="menuItemsListView" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
                <ListViewItem>
                    <StackPanel Orientation="Horizontal">
                        <Image x:Uid="Test" Name="InhoudImage" Source="Images/noimage.png" Height="30" Width="auto" VerticalAlignment="Center" Margin="3,0,0,0"></Image>
                        <TextBlock x:Uid="Test" Text="{Binding Path=TextboxVisibility}" Visibility="{Binding Path=TextboxVisibility}" VerticalAlignment="Center"></TextBlock>
                    </StackPanel>
                </ListViewItem>
            </ListView>

C# CS Class:

using System.Windows;
using System.Windows.Controls;

namespace APP
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        private bool menuOpen = false;
        private int closedMenuWidth = 50;
        private int openMenuWidth = 210;
        private string textboxVisibility;

        public string TextboxVisibility
        {
            get { return textboxVisibility; }
            set { textboxVisibility = value; }
        }


        public MainWindow()
        {
            InitializeComponent();
            this.DataContext = this;
            this.TextboxVisibility = "Hidden";
        }

        private void MenuButton_Click(object sender, RoutedEventArgs e)
        {
            if (menuOpen)
            {
                menuGrid.Width = closedMenuWidth;
                menuOpen = false;
                this.TextboxVisibility = "Hidden";
            }
            else
            {
                menuGrid.Width = openMenuWidth;
                menuOpen = true;
                this.TextboxVisibility = "Visible";

                //foreach (ListViewItem item in menuItemsListView.Items)
                //{
                //    item.
                //    if (item.Uid == "Test")
                //    {
                //        item.Visibility = Visibility.Visible;
                //    }
                //}
            }
        }
    }
}

When I change the value within the MainWindow function, it does have an effect on it when it first starts. But the other times I try to change it, which is at runtime, nothing happens. I have tried all sorts of things with booleans and binding the actual Visibility type but nothing worked.

You should implement `INotifyPropertyChanged` and raise change notifications whenever the data-bound property is set. — mm8, Nov 20 '20 at 15:23
`string TextboxVisibility` ? Either use `Visibility` type or go with `bool`+converter ([example](https://stackoverflow.com/a/7000922/1997232)). — Sinatr, Nov 20 '20 at 15:26
@WouterVanNueten: No, not necessarily. The window can implement the interface. — mm8, Nov 20 '20 at 15:31
@Sinatr I've tried this too and I had the same problem. It wouldn't change at runtime — Wouter Van Nueten, Nov 20 '20 at 15:46
@mm8 I'm writing this in the MainWindow class which is already implementing the Window class so I don't know if this is possible here — Wouter Van Nueten, Nov 20 '20 at 15:48
Append it onto the end like this: `public partial class MainWindow : Window, INotifyPropertyChanged` and then implement the interface. — Tam Bui, Nov 20 '20 at 16:18

Paul Miranda · Accepted Answer · 2020-11-20T18:02:06.057

You should implemente INotifyPropertyChanged on your MainWindow class like this:

public partial class MainWindow: Window,INotifyPropertyChanged {
   private string textboxVisibility;
   public string TextboxVisibility {
    get {
      return textboxVisibility;
    }
    set {
      textboxVisibility = value;
      OnPropertyChanged();
    }
  }

  //The rest of your code goes here

  public event PropertyChangedEventHandler PropertyChanged;

  protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null) {
    PropertyChanged ? .Invoke(this, new PropertyChangedEventArgs(propertyName));
  }
}

What OnPropertyChanged method does is, whenever the value is setted, it notifies the view and refreshes it. This will solve the problem but isn't the right way to use MVVM.

The way you should do this is to change the visibility property of the TextBox instead of binding the visibility property to a value:

First you have to add a name to the TextBlock you want to hide:

<ListView x:Name="menuItemsListView" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
   <ListViewItem>
      <StackPanel Orientation="Horizontal">
         <Image x:Uid="Test" Name="InhoudImage" Source="Images/noimage.png" Height="30" Width="auto" VerticalAlignment="Center" Margin="3,0,0,0"></Image>
         <TextBlock Name="textblock" x:Uid="Test" Text="{Binding Path=TextboxVisibility}" Visibility="{Binding Path=TextboxVisibility}" VerticalAlignment="Center"></TextBlock>
      </StackPanel>
   </ListViewItem>
</ListView>

And then you change the visibility in the code

private void MenuButton_Click(object sender, RoutedEventArgs e) {
  if (menuOpen) {
    menuGrid.Width = closedMenuWidth;
    menuOpen = false;
    textblock.Visibility = System.Windows.Visibility.Hidden;
  }
  else {
    menuGrid.Width = openMenuWidth;
    menuOpen = true;
    textblock.Visibility = System.Windows.Visibility.Visible;

    //foreach (ListViewItem item in menuItemsListView.Items)
    //{
    //    item.
    //    if (item.Uid == "Test")
    //    {
    //        item.Visibility = Visibility.Visible;
    //    }
    //}
  }
}

If you want to implement MVVM the right way you have to create a ViewModel class and add it as Data Context to your view:

<Window.DataContext>
        <local:MainWindowViewModel/>
</Window.DataContext>

And then on you MainWindowViewModel is where you change the property:

 public class MainWindowViewModel: INotifyPropertyChanged {
      private string textboxVisibility;
      public string TextboxVisibility {
        get {
          return textboxVisibility;
        }
        set {
          textboxVisibility = value;
          OnPropertyChanged();
        }
      }
    
      //The rest of your code goes here
    
      public event PropertyChangedEventHandler PropertyChanged;
    
      protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null) {
        PropertyChanged ? .Invoke(this, new PropertyChangedEventArgs(propertyName));
      }
    }

That would fix his problem, but he absolutely "should" not do it like this. What he should do is implement MVVM properly. — Blindy, Nov 20 '20 at 17:51
I had added an example so he can implement this functionality using MVVM and without using it — Paul Miranda, Nov 20 '20 at 18:02
@PaulMiranda Thank you very much for this comprehensive answer! I have a way better understanding of how this works now both with MVVM and without. — Wouter Van Nueten, Nov 22 '20 at 11:40

How to update visibility at runtime in WPF

1 Answers1