Use a Command with TabItem

问题:

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 ?

回答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();
}

回答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.
    });

回答3:

Here is how I did it without GalaSoft.MvvmLight or Attached Command Behavior

    <TabControl Name="MyTabControl">
        <TabItem x:Name="FirstDataGridTab">
            <TabItem.InputBindings>
                <MouseBinding Command="{Binding MyCommand}" MouseAction="LeftClick" />
            </TabItem.InputBindings>

        ...
    </TabControl>

    // In my ViewModel
    public ICommand MyCommand
    {
        get
        {
            return new RelayCommand((object parameters) => 
            { 
                // Do stuff...
            });
        }
    }