Search code examples
wpfmovie

WPF MediaElement with rounded corner

In WPF, i wish to create rounded corner for my movie, but the movie actually will overlap the border and i get a normal rectangle box that load my movie. Any idea how to solve this issue? enter image description here

<Border BorderBrush="#FF000000" BorderThickness="1,1,1,1" CornerRadius="20,20,20,20">
    <Grid>
        <MediaElement x:Name="movieLoader" HorizontalAlignment="Left" Height="128" VerticalAlignment="Top" Width="236" Source="../video/empty.mp4"/>
    </Grid>
</Border>
Solution

  • Try this:

    <Border x:Name="border" BorderThickness="1" BorderBrush="#FF000000" CornerRadius="20" Padding="1"
        HorizontalAlignment="Center" VerticalAlignment="Center">
    <Grid>
        <Border Name="mask" Background="White" CornerRadius="{Binding ElementName=border, Path=CornerRadius}"/>
        <Grid>
            <Grid.OpacityMask>
                <VisualBrush Visual="{Binding ElementName=mask}"/>
            </Grid.OpacityMask>
            <MediaElement x:Name="movieLoader" HorizontalAlignment="Left" Height="128" 
                          VerticalAlignment="Top" Width="236" Source="../video/empty.mp4"/>
        </Grid>
    </Grid>
</Border>