重新排序 WPF TabControl 中的选项卡 [英] Reorder tabs in WPF TabControl

问题描述

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

解决方案

您可以使用或开始使用

Is there an easy way to customize the WPF TabControl so that it supports TabItem drag and drop - similar to what IE and firefox do.

解决方案

You could use or get started with Bea Stollnitz's existing helpers for Dragging and Dropping in an ItemsControl. It does have some limitations as she mentions, but it's a great place to start, and probably will work as is for most all of the functionality you will require.

After importing her DragDropHelper and Adorner classes, it's very simple to use them with the TabControl (Since it is a descendant of ItemsControl).

Setting a simple drag template, and the properties on the TabControl are all we need. Since the solution is set up to handle dragging of data bound items, if your tabs are statically declared in XAML instead of using the TabControl.ItemsSource then you can just bind their DataContext to themselves.

<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>

这篇关于重新排序 WPF TabControl 中的选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！