Xamarin | Custom control

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)
        {

        }
    }
}