同一视图中的多个视图模型

Question

我想在同一视图(MainPage.xaml(中显示几种不同的ViewModels。

我是新手，不知道该怎么做。我尝试创建一个主视图模型：

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();
}

我设法像这样单独显示每个视图模型：

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

同一视图中的多个视图模型

你有很多方法可以接近。拳头方式使用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>

另一种方法是将所有视图模型集成到MainViewModel中。coding.monkey提供了您可以直接参考的正确解决方案。