Forum Cross Platform with Xamarin

Graying out Button Image

NamanVishnoiNamanVishnoi USMember ✭✭


I have a cross platform app (iOS and Android). I have a button which has an image, say
Button Text="ABC" Image="abc.jpg"
When I disable the button (i.e. IsEnabled=false), only the text gets grayed out. I want the image to be grayed out as well. How can I achieve that?



  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    "grayed out" and "disabled" are two different things - and different things to different OSes.
    I got tired of it and just made my own 'button' by combining a grid, 'image,label,buttonandboxview`.
    This way it always looks the same on every platform, every version of the OS etc. no themeing overriding, nothing getting in the way or causing unexpected results.

    Here's what I did.
    In the grid you place the image and label
    Then place a button on top of that with no image, no label and transparent color. You can use that as your command handler and so on like any other button. Bind the commands and so on to that button.
    Add a couple properties for disabled color and so on. That way you can define what color you want when disabled. Like actually have it be gray instead of a dim version of blue or whatever color a normal button would show.
    When your composite button is disabled, have the boxview show.
    When the composite button is enabled, have the 'boxview` hide.
    Set the boxview to a mostly transparant color, like 2% white or 2% gray.
    This does a couple things for you. 1-It dims EVERYTHING on the button including hte image, the back color etc.. 2-It blocks user tapping. You don't have to play games with disabling the actual button, unsetting handlers or anything else. The boxview will take the hit instead of the button.

  • JohnMillerJohnMiller USForum Administrator, Xamarin Team Xamurai


    I don't believe that is a feature of the Button right now. I'm not sure if it's considered a bug because it's not something that is done in the native platforms (as far as I know). You could file a feature request in the Evolution forum if it's for Xamarin.Forms and discuss it.

  • GausssGausss Member ✭✭

    Bind the button Opacity to something like 0.5 and also disable the button.

Sign In or Register to comment.