Nested views bound to parent ViewModel

Question

I have one main viewModel with houses all my commands and collections.

I have two UserControls to show my collections in two ways, and each usercontrol has a different arrangement of buttons. I'm currently using a tabcontrol in order to toggle between the two views.

    public DatabaseViewModel()
    {
        Tabs.Add(new TabItem { Header = "Template", TabContent = new DatabaseByTempViewModel(this) });
        Tabs.Add(new TabItem { Header = "Product", TabContent = new DatabaseByProductViewModel(this) });
        SelectedTabIndex = 0;
    }

    public List<TabItem> Tabs { get { return _tabs ?? (_tabs = new List<TabItem>());} }

    public class TabItem
    {
        public string Header { get; set; }
        public ViewModelBase TabContent { get; set; }
    }

My XAML is currently like so:

<UserControl.Resources>
    <DataTemplate DataType="{x:Type vm:DatabaseByTempViewModel}">
        <local:DatabaseByTempView/>
    </DataTemplate>
    <DataTemplate DataType="{x:Type vm:DatabaseByProductViewModel}">
        <local:DatabaseByProductView/>
    </DataTemplate>
    <DataTemplate DataType="{x:Type vm:DatabaseViewModel}">
    <local:DatabaseView/>
    </DataTemplate>
</UserControl.Resources>
<Grid Margin="5">
    <DockPanel>
        <StackPanel DockPanel.Dock="Bottom" Orientation="Horizontal" FlowDirection="RightToLeft">
            <Button Height="25" Width="150" Content="Save Changes" Command="{Binding SaveChangesCommand}" Margin="5" />
        </StackPanel>
        <TabControl ItemsSource="{Binding Tabs}" SelectedIndex="{Binding SelectedTabIndex}">
            <TabControl.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Header}"/>
                </DataTemplate>
            </TabControl.ItemTemplate>
            <TabControl.ContentTemplate>
                <DataTemplate>
                    <ContentPresenter Content="{Binding TabContent}" ContentSource="{Binding}"/> 
                </DataTemplate>
            </TabControl.ContentTemplate>
        </TabControl>
    </DockPanel>
</Grid>

I've been flipping around online for a week now trying to figure out the best approach. I'd like to consolidate all my commands into the main DatabaseViewModel, instead of separated into two separate sub-ViewModels (this would help with reduncancy). I'd also want to just be able to use one instance of my Collection (located in DatabaseViewModel). How can I bind my sub-Views to the main DatabaseViewModel?

I have such a gut feelign that it's very simple, but I just haven't been able to figure it out.

Answer 1

There is really no need for the collection, if you know beforehand how many views there will be (and since you program a new VM for each view, that should always be the case). Instead create the view models as properties of your main VM, and create the TabItems in XAML:

public class DatabaseViewModel
{
    public DatabaseViewModel()
    {
        TempView = new DatabaseByTempViewModel();
        ProductView = new DatabaseByProductViewModel();
    }

    public DatabaseByTempViewModel TempView { get; set; }
    public DatabaseByProductViewModel ProductView{ get; set; }
}

XAML

<Grid Margin="5">
<DockPanel>
    <StackPanel DockPanel.Dock="Bottom" Orientation="Horizontal" FlowDirection="RightToLeft">
        <Button Height="25" Width="150" Content="Save Changes" Command="{Binding SaveChangesCommand}" Margin="5" />
    </StackPanel>
    <TabControl>
        <TabItem Header="Temp" DataContext="{Binding TempView}"/>
        <TabItem Header="Products" DataContext="{Binding ProductView}"/>
    </TabControl>
</DockPanel>