I’m trying to ensure that an Image and a MediaElement, which has a RectangleGeometry clip and MultiBinding applied to it, fits neatly within a Border without overlapping its boundaries.

Here’s a simplified version of my XAML structure:

<Grid Background="Transparent">
    <Border BorderThickness="2"
            CornerRadius="16"
            ClipToBounds="True">
        <Border.BorderBrush>
            <SolidColorBrush x:Name="GridBorderBrush" 
                              Color="{DynamicResource ColorBrand0}"/>
        </Border.BorderBrush>
        <Grid>
            <Viewbox>
                <Grid x:Name="Container">
                    <Image x:Name="ImageSource" 
                           Stretch="Uniform"
                           Source="../UIScreens/Images/PlaceHolder.png">
                        <Image.Clip>
                            <RectangleGeometry>
                                <RectangleGeometry.Rect>
                                    <MultiBinding Converter="{StaticResource RectConverter}">
                                        <Binding Path="ActualWidth" ElementName="ImageSource"/>
                                        <Binding Path="ActualHeight" ElementName="ImageSource"/>
                                    </MultiBinding>
                                </RectangleGeometry.Rect>
                            </RectangleGeometry>
                        </Image.Clip>
                    </Image>

                    <MediaElement x:Name="MediaPlayer"
                                  Stretch="Uniform"
                                  LoadedBehavior="Manual" 
                                  UnloadedBehavior="Manual"
                                  MediaOpened="OnMediaOpened" 
                                  Opacity="0">
                        <MediaElement.Clip>
                            <RectangleGeometry>
                                <RectangleGeometry.Rect>
                                    <MultiBinding Converter="{StaticResource RectConverter}">
                                        <Binding Path="ActualWidth" ElementName="MediaPlayer"/>
                                        <Binding Path="ActualHeight" ElementName="MediaPlayer"/>
                                    </MultiBinding>
                                </RectangleGeometry.Rect>
                            </RectangleGeometry>
                        </MediaElement.Clip>
                    </MediaElement>
                </Grid>
            </Viewbox>
        </Grid>
    </Border>
</Grid>

The Border element is intended to provide a rounded border around the content, but I’m having issues ensuring that the Image with its RectangleGeometry clip fits properly within the Border without extending beyond its boundaries. Currently, the Image sometimes overlaps the Border when it exceeds its bounds due to the clipping.

What adjustments or techniques can I apply to ensure that the Image (and the MediaElement) stays within the confines of the Border and respects the rounded corners without overlap?

PS: Setting RadiusX and RadiusY of the RectangleGeometry does not meet my additional requirements.