How to remove the shadow of a button on Xamarin Forms

Question

is it possible? I would like to remove the shadow of the buttons on Xamarin Forms.

Thanks

Answer 1

For delete shadow on button Android you just need create a renderer in project Droid and set BackroundColor with transparent or other color.

For a project using PCL :

[assembly: ExportRenderer(typeof(Button),typeof(FlatButtonRenderer))]
namespace Project.Droid
    {
        public class FlatButtonRenderer : ButtonRenderer
        {
            protected override void OnDraw(Android.Graphics.Canvas canvas)
            {
                base.OnDraw(canvas);
            }
        }
    }

In XAML :

<Button BackgroundColor="Transparent" Text="ClickMe"/>

Answer 2

Explaining with more detail.

using Android.App;
using Android.Content.PM;
using Android.OS;
using Xamarin.Forms.Platform.Android;
using ProjectName.Droid;
using Xamarin.Forms;

[assembly: ExportRenderer(typeof(Xamarin.Forms.Button), typeof(FlatButtonRenderer))]
namespace ProjectName.Droid
{    
    public class FlatButtonRenderer : ButtonRenderer
    {
        protected override void OnDraw(Android.Graphics.Canvas canvas)
        {
            base.OnDraw(canvas);
        }
    }
}

Answer 3

@Tonatio in your renderer instead of using

[assembly: ExportRenderer(typeof(Xamarin.Forms.Button), typeof(FlatButtonRenderer))]

use this

[assembly: ExportRenderer(typeof(YourCustomButton), typeof(FlatButtonRenderer))]

you will have to make a CustomButton control that inherits from Xamarin.Forms.Button and then use that custom button in your xaml instead of regular button. that should do the thing

     //Add references to your custom control
        xmlns:controls="clr-namespace:YourNameSpace.Controls"
     //Use control
     <Grid>
           <controls:YourCustomButton x:Name="_customButton"/>
     </Grid>

Feel free to drop by if you need some more help.

Answer 4

There's a simple hack around this. Simply wrap the button in a Frame element, with HasShadow set to False

<Frame HasShadow="False" Padding="0" Margin="0">
    <Button Padding="15"
            Text="Log in"
            TextColor="Blue"
            FontSize="17" />
</Frame>

This will remove the button's shadow 😉