Set image for Imagebutton in Xamarin for iOS

Question

I'm trying to customize an imagebutton to use specific images on particular devices for android is will show one image while in iOS it will show an other image using custom renderers

I have finished on the Android side but noticed that iOS uses different memeber variables instead of just "this.SetBackground(Some Resource)" used on the android side.

namespace FlipXamarin.Controls
{
    public class FingerPrintLabel : ImageButton
    {
        public FingerPrintLabel()
        {
        }
    }
}

Android
[assembly: ExportRenderer(typeof(FingerPrintLabel), typeof(FingerPrintLabelRenderer))]
namespace FlipXamarin.Droid.Renderers
{

    public class FingerPrintLabelRenderer : ImageButtonRenderer
    {

        public FingerPrintLabelRenderer(Context context) : base(context) 
        {

        }


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

            this.SetBackground(Resources.GetDrawable(Resource.Drawable.fingerprint_2x));
        }
    }
}

iOS
[assembly: ExportRenderer(typeof(FingerPrintLabel), typeof(FingerPrintLabelRenderer))]
namespace FlipXamarin.iOS.CustomRenderers
{
    public class FingerPrintLabelRenderer : ImageButtonRenderer
    {

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

            ///if(iOS.version == 8) show fingerprint icon
            ///if(iOS.version == 10 and) show FaceId icon
        }
    }
}

Android should just show a Fingerprint icon while iOS will show a fingerprint or faceId icon.

Android Screen

Answer 1

As @Jason has indicated in the comments, you don't need a custom renderer to show a different image since you can do all this from the Shared Project using the Device helper class.

But, to answer your question, if you want to update the Image of the ImageButton from a CustomRenderer in iOS you can do it like this:

//Do your validation as you wish, this was just an example.
var image = UIDevice.CurrentDevice.CheckSystemVersion(10, 0)
                ? UIImage.FromBundle("facescan.jpg")
                : UIImage.FromBundle("fingerprint.jpg");

//The Control property is an UIButtton
Control?.SetImage(image?.ImageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal), UIControlState.Normal);

Answer 2

In Xamarin Forms , you can install Xam.Plugin.DeviceInfo to determine which version number .

Xaml as follow :

<ImageButton x:Name="MyImageButton" Source="fingerprint.png"/>

Then in ContentPage , if has intalled DeviceInfo Nuget , you can use as follow :

using System.ComponentModel;

if (Device.RuntimePlatform == Device.iOS)
{        
    Console.WriteLine("version is -- " + CrossDeviceInfo.Current.Version);
    if (Convert.ToInt32(CrossDeviceInfo.Current.Version) >= 10)
    {
        MyImageButton.Source = "FaceId.png";
    }
    else
    {
        MyImageButton.Source = "fingerprint.png";
    }
}
else if (Device.RuntimePlatform == Device.Android)
{
    MyImageButton.Source = "fingerprint.png";
}

If not knowing about Installing Nuget Package , you can refer to this Install and use a package in Visual Studio .

Answer 3

You can simply make use of the XAML MArkup OnPlatform.

Here is a sample:

  <ImageButton HorizontalOptions="Center"
               VerticalOptions="Center">
       <ImageButton.Source>
           <OnPlatform x:TypeArguments="ImageSource"
                                        iOS="https://www.apple.com/ac/structured-data/images/knowledge_graph_logo.png?201606271147"
                                        Android="https://d3nevzfk7ii3be.cloudfront.net/igi/hAgr2LwD6AECIwsh.large" />
       </ImageButton.Source>
   </ImageButton>

Which results in: