VideoCaptureElement: Apply Border-Element with rounded corner

May 2, 2013 at 12:19 PM
Is there any way to apply a border-element to the VideoCaptureEle with rounded corners so that the corners of the video-capture are rounded as well?

What I have for now is
<Border BorderBrush="Tomato" Background="Tomato" 
                BorderThickness="5" Height="643" Width="512" CornerRadius="7">
        
        <StackPanel Height="643" Width="512" Background="Transparent">

                <controls:VideoCaptureElement Canvas.ZIndex="2" x:Name="Webcam"
                                    LoadedBehavior="Play"    
                                    Height="288"
                                    Stretch="Fill"
                                    FPS="30"
                                    VideoCaptureDevice="{Binding CurrentWebcam}"/>
</StackPanel>
</Border>
May 3, 2013 at 4:12 AM
Edited May 3, 2013 at 4:13 AM
I have done it on my own app so it is definitely possible. The trick is with the Border, not with the VideoCaptureElement.

However, you can't do this with a straight Border element. You have to create your own ClippingBorder element (search the web for some sample implementations). The implementation is very easy, essentially adding a clipping region upon element initialization.

In fact, the standard Border element doesn't clip its children. That's not just for videos, but also for images and other things as well.