Multiple ViewModels in same View

Question

I have several different ViewModels that I would like to display in the same view (MainPage.xaml).

I'm new to this and don't know how to do it. I have tried to create a 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();
    }

And in my MainPage.xaml.cs I have this:

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

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

I manage to display each ViewModel individually like this instead:

  this.DataContext = new WeatherViewModel();

but I would like to display everything in the same View.

Yes. Is that bad practice? I want to show all data at the same time. — Segiskallen, Sep 12 '19 at 10:00
Yes, its bad practice... you have to collect all data in one ViewModel and connect to View... example.. ViewModel contain data in the form of model — Ankur Tripathi, Sep 12 '19 at 10:02
I have 4 different ViewModels that contains different data. You suggest that I do 1 ViewModel instead? — Segiskallen, Sep 12 '19 at 10:06
yes should be one ViewModel but you can create multiple Model — Ankur Tripathi, Sep 12 '19 at 10:41

score 1 · Accepted Answer · answered Sep 12 '19 at 11:25

I think you're on the right track but missed some small but important pieces.

In your example code the MainViewModel class is currently setup with private fields where you really need public properties. Additionally, I would make sure ViewModelBase implements INotifyPropertyChanged if it's not already; that way none of the classes deriving from ViewModelBase need to worry about that part.

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

In your view code behind file you're setting the data context to 2 different instances of MainViewModel - once in the constructor and once in the Loaded event handler. I'd stick with the constructor version or instead you could set the data context in XAML like this:

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

Once the data context for the main page is setup and the view models are public properties then you can use bindings to access the state (properties) of the view models perhaps something like this:

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

score 0 · Answer 2 · answered Sep 12 '19 at 13:20

0

Multiple ViewModels in same View

You have many ways to approach. Fist way using x:bind. You could initialize each view model in the page resource and give them x:Name, then using x:bind to access specific property like following.

<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>

Other Way is that integrate all the ViewModels into MainViewModel. And coding.monkey provide the correct solution that you could refer directly.

answered Sep 12 '19 at 13:20

Nico Zhu

32,367
2
15
36

If I would like to use `x:bind`. Do I still need to write `this.DataContext = new MainViewModel();` in my MainPage.xaml.cs? – Segiskallen Sep 12 '19 at 14:39
if you write `this.DataContext = new MainViewModel();`, you could use `Binding` to access the property of `MainViewModel` directly in the xaml. For this scenario you could also use x:bind like the above. – Nico Zhu Sep 12 '19 at 14:50
1

This in combination with @coding.monkey works. Thanks a lot! =) – Segiskallen Sep 12 '19 at 15:32

Multiple ViewModels in same View

2 Answers2

Linked