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

问题描述

解决方案

有一个简单的方法可以自定义WPF TabControl，以便它支持TabItem拖放 - 类似于IE和firefox。 div>

您可以使用或开始 Bea Stollnitz的现有帮助者在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 =拖动TabItems 
 Height =300
 Width =300> 
 
< Window.Resources> 
< DataTemplate x：Key =Local_TabItemDragTemplate> 
< Border CornerRadius =5
 BorderBrush =黑色
 BorderThickness =2
背景=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> 
  

alt text http://i27.tinypic.com/xc7okg.png

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>

alt text http://i27.tinypic.com/xc7okg.png

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