Image Button

ChrisChanChrisChan MYMember

How to build image button in Xamarin form ? thanks

Posts

  • AlessandroCaliaroAlessandroCaliaro ITMember ✭✭✭✭✭

    Button control should have an Image or Icon property... I don't remember the name.

    Otherwise you could use an Image control with TapGestureRecognizer

  • NMackayNMackay GBInsider, University mod

    @ChrisChan

    Here's a wee simple image button, use it in production code quite often.

    using System.Threading.Tasks;
    using System.Windows.Input;
    using Xamarin.Forms;
    
    namespace Foobar.CustomRenderers
    {
        public class ImageButton : Image
        {
            public static readonly BindableProperty CommandProperty =
                BindableProperty.Create("Command", typeof(ICommand), typeof(ImageButton), null);
    
            public static readonly BindableProperty CommandParameterProperty =
                BindableProperty.Create("CommandParameter", typeof(object), typeof(ImageButton), null);
    
            public ImageButton()
            {
                Initialize();
            }
    
            public ICommand Command
            {
                get { return (ICommand)GetValue(CommandProperty); }
                set { SetValue(CommandProperty, value); }
            }
    
            public object CommandParameter
            {
                get { return GetValue(CommandParameterProperty); }
                set { SetValue(CommandParameterProperty, value); }
            }
    
            private ICommand TransitionCommand
            {
                get
                {
                    return new Command(async () =>
                    {
                        AnchorX = 0.48;
                        AnchorY = 0.48;
                        await this.ScaleTo(0.8, 50, Easing.Linear);
                        await Task.Delay(100);
                        await this.ScaleTo(1, 50, Easing.Linear);
                        if (Command != null)
                        {
                            Command.Execute(CommandParameter);
                        }
                    });
                }
            }
    
            public void Initialize()
            {
                GestureRecognizers.Add(new TapGestureRecognizer
                {
                    Command = TransitionCommand
                });
            }
        }
    }
    
    <local:ImageButton Grid.Column="0"
                                       BackgroundColor="Transparent"
                                       Command="{Binding CallCommand}"
                                       CommandParameter="{Binding SelectedContact.Mobile}"
                                       Source="IconCall.png"
                                       VerticalOptions="Center"
                                       HorizontalOptions="Center" />
    
  • ShantimohanElchuriShantimohanElchuri USMember ✭✭✭✭✭

    @NMackay Does your code for TapGestureRecognizer for Image work in UWP and / or Windows Phone?

    As I see the TapGestureRecognizer event is not fired in UWP on device but it works in the emulator. That is strange but true.

  • JohnHardmanJohnHardman GBUniversity mod

    The downside of using an Image as the basis of an ImageButton is that it doesn't support keyboard usage and accessibility.

    When working on a device with a physical keyboard, the user will expect some visual feedback about where the focus is at any time (particularly true of users of Windows). Users with particular accessibility requirements may require the ability to put focus on individual controls for the specialist software they use to support their needs. I have physical keyboards for use with Windows, Android and iOS devices for testing my apps for such requirements. I have reported XF bugs re. support for this on Windows, but it's largely working (the tab order is a bit hard to predict in places).

    For an ImageButton, I would recommend basing it on a Button, whether that be done using a ContentButton custom control or a specific ImageButton custom control, the latter requiring renderers for each platform. WinPhone 8.0 Silverlight is a pain to do this on, but other platforms are not so bad.

    Regarding TapGestureRecognizer on UWP - I have used this in places, although am replacing it as I refactor for the above reasons. I haven't had problems with TapGestureRecognizer on UWP, testing on physical desktop, notebook and phone devices.

  • NMackayNMackay GBInsider, University mod

    @ShantimohanElchuri

    I haven't tested with UWP. I'm still waiting for the business to make a decision on UWP.

    @JohnHardman

    I agree with your observations,image button is a workaround until the button is improved. I haven't tested the button changes in 2.2 as they bug keeps getting reopened internally due to new issues.

  • FebinDonzManGroveFebinDonzManGrove USMember ✭✭
    edited May 2016

    the other workaround is that

    • place image control

    • place a button (back gound color tranperent ) above the image control ( same x,y and same height, width )

    so it will exactly act like an image button.

    note : may not be a good methord. just a workaround :smile:

  • ShantimohanElchuriShantimohanElchuri USMember ✭✭✭✭✭

    When you can attach a TapGestureRecognizer to the GestureRecognizer of an Image view, why all the gimmicks of overlaying a Button or so?

  • JohnHardmanJohnHardman GBUniversity mod

    @ShantimohanElchuri - To support keyboard use and accessibility

  • FebinDonzManGroveFebinDonzManGrove USMember ✭✭

    @ShantimohanElchuri . i am not sure whether TapGestureRecognizer give a button click effect or not. surely it gives the click event. if button tap effect requires, one can go for overlaying approach i think

  • ShantimohanElchuriShantimohanElchuri USMember ✭✭✭✭✭

    @FebinDonzMM Ah! I forgot about ButtonUp etc events as I have not used them for long time. Yes, TapGesture deals with them differently.

  • JensBuschJensBusch USMember ✭✭

    Is there a solution for the standard button control and the image property yet?

  • DanielGPDanielGP COMember ✭✭

    @NMackay Thank you so much! Great!

  • AnasBabgiAnasBabgi USMember ✭✭

    @NMackay @DanielGP Where can i put my event handler ? , it's work but there's no clicked event !

  • NMackayNMackay GBInsider, University mod

    @AnasBabgi

    There's a version on my github site that has an ItemTapped event handler, that will do the trick.

    https://github.com/mackayn/CrudSample/blob/master/CrudSample/CustomControls/ImageButton.cs

  • XigmondXigmond USMember ✭✭✭

    I created a custom control called XImgBtn

    An Image View with Tap Gesture Recognizer (Different image sources for Up and Pressed Conditions) and Tap/Click Animation for Xamarin Forms

    you can also pass the desired variables to the click handler using "XibId" (to pass an Int) & "StrParam" (to pass a string) when you have multiple XimgBtns.

    Nuget: undefined

    Source: undefined

Sign In or Register to comment.