如何在 WPF 中使用 MVVM 模式将项目添加到列表

Question

如何使用 WPF 中 MVVM 模式中的当前终端更新我的 TerminalList-View？我将 List _terminals 传递给 ViewModel 但我不知道如何将其分配给可观察集合？代码来自SingletonSean的教程

我的应用程序.xaml.cs

namespace TerminalKonfigurator
{
    /// <summary>
    /// Interaction logic for App.xaml
    /// </summary>
    public partial class App : Application
    {
        private readonly List<Terminal> _terminals;
        private readonly NavigationStore _navigationStore;
        public App()
        {
            Terminal terminal1 = new Terminal("Terminal1", "129,22,22,31");
            Terminal terminal2 = new Terminal("Terminal2", "129,22,22,32");
            _navigationStore = new NavigationStore();

            _terminals = new List<Terminal>();
            _terminals.Add(terminal1);
            _terminals.Add(terminal2);
        }

        private AddTerminalViewModel createAddTerminalViewModel()
        {
            return new AddTerminalViewModel(_terminals, new Services.NavigationService(_navigationStore, createTerminalListViewModel));
        }

        private TerminalListViewModel createTerminalListViewModel()
        {
            return new TerminalListViewModel(_terminals, new Services.NavigationService(_navigationStore, createAddTerminalViewModel));
        }

        protected override void OnStartup(StartupEventArgs e)
        {
            _navigationStore.CurrentViewModel = createTerminalListViewModel();

            MainWindow = new MainWindow()
            {
                DataContext = new MainViewModel(_navigationStore)
            };
            MainWindow.Show();

            base.OnStartup(e);
        }
    }
}

我的终端列表视图模型

namespace EMC.TerminalKonfigurator.ViewModels
{
    public class TerminalListViewModel : ViewModelBase
    {
        List<Terminal> terminals = new List<Terminal>();
        private readonly ObservableCollection<TerminalViewModel> _terminals;
        public IEnumerable<TerminalViewModel> Terminals => _terminals;
        public ICommand NavigateAddTerminalViewCommand { get; }

        public TerminalListViewModel(List<Terminal> terminals, Services.NavigationService addTerminalNavigationService) 
        {
            _terminals = new ObservableCollection<TerminalViewModel>();
            NavigateAddTerminalViewCommand = new NavigateAddTerminalViewCommand(addTerminalNavigationService);

            UpdateTerminals();
        }

        **private void UpdateTerminals()
        {
        }**
    }
}

我的终端列表视图：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="auto" />
        <RowDefinition Height="auto" />
    </Grid.RowDefinitions>
    <Grid Grid.Row="0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <TextBlock Grid.Column="0" Text="Terminal Liste" HorizontalAlignment="Left"></TextBlock>
        <Button Grid.Column="1" Command="{Binding NavigateAddTerminalViewCommand}" Content="add" HorizontalAlignment="Right"></Button>
    </Grid>
    <ListView Grid.Row="1" ItemsSource="{Binding Terminals, UpdateSourceTrigger=PropertyChanged}">
        <ListView.View>
            <GridView>
                <GridViewColumn Header="Terminalname">
                    <GridViewColumn.CellTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding terminalName, UpdateSourceTrigger=PropertyChanged}" HorizontalAlignment="Center"></TextBlock>
                        </DataTemplate>
                    </GridViewColumn.CellTemplate>
                </GridViewColumn>
                <GridViewColumn Header="IP-Adresse">
                    <GridViewColumn.CellTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding ip, UpdateSourceTrigger=PropertyChanged}" HorizontalAlignment="Center"></TextBlock>
                        </DataTemplate>
                    </GridViewColumn.CellTemplate>
                </GridViewColumn>
            </GridView>
        </ListView.View>
    </ListView>
</Grid>

谢谢！

Answer 1

如果你要遵循MVVM模式，你应该首先考虑，谁在改变数据？它是用户输入吗（用户是否添加终端以便视图随后更新？），如果是这样，您应该将 observableCollection 公开并直接添加到集合中。它会自动更新视图。您不需要类似

UpdateTerminals

方法的东西。

 public class TerminalListViewModel : ViewModelBase
    {
        List<Terminal> terminals = new List<Terminal>();
        public ObservableCollection<TerminalViewModel> Terminals {get;set;}
        public ICommand NavigateAddTerminalViewCommand { get; }

        public TerminalListViewModel(List<Terminal> terminals, Services.NavigationService addTerminalNavigationService) 
        {
            Terminals = new(terminals);
            NavigateAddTerminalViewCommand = new NavigateAddTerminalViewCommand(addTerminalNavigationService);
        }
    }

任何导致终端添加到集合中的事件都应该调用 viewmodel，并且 viewmodel 应该负责添加新项目

ViewModel.Terminals.Add(new Terminal())

或者可能通过命令。然后 viewmodel 可以更新任何应该更新的内容（例如调用服务来更新数据库或 api）。

您可以将构造函数保留在 viewmodel 类中来初始化

ObservableCollection

。