移除 Material Design 对话框宿主背景颜色

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

生成的对话框如下所示。