【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>

　

【Material Design Toolkit】 Transitioner

　Transitionerを使用するとパワーポイントのスライドショーの様にスライドを１枚づつ表示することができます。
　処理が複数のステップに分かれている時等に使用します。

<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:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        TextElement.Foreground="{DynamicResource MaterialDesignBody}"
        TextElement.FontWeight="Regular"
        TextElement.FontSize="13"
        TextOptions.TextFormattingMode="Ideal" 
        TextOptions.TextRenderingMode="Auto"        
        Background="{DynamicResource MaterialDesignPaper}"
        FontFamily="{StaticResource MaterialDesignFont}"
        Title="MainWindow" Height="350" Width="525">
    
    <Window.DataContext>
        <vm:MainWindowViewModel/>
    </Window.DataContext>

    <materialDesign:Transitioner SelectedIndex="0">
        <materialDesign:TransitionerSlide
            OpeningEffect="{materialDesign:TransitionEffect Kind=FadeIn}">
            <StackPanel Background="AliceBlue">
                <TextBlock Text="スライド1" FontSize="64"/>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                    <Button Content="次へ" Width="100"
                            Command="{x:Static materialDesign:Transitioner.MoveNextCommand}"/>
                    <Button Content="最後へ" Width="100"
                            Command="{x:Static materialDesign:Transitioner.MoveLastCommand}"/>
                </StackPanel>
            </StackPanel>
        </materialDesign:TransitionerSlide>

        <materialDesign:TransitionerSlide
            OpeningEffect="{materialDesign:TransitionEffect Kind=SlideInFromLeft, Duration=0:0:2}">
            <StackPanel Background="LightSteelBlue">
                <TextBlock Text="スライド2" FontSize="64"/>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                    <Button Content="前へ" Width="100"
                            Command="{x:Static materialDesign:Transitioner.MovePreviousCommand}"/>
                    <Button Content="次へ" Width="100"
                            Command="{x:Static materialDesign:Transitioner.MoveNextCommand}"/>
                </StackPanel>
            </StackPanel>
        </materialDesign:TransitionerSlide>

        <StackPanel Background="CornflowerBlue">
            <TextBlock Text="スライド3" FontSize="64"/>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                <Button Content="最初へ" Width="100"
                            Command="{x:Static materialDesign:Transitioner.MoveFirstCommand}"/>
            </StackPanel>
        </StackPanel>
    </materialDesign:Transitioner>
</Window>

　これを実行し、スライドを移動させると以下の様に表示されます。

　Transitioner領域にスライドが表示されます。
　SselectedIndexプロパティで最初に表示するスライドを指定しています。
　あとはTransitioner以下にスライドを表示順に定義していきます。
　TransitionerSlideを使用する場合はOpeningEffectでスライドを表示する際のエフェクトを指定できます。
　TransitionEffectにはExpandIn、FadeIn、None、SlideInFromBottom、SlideInFromLeft、SlideInFromRight、SlideInFromTopの７種類があります。
　また、Durationを指定することでスライド表示エフェクトの表示時間を変更することもできます。
　TransitionerSlideを使用いない場合（サンプルコードのスライド3）はエフェクトにはNoneが使用されます。

　スライドの移動はコマンドを使用します。
　スライド移動用コマンドは以下の４つが用意されています。
　materialDesign:Transitioner.MoveNextCommand ： 次のスライドを表示する
　materialDesign:Transitioner.MovePreviousCommand　： 前のスライドを表示する
　materialDesign:Transitioner.MoveFirstCommand　：　最初のスライドを表示する
　materialDesign:Transitioner.MoveLastCommand　：　最後のスライドを表示する