【Material Design Toolkit】 TabControl (Dragablz)

　Material Design Toolkitにはタブコントロールが定義されていません。
　Material Design Toolkitのデザインに合わせたタブコントロールが必要な場合はDragablzライブラリを使用します。
　DragablzライブラリはMaterial Design Toolkitと同じ作者が作成した高機能なタブコントロールでタブアイテムを別ウインドウとして切り離したり、タブアイテムを上下左右に並べて表示したりできます。
　Dragablzを使用する場合はNuGetでインストールが必要です。
　また、Dragablzの見た目をMaterial Design Toolkitと合わせるためにDragablz用の設定を行う必要があります。

<Application x:Class="MdDemo.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:dragablz="clr-namespace:Dragablz;assembly=Dragablz"
             StartupUri="Views\MainWindow.xaml"
             Startup="Application_Startup">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.DeepPurple.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Lime.xaml" />

                <!-- Dragablz Material Design -->
                <ResourceDictionary Source="pack://application:,,,/Dragablz;component/Themes/materialdesign.xaml"/>
            </ResourceDictionary.MergedDictionaries>

            <!-- Dragablz Material Design -->
            <Style TargetType="{x:Type dragablz:TabablzControl}" BasedOn="{StaticResource MaterialDesignTabablzControlStyle}" />
        </ResourceDictionary>
    </Application.Resources>
</Application>

　Dragablzを使用する場合はApp.xamlでMaterial Design Toolkit用の設定と合わせてDragablz用設定を指定する必要があります。

<Window x:Class="MdDemo.Views.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="clr-namespace:MdDemo.ViewModels"
        xmlns:dragablz="clr-namespace:Dragablz;assembly=Dragablz"
        xmlns:dockablz="clr-namespace:Dragablz.Dockablz;assembly=Dragablz"
        TextElement.Foreground="{DynamicResource MaterialDesignBody}"
        TextElement.FontWeight="Regular"
        TextElement.FontSize="14"
        TextOptions.TextFormattingMode="Ideal" 
        TextOptions.TextRenderingMode="Auto"        
        Background="{DynamicResource MaterialDesignPaper}"
        FontFamily="{StaticResource MaterialDesignFont}"
        Title="MainWindow" Height="350" Width="525">
    
    <Window.DataContext>
        <vm:MainWindowViewModel/>
    </Window.DataContext>

    <dockablz:Layout>
        <dragablz:TabablzControl FixedHeaderCount="1" ConsolidateOrphanedItems="True">
            <dragablz:TabablzControl.InterTabController>
                <dragablz:InterTabController />
            </dragablz:TabablzControl.InterTabController>

            <TabItem Header="Item1">
                <TextBlock Text="Tab Item1" FontSize="32"/>
            </TabItem>
            <TabItem Header="Item2">
                <TextBlock Text="Tab Item2" FontSize="32"/>
            </TabItem>
            <TabItem Header="Item3">
                <TextBlock Text="Tab Item3" FontSize="32"/>
            </TabItem>
        </dragablz:TabablzControl>
    </dockablz:Layout>
</Window>

　このコードを実行すると以下の様になります。

　タブアイテムを上下左右に並べて表示したい場合はdockablz:Layout内にdragablz:TabablzControlを設置し、dragablz:TabablzControl.InterTabControllerを設定する必要があります。
　こうすればタブアイテムをドラッグしてタブアイテムの配置を変更できるようになります。

　タブアイテムをドラッグすると上の図のようにレイアウト範囲の上下左右にグレーの半円が表示されます。
　ドラッグ中のタブアイテムをグレーの半円部分にドロップするとレイアウトが変更されます。
　以下の図はTabItem2をTabItem1の下に表示した後、TabItem3を右側に配置した図です。

　タブアイテムのレイアウト機能が必要ない場合はdockablz:Layoutは必要ありません。

　タブアイテムを別ウインドウとして切り出す場合はdragablz:TabablzControlにdragablz:TabablzControl.InterTabControllerを設定します。
　タブアイテムをドラッグすることで別ウインドウとして切り離すことが可能です。

　また、切り離したウインドウのタブをドラッグして元のウインドウのタブヘッダー上にドロップすることで元に戻すこともできます。
（ウインドウ上部をドラッグしている場合は戻せません。タブのヘッダーをドラッグしてください。）
　dragablz:TabablzControlのConsolidateOrphanedItemsプロパティをTrueにすると切り離したタブウインドウを閉じると元のウインドウに再び表示されるようになります。
　FixedHeaderCountプロパティを指定すると、指定した数のタブアイテムがドラッグできなくなります。(レイアウトの変更やウインドウ切り離し、タブアイテムの並べ替えができなくなります）

　以下の様にLayoutもTabablzControl.InterTabControllerも使用しなければシンプルなタブコントロールとして使用できます。

<dragablz:TabablzControl >
    <TabItem Header="Item1">
        <TextBlock Text="Tab Item1" FontSize="32"/>
    </TabItem>
    <TabItem Header="Item2">
        <TextBlock Text="Tab Item2" FontSize="32"/>
    </TabItem>
    <TabItem Header="Item3">
        <TextBlock Text="Tab Item3" FontSize="32"/>
    </TabItem>
</dragablz:TabablzControl>