WPF: right way to do a Tabcontrol with MVVM pattern

Question

First of all, I'm newbie in WPF and specially in MVVM. I have a window with diferent tabs and a very large ViewModel with the business logic of the content of every tab. I know it is not right, so now I'm trying to do it more elegant:

As I see googling, an idea is to do a collection of a "base" viewmodel from wich inherit the sub-viewmodels of every tab, and a collection on this "base" viewmodel in the viewmodel of the window.

TabBaseViewModel
Tab1ViewModel inherits TabBaseViewModel
Tab2ViewModel inherits TabBaseViewModel

MainWindow ViewModel --> Collection of TabBaseViewModel

The contents the tabs do not have anything in common along each other.

How I have to proceed?

score 3 · Accepted Answer · answered Jul 26 '13 at 08:13

You should consider using an MVVM framework if you're using MVVM. With Caliburn.Micro for example, you can define your main view as:

<TabControl x:Name="Items">
    <TabControl.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding DisplayName}" />
        </DataTemplate>
    </TabControl.ItemTemplate>
</TabControl>

Where the data context is a Conductor type that has a collection. The Items property will expose a collection of your view models:

public class MainViewModel : Conductor<IScreen>.Collection.OneActive
{ 
    private OneOfMyViewModels oneOfMyViewModels;

    private AnotherViewModel anotherViewModel;

    protected override void OnInitialise()
    {
        // Better to use constructor injection here
        this.oneOfMyViewModels = new OneOfMyViewModels();
        this.anotherViewModel = new AnotherViewModel();

        this.Items.Add(this.oneOfMyViewModels);
        this.Items.Add(this.anotherViewModel);
    }

    protected override void OnActivate()
    {
        base.OnActivate();
        this.ActivateItem(this.oneOfMyViewModels);
    }
}

public class OneOfMyViewModels : Screen
{
    public OneOfMyViewModels()
    {
        this.DisplayName = "My First Screen";
    }
}

Ok, but in that moment I have almost of the application developed by my own, without any framework. I tried with Prism and MVVMLight but to start I found a bit difficult and I tried to do the basic architecture and doing the classes step by step without any tool. — Oscar Mateu, Jul 26 '13 at 10:27
That's useful as a learning exercise but you will eventually want a framework unless you're willing to put an awful lot of work into something others have implemented to a high standard already — devdigital, Jul 26 '13 at 12:38
If you want to bind a collection of view model types to a TabControl, have a look at http://stackoverflow.com/questions/5650812/how-do-i-bind-a-tabcontrol-to-a-collection-of-viewmodels — devdigital, Jul 26 '13 at 13:41
This is exactly the opposite of what I would recommend... I mean mvvm framework and especially caliburn — Liero, Jun 22 '16 at 16:53

score 0 · Answer 2 · edited May 23 '17 at 10:30

0

I posted an answer to a different question which shows how to do exactly this: How to Get a Reference to a ViewModel

It's a very simple example, but hopefully should get you started along the right track.

edited May 23 '17 at 10:30

Community

1
1

answered Jul 26 '13 at 10:24

Lawrence

3,287
19
32

WPF: right way to do a Tabcontrol with MVVM pattern

2 Answers2