What's the best way to display a video with rounded corners in Silverlight?

Question

The MediaElement doesn't support rounded corners (radiusx, radiusy). Should I use a VideoBrush on a Rectangle with rounded corners?

Answer 1

Yeah - In a way you're both asking and answering the question your self.. But that is one of the two options I can think of. The reasons that might be a problem is that you loose some of the features/control you get from the MediaElement control. Another option is to do this:

1. Add your MediaElement to your page.
2. Draw a Rectangle on top of it and set wanted corner radius
3. Right click the rectangle in Blend and choose "Create Clipping Path"
4. 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"/>

Answer 2

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

Answer 3

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