删除 Material 设计对话框宿主背景颜色

Question

我正在尝试使用 MaterialDesigns DialogHost 打开一个弹出窗口，其中包含 Border 红色背景和圆角。

我只想要红色，不要灰色背景。它从何而来？我该如何删除它？

<materialDesign:DialogHost Panel.ZIndex="566" x:Name="mainWindowDialogHost">
        <materialDesign:DialogHost.DialogContent>
            <Border Height="500" Width="200" 
                    CornerRadius="120" Background="Red">
            </Border>
        </materialDesign:DialogHost.DialogContent>
</materialDesign:DialogHost>

Answer 1

当你有一个来自 DialogHost 的对话时有 2 个背景

第一个是 DialogHost 区域本身，可以通过设置 OverlayBackground="Transparent" 将其设置为透明。

而第二个是在对话宿主的模板中设置的内容之一，它没有公开。因此，您要么重写对话框宿主的完整模板（相当多XAML），要么在后面的代码中找到对话框内容的控件并更改其背景。

使用 Material design 4.0.0 测试的示例，使其符合您的要求（我修改了最后一个函数以使其在这种情况下工作，也许可以使其更清晰）

XAML

<materialDesign:DialogHost OverlayBackground="Transparent" Loaded="DialogHost_Loaded" IsOpen="{Binding IsChecked, ElementName=showdialog}" CloseOnClickAway="True"  >
            <materialDesign:DialogHost.DialogContent>
                <Border CornerRadius="50" Background="Red" Height="200" Width=" 200" ></Border>
            </materialDesign:DialogHost.DialogContent>
    ...
</materialDesign:DialogHost>

代码隐藏

private void DialogHost_Loaded(object sender, System.Windows.RoutedEventArgs e)
        {
            Card card = FindVisualChild<Card>((DialogHost)sender);
            if (card != null)
            {
                card.Background = Brushes.Transparent;
            }
        }

        private static T FindVisualChild<T>(Visual visual) where T : Visual
        {
            for (int i = 0; i < VisualTreeHelper.GetChildrenCount(visual); i++)
            {
                Visual child = (Visual)VisualTreeHelper.GetChild(visual, i);
                if (child != null)
                {
                    T correctlyTyped = child as T;
                    if (correctlyTyped != null)
                        return correctlyTyped;

                    if (child as Popup != null) // specific to this case
                    {
                        Popup popup = (Popup)child;
                        if (popup.Child != null)
                        {
                            T subChild = popup.Child as T;
                            if (subChild != null)
                                return subChild;
                        }
                       
                    }
                    T descendent = FindVisualChild<T>(child);
                    if (descendent != null)
                        return descendent;
                }
            }
            return null;
        }

Answer 2

您可以像这样使用 DialogBackground 属性指定对话宿主的背景。

<materialDesign:DialogHost Panel.ZIndex="566" x:Name="mainWindowDialogHost" DialogBackground="Red">

此属性从版本 4.3.0 开始可用。对于旧版本，您必须调整默认样式。

不幸的是，DialogHost 的角半径是硬编码的。为了更改它，您必须复制默认样式（控件模板）并进行调整。将其从 MaterialDesign GitHub 存储库 here 复制到范围内的资源字典中。如果将它包含在应用程序资源中，请确保将它包含在 MaterialDesign 资源字典之后以覆盖默认样式。如果这是一个单独的对话主机，您当然可以通过分配 x:Key 并在 DialogHost Style 属性中将其作为静态或动态资源引用来明确样式.

您必须更改 PART_PopupContentElement 元素中的 UniformCornerRadius 值。

<wpf:Card x:Name="PART_PopupContentElement" 
          Margin="{TemplateBinding DialogMargin}"
          wpf:ShadowAssist.ShadowDepth="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(wpf:ShadowAssist.ShadowDepth)}"
          UniformCornerRadius="120"
          Tag="{TemplateBinding DialogBackground}"
          TextElement.Foreground="{DynamicResource MaterialDesignBody}"
          FocusManager.IsFocusScope="False"
          Foreground="{DynamicResource MaterialDesignBody}"
          Focusable="True"
          IsTabStop="False"
          IsHitTestVisible="True"
          Opacity="0"
          RenderTransformOrigin=".5,.5"
          Content="{TemplateBinding DialogContent}"
          ContentTemplate="{TemplateBinding DialogContentTemplate}"
          ContentTemplateSelector="{TemplateBinding DialogContentTemplateSelector}"
          ContentStringFormat="{TemplateBinding DialogContentStringFormat}">

生成的对话框如下所示。

删除 Material 设计对话框宿主背景颜色

Remove Material Design Dialog Host Background Color

c#

wpf

xaml

wpf-controls

material-design-in-xaml