WPF TabControlのタブの並び替え

Question

WPF TabControlを簡単にカスタマイズして、TabItemのドラッグ＆ドロップをサポートします。これはIEとFirefoxのようなものです。

Answer 1

Dragging and Dropping in an ItemsControlの既存のヘルパーは、Bea Stollnitz'sのヘルパーを使用するか、使い始めることができます。彼女が言及しているように、いくつかの制限がありますが、それは始めるのに最適な場所であり、おそらくあなたが必要とするほとんどすべての機能のために動作します。

DragDropHelperクラスとAdornerクラスをインポートした後は、TabControl（ItemsControlの子孫であるため）で使用するのは非常に簡単です。

単純なドラッグテンプレートを設定すると、TabControlのプロパティがすべて必要です。データバインドされた項目のドラッグを処理するようにソリューションが設定されているため、TabControl.ItemsSourceを使用する代わりにタブがXAMLで静的に宣言されている場合、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> 

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