WPF中DropShadowEffect与CornerRadius的显示异常问题

修复代码 #

<Grid Margin="10" x:Name="MainGrid">
    <!-- 独立的阴影载体：透明背景+圆角，仅用于显示阴影 -->
    <Border Background="Transparent" CornerRadius="10">
        <Border.Effect>
            <DropShadowEffect Color="Gray" Opacity=".50" ShadowDepth="10" />
        </Border.Effect>
    </Border>
    
    <!-- 圆角遮罩载体：带背景色+圆角，用于给内容生成精确的圆角遮罩 -->
    <Border x:Name="MaskBorder" Background="#EEF0F8" CornerRadius="10" />
    
    <!-- 内容区域：通过OpacityMask绑定无阴影的MaskBorder，实现内容圆角裁剪 -->
    <Grid x:Name="ContentGrid">
        <Grid.OpacityMask>
            <VisualBrush Visual="{Binding ElementName=MaskBorder}" />
        </Grid.OpacityMask>
        
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        
        <TextBlock Grid.Row="0" Background="Red"/>
        <TextBlock Grid.Row="1" Background="Blue"/>
    </Grid>
</Grid>

问题原因 #

原代码中，OpacityMask绑定的是带有DropShadowEffect的MaskBorder。由于阴影效果会在Border边缘生成模糊的半透明像素区域，当VisualBrush采样这个带阴影的Visual时，放大后这些阴影边缘的像素会导致遮罩出现异常的边角瑕疵。

修复逻辑 #

将阴影显示和圆角遮罩的载体完全分离：

• 用一个透明背景的Border单独承载阴影效果，保证阴影的圆角形状正确；
• 用另一个无阴影的Border作为OpacityMask的来源，让遮罩只采样干净的圆角边缘，避免阴影像素干扰；
• 内容Grid通过绑定无阴影Border的VisualBrush实现精确的圆角裁剪，同时阴影在底层正常显示。

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