Xamarin Forms FFImageLoading Corner Transformations

Question

I have a UI design like at following image. I'm using FFImageLoading plugin and Corner Transformations but I could not make oval shape at the bottom of image. How can I do this ?

I'm trying following code but it's not working.

<ffimg:CachedImage HeightRequest="225" 
                   Aspect="AspectFill" 
                   Source="https://www.ashmolean.org/sites/default/files/styles/listing_landscape_textoverlay_left_bottom_image/public/ashmolean/images/media/cafe1.jpg?itok=RRq3Tds5">
                        <ffimg:CachedImage.Transformations>
                            <ffimgtr:CornersTransformation  
                                     BottomLeftCornerSize="40" 
                                     BottomRightCornerSize="40" />
                        </ffimg:CachedImage.Transformations>
                    </ffimg:CachedImage>

KFactory · Answer 1 · 2018-05-16T13:23:21.273

I'm a beginner with FFImageLoading library, but according to the official documentation (you can find here: enter link description here), I'm not sure you can achieve your effect... In my mind, the best options you have:

Use a transformation that looks like yours but will not really be the same (I presume you already did it). For instance, You can use a CornersTransformation but you'll still have a straight shape segment on the bottom center of your pic...
or the best solution in my mind: use a normal squared image (your header image) and just use another one as a top layer (png with transparency), that will simulate the "white" bottom oval shape (see image sample bellow).

The gray part should be white in your case !

XAML should be something like that:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinitions Height="255" />
        <RowDefinitions Height="*" />
    </Grid.RowDefinitions>

    <!-- your header on row 0 -->
    <Grid Grid.Row="0">

        <!-- HEADER Squared background image -->
        <ffimg:CachedImage HeightRequest="225" Aspect="AspectFill" Source="https://www.ashmolean..." />

        <!-- Top layer OVER image (the one you have to generate as PNG for the transparency) -->
        <ffimg:CachedImage 
            HeightRequest="40
            Aspect="AspectFill" 
            VerticalOrientation="End"
            Source="myOvalShape.png"
            />

        <!-- your list of header buttons inside this panel -->
        <StackLayout VerticalOrientation="Start" ... />

    </Grid>

...

Hope it can give you some ideas...

Edit: steps to reproduce top layer MASK image:

Thank you for answer Julien! I think I can't do this with transformations. But I don't understanding how can I do this with a transparency shape. My restaurant image is a squared image. Can you create a sample code ? Also; my background is not only any color. I'm using pattern image for background with RelativeLayout. — Oğuz KURTCUOĞLU, May 15 '18 at 21:01
@OğuzKURTCUOĞLU, I updated my answer. Check the XAML code for comments and check images to understand steps to make the top MASK image that will be placed over your header SQUARED image. The trick for you is to generate the TOP MASK Image (PNG) but it's not complicated in paint / photoshop... Tell me if it's clear — KFactory, May 16 '18 at 13:25

Xamarin Forms FFImageLoading Corner Transformations

1 Answers1