同一视图中的多个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提供了可以直接引用的正确解决方案。