WPF MaterialDesign 对话框宿主

Question

我正在构建一个 WPF 应用程序，我想要自定义 MessageBox，但我看到这真的很乏味，我想使用 MaterialDesign 提供的 DialogHost。问题是我无法让它按照我想要的方式工作，所以让我描述一下当前的行为和想要的行为。

当前行为：

<materialDesign:ColorZone Grid.Column="1"
                                  Grid.ColumnSpan="2"
                                  Grid.Row="1"
                                  Mode="Light"
                                  Padding="16">
            <DockPanel>
                <materialDesign:DialogHost DockPanel.Dock="Right">
                    <Button x:Name="PowerButton"
                            ToolTip="{Binding PowerButtonToolTip, Source={StaticResource ResourceKey=ButtonsResources}}"
                            Style="{StaticResource MaterialDesignIconButton}"
                            Command="{x:Static materialDesign:DialogHost.OpenDialogCommand}">
                        <Button.CommandParameter>
                            <StackPanel>
                                <TextBlock Text="TODO" />
                                <StackPanel Orientation="Horizontal"
                                            Margin="0, 20, 0, 10">
                                    <Button Width="90"
                                            Height="30"
                                            Margin="10, 0, 0, 0"
                                            Style="{StaticResource MaterialDesignOutlinedButton}"
                                            Click="PowerButton_Click">
                                        OK
                                    </Button>
                                    <Button Width="90"
                                            Height="30"
                                            Margin="10, 0, 10, 0"
                                            Style="{StaticResource MaterialDesignOutlinedButton}"
                                            Command="{x:Static materialDesign:DialogHost.CloseDialogCommand}">
                                        CANCEL
                                    </Button>
                                </StackPanel>
                            </StackPanel>
                        </Button.CommandParameter>
                        <materialDesign:PackIcon Kind="Power" />
                    </Button>
                </materialDesign:DialogHost>
                <StackPanel Orientation="Horizontal">
                    <ToggleButton x:Name="MenuButton"
                                  Style="{DynamicResource MaterialDesignHamburgerToggleButton}" />
                    <TextBlock VerticalAlignment="Center"
                               Margin="16 0 0 0"
                               Text="{Binding MainViewTitle, Source={StaticResource ResourceKey=ViewsResources}}">
                    </TextBlock>
                </StackPanel>
            </DockPanel>
        </materialDesign:ColorZone>

发生的情况是，当我单击 PowerButton 时，DialogHost 会显示来自 Button.CommandParameter 的结构。这样做的问题是，当对话打开时，窗口不会“禁用”（变得有点黑且无法点击）。

我看到要实现此行为，我需要将 DialogHost 内的窗口的所有内容。但真的是这样还​​是我误解了什么？他们的示例 (see link) 并没有真正的帮助，因为似乎还有其他东西在后台运行。此外，打开“最顶层对话主机”的按钮的命令 materialDesign:DialogHost.OpenDialogCommand 似乎仅限于我。

Answer 1

让我们尝试一些简单的东西，让你第一次尝试。

DialogHost由两大部分组成

• 首先显示在 DialogHost 中的所有内容都必须放在一个块（StackPanel、Grid、DockPanel...）中，即 DialogHost 的内容。
• 第二部分更像是你的对话框的上下文，当你想显示它时，它必须在某个要显示的地方，另一个块（StackPanel、Grid、DockPanel...），上下文是你的对话框将要显示的地方一旦显示，il 将居中显示，并使块的其余部分变暗。

现在你已经掌握了主要理论，让我们根据演示给出的示例和你的代码来制作一个简单的示例。

<materialDesign:DialogHost HorizontalAlignment="Center" VerticalAlignment="Center">
    <materialDesign:DialogHost.DialogContent>
        <StackPanel Margin="16">
            <!-- HERE GOES YOUR CONTENT -->
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" >
                <Button Style="{StaticResource MaterialDesignFlatButton}" IsDefault="True"
                        Margin="0 8 8 0" Command="materialDesign:DialogHost.CloseDialogCommand">
                    <Button.CommandParameter>
                         <system:Boolean>True</system:Boolean>
                     </Button.CommandParameter> 
                     ACCEPT
                 </Button>
                 <Button Style="{StaticResource MaterialDesignFlatButton}"
                         IsCancel="True" Margin="0 8 8 0" 
                         Command="materialDesign:DialogHost.CloseDialogCommand">
                     <Button.CommandParameter>
                         <system:Boolean>False</system:Boolean>
                     </Button.CommandParameter>
                     CANCEL
                 </Button>
             </StackPanel>
         </StackPanel>
     </materialDesign:DialogHost.DialogContent>
     <!-- START OF YOUR CONTEXT-->

     

     <!-- END OF YOUR CONTEXT -->
</materialDesign:DialogHost>

所以现在你有了可能足以让你开始享受的基础。

还有一点，您的上下文需要足够大以显示您在 DialogHost 上放置的内容，因此您不能将整个对话框放在按钮周围，最好将其围绕更大的东西，作为第一次尝试应该尝试在新页面上测试此上下文：

<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
    <Button x:Name="PowerButton" ToolTip="{Binding PowerButtonToolTip, Source={StaticResource ResourceKey=ButtonsResources}}"
                            Style="{StaticResource MaterialDesignIconButton}"
      Command="{x:Static materialDesign:DialogHost.OpenDialogCommand}">
</Grid>

如果您希望执行某个操作，则内​​容下的按钮很简单，例如，如果 DialogHost 用于修改或选择用户可以说是或否，然后根据需要重命名 ACCEPT 和 CANCEL。如果用户按 Enter 键，则“IsDefault”可以使该按钮被视为已按下。按下按钮会自动关闭值得了解的对话框。 由于 ACCEPT 和 CANCEL 都是按钮，您可以影响 Click 事件，这对于 DialogHost 的高级使用非常有用。