Xamarin.forms: ImageButton changes image size

[dsancho]

Description

I use binding for the image and the modelview can change this image. When it changes, the image gets smaller. Both images have the same size.

Steps to Reproduce

1. In XAML
   <ImageButton WidthRequest="40" HeightRequest="40" BackgroundColor="BlueViolet" Source="{Binding FavouriteImage}" Command="{Binding ToogleFavouriteCmd}"></ImageButton>
   In ModelView
   public string FavouriteImage => _IsFavourite ? "heart.png" : "heart_disabled.png";
   private bool _IsFavourite;
   public Command ToogleFavouriteCmd => new Command(() =>
   {
   _IsFavourite = !_IsFavourite;
   OnPropertyChanged(nameof(FavouriteImage));
   });

2. Press the image button

3. See the result

Expected Behavior

Image mantains the size

Actual Behavior

Image gets smaller

Basic Information

• Version with issue: Xamarin Forms 3.4.0
• Last known good version: ?
• IDE: Visual Studio 2017 Community
• Platform Target Frameworks:
  
  
  
  • Android: 8.1
  
  
• Android Support Library Version: 27.0.2.1
• Nuget Packages:
• Affected Devices: Emulator android 6/ Oneplus 3 Oreo 8,0

Screenshots

Reproduction Link

[rmarinho]

Im not able to reproduce that , can you please upload a some sample showing the issue.

Thanks.

[dsancho]

ImageButtonBug.zip

Here a very simple solution. Click on the button and see what happens.

[rmarinho]

seems we need the StackLayout to reproduce it .

[rmarinho]

This seems to work fine:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:ImageButtonBug"
             x:Class="ImageButtonBug.MainPage">

      <ImageButton WidthRequest="40" HeightRequest="40" BackgroundColor="BlueViolet" VerticalOptions="Start" HorizontalOptions=" Start"
                             Source="{Binding FavouriteImage}"
                             Command="{Binding ToogleFavouriteCmd}">
</ContentPage>

I also noticed that if I do long press and release I see the small size but then ti goes to normal size. 

[stesvis]

+1 for me.
I have an Image buttons and I am trying to implement the clicked effect.
When someone clicks on the button I change the Scale property, and also the Source property to show a highlighted image:

<ImageButton Source="ic_tour.png"
            BackgroundColor="Transparent"
            WidthRequest="{StaticResource dashIconSize}"
            HeightRequest="{StaticResource dashIconSize}"
            >
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="CommonStates">
            <VisualState x:Name="Normal">
                <VisualState.Setters>
                    <Setter Property="Scale" Value="1"/>
                    <Setter Property="Source" Value="ic_tour.png"/>
                </VisualState.Setters>
            </VisualState>

            <VisualState x:Name="Pressed">
                <VisualState.Setters>
                    <Setter Property="Scale" Value="0.8"/>
                    <Setter Property="Source" Value="ic_tour_selected.png"/>
                </VisualState.Setters>
            </VisualState>

        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</ImageButton>

But when I click the ImageButton, this happens, before click:

And after click:

[samosim]

If you remove BackgroundColor="Transparent then everything works fine. The problem is that you will get the default background color.

[aleksandrsmyk]

I have the same issue related to changed ImageSize inside ImageButton

[jeroen-corteville]

I have the same issue. Happening on Xamarin Forms 3.5.0.1219452 on Android.

[stepkillah]

As a workaround, Background color could be set to transparent on the native element through effect or renderer

[jvhgamer]

BackgroundColor is the root cause. I have the same issue happening on Xamarin Forms 3.6.0.264807 on Android.

As a workaround, Background color could be set to transparent on the native element through effect or renderer

@stepkillah Using a custom imgBtn renderer, setting as such - e.NewElement.BackgroundColor = Color.Transparent results in the same issue. How to go about this properly with custom renderer? Customize the XamForms renderer to use a custom VisualElement renderer?

[stepkillah]

@jvhgamer I used effect, not renderer, theoretically it should work in both, but it seems that the effect goes on top of the renderer, If you say it doesn't work in the renderer - try to use platform effect, in ‘onattach‘ method. At least it helped me and imagebutton stoped 'jumping'

[stepkillah]

