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

Question

I'd like to display a Wizard using a materialDesign:Transitioner and also a DialogHost to display DialogBox with MaterialDesignInXamlToolkit library in WPF ?

Indeed, I'd like to make a Wizard using materialDesign:Transitioner into a materialDesign:DialogHost centered, but materialDesign:DialogHost can't be stacked to display several DialogBoxes : One for the materialDesign:Transitioner and one for the DialogBox.

Below is a sample code :

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

So is it possible to do it in an another way ?

Regards

Answer 1

A materialDesign:DialogHost cannot stack several DialogBoxes, but several materialDesign:DialogHost can be nested : One for a DialogBox hosting the Wizard and one for the DialogBox over the Wizard.

Like this :

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

Hopes it will help.