Use a Command with TabItem

Question

I would like to call a Command when a TabItem of my TabControl is selected.

Is there a way to do it without breaking the MVVM pattern ?

Answer 1

Use an AttachedCommand Behavior, which will let you bind a Command to WPF events

<TabControl ...
    local:CommandBehavior.Event="SelectionChanged"  
    local:CommandBehavior.Command="{Binding TabChangedCommand}" />

Of course, if you're using the MVVM design pattern and binding SelectedItem or SelectedIndex, you could also run the command in the PropertyChanged event

void MyViewModel_PropertyChanged(object sender, PropertyChangedEventArgs e)
{
    if (e.PropertyName == "SelectedIndex")
        RunTabChangedLogic();
}

Answer 2

It can be done using the following classes together:

• EventTrigger class from the System.Windows.Interactivity namespace (System.Windows.Interactivity assembly).
• EventToCommand class from the GalaSoft.MvvmLight.Command namespace (MVVM Light Toolkit assembly, for example, GalaSoft.MvvmLight.Extras.WPF4):

XAML:

<Window ...
        xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
        xmlns:cmd="clr-namespace:GalaSoft.MvvmLight.Command
        ...>
...
    <TabControl>
        <i:Interaction.Triggers>
            <i:EventTrigger EventName="SelectionChanged">
                <cmd:EventToCommand Command="{Binding TabSelectionChangedCommand}"
                                    PassEventArgsToCommand="True" />
            </i:EventTrigger>
        </i:Interaction.Triggers>

        <TabItem>...</TabItem>
        <TabItem>...</TabItem>
    </TabControl>
...
</Window>

Create an instance of the command in the ViewModel constructor:

TabSelectionChangedCommand = new RelayCommand<SelectionChangedEventArgs>(args =>
    {
        // Command action.
    });