Riordina le schede in WPF TabControl

Question

Esiste un modo semplice per personalizzare WPF TabControl in modo che supporti il ​​trascinamento della selezione TabItem, simile a quello che fanno IE e firefox.

Answer 1

È possibile utilizzare o iniziare con Bea Stollnitz's helper esistenti per Dragging and Dropping in an ItemsControl. Ha alcune limitazioni come lei menziona, ma è un ottimo punto di partenza, e probabilmente funzionerà come lo è per la maggior parte delle funzionalità necessarie.

Dopo aver importato le sue classi DragDropHelper e Adorner, è molto semplice utilizzarle con lo TabControl (Poiché è un discendente di ItemsControl).

Impostazione di un semplice modello di trascinamento e le proprietà su TabControl sono tutto ciò di cui abbiamo bisogno. Poiché la soluzione è configurata per gestire il trascinamento di elementi associati ai dati, se le schede sono dichiarate staticamente in XAML anziché utilizzare TabControl.ItemsSource, è possibile associare a se stessi 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