如何让Image与MediaElement完全适配Border，无重叠且不超出圆角？

核心问题分析 #

当前实现中，单独给Image/MediaElement添加RectangleGeometry裁剪无法匹配Border的动态圆角，且Viewbox的布局逻辑可能导致内容超出Border范围。以下是两种可行的解决方案：

方案一：简化布局，利用Border原生裁剪 #

直接移除元素自身的裁剪逻辑，通过布局调整让内容严格适配Border，借助Border的ClipToBounds属性实现圆角裁剪：

1. 删除Image和MediaElement的<Clip>节点，避免冗余裁剪逻辑
2. 给外层Border命名（如x:Name="ContentBorder"），让内部容器尺寸与Border绑定
3. 调整内部Grid和Viewbox的布局属性，确保内容不会超出Border范围

修改后的XAML代码：

<Grid Background="Transparent">
    <Border x:Name="ContentBorder"
            BorderThickness="2"
            CornerRadius="16"
            ClipToBounds="True">
        <Border.BorderBrush>
            <SolidColorBrush x:Name="GridBorderBrush" 
                              Color="{DynamicResource ColorBrand0}"/>
        </Border.BorderBrush>
        <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <Viewbox Stretch="Uniform">
                <Grid x:Name="Container"
                      Width="{Binding ActualWidth, ElementName=ContentBorder}"
                      Height="{Binding ActualHeight, ElementName=ContentBorder}">
                    <Image x:Name="ImageSource" 
                           Stretch="Uniform"
                           Source="../UIScreens/Images/PlaceHolder.png"/>

                    <MediaElement x:Name="MediaPlayer"
                                  Stretch="Uniform"
                                  LoadedBehavior="Manual" 
                                  UnloadedBehavior="Manual"
                                  MediaOpened="OnMediaOpened" 
                                  Opacity="0"/>
                </Grid>
            </Viewbox>
        </Grid>
    </Border>
</Grid>

方案二：动态同步Border圆角的自定义裁剪（复杂场景） #

如果需要更精确的裁剪控制（比如Border的CornerRadius动态变化），可以通过转换器生成与Border圆角完全匹配的PathGeometry作为裁剪区域：

1. 实现裁剪路径转换器（C#）

public class BorderClipConverter : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        if (values.Length != 3 || 
            !(values[0] is double width) || 
            !(values[1] is double height) || 
            !(values[2] is CornerRadius cornerRadius))
            return Geometry.Empty;

        // 创建与Border圆角一致的路径
        var path = new PathGeometry();
        var figure = new PathFigure { StartPoint = new Point(cornerRadius.TopLeft, 0) };

        // 绘制圆角路径
        figure.Segments.Add(new LineSegment(new Point(width - cornerRadius.TopRight, 0), false));
        figure.Segments.Add(new ArcSegment(new Point(width, cornerRadius.TopRight), 
                                           new Size(cornerRadius.TopRight, cornerRadius.TopRight), 
                                           0, false, SweepDirection.Clockwise, false));
        figure.Segments.Add(new LineSegment(new Point(width, height - cornerRadius.BottomRight), false));
        figure.Segments.Add(new ArcSegment(new Point(width - cornerRadius.BottomRight, height), 
                                           new Size(cornerRadius.BottomRight, cornerRadius.BottomRight), 
                                           0, false, SweepDirection.Clockwise, false));
        figure.Segments.Add(new LineSegment(new Point(cornerRadius.BottomLeft, height), false));
        figure.Segments.Add(new ArcSegment(new Point(0, height - cornerRadius.BottomLeft), 
                                           new Size(cornerRadius.BottomLeft, cornerRadius.BottomLeft), 
                                           0, false, SweepDirection.Clockwise, false));
        figure.Segments.Add(new LineSegment(new Point(0, cornerRadius.TopLeft), false));
        figure.Segments.Add(new ArcSegment(new Point(cornerRadius.TopLeft, 0), 
                                           new Size(cornerRadius.TopLeft, cornerRadius.TopLeft), 
                                           0, false, SweepDirection.Clockwise, false));

        path.Figures.Add(figure);
        return path;
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

2. 在XAML中使用转换器

先在资源中声明转换器：

<Window.Resources>
    <local:BorderClipConverter x:Key="BorderClipConverter"/>
</Window.Resources>

然后给Image和MediaElement绑定Clip：

<Image x:Name="ImageSource" 
       Stretch="Uniform"
       Source="../UIScreens/Images/PlaceHolder.png">
    <Image.Clip>
        <MultiBinding Converter="{StaticResource BorderClipConverter}">
            <Binding Path="ActualWidth" ElementName="ContentBorder"/>
            <Binding Path="ActualHeight" ElementName="ContentBorder"/>
            <Binding Path="CornerRadius" ElementName="ContentBorder"/>
        </MultiBinding>
    </Image.Clip>
</Image>

<MediaElement x:Name="MediaPlayer"
              Stretch="Uniform"
              LoadedBehavior="Manual" 
              UnloadedBehavior="Manual"
              MediaOpened="OnMediaOpened" 
              Opacity="0">
    <MediaElement.Clip>
        <MultiBinding Converter="{StaticResource BorderClipConverter}">
            <Binding Path="ActualWidth" ElementName="ContentBorder"/>
            <Binding Path="ActualHeight" ElementName="ContentBorder"/>
            <Binding Path="CornerRadius" ElementName="ContentBorder"/>
        </MultiBinding>
    </MediaElement.Clip>
</MediaElement>

关键说明 #

• 方案一适合大多数场景，利用Border原生裁剪逻辑，代码更简洁，性能更优
• 方案二适合Border圆角动态变化或需要更精细裁剪控制的场景，确保裁剪区域与Border完全同步

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