last day (16 days later) » 

1:24 PM
0
A: Gradient Background in Frame XAML Element

Lucas Zhang - MSFTYou can implement it by using Custom Renderer in share Project using Xamarin.Forms; namespace xxx { public class GradientColorFrame:Frame { public Color StartColor { get; set; } public Color EndColor { get; set; } } } in iOS using xxx; using xxx.iOS; using CoreA...

 
This works, however the CornerRadius is not working after implementing this. Is there a way of making sure all the properties for Frame work?
@FreakyAli unfortunately, this did not work either. CornerRadius="10" Margin="20, 180, 20, 0" IsClippedToBounds="True" Padding="20"
@FreakyAli thanks for your help, but this still does not work, no matter what I do. I have tried multiple ways of getting it to work with no luck.
 
Which platform did you test?
 
@LucasZhang-MSFT - currently testing on Android.
I have also just discovered that anything nested within this custom renderer also has the gradient applied to the children. :-(
 
Did you test the solution from github.com/tbaggett/xfgloss?
 
Yes I did and it does not work as expected. It focuses on Cells rather than components such as frame.
 
1:24 PM
Check my update answer .
 
Hi @LucasZhang-MSFT this worked perfectly. Do you perhaps know how children controls can be implemented within <local:GradientColorFrame ...//...</local:GradientColorFrame> and not have the gradient applied to them as well?
 
You can create different custom renderer in specific platforms
 
Hi @LucasZhang-MSFT
Thank you for your help, you made this journey so much easier.
 
Happy coding:)
 
Sorry, I am a newbie to chat rooms.
I understand the development of custom renderers, but in the example below, everything within the StackLayout is also applied the custom renderer gradient.

<local:GradientColorFrame StartColor="White" EndColor="Transparent" Margin="20, 180, 20, 20" HeightRequest="420" WidthRequest="350" VerticalOptions="Start" Opacity="0.8">
<StackLayout Orientation="Horizontal" HorizontalOptions="Center">
<Image Source="Facebook.png" HeightRequest="50" WidthRequest="50" />
<Image Source="Google.png" HeightRequest="56" WidthRequest="56" />
 

  last day (16 days later) »