【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　：　最後のスライドを表示する