重新排序 WPF TabControl 中的选项卡

Question

是否有一种简单的方法可以自定义 WPF TabControl 以便它支持 TabItem 拖放 - 类似于 IE 和 firefox 所做的。

Answer 1

您可以使用或开始使用Bea Stollnitz's 现有的Dragging and Dropping in an ItemsControl 助手。正如她所提到的，它确实有一些限制，但它是一个很好的起点，并且可能会按原样运行您需要的大多数功能。

导入她的 DragDropHelper 和 Adorner 类后，将它们与 TabControl 一起使用非常简单（因为它是 ItemsControl 的后代）。

设置一个简单的拖动模板，TabControl 上的属性就是我们所需要的。由于该解决方案设置为处理数据绑定项的拖动，因此如果您的选项卡在 XAML 中静态声明而不是使用 TabControl.ItemsSource，那么您可以将它们的 DataContext 绑定到它们自己。

<Window x:Class="Samples.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:dd="clr-namespace:DragDropListBox"
    Title="Dragging TabItems"
    Height="300"
    Width="300">

<Window.Resources>
    <DataTemplate x:Key="Local_TabItemDragTemplate">
        <Border CornerRadius="5"
                BorderBrush="Black"
                BorderThickness="2"
                Background="DodgerBlue">
            <TextBlock Margin="5"
                       Text="{Binding Path=Header}" />
        </Border>
    </DataTemplate>
</Window.Resources>

<StackPanel>
    <TabControl dd:DragDropHelper.IsDragSource="true"
                dd:DragDropHelper.IsDropTarget="true"
                dd:DragDropHelper.DragDropTemplate="{StaticResource Local_TabItemDragTemplate}">
        <TabControl.ItemContainerStyle>
            <Style TargetType="{x:Type TabItem}">
                <Setter Property="DataContext"
                        Value="{Binding RelativeSource={RelativeSource Self}}" />
            </Style>
        </TabControl.ItemContainerStyle>
        <TabItem Header="Tab 1" />
        <TabItem Header="Tab 2" />
        <TabItem Header="Tab 3" />
        <TabItem Header="Tab 4" />
    </TabControl>
    <TabControl dd:DragDropHelper.IsDragSource="true"
                dd:DragDropHelper.IsDropTarget="true"
                dd:DragDropHelper.DragDropTemplate="{StaticResource Local_TabItemDragTemplate}">
        <TabControl.ItemContainerStyle>
            <Style TargetType="{x:Type TabItem}">
                <Setter Property="DataContext"
                        Value="{Binding RelativeSource={RelativeSource Self}}" />
            </Style>
        </TabControl.ItemContainerStyle>
        <TabItem Header="Tab 5" />
        <TabItem Header="Tab 6" />
        <TabItem Header="Tab 7" />
        <TabItem Header="Tab 8" />
    </TabControl>
</StackPanel>