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 KFactory · Accepted Answer · 2018-05-14T13:13:18

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:

Xamarin Forms FFImageLoading Corner Transformations

1 Answers