What's the best way to display a video with rounded corners in Silverlight?
-
09-06-2019 - |
Question
The MediaElement doesn't support rounded corners (radiusx, radiusy). Should I use a VideoBrush on a Rectangle with rounded corners?
Solution
Yeah - In a way you're both asking and answering the question yourself... But that is one of the two options I can think of. The reasons that might be a problem is that you lose some of the features/control you get from the MediaElement control. Another option is to do this:
- Add your MediaElement to your page.
- Draw a Rectangle on top of it and set wanted corner radius
- Right click the rectangle in Blend and choose "Create Clipping Path"
- Apply the clipping path to your MediaElement
That way you're still using a MediaElement control, but you can "clip" away what ever you want to get the desired rounded effect.
This example shows a clipped MediaElement. I know it's not easy to picture the vector path, but if you open it open in Blend you will see a rounded MediaElement.
<MediaElement
Height="132" Width="176" Source="Egypt2007.wmv"
Clip="M0.5,24.5 C0.5,11.245166 11.245166,0.5 24.5,0.5 L151.5,0.5
C164.75484,0.5 175.5,11.245166 175.5,24.5 L175.5,107.5 C175.5,
120.75484 164.75484,131.5 151.5,131.5 L24.5,131.5 C11.245166,
131.5 0.5,120.75484 0.5,107.5 z"/>
OTHER TIPS
Using a rounded rectangle and a VideoBrush doesn't lose you any features/control over using a displayed MediaElement - since the element has to be in the Xaml anyway, you can control it using the usual Play/Pause/Stop methods, except that the playback happens in your rectangle. Using a clip region is a little unwieldy because it's harder to resize the region. A Rectangle is better because you have flexibility of layout.
<MediaElement x:Name="myElement" Source="clip.wmv" Visibility="Collapsed"/>
<Rectangle RadiusX="10" RadiusY="10" Width="640" Height="480">
<Rectangle.Fill>
<VideoBrush Source="myElement" Stretch="Uniform"/>
</Rectangle.Fill>
<Rectangle/>
The clip path with give you "hard" edges - you could also use an OpacityMask as well (though I imagine this requires much more processing power).
Try this
<Border CornerRadius="8" BorderBrush="Black" Background="Black" BorderThickness="3">
<MediaElement HorizontalAlignment="Center" VerticalAlignment="Top" Stretch="Fill" x:Name="Player" Source="/Assets/Videos/x.mp3" />
</Border>