UWP Win10 1904*版本设置Content Dialog圆角后出现多余阴影如何解决

问题根源 #

UWP ContentDialog 控件模板默认自带固定直角投影，且内部内容容器默认不会跟随外层设置的CornerRadius做裁剪，当设置的圆角值大于默认值（默认圆角为4）时，直角阴影的边角就会从圆角外侧露出，形成你看到的多余阴影。

修复方法 #

方案1：快速属性修改（优先尝试） #

直接在你的ContentDialog标签中新增两个属性即可，90%以上的场景可以直接解决问题：

• 关闭默认的直角投影：IsDefaultShadowEnabled="False"
• 让背景绘制延伸到圆角外边缘，避免缝隙：BackgroundSizing="OuterBorderEdge"

修改后的完整代码如下：

<ContentDialog
    x:Class="SampleApp.SampleDialog"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:SampleApp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Title="TITLE"
    PrimaryButtonText="Button1"
    SecondaryButtonText="Button2"
    PrimaryButtonClick="ContentDialog_PrimaryButtonClick"
    SecondaryButtonClick="ContentDialog_SecondaryButtonClick"
    CornerRadius="50"
    IsDefaultShadowEnabled="False"
    BackgroundSizing="OuterBorderEdge">

    <Grid>
    </Grid>
</ContentDialog>

方案2：重写控件模板（方案1无效时使用） #

如果上述修改后仍有残留阴影，可以重写ContentDialog的默认样式，手动同步内部容器的圆角和裁剪规则，在App.xaml的ResourceDictionary中添加如下样式：

<Style TargetType="ContentDialog">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ContentDialog">
                <Border x:Name="Container"
                        CornerRadius="{TemplateBinding CornerRadius}"
                        Background="{TemplateBinding Background}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        BorderBrush="{TemplateBinding BorderBrush}">
                    <Border.Clip>
                        <RectangleGeometry RadiusX="{TemplateBinding CornerRadius.TopLeft}"
                                           RadiusY="{TemplateBinding CornerRadius.TopLeft}"
                                           Rect="0,0,{TemplateBinding ActualWidth},{TemplateBinding ActualHeight}"/>
                    </Border.Clip>
                    <Grid>
                        <!-- 原有模板的其他内容不变，这里省略其余默认模板代码，仅修改外层容器部分 -->
                        <ContentPresenter Content="{TemplateBinding Content}"
                                          ContentTemplate="{TemplateBinding ContentTemplate}"
                                          Margin="{TemplateBinding Padding}"/>
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

保留阴影的可选方案 #

如果你需要保留对话框的阴影效果，可以使用DropShadowPanel控件包裹ContentDialog内部的根内容，手动设置和圆角值匹配的阴影参数即可。

内容的提问来源于stack exchange，提问作者Rajib_119