在WPF中实现矩形区域的局部圆形透明效果

因为无法修改Part_Container后台绘制的内容，你可以通过OpacityMask来实现中间圆形透明的需求，不需要额外叠加椭圆元素，以下是两种可靠的实现方式：

方法1：使用VisualBrush定义遮罩 #

这种方式直观易懂，通过UI元素组合来定义遮罩区域，调整圆形的大小和位置非常灵活：

<Grid>
    <!-- 这里是透过圆形要显示的底层内容 -->
    <TextBlock Text="底层内容" FontSize="24" HorizontalAlignment="Center" VerticalAlignment="Center"/>

    <ContentControl x:Name="Part_Container">
        <ContentControl.OpacityMask>
            <VisualBrush>
                <VisualBrush.Visual>
                    <!-- 遮罩的尺寸与ContentControl保持一致 -->
                    <Grid Width="{Binding ActualWidth, ElementName=Part_Container}"
                          Height="{Binding ActualHeight, ElementName=Part_Container}">
                        <!-- 黑色区域保留ContentControl的内容，透明区域让对应位置变透明 -->
                        <Rectangle Fill="Black"/>
                        <!-- 中间的透明椭圆就是要挖空的区域 -->
                        <Ellipse Width="120" Height="120" Fill="Transparent"
                                 HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Grid>
                </VisualBrush.Visual>
            </VisualBrush>
        </ContentControl.OpacityMask>
    </ContentControl>
</Grid>

方法2：使用DrawingBrush定义遮罩（性能更优） #

如果不需要复杂的UI元素作为遮罩，推荐用DrawingBrush结合几何组合来实现，性能更轻量：

<Grid>
    <!-- 底层内容 -->
    <TextBlock Text="底层内容" FontSize="24" HorizontalAlignment="Center" VerticalAlignment="Center"/>

    <ContentControl x:Name="Part_Container">
        <ContentControl.OpacityMask>
            <DrawingBrush Viewport="0,0,1,1" ViewportUnits="RelativeToBoundingBox" Stretch="Fill">
                <DrawingBrush.Drawing>
                    <GeometryDrawing Brush="Black">
                        <GeometryDrawing.Geometry>
                            <!-- 通过几何组合，用大矩形减去中间的圆，得到需要保留的区域 -->
                            <CombinedGeometry GeometryCombineMode="Exclude">
                                <CombinedGeometry.Geometry1>
                                    <RectangleGeometry Rect="0,0,1,1"/>
                                </CombinedGeometry.Geometry1>
                                <CombinedGeometry.Geometry2>
                                    <!-- 圆心在中心，半径占控件的20%，可按需调整 -->
                                    <EllipseGeometry Center="0.5,0.5" RadiusX="0.2" RadiusY="0.2"/>
                                </CombinedGeometry.Geometry2>
                            </CombinedGeometry>
                        </GeometryDrawing.Geometry>
                    </GeometryDrawing>
                </DrawingBrush.Drawing>
            </DrawingBrush>
        </ContentControl.OpacityMask>
    </ContentControl>
</Grid>

关于“上方叠加椭圆”的补充 #

如果坚持用叠加元素的方式，你可以在Part_Container上层放一个与控件同尺寸的Grid，里面用一个填充背景色的Rectangle和透明Ellipse组合，但这种方法仅适用于Part_Container的背景是纯色且固定的场景——如果后台绘制的是渐变、纹理这类动态背景，叠加元素的颜色无法匹配，就会出现明显的违和感，因此更推荐上述OpacityMask方案。

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