How to make Round Corners for CaptureElement in UWP?

Question

I need to have a round corners for CaptureElement in UWP. I tried adding border for this element with corner radius. it seems a border is creating but the CaptureElement is not getting cropped at the corners. Below is the code I am working on.

     <StackPanel RelativePanel.Below="Seperator2" RelativePanel.AlignHorizontalCenterWithPanel="True">
                <Border BorderThickness="5" BorderBrush="#E4F7FF" CornerRadius="10">
                <controls:DropShadowPanel Name="PreviewShadow" BlurRadius="8.0" ShadowOpacity="0.1" OffsetX="-10" OffsetY="10" Color="Black">
                    <CaptureElement Name="previewcontrol" HorizontalAlignment="Center" Height="260" VerticalAlignment="Center" Width="345" Margin="0,0,0,0" />
                </controls:DropShadowPanel>
                </Border> </StackPanel>

Clip doesnt work in uwp. clip only has rectangle geometry with rect(); it doesnt support radius x or radius y. — Ajai, Jun 21 '17 at 11:36
Can you use that line https://stackoverflow.com/a/22800312/6116637 — lindexi, Jun 21 '17 at 11:43
year, the win2d can do well and you can search `win2d` in store and download to use it — lindexi, Jun 21 '17 at 11:50
A bit more light on my case is appreciated. help me do it with win2d if possible — Ajai, Jun 21 '17 at 11:56

score 0 · Answer 1 · answered Jun 21 '17 at 19:19

0

A quick work-around is to just fake it by giving the illusion that the element is being clipped by utilizing the natural zindex of the DOM and essentially floating your Border over the top of the element.

Example image;

Quick PoC XAML;

<Grid Background="LightGray">

   <Grid Width="200" Height="200">
      <CaptureElement/>
       <Border BorderBrush="Yellow" BorderThickness="10" 
               CornerRadius="20" Margin="-10"/>
   </Grid>

</Grid>

Hope this helps, cheers.

answered Jun 21 '17 at 19:19

Chris W.

22,835
3
60
94

Thanks. That was a great workaround. I can't use this trick as I am having a drop shadow for the capture element. So a border like this will ruin that. Any other trick? – Ajai Jun 22 '17 at 06:28
@Anonymous what if you add `Background="Transparent"` to the `Border` and apply your drop shadow to the border instead? Is that more of the result you're looking for? – Chris W. Jun 22 '17 at 14:39
Tried. Setting background="transparent" wont help. But setting the border to the background colour will fix the issue. But still not a proper fix. I have a Custom background image. So I can't give a fixed colour to it properly. Anyway Thanks for your suggestion. I hope there are more ways .. – Ajai Jun 27 '17 at 11:26

How to make Round Corners for CaptureElement in UWP?

1 Answers1