Multiple binding ViewModel to View MVVM - wpf

Question

Please help me understand. I have a View PanoramaPage.xaml with two PanoramaItem. First item is a list of a news from a some web service, second item is a list of users the service. News and Users are differnt Models.
View:
<controls:PanoramaItem Header="users">
<ListBox Margin="0,0,-12,0">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="0,0,0,17">
<StackPanel Width="311">
<TextBlock Text="{Binding Name}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<TextBlock Text="{Binding Aboutself}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</controls:PanoramaItem>
</controls:Panorama>
<controls:PanoramaItem Header="news">
<ListBox Margin="0,0,-12,0">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,17" Width="432" Height="78">
<TextBlock Text="{Binding Title}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<TextBlock Text="{Binding Content}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</controls:PanoramaItem>
Under MVVM I should have two ViewModel's for two controls News ListBox and Users ListBox or one ViewModel for one xaml PanoramaPage.xaml.
PanoramaPageViewModel
public class PanoramaPageViewModel : INotifyPropertyChanged
{
private ObservableCollection<User> userDataSource;
private ObservableCollection<News> newsDataSource;
public ObservableCollection<User> UserDataSource
{
get
{
if (this.userDataSource == null)
{
this.userDataSource = new ObservableCollection<User>();
}
return this.userDataSource;
}
}
public ObservableCollection<News> NewsDataSource
{
get
{
if (this.newsDataSource == null)
{
this.newsDataSource = new ObservableCollection<News>();
}
return this.newsDataSource;
}
}
// LoadUsers(), LoadNews(), etc
}
OR
UsersViewModel
public class UsersViewModel : INotifyPropertyChanged
{
private ObservableCollection<User> userDataSource;
public ObservableCollection<User> UserDataSource
{
get
{
if (this.userDataSource == null)
{
this.userDataSource = new ObservableCollection<User>();
}
return this.userDataSource;
}
}
//LoadUsers() etc
}
NewsViewModel
public class NewsViewModel : INotifyPropertyChanged
{
private ObservableCollection<News> newsDataSource;
public ObservableCollection<News> NewsDataSource
{
get
{
if (this.newsDataSource == null)
{
this.newsDataSource = new ObservableCollection<News>();
}
return this.newsDataSource;
}
}
//LoadNews() etc
}
What do you think?

Answer 1

Single ViewModel. Not each and every control of view has its own view model. You set the ViewModel as the DataContext of the whole view.
Even if you go with two viewmodels, you will need to have the parent viewmodel which will be containing the instances of these two viewmodels. This parent view model will serve as the Datacontext of whole view and the child controls will set their datacontext to these child viewmodels, so you will have to change your bindings also.
But single view single view model is what mvvm is.
Thanks