在同一窗口中转换多个元素

Question

我正在研究 MaterialDesignInXamlToolkit ，我查看了动画示例，发现动画是使用多个用户控件完成的。

我正在尝试在同一页面上添加标准控件，并使用下一个和上一个命令来播放过渡。

这是我写的代码，但它没有用。

<baseWindow:QuziMeBaseWindow x:Class="QuizMe.Windows.GameDemo"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:QuizMe.Windows"

        xmlns:baseWindow="clr-namespace:QuizMe.Windows"

        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="{DynamicResource MaterialDesignFont}"

        mc:Ignorable="d"
        Title="Demo">
    <StackPanel Orientation="Vertical">
        <!-- the transitioner will manage your transitions. notice how SelectedIndex is set to zero: the first slide (instead of the default of -1) -->
        <materialDesign:Transitioner SelectedIndex="0" AutoApplyTransitionOrigins="True"
                                     Background="Olive" Height="100">
            <materialDesign:TransitioningContent>
                <materialDesign:TransitioningContent.OpeningEffects>
                    <materialDesign:TransitionEffect Kind="FadeIn" />
                    <materialDesign:TransitionEffect Kind="SlideInFromBottom" />
                </materialDesign:TransitioningContent.OpeningEffects>
                <TextBlock>Hello World</TextBlock>
            </materialDesign:TransitioningContent>

            <materialDesign:TransitioningContent>
                <materialDesign:TransitioningContent.OpeningEffects>
                    <materialDesign:TransitionEffect Kind="FadeIn" />
                    <materialDesign:TransitionEffect Kind="SlideInFromBottom" />
                </materialDesign:TransitioningContent.OpeningEffects>
                <TextBlock>Hello World 2222222222</TextBlock>
            </materialDesign:TransitioningContent>
            <!-- you can use a slide for each page, let's add a touch of fade for our first page  --><!--
            <materialDesign:TransitionerSlide OpeningEffect="{materialDesign:TransitionEffect FadeIn}">
                <TextBlock>Helllo 00001</TextBlock>
            </materialDesign:TransitionerSlide>

            --><!-- you can control (and create your own) wipes --><!--
            <materialDesign:TransitionerSlide>
                <materialDesign:TransitionerSlide.BackwardWipe>
                    <materialDesign:CircleWipe />
                </materialDesign:TransitionerSlide.BackwardWipe>
                <materialDesign:TransitionerSlide.ForwardWipe>
                    <materialDesign:SlideWipe Direction="Right" />
                </materialDesign:TransitionerSlide.ForwardWipe>
                <TextBlock>Helllo 00002</TextBlock>
            </materialDesign:TransitionerSlide>

            --><!-- now we are going to slide this in by combining some extra effects.  the inner content slides in, so we'll set the outer background and clip, to keep things nice --><!--
            <materialDesign:TransitionerSlide ClipToBounds="True"
                Background="{DynamicResource MaterialDesignDarkBackground}"
                Foreground="{DynamicResource MaterialDesignDarkForeground}">
                <materialDesign:TransitionerSlide.OpeningEffects>
                    <materialDesign:TransitionEffect Kind="SlideInFromLeft" Duration="0:0:0.8" />
                    <materialDesign:TransitionEffect Kind="SlideInFromBottom" Duration="0:0:0.8" OffsetTime="0:0:0.15" />
                </materialDesign:TransitionerSlide.OpeningEffects>
                <TextBlock>Helllo 00003</TextBlock>
            </materialDesign:TransitionerSlide>-->
        </materialDesign:Transitioner>

        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
            <Button Command="{x:Static materialDesign:Transitioner.MoveNextCommand}">
                NEXT
            </Button>
            <Button Command="{x:Static materialDesign:Transitioner.MovePreviousCommand}">
                BACK
            </Button>
        </StackPanel>
    </StackPanel>
</baseWindow:QuziMeBaseWindow>

任何人都可以指导我如何完成这个以及我犯错的地方。

提前致谢。