@jvhgamer I meant platform effects, https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/effects/introduction

private View View => Control ?? Container;
if (View is AppCompatImageButton imageButton)
            {
                imageButton.SetBackgroundColor(Color.Transparent.ToAndroid());
}

[jvhgamer]

@stepkillah Understood. Ended up solving by removing background color/padding assignments from the imgBtns, placing the imgBtn's inside of StackLayout's, and implementing the background color and padding properties there.

[1HPorange]

If you can live with it: A nearly transparent ImageButton with BackgroundColor="#01ffffff" doesn't seem to have the same size issues as a fully transparent one.

[jointothedarkside]

Still a problem but indeed I fixed it removing the backgroundcolor tag and creating platform specific effects following the example set for customised colors in https://developer.xamarin.com/samples/xamarin-forms/Effects/FocusEffect/

[emiliobongiorno]

I'm using the ImageButton inside a StackLayout, and changing only the "Source" when it is clicked, but still having this problem. Even not using BackgroundColor and Padding, the behaviour is weird. The image is resized smaller and then resized to the normal size in miliseconds (visible for the user), and sometimes it keeps in the small size.

[dberroa]

I am also having this issue when the source is bound to a property and it changes. I have it toggle when the button is clicked and it shrinks. Only on Android. Background color is set to transparent on the image button.

[kylehwang]

As a workaround:

I created a CustomImageButton : ImageButton with the following implementation(simplified) in the renderer

        protected override void OnElementChanged(ElementChangedEventArgs<ImageButton> e)
        {
            base.OnElementChanged(e);

            if (!(e.NewElement is ImageButton))
                return;

            this.SetBackgroundColor(Color.Transparent.ToAndroid()); //This is the line to set the transparent background without issues
        }

[michaelonz]

When is this going to be resolved? - I cant change the transparent background and the buttons shrink on the latest version still - this is still an issue.

[titoleru]

I've been trying to fix this for almost 2 days. Anybody found a workaround?

[fobosok]

the problem really exists, Anybody found a workaround?

[michaelonz]

Hi @titoleru / @fobosok ,
I never found a work around that was acceptable - in the end I used the syncfusion button - that works fine and is an easy replacement to the imagebutton.

[fobosok]

Hi @titoleru / @fobosok ,
I never found a work around that was acceptable - in the end I used the syncfusion button - that works fine and is an easy replacement to the imagebutton.

i can't pay now $ 1000 for button

[michaelonz]

@fobosok ,
Search up "syncfusion community edition xamarin" - they have a free offering if your companys turn over is less than US$1m (and some other terms)

[titoleru]

Many thanks @michaelonz, it sounds crazy to me creating a free account in a site just for a button, I think for now I will just edit manually my images to have a background color I need.

Still let's see if somebody comes up with an open-source solution...

[mdonat]

Here is an open-source solution:
https://github.com/AndreiMisiukevich/TouchEffect
Just create an ContentView with Image inside, and add TouchEffect. Easy to use like ImageView, but without Bug and with nice animation features.

[anadeau1]

It is pretty ugly, but if you put a normal Image with a transparent button on top of the image, it will solve the issue.

[FIELDPOINT]

I can confirm this scenario. The bug occurs when you set the BackgroundColor, doesnt matter what color you set it to. Removing the BackgroundColor fixes the problem but you are left with an ugly grey background.

I wonder why this did not get fixed in Xamarin Forms 2.3. The bug is easily reproducible and is probably easy to fix compared to other existing bugs.

[titoleru]

Thanks a lot @mdonat and @anadeau1 . Both of your solutions work perfectly. Probably adding a normal Image inside a transparent button seems like the more straight forward workaround.

Let's just hope this bug gets fixed in the next Xamarin release...

[alberk8]

It seems to be a scaling problem. If I set the WidthRequest= 70 and HeightRequest =70, it seems to work any smaller then it will randomly re-scale to tiny image.

[FIELDPOINT]

Any update on this? Does anyone know in which version of XF, this fix will be included? Thanks.

[universaldata-eu]

i created my own ImageButton way before it was implemented in Xamarin.Forms.
now i hit the problem here when trying to set the heightrequest.
so i switched back to my image button and it is working.
so here ist my implementation, maybe it helps someone:

