WPF MVVM C#模式下如何实现控件动态显隐及列表数据新增功能

1. 改造ViewModel新增绑定属性 #

你的ViewModel需要新增3个核心属性，且所有属性都实现INotifyPropertyChanged通知，保证视图可以自动响应数据变更：

• IsAddingSong：布尔类型，标记当前是否处于新增歌曲的输入状态，默认值为false
• NewSongName：字符串类型，绑定输入文本框的内容，存储用户输入的新歌名称
• SubmitSongCommand：自定义命令类，绑定Submit按钮的点击事件
  另外要保证SongList是ObservableCollection<string>类型，这样集合内元素变更时ListBox会自动刷新列表。

2. 修改前端XAML代码 #

首先在XAML的资源中引入布尔转可见性的转换器：

<Window.Resources>
    <BooleanToVisibilityConverter x:Key="BoolToVis" />
</Window.Resources>

然后修改原有布局，增加输入面板的显隐绑定：

<ListBox ItemsSource="{Binding SongList}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding Path=.}" />
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>
<!-- 原有Add/Remove按钮面板 -->
<StackPanel Orientation="Horizontal" Visibility="{Binding IsAddingSong, Converter={StaticResource BoolToVis}, ConverterParameter=Inverse}">
    <Button Content="Add" Command="{Binding addSongCommand}" />
    <Button Content="Remove"/>
</StackPanel>
<!-- 新增输入面板 -->
<StackPanel Orientation="Horizontal" Visibility="{Binding IsAddingSong, Converter={StaticResource BoolToVis}}">
    <TextBox Text="{Binding NewSongName, UpdateSourceTrigger=PropertyChanged}" Width="200" />
    <Button Content="Submit" Command="{Binding SubmitSongCommand}" />
</StackPanel>

注：如果你的转换器不支持ConverterParameter=Inverse，可以自行实现一个反向布尔转可见性的转换器，或者用Style的DataTrigger判断值取反即可。

3. 编写命令逻辑 #

AddSongCommand的Execute方法实现 #

仅需修改状态标记即可，所有视图更新靠绑定自动完成：

public override void Execute(object parameter)
{
    // 把基类ViewModel转成你实际的业务ViewModel类型，比如SongListViewModel
    var songVm = _vm as SongListViewModel;
    if(songVm == null) return;
    // 切换到输入状态
    songVm.IsAddingSong = true;
    // 清空上次输入残留
    songVm.NewSongName = string.Empty;
}

SubmitSongCommand的实现 #

新增Submit命令类，逻辑如下：

public class SubmitSongCommand : CommandBase
{
    private ViewModelBase _vm;
    public SubmitSongCommand(ViewModelBase vm)
    {
        _vm = vm;
    }
    public override bool CanExecute(object parameter)
    {
        var songVm = _vm as SongListViewModel;
        // 输入不为空才能提交
        return songVm != null && !string.IsNullOrWhiteSpace(songVm.NewSongName);
    }
    public override void Execute(object parameter)
    {
        var songVm = _vm as SongListViewModel;
        if(songVm == null) return;
        // 添加新歌到集合
        songVm.SongList.Add(songVm.NewSongName);
        // 切回正常状态，隐藏输入面板
        songVm.IsAddingSong = false;
        // 清空输入内容
        songVm.NewSongName = string.Empty;
    }
}

最后在你的业务ViewModel构造函数中初始化两个命令实例即可完成全部逻辑。

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