Question

I’ve recently been learning the MVVM pattern in WPF and just started making my first proper, rather big application. So far it’s all smooth sailing, and I’m liking what I’m seeing a lot. However I recently met something of a stumbling block.

The application is built with a main TabControl, each TabItem containing a pretty big details view.

TabControl inside main View, ItemsSource bound to MainViewModel.OpenTabs
 TabItem with data specific View+ViewModel
 TabItem with data specific View+ViewModel
 TabItem with data specific View+ViewModel
 etc...

The OpenTabs collection is an ObservableCollection<BaseViewModel> on MainViewModel, and the TabControl‘s SelectedItem is bound to MainViewModel.ActiveTab.

So far so good! However, what I’m not sure I’m getting is how to handle closing of tabs while at the same time following MVVM. If I wasn’t trying to be strict with the MVVM (in order to learn it properly), I’d just bind a MouseDown-event on the TabItem-headers and thus get a reference to the clicked item in that event, removing it from the OpenTabs collection in that way. But – unless I’m mistaken – the interaction logic shouldn’t need references to actual UI items in order to be effective and proper MVVM.

So, how do I handle this MVVM style? Do I use a command that sends a specific parameter with it to my MainViewModel? It seems like the preferred implementation of ICommand in MVVM doesn’t take object parameters (looking at MVVM Light as well as some other tutorials).

Should I just create a CloseTab(int id) public method on my MainViewModel and call that from the view codebehind after catching the Click on my TabItem close button? This seems like MVVM-cheating. 🙂

Also a final note – this should work even if I click close on a TabItem that isn’t the currently active one. Otherwise it wouldn’t be hard to setup with OpenTabs.Remove(ActiveTab).

Thanks for any help! I’d also appreciate any links to recommended reading/watching regarding these problems.

Solution: It seems the best way is to use a command that can accept command parameters. I used the RelayCommand from MVVM Light framework:

In MainViewModel:

CloseTabCommand = new RelayCommand<BaseViewModel>((vm) =>
{
    OpenTabs.Remove(vm);
});

In XAML:

<Button
Command="{Binding Source={StaticResource MainViewModel}, Path=CloseTabCommand}"
CommandParameter="{Binding}">

Note: Your binding paths may of course vary depending on how your Views and ViewModels are set up.

Answer 1

The best and the right way is to create the command. In different frameworks ICommand usually has two implementation, with the parameter and without one (as often you do not need it).

MVVM light has two ICommand implementation as well: RelayCommand and RelayCommand<T>