Question

我试图为TabControl找到最佳解决方案，它们都支持每个TabItem上的关闭按钮，并且始终显示一个＆＃34;新标签按钮＆＃34;作为最后一个标签。

我找到了一些半工作的解决方案，但我认为那是MVVM，我没有使用。足以尝试理解WPF =）

这是我迄今为止找到的最佳解决方案： http://www.codeproject.com/Articles/493538/Add-Remove-Tabs-Dynamically-in-WPF

我真正理解的解决方案。但问题是它正在使用ItemsSource，而我并不想要那样。我想将ItemsSource绑定到我自己的集合，而不必在该集合中有特殊的东西来处理新的标签按钮。

我现在已经搜索了几天，但无法找到一个好的解决方案。而且我对WPF真的很陌生，否则我可能已经适应了我已经找到的半成品解决方案，或者让它们完整。但不幸的是，现在这已经超出了我的联盟。

任何帮助表示感谢。

Answer 1

我有一个开源库，它支持MVVM并允许额外的内容，例如将按钮添加到标签条中。它是运动镀铬风格的标签，可以撕掉。

http://dragablz.net

Answer 2

您可以创建一个附加“添加”选项卡的转换器。这样，viewmodel中的选项卡集合将只包含真正的选项卡。

问题是如何知道何时选择添加选项卡。您可以创建一个TabItem行为，该行为在选择选项卡时执行命令。顺便提一下，我最近推荐这个用于另一个问题，因此您可以从那里获取代码：TabItem selected behavior

Answer 3

虽然我实际上没有编码解决方案，但我可以在WPF / MVVM模式中以最合适的方式处理此问题。

首先，如果我们细分请求，则如下：

您有一系列要显示的元素。
您希望用户能够从序列中删除单个元素。
您希望用户能够在序列中添加新元素。

此外，由于您尝试使用TabControl，因此您还希望获得Selector控件提供的行为（元素选择），以及显示元素的区域（内容）被选中。

因此，如果我们坚持这些行为，您就可以了，因为用户界面控件可以根据外观进行自定义。

当然，对此的最佳控制是TabControl，您已经尝试使用它。如果我们使用此控件，它将满足第一项。

<TabControl ItemsSource="{Binding Path=Customers}" />

之后，您可以自定义每个元素，在您的情况下，您要为每个元素添加Button，这些元素将执行命令以从序列中删除该元素。这将满足第二项。

<TabControl ...>
  <TabControl.ItemTemplate>
    <DataTemplate>
      <StackPanel Orientation="Horizontal">
        <TextBlock Text="{Binding Path=CustomerId}" />
        <Button Command="{Binding Path=RemoveItemCommand, Mode=OneTime,
                          RelativeSource={RelativeSource FindAncestor,
                                          AncestorType={x:Type TabControl}}"
                CommandParameter="{Binding}" />
      </StackPanel>
    </DataTemplate>
  <TabControl.ItemTemplate>
</TabControl>

最后一部分有点困难，需要您实际创建一个继承自TabControl类的自定义控件，添加ICommand DependencyProperty并自定义控件模板，以便它不仅显示TabPanel，而且在它旁边还显示一个Button，它处理您刚创建的DependencyProperty（按钮的外观和感觉会有也是定制的）。完成所有这些操作后，您就可以显示自己的TabControl版本，其中包含TabItem，这当然是您的＆＃34;添加＆＃34;按钮。这说起来容易做起来难得多，祝你好运。请记住，TabPanel包裹在多行上，可以水平或垂直。基本上，这最后一部分并不容易。

Answer 4

这是一种肮脏的方式来实现最后一个TabItem旁边放置的添加（+）按钮而没有太多工作。您已经知道如何在TabItem标题旁边放置一个删除按钮，所以我没有在这里包含该逻辑。

基本上，此解决方案中的逻辑是

将ItemsSource属性绑定到您自己的集合以及使用CompositeCollection添加TabItem。
禁用选择添加（+）TabItem，而是执行操作以加载新选项卡单击/选中。

XAML位

    <TextBlock x:Name="HiddenItemWithDataContext" Visibility="Collapsed" />
    <TabControl x:Name="Tab1" SelectionChanged="Tab1_SelectionChanged" >
        <TabControl.ItemsSource>
            <CompositeCollection>
                <CollectionContainer Collection="{Binding DataContext.MyList, Source={x:Reference HiddenItemWithDataContext}}" />
                <TabItem Height="0" Width="0"  />
                <TabItem  Header="+" x:Name="AddTabButton"/>
            </CompositeCollection>
        </TabControl.ItemsSource>
    </TabControl>

背后的代码

    private void Tab1_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        if (e.AddedItems.Contains(AddTabButton))
        {
            //Logic for adding a new item to the bound collection goes here.
            string newItem = "Item " + (MyList.Count + 1);
            MyList.Add(newItem);
            e.Handled = true;
            Dispatcher.BeginInvoke(new Action(() => Tab1.SelectedItem = newItem));

        }
    }

WPF：哪个解决方案？带有关闭按钮和新选项卡按钮的TabControl

4 个答案: