Forum Xamarin.Forms

Announcement:

The Xamarin Forums have officially moved to the new Microsoft Q&A experience. Microsoft Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

To create new threads and ask questions head over to Microsoft Q&A for .NET and get involved today.

Gradient overlay on Image with rounded corners

Steve1000Steve1000 Member ✭✭✭

Hi all,

i'm using FFImageLoading:CachedImage with the Rounded Transformation to get rounded corners - i want to add a gradient to the bottom of the image - any ideas how to achieve this?

I've tried this so far using a Frame and Margin to try and get the rounded corners and the right positioning - however - this doesn't work on different device sizes.....

`

    <ffimageloading:CachedImage.Transformations>
        <fftransformations:RoundedTransformation Radius="20" CropHeightRatio="1.5" CropWidthRatio="1" />
    </ffimageloading:CachedImage.Transformations>
</ffimageloading:CachedImage>



<Frame HeightRequest="150" Margin="0,-202,0,0" HasShadow="False" CornerRadius="20">
    <Frame.Background>
        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
            <GradientStop Color="#00ffffff" Offset="0.1"/>
            <GradientStop Color="#66040404" Offset="0.45"/>
            <GradientStop Color="#000000" Offset="0.9"/>

        </LinearGradientBrush>
    </Frame.Background>

    <StackLayout>
        <Label Text = "Hello" />
    </StackLayout>


</Frame>             `  

Looking to achieve something as follows:

Best Answer

  • Steve1000Steve1000 Member ✭✭✭
    Accepted Answer

    Hi managed to achieve this using the Pancake Views nuget package.

    Code below incase anyone else is looking to do the same thing

    `

         <yummy:PancakeView  
                             CornerRadius="18"
                             WidthRequest="100"
    
                             >
                        <Grid BackgroundColor="#000000">
    
                            <Image Source="photo.png"
                                   VerticalOptions="FillAndExpand"
                                   HorizontalOptions="FillAndExpand"
                                   HeightRequest="525"                
                                   Aspect="AspectFill"
                               />
    
                            <yummy:PancakeView Opacity="0.7" BackgroundGradientStartPoint="0,0" BackgroundGradientEndPoint="0,1" >
                                <yummy:PancakeView.BackgroundGradientStops>
                                    <yummy:GradientStopCollection>
                                        <yummy:GradientStop Color="#00ffffff" Offset="0.1" />
                                        <yummy:GradientStop Color="#00ffffff" Offset="0.70" />
                                        <yummy:GradientStop Color="#66040404" Offset="0.80" />
                                        <yummy:GradientStop Color="#000000" Offset="0.95" />
                                    </yummy:GradientStopCollection>
                                </yummy:PancakeView.BackgroundGradientStops>
                            </yummy:PancakeView>
    
                            <StackLayout HorizontalOptions="Center" VerticalOptions="End" Margin="0,0,0,40" >
                                <Label Text="Text1" />
                                <Label Text="Text2" />
                            </StackLayout>
    
                        </Grid>
           </yummy:PancakeView>
    
        </StackLayout>
    

    `

Answers

  • Steve1000Steve1000 Member ✭✭✭
    Accepted Answer

    Hi managed to achieve this using the Pancake Views nuget package.

    Code below incase anyone else is looking to do the same thing

    `

         <yummy:PancakeView  
                             CornerRadius="18"
                             WidthRequest="100"
    
                             >
                        <Grid BackgroundColor="#000000">
    
                            <Image Source="photo.png"
                                   VerticalOptions="FillAndExpand"
                                   HorizontalOptions="FillAndExpand"
                                   HeightRequest="525"                
                                   Aspect="AspectFill"
                               />
    
                            <yummy:PancakeView Opacity="0.7" BackgroundGradientStartPoint="0,0" BackgroundGradientEndPoint="0,1" >
                                <yummy:PancakeView.BackgroundGradientStops>
                                    <yummy:GradientStopCollection>
                                        <yummy:GradientStop Color="#00ffffff" Offset="0.1" />
                                        <yummy:GradientStop Color="#00ffffff" Offset="0.70" />
                                        <yummy:GradientStop Color="#66040404" Offset="0.80" />
                                        <yummy:GradientStop Color="#000000" Offset="0.95" />
                                    </yummy:GradientStopCollection>
                                </yummy:PancakeView.BackgroundGradientStops>
                            </yummy:PancakeView>
    
                            <StackLayout HorizontalOptions="Center" VerticalOptions="End" Margin="0,0,0,40" >
                                <Label Text="Text1" />
                                <Label Text="Text2" />
                            </StackLayout>
    
                        </Grid>
           </yummy:PancakeView>
    
        </StackLayout>
    

    `

  • jezhjezh Member, Xamarin Team Xamurai

    Congrats, could you please mark your reply as answered so that others who have similar threads will get help from here?

    Thanks in advance. :)

Sign In or Register to comment.