如何在 WPF 中使用带有 MaterialDesignInXamlToolkit 库的 DialogHost 使用 materialDesign:Transitioner 显示向导样式？

Question

我想使用 materialDesign:Transitioner 和 DialogHost 显示一个向导，以在 WPF 中使用 MaterialDesignInXamlToolkit 库显示对话框？

确实，我想使用 materialDesign:Transitioner 将 Wizard 制作成居中的 materialDesign:DialogHost，但是 materialDesign:DialogHost 无法堆叠显示多个对话框：一种用于 materialDesign:Transitioner，另一种用于 DialogBox。

下面是示例代码：

<materialDesign:DialogHost x:Name="RootDialogHost" Identifier="RootDialog" SnackbarMessageQueue="{Binding ElementName=MainSnackbar, Path=MessageQueue}" IsOpen="{Binding GlobalDataVM.IsMessageDialogOpen}" DialogContent="{Binding GlobalDataVM.MessageDialogContent}" CloseOnClickAway="False" DialogClosing="DialogHost_OnDialogClosing">
<materialDesign:DrawerHost Margin="64" HorizontalAlignment="Center" VerticalAlignment="Center" BorderThickness="2" BorderBrush="{DynamicResource MaterialDesignDivider}">

    <materialDesign:DrawerHost.LeftDrawerContent>

        <!-- The Wizard -->
        <!-- the transitioner will manage your transitions. notice how SelectedIndex is set to zero: the first slide (instead of the default of -1) -->
        <materialDesign:Transitioner Grid.Row="1" SelectedIndex="0" AutoApplyTransitionOrigins="True">

            <!-- 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}">

            <!-- 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}">
                <local:Slide1_Intro />
            </materialDesign:TransitionerSlide>

            <!-- but you can use bare xaml too -->
            <local:Slide2_Intro />

            <!-- 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>
                <local:Slide3_Intro />
            </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 Background="{DynamicResource MaterialDesignDarkBackground}"
                                              Foreground="{DynamicResource MaterialDesignDarkForeground}"
                                              ClipToBounds="True">
                <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>

                <local:Slide4_CombineTransitions />

            </materialDesign:TransitionerSlide>

        </materialDesign:Transitioner>

    </materialDesign:DrawerHost.LeftDrawerContent>

</materialDesign:DrawerHost>
</materialDesign:DialogHost>

那么有没有可能换一种方式呢？

此致

Answer 1

一个 materialDesign:DialogHost 不能堆叠多个对话框，但可以嵌套多个 materialDesign:DialogHost ：一个用于承载向导的对话框，一个用于向导之上的对话框。

像这样：

<materialDesign:DialogHost x:Name="RootDialogHost" Identifier="RootDialog" SnackbarMessageQueue="{Binding ElementName=MainSnackbar, Path=MessageQueue}" IsOpen="{Binding GlobalDataVM.IsMessageDialogOpen}" DialogContent="{Binding GlobalDataVM.MessageDialogContent}" CloseOnClickAway="False" DialogClosing="DialogHost_OnDialogClosing">

    <!-- The Wizard -->
    <materialDesign:Transitioner Grid.Row="1" SelectedIndex="0" AutoApplyTransitionOrigins="True">

        <materialDesign:DialogHost x:Name="WizardDialogHost" Identifier="WizardDialog" SnackbarMessageQueue="{Binding ElementName=MainSnackbar, Path=MessageQueue}" IsOpen="{Binding GlobalDataVM.IsWizardMessageDialogOpen}" DialogContent="{Binding GlobalDataVM.WizardMessageDialogContent}" CloseOnClickAway="False" DialogClosing="DialogHost_WizardOnDialogClosing">

        // ...

        </materialDesign:DialogHost> 

    </materialDesign:Transitioner>

</materialDesign:DialogHost>

希望对您有所帮助。

如何在 WPF 中使用带有 MaterialDesignInXamlToolkit 库的 DialogHost 使用 materialDesign:Transitioner 显示向导样式？

How to display a Wizard style using materialDesign:Transitioner using also DialogHost with MaterialDesignInXamlToolkit library in WPF?

c#

wpf

material-design

centering

wizard