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

转载于 2018-04-08 12:03:00 发布 · 2.1k 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/shenwenbo/p/8744204.html

本文介绍了一个使用WPF实现的媒体播放器界面设计方案，包括界面布局、媒体元素的控制及触发事件等内容。该方案通过自定义的Grid和Border元素来设置播放器的基本样式，并利用MediaElement控件实现视频播放功能。

效果图

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