重新排序在WPF TabControl的标签(Reorder tabs in WPF TabCont

2019-06-25 07:15发布

有一种简单的方式来定制的WPF TabControl的,这样它支持的TabItem拖放 - 类似于IE和Firefox做。

Answer 1:

你可以使用或开始使用比亚Stollnitz的现有佣工的拖动和一个ItemsControl删除 。 它也有一定的局限性,因为她提到,但它是一个伟大的地方开始,并可能工作是最重要的,你需要的功能。

进口她DragDropHelper和装饰器类之后,这是非常简单的与使用它们的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>



文章来源: Reorder tabs in WPF TabControl