Associating a ViewModel to a View

Question

I have a main View and corresponding ViewModel. Because the main View is too complicated so I split it into many small Views; and each small View also has its own ViewModel.

My question is that how to "associating a sub ViewModel to a sub View" in the main View?

I am doing the following way, not sure if it is right or I have to use DataTemplate?

<StackPanel>
     <local:SmallView-A DataContext="{x:Type local:SmallViewModel-A}" />
</StackPanel>
<StackPanel>
    <local:SmallView-B DataContext="{x:Type local:SmallViewModel-B}" />
</StackPanel>
<StackPanel>
    <local:SmallView-C DataContext="{x:Type local:SmallViewModel-C}" />
</StackPanel>

Check this out https://stackoverflow.com/questions/19864891/wpf-mvvm-why-use-contentcontrol-datatemplate-views-rather-than-straight-xaml-w?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa — SamTh3D3v, Apr 10 '18 at 12:29
It depends on how your main view model is structured and how you're intending to use your SmallViews. If there is for instance a SmallViewModel property in your main view model, you could directly bind a SmallView's DataContext, lile ``. However, you need to be more specific. — Clemens, Apr 10 '18 at 12:40
`DataContext="{x:Type local:SmallViewModel-A}"` doesn't seem to make much sense. As already said, a view's DataContext might be bound to a property of a main view model. — Clemens, Apr 10 '18 at 13:34

score 0 · Answer 1 · answered Apr 10 '18 at 13:31

I would saif that the right anwser is the following :-)... (not tested!)

in a generic.xaml, associated views and viewmodels
In your MainViewModel create properties for each sub viewmodel

In your MainView, bind content presenter to there properties

generic

<DataTemplate DataType="{x:Type ViewModels:SubViewModel1}">
    <Views:SubView1 />
</DataTemplate>

<DataTemplate DataType="{x:Type ViewModels:SubViewModel2}">
    <Views:SubView2 />
</DataTemplate>

MainViewModel

public SubViewModel1 Sub1 { get; set; }
public SubViewModel2 Sub2 { get; set; }

MainView

<Grid>
    ## your layout here 
    <ContentPresenter Content="{Binding Sub1}" />
    <ContentPresenter Content="{Binding Sub2}" />

    ##could be
    <TabControl ItemSource="{Binding MyViewModelCollection}" />

</Grid>

score 0 · Accepted Answer · answered Apr 14 '18 at 12:17

It turns out to use the following code likely.

<ContentControl Content="{Binding MyViewInstance}">
    <ContentControl.Resources>
        <DataTemplate DataType="x:Type vm:MyViewModel">
        </DataTemplate>
    </ContentControl.Resources>
</ContentControl>

score -1 · Answer 3 · answered Apr 10 '18 at 12:27

-1

In your 'Views' folder(Create one if you have not got one already) create a new user control called `SmallViewA'.

In your main XAML:

xmlns:views = "clr-namespace:[Your app name].Views"

<views:SmallViewA x:Name = "vSmallViewA" Loaded = "SmallViewALoaded"/>

private void SmallViewALoaded(object sender, RoutedEventArgs e)
{
    vSmallViewA.DataContext = YoursmallAViewModelshouldgohere;
    // Initialise
}

Add your SmallViewA control the the SmallViewA control in the Views folder. From there you can bind your properties from your SmallViewA Viewmodel.

Follow the same procedure above for SmallViewB and SmallViewC

Note: be sure to implement the INotifyPropertyChanged to your ViewModel.

answered Apr 10 '18 at 12:27

Dev

1,780
3
18
46

1

Could you comment why you have downvoted? So I can improve or delete my answer? – Dev Apr 10 '18 at 12:38
I don't think that the question is about how to do it, it's about which is better, this is probably why your answer got downvoted; still the downvoter should've added an explanation – SamTh3D3v Apr 10 '18 at 12:46
You should probably explain how this is supposed to work at all, i.e. how the view's code behind should get access to the respective view model instance. In other words, where is `YoursmallAViewModelshouldgohere` supposed to come from? – Clemens Apr 10 '18 at 12:46

Associating a ViewModel to a View

3 Answers3

generic

MainViewModel

MainView