Button Image behaviour for iOS.

DonalFarrellDonalFarrell USMember, University
edited November 2014 in Xamarin.Forms

I have a strange issue with a Button image when rendered on IOS.

The image is a 32px x 32px PNG with no transparency. just 2 flat colours. However when it's rendered on the button in the iOS simulator (and physical device) it appears like this.

ios button image

It appears fine on both WP & Droid.

The button xaml is below...

 <Button x:Name="Scan"
              Text="Scan a QR Code"
              Image="QRCode.png"
              Command="{Binding ScanCode}"
              TextColor="{x:Static core:AppConstants.ButtonTextColor}"
              BackgroundColor="{x:Static core:AppConstants.ButtonBackgroundColor}">
      </Button>

I've tried to just remove the button image on iOS with the following xaml but both of these throw a null reference exception in the .g.cs file at the point it attempts to load the xaml.

      <Button x:Name="Scan"
              Text="Scan a QR Code"
              Command="{Binding ScanCode}"
              TextColor="{x:Static core:AppConstants.ButtonTextColor}"
              BackgroundColor="{x:Static core:AppConstants.ButtonBackgroundColor}">
        <Button.Image>
          <OnPlatform x:TypeArguments="FileImageSource">
            <OnPlatform.iOS></OnPlatform.iOS> //OMITTING THIS ALSO GIVES A NULL REF EXCEPTION
            <OnPlatform.Android>QRCode.png</OnPlatform.Android>
            <OnPlatform.WinPhone>QRCode.png</OnPlatform.WinPhone>
          </OnPlatform>
        </Button.Image>
      </Button>

Posts

  • adamkempadamkemp USInsider, Developer Group Leader mod

    Buttons on iOS automatically tint the images. Basically, they ignore colors and only use the alpha channel. You would set the color using the TintColor property.

    Unfortunately at the moment the only way to override this in Xamarin.Forms is with a custom renderer.

  • Hey Adam,

    Thanks for that... any chance you could point me in the direction of a custom renderer example that demo's what you're suggesting ?

    Thanks
    ~Eoin (colleague of OP)

  • adamkempadamkemp USInsider, Developer Group Leader mod

    I don't have an example. You could search the forums (this issue has come up many times). If you don't find one it should be pretty easy to do once you understand how to do custom renderers in the first place. This Evolve video explains how, with code examples.

  • Ok,

    Thanks Adam, gonna just remove them for now. Sound's like a v2 feature :-)

    Cheers for the pointers

Sign In or Register to comment.