question

6666666 avatar image
0 Votes"
6666666 asked 6666666 action

How to clip a rectangle in xamarin.forms?

there is a Clip in Rectangle in xamarin.forms.shapes.

but it can not be clipped by ellipse or path

how to clip it?

dotnet-xamarin
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

LeonLu-MSFT avatar image
0 Votes"
LeonLu-MSFT answered 6666666 commented

I make a demo to achieve your needs(A little ugly), here is running screenshot.

88252-ssss333.gif

First, you need set the fresh-light image 's background is Transparent like this png(right click following image, save it).

88232-flashsymbol.png

Then I use following code, add red line in the background of fresh-light image.

<Frame IsClippedToBounds="True" WidthRequest="200" HorizontalOptions="Center" HeightRequest="200" Padding="0" CornerRadius="100">
            <Grid>
                <Rectangle 
                    x:Name="myrec"
                    Fill="Red"
                    HorizontalOptions="Start"
                    VerticalOptions="Start"
                    HeightRequest="10"
                    WidthRequest="500"/>

                <Image Source="flashsymbol.png" Aspect="Fill"  WidthRequest="200" HeightRequest="200"></Image>

               
            </Grid>
        </Frame>


Then add Animation to Rectangle in the background.

var animation = new Animation(v => myrec.TranslationY = v, 0, 200);

            animation.Commit(this, "SimpleAnimation", 16, 1000, Easing.Linear, (v, c) => myrec.TranslationY = 0, () => true);




ssss333.gif (107.3 KiB)
flashsymbol.png (31.2 KiB)
· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

I can do this use image too but I do not want to use image.


but thank you all the same.

0 Votes 0 ·
LeonLu-MSFT avatar image
0 Votes"
LeonLu-MSFT answered LeonLu-MSFT rolled back

Hello,​

Welcome to our Microsoft Q&A platform!

Based on my research, If you execute the clip, you have four choose LineGeometry, PathGeometry, RectangleGeometry and EllipseGeometry.

You draw a Rectangle , then you want to clip it to Ellipse, Path` or Line, why do not draw a Ellipse, Path` or Line directly? This clip operation is meaningless.

Based on my view, this is by design,

Best Regards,

Leon Lu



If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.


· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Thank you @LeonLu-MSFT

![87813-image.png][1]


The area in the electric area I want to make it animation . so I want to make it a rectangle then move below the shape.
but if the rectangle width is too big it will appear in the edge. so I want to clip it by the ellipse.
[1]: /answers/storage/attachments/87813-image.png

0 Votes 0 ·
image.png (17.2 KiB)