wpf border内部元素内边角溢出问题 裁剪效果

Posted 2020-10-30 迷~途

效果图

 

<Grid>
        <Border BorderThickness="3" BorderBrush="#3c4d72" 
                 CornerRadius="12" Background="LightBlue"  Width="606" Height="356" >
            <MediaElement Name="mainMediaElement"   Volume="0"
                       Stretch="Fill"  Width="600" Height="350"  >
                <MediaElement.Clip> 
                    <!--矩形裁剪-->
                    <RectangleGeometry RadiusX="10" RadiusY="10"  
                                       Rect="0,0,600,350" />
                </MediaElement.Clip>
                <MediaElement.Triggers>
                    <EventTrigger RoutedEvent="MediaElement.Loaded">
                        <EventTrigger.Actions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <MediaTimeline Storyboard.TargetName="mainMediaElement"  
                                                 Source="font/TestMedia.mp4"  RepeatBehavior="Forever" />
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger.Actions>
                    </EventTrigger>
                </MediaElement.Triggers>
            </MediaElement>
        </Border>
    </Grid>