如何确保带有 RectangleGeometry 和 MultiBinding 的 Image 和 MediaElement 在 WPF 中不重叠地适合 Border？

Question

我试图确保

Image

和

MediaElement

（其中应用了

RectangleGeometry

剪辑和 MultiBinding）能够整齐地适合

Border

，而不会与其边界重叠。

这是我的 XAML 结构的简化版本：

<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>

Border

元素旨在提供内容周围的圆形边框，但我在确保

Image

及其

RectangleGeometry

剪辑正确适合

Border

内而不超出其边界时遇到问题。目前，当

Image

由于剪切而超出其边界时，有时会与

Border

重叠。

我可以应用什么来确保

Image

（和

MediaElement

）保持在

Border

的范围内并尊重圆角而不重叠？

---

PS：设置

RadiusX

的

RadiusY

和

RectangleGeometry

不符合我的额外要求。

它应该尊重边界的 CornerRadus。

Answer 1

我认为对于你的构图，你的“边框”需要位于 ViewBox 的“内部”以及 ViewBox 中的网格周围。这是你想要框架的ViewBox的“内容”；而不是ViewBox？ （边框和边框内的内容应该尊重 ViewBox）。