WPF 一個 ViewModel 作為 MainWindow 的屬性，如何從頁面正確訪問 ViewModel？

Question

我是 WPF 和 .NET C# 的新手，但仍然可以制作一頁應用程序。 當我想要 2 個頁面和它們之間的導航時，問題就開始了。 我有一個 ViewModel 和 2 個頁面：KlantenPage.xaml.cs（帶有視圖 Klanten.xaml）和 BookingPage.xaml.cs（帶有視圖 BookingPage.xaml）。 我在主 Window 中有兩個導航按鈕。 我還想在關閉事件時將數據保存在兩個頁面中。

我的 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;
    }

所以，我創建了一個 class 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 將數據從Model傳輸到視圖。 因此，您應該按照架構DRY規則對每個視圖使用視圖 model 。 這樣您就可以保持視圖和視圖模型之間的 1:1 關系。

它並不總是這樣，但因為它是你在 MVVM 世界的開始，我建議你為程序中的每個頁面創建一個視圖 model 並將它們連接到相同的Model （女巫是你的后端算法和邏輯），這就是您應該如何在頁面之間傳輸數據的方式。