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 中的结构。这个问题是 window 在对话打开时不会被“禁用”（变得有点黑且无法点击）。

我看到要实现此行为，我需要 DialogHost 中 window 的所有内容。但真的如此还是我误会了什么？他们的示例 (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 . “IsDefault”是为了让这个按钮在用户按下 Enter 时被视为已按下。按下一个按钮会自动关闭对话框，这是很好知道的。由于 ACCEPT 和 CANCEL 都是按钮，您可以影响 Click 事件，这对于 DialogHost 的高级使用非常有用。

WPF MaterialDesign 对话框宿主

WPF MaterialDesign Dialog Host

c#

wpf

material-design-in-xaml