Sắp xếp lại các tab trong Tab WPFControl

Question

Có cách nào dễ dàng để tùy chỉnh TabControl WPF để nó hỗ trợ kéo và thả TabItem - tương tự như IE và firefox làm gì.

Answer 1

Bạn có thể sử dụng hoặc bắt đầu với Bea Stollnitz's người trợ giúp hiện tại cho Dragging and Dropping in an ItemsControl. Nó có một số hạn chế như cô đề cập, nhưng đó là một nơi tuyệt vời để bắt đầu, và có lẽ sẽ làm việc như là cho hầu hết tất cả các chức năng mà bạn sẽ yêu cầu.

Sau khi nhập các lớp DragDropHelper và Adorner của mình, nó rất đơn giản để sử dụng chúng với TabControl (Vì nó là hậu duệ của ItemsControl).

Đặt mẫu kéo đơn giản và các thuộc tính trên TabControl là tất cả những gì chúng tôi cần. Vì giải pháp được thiết lập để xử lý việc kéo các mục bị ràng buộc dữ liệu, nếu các tab của bạn được khai báo tĩnh trong XAML thay vì sử dụng TabControl.ItemsSource thì bạn có thể chỉ ràng buộc DataContext của chúng với chính chúng.

<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