如何在 WPF 中更新運行時的可見性

Question

我目前正在 WPF 中開發一個漢堡包風格的菜單。 在這個菜單中，有一些類別，每個類別都有一個圖標。 當菜單折疊時，您仍然可以看到這些圖標。 當您展開菜單時，它旁邊應該會出現文本。 我的想法是在菜單打開后立即將它們的可見性設置為可見，但我很難意識到這一點。 現在我正試圖通過將它們綁定到一個屬性來改變它們的可見性。

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 類：

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;
                //    }
                //}
            }
        }
    }
}

當我更改 MainWindow 函數中的值時，它在第一次啟動時確實會對其產生影響。 但是其他時候我嘗試更改它，這是在運行時，沒有任何反應。 我已經嘗試了各種各樣的布爾值並綁定實際的 Visibility 類型，但沒有任何效果。

Answer 1

您應該像這樣在MainWindow類上實現INotifyPropertyChanged ：

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));
  }
}

OnPropertyChanged方法的作用是，無論何時設置值，它都會通知視圖並刷新它。 這將解決問題，但不是使用 MVVM 的正確方法。

您應該這樣做的方法是更改​​ TextBox 的可見性屬性，而不是將可見性屬性綁定到一個值：

首先，您必須為要隱藏的 TextBlock 添加一個名稱：

<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>

然后你改變代碼中的可見性

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;
    //    }
    //}
  }
}

如果您想以正確的方式實現 MVVM，您必須創建一個 ViewModel 類並將其作為Data Context添加到您的視圖中：

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

然后在 MainWindowViewModel 上更改屬性：

 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));
      }
    }