Video with rounded corners

How-to Discussions
1

Hey guys,

how you can help me out here. I am currently trying to put a video in an element with round corners. But the video is ignoring the cornerradius of the parent and stretches to the full edge, is there a way to avoid this?

I tried it like this:

   <Rectangle Row="0" CornerRadius="20, 20, 0, 0" Width="100%"  Dock="Top">
      <Video Url="VIDEOURL" AutoPlay="true" IsLooping="true" StretchMode="UniformToFill" />
   </Rectangle>

Also searched for a CornerRadius option on the Video element or something like VideoFill (similar to ImageFill). Any ideas?

2

No ideas :confused:?

3

I was now able to solve this by using a Mask:

<Panel Layer="Overlay" Opacity="0">
  <Grid Rows="4*, 4*, 2*" Margin="25, 70, 25, 40">
    <Mask Mode="Alpha" File="../Assets/Images/mask.png" />
    <Rectangle Layer="Background" CornerRadius="20" Color="#FFFFFF" />

    <Rectangle Row="0" CornerRadius="20, 20, 0, 0" Width="100%" Dock="Top">
      <Video Url="VIDEOURL" AutoPlay="true" IsLooping="true" StretchMode="UniformToFill" />
    </Rectangle>

    <StackPanel Row="1" Padding="20">
      <Text Value="TEXT" TextAlignment="Center" FontSize="18" Dock="Top" TextWrapping="Wrap" />
      <Text Value="TEXT" TextAlignment="Center" FontSize="14" Dock="Top" TextWrapping="Wrap" />
    </StackPanel>
    <MyButton Row="2" Text="Close" Alignment="VerticalCenter" Clicked="{overlayClose}" Dock="Bottom" Margin="20" />
  </Grid>

  <Rectangle ux:Name="background" Color="#000000" Opacity="0.7"/>
</Panel>
2 Likes