2

我为我的选项卡项定义了一个控件模板/样式，如下所示：

<Style x:Key="TabItemStyle" TargetType="{x:Type TabItem}">
        <Setter Property="Header" Value="{Binding Content.DataContext.Header, RelativeSource={RelativeSource Self}}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabItem}">                    
                    <Grid Width="Auto" Height="Auto" x:Name="TabItemRoot" Margin="10,0,10,0">                       
                        <Button Command="{Binding Content.DataContext.HeaderClickedCommand}">
                            <ContentPresenter Margin="13,5,13,5"
                                              x:Name="Content"
                                              ContentSource="Header"
                                              RecognizesAccessKey="True">
                            </ContentPresenter>
                        </Button>
                    </Grid>   
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

当我单击选项卡标题时，绑定到按钮的命令称为 OK，但是，单击事件似乎已经吃掉了 SelectionChanged 事件，因此选项卡页不会更改。

有没有更好的方法来实现这一点，这样我就可以调用 VM 方法并且仍然可以更改标签页？

根据评论更新

这个想法是，如果用户单击当前活动选项卡的标题，它会通过 VM 中的更改来更新活动选项卡的内容。谢谢

4

1 回答 1

4

这是我实现此类功能的方法，但它是否更好 - 这是品味问题。

主要的 xaml 看起来是这样的：

    <TabControl ItemsSource="{Binding TabItems}">
        <TabControl.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <TextBlock Text="{Binding Title}"/>
                    <i:Interaction.Triggers>
                        <i:EventTrigger EventName="MouseLeftButtonDown">
                            <local:ExecuteCommandAction Command="{Binding HeaderClickCommand}"/>
                        </i:EventTrigger>
                    </i:Interaction.Triggers>
                </Grid>   
            </DataTemplate>
        </TabControl.ItemTemplate>
    </TabControl>

没有ControlTemplate，只有DataTemplate附加属性Interaction.Triggers，其中前缀i在此字符串中定义：

xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"

这个库可以在 MS Blend SDK 或 mvvm light 库中找到（在 codeplex 上）。

此外，不要混淆EventTriggers具有前缀i和通用 EventTriggers，它们在某些时候是不同的，但我不知道确切的区别是什么，除了EventTrigger自定义库中的类Silverlight也可以使用。

在我的示例中，触发器订阅了事件MouseLeftButtonDown并在每次引发事件时调用特殊操作类。这个动作类是一个自定义类，它在代码中定义：

/// <summary>
/// Behaviour helps to bind any RoutedEvent of UIElement to Command.
/// </summary>
[DefaultTrigger(typeof(UIElement), typeof(System.Windows.Interactivity.EventTrigger), "MouseLeftButtonDown")]
public class ExecuteCommandAction : TargetedTriggerAction<UIElement>
{
    /// <summary>
    /// Dependency property represents the Command of the behaviour.
    /// </summary>
    public static readonly DependencyProperty CommandParameterProperty = DependencyProperty.RegisterAttached("CommandParameter",
                        typeof(object), typeof(ExecuteCommandAction), new FrameworkPropertyMetadata(null));

    /// <summary>
    /// Dependency property represents the Command parameter of the behaviour.
    /// </summary>
    public static readonly DependencyProperty CommandProperty = DependencyProperty.RegisterAttached("Command",
                        typeof(ICommand), typeof(ExecuteCommandAction), new FrameworkPropertyMetadata(null));

    /// <summary>
    /// Gets or sets the Commmand.
    /// </summary>
    public ICommand Command
    {
        get
        {
            return (ICommand)this.GetValue(CommandProperty);
        }
        set
        {
            this.SetValue(CommandProperty, value);
        }
    }

    /// <summary>
    /// Gets or sets the CommandParameter.
    /// </summary>
    public object CommandParameter
    {
        get
        {
            return this.GetValue(CommandParameterProperty);
        }
        set
        {
            this.SetValue(CommandParameterProperty, value);
        }
    }

    /// <summary>
    /// Invoke method is called when the given routed event is fired.
    /// </summary>
    /// <param name="parameter">
    /// Parameter is the sender of the event.
    /// </param>
    protected override void Invoke(object parameter)
    {
        if (this.Command != null)
        {
            if (this.Command.CanExecute(this.CommandParameter))
            {
                this.Command.Execute(this.CommandParameter);
            }
        }
    }
}

就这些。现在该命令不会阻止 tabcontrol 选择项目。测试此 xaml 的代码隐藏：

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        var items = new ObservableCollection<TabItemViewModel>
        {
            new TabItemViewModel("Item 1"), new TabItemViewModel("Item 2"), new TabItemViewModel("Item 3")
        };
        this.DataContext = new MainViewModel(){TabItems = items};
    }


}

public class MainViewModel
{
    public ObservableCollection<TabItemViewModel> TabItems { get; set; }
}

public class TabItemViewModel
{
    public TabItemViewModel(string title)
    {
        this.Title = title;
        this.HeaderClickCommand = new RelayCommand(() => MessageBox.Show("Clicked "+this.Title));
    }
    public string Title { get; set; }
    public RelayCommand HeaderClickCommand { get; set; }
}

要仅在选择项目时调用该命令，请更改以下代码：

<local:ExecuteCommandAction Command="{Binding HeaderClickCommand}"
    CommandParameter="{Binding IsSelected, RelativeSource={RelativeSource FindAncestor, AncestorType=TabItem}}"/>

这（第二个参数是CanExecute委托，它检查IsSelected == true）：

this.HeaderClickCommand = new RelayCommand<bool>(b => {/*???*/}, b => b == true);
于 2011-03-21T20:45:50.917 回答