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だけで、はありません。DataTemplateInteraction.Triggersi

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

このライブラリは、MS Blend SDK またはライブラリ mvvm light (codeplex 上) にあります。

EventTriggersまた、プレフィックスと一般的な EventTriggers を混同しないでください。それらはある時点で異なりますが、カスタム ライブラリiのクラスも動作することを除いて、違いが何であるかは正確にはわかりません。EventTriggerSilverlight

私の例では、トリガーはイベントにサブスクライブされ、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);
            }
        }
    }
}

それだけです。現在、このコマンドは、タブ コントロールによるアイテムの選択を妨げません。この 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}}"/>

そしてこれ（2番目のパラメータはCanExecuteデリゲートで、チェックしますIsSelected == true）：

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