This is my image control. I have added a property that allows me to change the look of the control so it looks like it is desabled. You can also bind a command to it that will be executed on tapp on the image.

//
// <copyright file=ExtImage.cs company=Krossapp>
//     Copyright (c) Krossapp. All rights reserved.
// </copyright>
// <author>Nicolas Krier</author>
//
namespace SDF.XForm.Controls
{
    #region Using

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

    #endregion

    /// <summary>
    /// The Button.
    /// </summary>
    public class ExtImage : Image
    {
        #region Bindable property

        /// <summary>
        /// The command property.
        /// </summary>
        [SuppressMessage(StyleCop.CSharp.MaintainabilityRules, SA1401:FieldsMustBePrivate, Justification = Reviewed.)]
        public static BindableProperty CommandProperty = BindableProperty.Create<ExtImage, ICommand>(x => x.Command, null);

        /// <summary>
        /// The command indicatique wether the image should be opaque or not.
        /// </summary>
        [SuppressMessage(StyleCop.CSharp.MaintainabilityRules, SA1401:FieldsMustBePrivate, Justification = Reviewed.)]
        public static BindableProperty IsImageOpaqueProperty = BindableProperty.Create<ExtImage, bool>(x => x.IsImageOpaque, false, propertyChanged: WhenIsImageOpaqueChanged);

        #endregion

        #region Constructor

        /// <summary>
        /// Initializes a new instance of the <see cref=ExtImage/> class.
        /// </summary>
        public ExtImage()
            : base()
        {
            // this.SetBinding(ExtButton.IsEnabledProperty, new Binding(CanExecute, BindingMode.OneWay));
            this.SubscribeClickToRaiseCommand();
        }

        #endregion

        #region Property

        /// <summary>
        /// Gets or sets the command clicked.
        /// </summary>
        /// <value>The command clicked.</value>
        public ICommand Command
        {
            get { return (ICommand)this.GetValue(CommandProperty); }
            set { this.SetValue(CommandProperty, value); }
        }

        /// <summary>
        /// Gets or sets a value indicating whether this image is opaque.
        /// </summary>
        /// <value><c>true</c> if this instance is image opaque; otherwise, <c>false</c>.</value>
        public bool IsImageOpaque
        {
            get { return (bool)this.GetValue(IsImageOpaqueProperty); }
            set { this.SetValue(IsImageOpaqueProperty, value); }
        }

        #endregion

        /// <summary>
        /// Raises the html changed event.
        /// </summary>
        /// <param name=sender>The sender.</param>
        /// <param name=oldValue>Old value.</param>
        /// <param name=newValue>New value.</param>
        private static void WhenIsImageOpaqueChanged(BindableObject sender, bool oldValue, bool newValue)
        {
            if (sender == null)
            {
                return;
            }

            var ctrl = (ExtImage)sender;
            ctrl.Opacity = newValue ? 0.25 : 1.0;
        }

        /// <summary>
        /// Subscribes the click to raise command.
        /// </summary>
        private void SubscribeClickToRaiseCommand()
        {
            var tapGestureRecognizer = new TapGestureRecognizer();
            tapGestureRecognizer.Tapped += async (sender, e) =>
            {
                if (this.Command != null && this.Command.CanExecute(e))
                {
                    uint duration = 100;
                    await this.ScaleTo(.75, duration);
                    await this.ScaleTo(1, duration);

                    this.Command.Execute(null);
                }
            };
            
            this.GestureRecognizers.Add(tapGestureRecognizer);
        }
    }
}

Leave a Reply

Your email address will not be published. Required fields are marked *