Xamarin forms Image button issue

Question

platform app using Xamarin PCL project. I have created a button with image and no text.

 <Button Image="{DynamicResource ProfileImage}" Grid.Row="0" Grid.Column="2" BackgroundColor="Transparent" x:Name="dashboard" StyleId="dashboard" HorizontalOptions="Center" Clicked="TabClicked"></Button>

I am facing some UI Issue. In windows 10,it looks like -

In android, it looks like-

Is there any way to remove this outline border from android.

Answer 1

I removed the border/shadow from buttons in Android by setting its elevation to 0px with the help of this link

class MyButtonRenderer : ButtonRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
        {
            base.OnElementChanged(e);
            try
            {
                if (Control != null)
                {
                    Control.Elevation = 0;
                }
            }
            catch(Exception ex){}
        }
    }

Answer 2

Have you tried setting BorderColor="Transparent" on your button XAML?

Answer 3

To remove background of an image completely, you can use Image view type instead of Button.

You can arrange it's source:

<StackLayout Padding="15,5,0,5">
      <Image x:Name="MyImage"  Source="myImage.png"/>
</StackLayout>

And you can add a click method it easily:

var gestureRecognizerForImage = new TapGestureRecognizer();
gestureRecognizerForImage.Tapped += MyImageClicked;
MyImage.GestureRecognizers.Add(gestureRecognizerForImage);

 public async void GetMediaClicked(object sender, EventArgs e)
 {
     await DisplayAlert("Clicked", "My Image is Clicked", "OK");
 }

Answer 4

You can set BorderWidth = 0. It should remove the border.