Xamarin.forms: [Enhancement] Add Tint to Image

[davidortinau]

Summary

I want to be able to provide a tint color to be applied to any Image and especially when setting an Icon in Shell. Providing a color would automatically render the image as a template. Icon tinting is already happening in bottom tabs and I would like control of it everywhere.

See https://github.com/shrutinambiar/xamarin-forms-tinted-image

API Changes

Image and ImageElement

Add a TintColor bindable property for the Color.

var image = new Image("iconXamagon");
image.TintColor = Color.Blue;

<Image Source="iconXamagon" TintColor="Blue" />

Shell Element(s)

Add an IconTintColor to the Shell element(s). Tint color may differ from text color styling.

<ShellContent  Icon="iconXamagon" IconTintColor="Blue" />

Implementation Details

Add the TintColor interface to IImageElement (https://github.com/xamarin/Xamarin.Forms/blob/master/Xamarin.Forms.Core/IImageElement.cs)

So that this API gets added to all the relevant controls

Intended Use Case

When I add an image anywhere in the app and want to colorize it, I can add a TintColor as above and see the image colored.

Platform Docs

iOS: https://developer.apple.com/documentation/uikit/uiimageview/1621059-tintcolor
Android: https://developer.android.com/reference/android/widget/ImageView.html#attr_android:tint

[StephaneDelcroix]

I used to have an implementation for iOS and android somewhere

[PureWeen]

I basically already do this with the Material Button Icons to keep ios and Android consistent so all I need to do is generalize and open those APIs

Also the TabbedPageRenderer on Android has code that tints all the images already

[syedhoque89]

Hi @PureWeen @davidortinau @jamesmontemagno ... Can you help me to remove image tinting from bottom tab page? Ive created color xml graphics but if I place the tab bar using platform specific the images are getting tinted per screenshots below:

Curiously though, images render fine if I place the tab bar on top without specifying any platforms specifics (bar text as the text color is also white in this screenshots)

Many Thanks

[ravinderjangra]

I raised a PR ( https://github.com/xamarin/Xamarin.Forms/pull/1255) for this in past. I can reopen and rebase if it is required.

[andreinitescu]

This is a very useful feature.

Currently there are already many elements which have a property of ImageSource type:

Image.Source
Button.ImageSource
ImageButton.Source
MenuItem.IconImageSource
NavigationPage.TitleIcon
Page.BackgroundImageSource
Page.IconImageSource
Slider.ThumbImageSource
BaseShellItem.Icon
BaseShellItem.FlyoutIcon
SearchHandler.ClearIcon
SearchHandler.ClearPlaceholderIcon
SearchHandler.QueryIcon

Instead of adding separate TintColor properties only for some of these elements/properties, wouldn't be great if ALL supported TintColor? This would give a lot of flexibility of tinting ANY ImageSource.

For this, here are some options I see:

1. Add TintColor property on the ImageSource class

2. Add a TintedImageSource class (my favorite):

class TintedImageSource : ImageSource
{
     public Color TintColor { get; set; }
}

1. Add an extension to ImageSource like this:

ImageSource myImgSrc = ...;
myView.ImageSource = myImgSrc.WithTintColor(myColor);

The issue with the extension is it can't be used in XAML, so in the end developers will end up having their own TintedImageSource like the above

From an implementation detail:
On Android, for some specific views, there are specific APIs to set the tint color (ImageView, Button). Otherwise, the framework already implements mutating the drawable to one with tinted color
On iOS, UIColor.ColorWithPatternImage combined with UIGraphicsBeginImageContext

[rmarinho]

But now we have Color on FontImageSource so we need take this in account.

This is kinda brings me to some issues we found on shell to decide when to override the tint or not. Right now i think if Color is not the default on FontImageSource we should take control of the tint ShellForegroundColor for example.

[candidodmv]

This is a very useful feature, try imagine the following scenario, you need implements support for dark theme, it's necessary has at least two color schema for same image(dark and light) what can be easly accomplish with image tint color property.

following excited this topic!

[luismts]

Any news about this?

[007vel]

Any update on this?

[candidodmv]

For those that need an imediate solution there's this workaround
https://byteloom.marek-mierzwa.com/mobile/2018/02/07/setting-tint-color-in-xamarin-form-image.html

PS. The TintColor property isn't bindable, but you can adapt with use of attachedProperty:
https://docs.microsoft.com/pt-br/xamarin/xamarin-forms/app-fundamentals/effects/passing-parameters/attached-properties

[btschumy]

For those that need an imediate solution there's this workaround
https://byteloom.marek-mierzwa.com/mobile/2018/02/07/setting-tint-color-in-xamarin-form-image.html

PS. The TintColor property isn't bindable, but you can adapt with use of attachedProperty:
https://docs.microsoft.com/pt-br/xamarin/xamarin-forms/app-fundamentals/effects/passing-parameters/attached-properties

That doesn't work on UWP. If iOS and Android are all that are required, that is an immediate solution.

[thomasgalliker]

Thanks @candidodmv for your hints. I've implemented TintImageEffect with bindable TintColor. It might help as a work-around until Xamarin.Forms pushes such a feature into its Image class.

Cross-platform implementation:
https://github.com/thomasgalliker/CrossPlatformLibrary/blob/alpha12/CrossPlatformLibrary.Forms/Effects/TintImageEffect.cs

Android implementation:
https://github.com/thomasgalliker/CrossPlatformLibrary/blob/alpha12/CrossPlatformLibrary.Forms.Android/Effects/TintImageEffect.cs

iOS implementation:
https://github.com/thomasgalliker/CrossPlatformLibrary/blob/alpha12/CrossPlatformLibrary.Forms.iOS/Effects/TintImageEffect.cs

(No UWP implementation here too... sorry)