Add Tint Property To Image

JasonFoxAZJasonFoxAZ USUniversity ✭✭
edited December 2016 in Xamarin.Forms Evolution


Add a method to the Image View object for applying a tint color to the image

API Changes

In order to facilitate the new Image Tint API, a new method is added to the ImageView class. This method should take a Color as a parameter. A nice to would be data-binding a TintColor property within the ImageViw

var image = new Image ();
image.ApplyTint(Color.Blue); // new API

Intended Use Case

Color coding to show relationships to other areas of app. For example: Colored pins on a MapView that correspond to colored items in an adjacent ListView.
See attached image

1 votes

In Progress · Last Updated


  • TheRealJasonSmithTheRealJasonSmith USXamarin Team Xamurai
    edited December 2016

    What is the exact PorterDuff blending mode you are expecting here? I'm guessing you envisioning "In"?

    Put differently, what happens if I have a green circle which is 25% opaque (mostly see through), and I do:

    image.ApplyTint(new Color(1, 1, 1, .5)); // 50% opaque white

    There are many viable answers here, each are self consistent:

    • Circle is now white, 25% opacity
    • Circle is now white, 12.5% opacity
    • Circle is now a lighter green, 25% opacity

    Essentially is the color channel blended or not and are the alpha channels blended or is the source channel just consumed?

  • AdrianKnightAdrianKnight USMember ✭✭✭✭

    Does FFImageLoading provide this kind of service? I do believe it has TintTransformation which I haven't used. In general, I'm not in favor of XF making image processing improvements while a dedicated library serves this purpose.

  • JasonFoxAZJasonFoxAZ USUniversity ✭✭

    Thanks for the replies.

    @TheRealJasonSmith Personally I would go with the source channel being consumed, but that's just me.

    @AdrianKnight FFImageLoading does have that feature exposed, however, I haven't been able to get it working.

  • StephaneDelcroixStephaneDelcroix USInsider, Beta ✭✭✭✭

    and I could get rid of my TintedImageRenderer !

  • StephaneDelcroixStephaneDelcroix USInsider, Beta ✭✭✭✭

    From an API point of view, it probably should be a BindableProperty, and that property should be handled in the redenders

  • TheRealJasonSmithTheRealJasonSmith USXamarin Team Xamurai

    We like this +1 from the team.

  • MichaelRumplerMichaelRumpler ATMember ✭✭✭✭✭

    I'd also prefer a BindableProperty to a method.
    And don't forget the ImageCell. If you add it to the Image, then the ImageCell should also get it.

  • EmmanuelVazquezEmmanuelVazquez USMember ✭✭

    I use FFImageLoading to tint images with the expected behavior. Have you seen the EnableSolidColor property ? You can always try making an issue with FF to see if the community can help solve your issue or if there is a bug.

  • MIFMIF USMember ✭✭

    +1 for TintColor bindable property

  • tuyenvtuyenv VNUniversity ✭✭✭

    +1 for this feature. I am currently using Effect to get this tint color.

  • DidsDids FIMember ✭✭

    +1 from here too. Any news on this?

  • AlanGrgicAlanGrgic USMember

    @TheRealJasonSmith @StephaneDelcroix is this still up for grabs? I'd be interested in giving it a go. If so, what branch should I fork / target? Thanks!

  • JasonFoxAZJasonFoxAZ USUniversity ✭✭

    There is a pretty clean implementation of this feature here:

    Might be worth reaching out to the author - maybe he/she is interested in donating the work...

Sign In or Register to comment.