同一視圖中的多個ViewModel

Question

我想在同一視圖（MainPage.xaml）中顯示幾個不同的ViewModel。

我對此並不陌生，不知道該怎么做。 我試圖創建一個MainViewModel：

    public class MainViewModel : ViewModelBase, INotifyPropertyChanged
    {
        WeatherViewModel weatherView = new WeatherViewModel();
        ForecastViewModel forecastViewModel = new ForecastViewModel();
        DeparturesViewModel departuresViewModel = new DeparturesViewModel();
        CalenderViewModel calenderViewModel = new CalenderViewModel();
    }

    public void GetAllViews()
    {
        weatherView.GetCurrentTemp();
        forecastViewModel.GetForecastTemp();
        departuresViewModel.GetDepartures();
        calenderViewModel.GetCalender();
    }

在我的MainPage.xaml.cs中，我有以下內容：

     public MainPage()
     {
        this.InitializeComponent();
        this.DataContext = new MainViewModel();
     }

     private void Window_Loaded(object sender, RoutedEventArgs e)
     {
        var vm = this.DataContext as MainViewModel;
        vm.GetAllViews();
     }

我設法像這樣單獨顯示每個ViewModel：

  this.DataContext = new WeatherViewModel();

但我想在同一視圖中顯示所有內容。

Answer 1

我認為您的路線正確，但是錯過了一些小而重要的片段。

在您的示例代碼中， MainViewModel類當前使用私有字段設置，您確實需要公共屬性。 另外，如果尚未實現，我將確保ViewModelBase實現INotifyPropertyChanged ； 這樣，從ViewModelBase派生的類都無需擔心該部分。

public abstract class ViewModelBase : INotifyPropertyChanged
{
    /* INotifyPropertyChanged implementation +
       whatever other common behavior makes sense
       belongs in this class
    */
}

public class MainViewModel : ViewModelBase
{
    public WeatherViewModel Weather { get; } = new WeatherViewModel();
    public ForecastViewModel Forecast { get; } = new ForecastViewModel();
    public DeparturesViewModel Departures { get; } = new DeparturesViewModel();
    public CalendarViewModel Calendar { get; } = new CalendarViewModel();
}

在文件后面的視圖代碼中，您將數據上下文設置為MainViewModel的2個不同實例-一次在構造函數中，一次在Loaded事件處理程序中。 我會堅持使用構造函數版本，或者改為可以在XAML中設置數據上下文，如下所示：

<MainPage.DataContext>
    <MainViewModel>
</MainPage.DataContext>

一旦設置了主頁的數據上下文並且視圖模型是公共屬性，那么您就可以使用綁定來訪問視圖模型的狀態（屬性），如下所示：

<TextBlock Text='{Binding Path=Weather.CurrentTempCelsius, StringFormat='Current Temp: {0}°C'}' />

Answer 2

同一視圖中的多個ViewModel

您有很多方法可以解決。 使用x:bind拳頭方式。 您可以在頁面資源中初始化每個視圖模型，並給它們x:Name ，然后使用x：bind來訪問特定的屬性，如下所示。

<Page.Resources>
    <local:CalenderViewModel x:Name="CalenderViewModel"/>
    <local:DeparturesViewModel x:Name="DeparturesViewModel"/>
    <local:ForecastViewModel x:Name="ForecastViewModel"/>
    <local:WeatherViewModel x:Name="WeatherViewModel"/>
</Page.Resources>
<Grid>
    <TextBlock Text="{x:Bind WeatherViewModel.temperature}"/>
</Grid>

另一種方法是將所有ViewModels集成到MainViewModel 。 而且coding.monkey提供了可以直接引用的正確解決方案。