带有添加新选项卡按钮 (+) 的 TabControl [英] TabControl with Add New Tab Button (+)

问题描述

在 WPF 中选项卡控件的选项卡条中的所有选项卡项末尾添加+"按钮选项卡的正确方法是什么?

What is the proper way of adding a '+' button tab at the end of all the tab items in the tab strip of a tab control in WPF?

1. 它应该适用于多个标签标题行.
2. 它应该在所有标签项的末尾
3. Tab 循环应该可以正常工作(Alt + Tab)，也就是说，应该跳过 + 标签.
4. 我不应该修改我绑定到的源集合.也就是说，控件应该是可重用的.
5. 该解决方案应该适用于 MVVM

1. It should work correctly with multiple tab header rows.
2. It should be at the end of all tab items
3. Tab cycling should work correctly (Alt + Tab), that is, the + tab should be skipped.
4. I shouldn't have to modify the source collection I am binding to. That is, the control should be reusable.
5. The solution should work with MVVM

更准确地说，该按钮应完全显示为附加的最后一个选项卡，而不是显示在所有选项卡条行右侧某处的单独按钮.

To be more precise, the button should appear exactly as an additional last tab and not as a separate button somewhere on the right of all tab strip rows.

我只是在寻找执行此操作的一般方法.

I am just looking for the general approach to doing this.

谷歌举了很多例子，但如果你深入挖掘，没有一个能满足以上五点.

Google throws many examples, but if you dig a little deep none of them satisfy all the above five points.

推荐答案

一个使用 IEditableCollectionView 的几乎完整的解决方案:

An almost complete solution using IEditableCollectionView:

ObservableCollection<ItemVM> _items;
public ObservableCollection<ItemVM> Items
{
    get
    {
        if (_items == null)
        {
            _items = new ObservableCollection<ItemVM>();
            var itemsView = (IEditableCollectionView)CollectionViewSource.GetDefaultView(_items);
            itemsView.NewItemPlaceholderPosition = NewItemPlaceholderPosition.AtEnd;
        }

        return _items;
    }
}

private DelegateCommand<object> _newCommand;
public DelegateCommand<object> NewCommand
{
    get
    {
        if (_newCommand == null)
        {
            _newCommand = new DelegateCommand<object>(New_Execute);
        }

        return _newCommand;
    }
}

private void New_Execute(object parameter)
{
    Items.Add(new ItemVM());
}

<DataTemplate x:Key="newTabButtonContentTemplate">
    <Grid/>
</DataTemplate>

<DataTemplate x:Key="newTabButtonHeaderTemplate">
    <Button Content="+"
        Command="{Binding ElementName=parentUserControl, Path=DataContext.NewCommand}"/>
</DataTemplate>

<DataTemplate x:Key="itemContentTemplate">
    <Grid/>
</DataTemplate>

<DataTemplate x:Key="itemHeaderTemplate">
    <TextBlock Text="TabItem_test"/>
</DataTemplate>

<vw:TemplateSelector x:Key="headerTemplateSelector"
                           NewButtonTemplate="{StaticResource newTabButtonHeaderTemplate}"
                           ItemTemplate="{StaticResource itemHeaderTemplate}"/>

<vw:TemplateSelector x:Key="contentTemplateSelector"
                            NewButtonTemplate="{StaticResource newTabButtonContentTemplate}"
                            ItemTemplate="{StaticResource itemContentTemplate}"/>

<TabControl ItemsSource="{Binding Items}"
        ItemTemplateSelector="{StaticResource headerTemplateSelector}"
        ContentTemplateSelector="{StaticResource contentTemplateSelector}"/>

public class TemplateSelector : DataTemplateSelector
{
    public DataTemplate ItemTemplate { get; set; }
    public DataTemplate NewButtonTemplate { get; set; }

    public override DataTemplate SelectTemplate(object item, DependencyObject container)
    {
        if (item == CollectionView.NewItemPlaceholder)
        {
            return NewButtonTemplate;
        }
        else
        {
            return ItemTemplate;
        }
    }
}

Enter code here

它几乎完成了，因为选项卡循环不会跳过+"选项卡，并且会显示空内容(这不是很好，但我可以忍受它，直到出现更好的解决方案......).

It's almost complete, because the tab cycle doesn't skip the '+' tab, and will show empty content (which is not exactly great, but I can live with it until a better solution come around...).

这篇关于带有添加新选项卡按钮 (+) 的 TabControl的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！