ImageButton.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<Image xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Common.Ui.ImageButton"
             BackgroundColor="Transparent">
</Image>

ImageButton.xaml.cs:

using System;
using System.Windows.Input;
using Xamarin.Forms;

namespace Common.Ui
{
    public partial class ImageButton
    {
        public static readonly BindableProperty ClickCommandProperty = BindableProperty.Create("ClickCommand", typeof(ICommand), typeof(ImageButton), null, propertyChanged: OnClickCommandChanged);
        public ICommand ClickCommand
        {
            get => (ICommand)GetValue(ClickCommandProperty);
            set => SetValue(ClickCommandProperty, value);
        }
        public static readonly BindableProperty ClickCommandParameterProperty = BindableProperty.Create("ClickCommandParameter", typeof(object), typeof(ImageButton), null, propertyChanged: OnClickCommandParameterChanged);

        public object ClickCommandParameter
        {
            get => GetValue(ClickCommandParameterProperty);
            set => SetValue(ClickCommandParameterProperty, value);
        }

        private static void OnClickCommandChanged(BindableObject bindable, object oldvalue, object newvalue)
        {
            ((ImageButton)bindable).ClickCommand = (ICommand)newvalue;
        }
        private static void OnClickCommandParameterChanged(BindableObject bindable, object oldvalue, object newvalue)
        {
            ((ImageButton)bindable).ClickCommandParameter = newvalue;
        }

        public ImageButton()
        {
            InitializeComponent();
            //Creating TapGestureRecognizers  
            TapGestureRecognizer tapImage = new TapGestureRecognizer();
            //Binding events  
            tapImage.Tapped += TapImage_Tapped;
            //Associating tap events to the image buttons  
            GestureRecognizers.Add(tapImage);
        }

        private void TapImage_Tapped(object sender, EventArgs e)
        {
            if(ClickCommand != null && ClickCommand.CanExecute(ClickCommandParameter ?? sender))
                ClickCommand.Execute(ClickCommandParameter ?? sender);
        }
    }
}

usage is like ImageButton from Forms, only the Command is 'ClickCommand'

[SirAeron]

I really got confused with this issue, but I think its actually a good workaround to just use Image instead of ImageButton just use GestureRecognizers TapGestureRecognizer for click event.

[kgouraw]

Yes, Image is working fine but ImageButton is expecting width and height. Why do we need to provide WidthRequest and HeightRequest with ImageButton in Xamarin Form 4.4?
It has only issue with iOS not with Android.

[iSukhi]

I am also facing the same issue. Is there any solution found for the same?

[asadullahqmr]

The solution is to set the Aspect property of the image to Fill.

Like this for example:

<ImageButton HeightRequest="28" WidthRequest="28" Clicked="Icon_Tapped" BackgroundColor="White" Aspect="Fill"/>

[kgouraw]

It should work like control, without specifying HeightRequest and WidthRequest, what it used to work till Xamarin 4.3.
Now do we need to provide height and width?
Similar issue - https://github.com/xamarin/Xamarin.Forms/issues/9119

[titoleru]

@SirAeron is right. The workaround that worked for me is using a normal Image with GestureRecognizer.

<Image BackgroundColor="Transparent" Source="image1"> <Image.GestureRecognizers> <TapGestureRecognizer Command="{Binding BookingCommand}" NumberOfTapsRequired="1"> </ImageGestureRecognizers> </Image>

[hinterlandsupplyco]

+1 seeing this too. Switching to an Image with a TapGestureRecognizer does the trick. But this is a silly fix for a silly bug.

Edit: Adding that I was seeing the image get larger randomly when switching out the Source with a trigger. But essentially the same behavior. Dropping BackgroundColor="Transparent" caused the issue to resolve. But that was not an option for us.

[PureWeen]

@hinterlandsupplyco what version of forms are you using?

[hinterlandsupplyco]

@PureWeen 4.4.0.991477

[PureWeen]

@hinterlandsupplyco can you try the latest stable?

[kgouraw]

It has been fixed in XF 4.4.0.991864.
If you are using other version, you can use simple button control with height and width request instead of tap gesture of image, this is another work around.

[hinterlandsupplyco]

Confirmed fixed in 4.5.0.530