WPF 一个 ViewModel 作为 MainWindow 的属性，如何从页面正确访问 ViewModel？

Question

我是 WPF 和 .NET C# 的新手，但仍然可以制作单页应用程序。当我想要 2 个页面和它们之间的导航时，问题就开始了。我有一个 ViewModel 和 2 个页面：KlantenPage.xaml.cs（带有视图 Klanten.xaml）和 BookingPage.xaml.cs（带有视图 BookingPage.xaml）。我在主窗口中有两个导航按钮。我还想在关闭事件时保存两个页面中的数据。

我的 MainWindow.xaml

<Window x:Class="KlantenAppWPF.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:KlantenAppWPF"
    mc:Ignorable="d"
    Title="MainWindow" Height="450" Width="800">
<DockPanel>
    <StackPanel>
        <Button x:Name="Klanten" Height="35" Width="100" Content="Toon klanten" IsEnabled="False" Click="NavigateToKlanten"/>
        <Button x:Name="Bookingen" Height="35" Width="100" Content="Toon bookingen" IsEnabled="True" Click="NavigateToBookingen"/>
    </StackPanel>
    <Frame x:Name="MainFrame" Source="KlantenPage.xaml" NavigationUIVisibility="Visible" Visibility="Visible"></Frame>
</DockPanel>

我的 MainWindow.xaml.cs：

public partial class MainWindow : Window
{
      MainViewModel _viewM = null;
      public MainViewModel ViewM
      {
          get { _viewM ??= new MainViewModel(); return _viewM; }
          set => _viewM = value;
      }
  
    public MainWindow()
    {
        InitializeComponent();
        ViewM.KlantenLijst.Import();//load data from json file
        ViewM.BookingLijst.Import();//load data from json file
        DataContext = ViewM;
  }
    protected override void OnClosing(CancelEventArgs e)
    {            
        ViewM?.BookingLijst?.SaveData();//export to json file with all changes, done by the user
        ViewM?.KlantenLijst?.SaveData();//export to json file with all changes, done by the user
        base.OnClosing(e);
    }

    private void NavigateToBookingen(object sender, RoutedEventArgs e)
    {   ViewM?.KlantenLijst?.SaveData();
        MainFrame.Navigate(new Uri("BookingPage.xaml", UriKind.RelativeOrAbsolute));            
        Bookingen.IsEnabled = false;
        Klanten.IsEnabled = true;
    }
    private void NavigateToKlanten(object sender, RoutedEventArgs e)
    {   
        ViewM?.BookingLijst?.SaveData();
        MainFrame.Navigate(new Uri("KlantenPage.xaml", UriKind.RelativeOrAbsolute));            
        Bookingen.IsEnabled = true;
        Klanten.IsEnabled = false;
    }

所以，我创建了一个 MainViewModel (= ViewM) 类的实例，但我的页面无权访问它。 我的 KlantenPage.xaml.cs 看起来像这样：

public partial class KlantenPage : Page
{ 

  // MainViewModel ViewM = ??????????.ViewM;
  //I really don't know how to call the ViewM property of MainWindow here. 
          
    public KlantenPage()
    {
        InitializeComponent();
        //DataContext = ViewM;
    }

如何将我的页面连接到主窗口？我将不胜感激。

Answer 1

MVVM 架构基于仅通过视图模型将数据从 Model 传输到 View。 因此，您应该按照架构 DRY 规则对每个 视图 使用 视图模型。 这样您就可以保持视图和视图模型之间的 1:1 关系。

不一定总是这样，但因为这是您在 MVVM 世界的开始，我建议您为程序中的每个页面创建一个视图模型并将它们连接到同一个 模型（witch 是你的后端算法和逻辑），这就是你应该如何在页面之间传输数据。