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

Posted 2023-04-01

【中文标题】移除 Material Design 对话框宿主背景颜色

【英文标题】：Remove Material Design Dialog Host Background Color

【发布时间】：2022-01-06 22:20:11

【问题描述】：

我正在尝试使用 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>

【参考方案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;
        

【参考方案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">

生成的对话框如下所示。

【讨论】：

谢谢。我使用他们的 github 代码修改了模板。

@UdinM 如果答案有用或解决了您的问题，please consider voting or accepting。