Xamarin | Custom control - xamarin

Question

I'm pretty new in Xamarin development.
I spent about a week building my custom Button control.
But unfortually I can do something good;
This is have look like:
I need a gradient backgound (I already have a simple button with a gradient background, so I know (more or less) how to achieve this)
I tried to use a frame - but cannot get a good ellipse
I trried to call "NeedToDisplay" on iOS custom renderer, but the background is not changed to the new gradient
I dont know how to add the circle inside the ellipse and how to set to circle image (And I need be change the color of the image - I have PNG icons)
I'd be very grateful if you could help me to build this control.

Answer 1

Instead of adding a custom button , you can achieve the same by building a button like component in xamarin.forms.
You can build it using stack layout and image and label.
<StackLayout>
<Frame CornerRadius="30" BackgroundColor="Coral" HorizontalOptions="CenterAndExpand" VerticalOptions="End" Margin="0,0,0,20" HeightRequest="50" WidthRequest="300" OutlineColor="Red" HasShadow="True" Padding="8" >
<Grid VerticalOptions="FillAndExpand" RowSpacing="0" BackgroundColor="Coral">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" BackgroundColor="Transparent">
<local:GradientColor StartColor="#97ef97" EndColor="#3e663e">
<StackLayout Orientation="Horizontal" Padding="0" BackgroundColor="Transparent">
<Image Source="Sound.png" Margin="5,0,0,0" WidthRequest="40" HeightRequest="40" HorizontalOptions="Center" VerticalOptions="Center"></Image>
<Label Text="Button" FontSize="20" TextColor="Black" HorizontalOptions="End"
VerticalOptions="CenterAndExpand" />
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="OnButtonClicked"/>
</Frame.GestureRecognizers>
</StackLayout>
</local:GradientColor>
</Grid>
</Grid>
</Frame>
</StackLayout>
and for the gradient color you can use custom renderer
Custom Renderer within core
public class GradientColor : StackLayout
{
public Color StartColor
{
get;
set;
}
public Color EndColor
{
get;
set;
}
}
Custom Renderer in Android where you can paint the gradient color and give it a rounded corner
public class GradientColorRenderer : VisualElementRenderer<StackLayout>
{
private Color StartColor
{
get;
set;
}
private Color EndColor
{
get;
set;
}
protected override void DispatchDraw(global::Android.Graphics.Canvas canvas)
{
#region for Vertical Gradient
//var gradient = new Android.Graphics.LinearGradient(0, 0, 0, Height,
#endregion
#region for Horizontal Gradient
var gradient = new LinearGradient(0, 0, Width, 0,
#endregion
this.StartColor.ToAndroid(),
this.EndColor.ToAndroid(),
Android.Graphics.Shader.TileMode.Mirror);
var paint = new Android.Graphics.Paint()
{
Dither = true,
};
paint.SetShader(gradient);
RectF rect = new RectF(0, 0, 450,68);
canvas.DrawRoundRect(rect, 30, 30, paint);
base.DispatchDraw(canvas);
}
protected override void OnElementChanged(ElementChangedEventArgs<StackLayout> e)
{
base.OnElementChanged(e);
if (e.OldElement != null || Element == null)
{
return;
}
try
{
var frame = e.NewElement as GradientColor;
this.StartColor = frame.StartColor;
this.EndColor = frame.EndColor;
}
catch (Exception ex)
{
}
}
}