WPF MVVM中如何根据TextBox值绑定StackPanel的可见性？

这个需求在MVVM模式下很好实现，核心思路是通过ViewModel的属性绑定控制UI元素的Visibility，完全遵循MVVM“不直接操作控件”的设计思想。下面一步步来拆解实现：

1. 先确保ViewModel实现INotifyPropertyChanged接口 #

这是MVVM中属性通知的基础，只有实现它，UI才能感知到属性变化并自动更新：

using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Windows;

public class MainViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

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

2. 添加核心属性：CurrentFruit + 面板可见性计算属性 #

在ViewModel里定义绑定TextBox的CurrentFruit属性，再添加两个只读属性ApplePanelVisibility和OrangePanelVisibility——它们的值会根据CurrentFruit的内容动态计算：

private string _currentFruit;
public string CurrentFruit
{
    get => _currentFruit;
    set
    {
        if (_currentFruit != value)
        {
            _currentFruit = value;
            OnPropertyChanged();
            // 因为两个面板可见性依赖CurrentFruit，所以要触发它们的更新通知
            OnPropertyChanged(nameof(ApplePanelVisibility));
            OnPropertyChanged(nameof(OrangePanelVisibility));
        }
    }
}

public Visibility ApplePanelVisibility
{
    get
    {
        // 这里用OrdinalIgnoreCase实现不区分大小写匹配，需要严格匹配的话可以去掉
        return string.Equals(CurrentFruit, "Apple", StringComparison.OrdinalIgnoreCase) 
            ? Visibility.Visible 
            : Visibility.Collapsed;
    }
}

public Visibility OrangePanelVisibility
{
    get
    {
        return string.Equals(CurrentFruit, "Orange", StringComparison.OrdinalIgnoreCase) 
            ? Visibility.Visible 
            : Visibility.Collapsed;
    }
}

3. 修改XAML，绑定面板的Visibility属性 #

把原来的两个StackPanel的Visibility绑定到ViewModel对应的属性上，同时给TextBox的绑定加上UpdateSourceTrigger=PropertyChanged，确保输入时实时更新ViewModel：

<TextBox x:Name="TxtFruit" Text="{Binding CurrentFruit, UpdateSourceTrigger=PropertyChanged}"/>
<StackPanel>
    <StackPanel x:Name="stackPanelApple" 
                Orientation="Horizontal" 
                Margin="0,0,0,20"
                Visibility="{Binding ApplePanelVisibility}">
        <TextBox x:Name="AppleProperty1" Margin="0,0,10,0" Text="{Binding AppleProperty1}" />
        <TextBox x:Name="AppleProperty2" Margin="10,0,10,0" Text="{Binding AppleProperty2}" />
    </StackPanel>
    <StackPanel x:Name="stackPanelOrange" 
                Orientation="Horizontal" 
                Margin="0,0,0,20"
                Visibility="{Binding OrangePanelVisibility}">
        <TextBox x:Name="OrangeProperty1" Margin="0,0,10,0" Text="{Binding OrangeProperty1}" />
        <TextBox x:Name="OrangeProperty2" Margin="10,0,10,0" Text="{Binding OrangeProperty2}"/>
    </StackPanel>
</StackPanel>

最后别忘了设置DataContext #

在Window/UserControl的构造函数里，把ViewModel设置为DataContext，让绑定生效：

public MainWindow()
{
    InitializeComponent();
    DataContext = new MainViewModel();
}

这样就完成了需求：输入"Apple"时显示苹果面板，输入"Orange"时显示橙子面板，空值或其他内容时两个面板都隐藏～

内容的提问来源于stack exchange，提问作者mapuna