Xamarin.Forms - Tint Image Color Using Effects

Introduction

Xamarin.Forms code runs on multiple platforms, each of which has its own filesystem. This means that reading and writing files are most easily done using the native file APIs on each platform. Alternatively, embedded resources are a simpler solution to distribute data files with an app.

Tint Image

TintImage is used for changing image color at runtime with the help of effects, you can achieve this with custom render also. Tint image color is mainly used to reduce the usage of the images.

Prerequisites

Visual Studio 2017 or later (Windows or Mac)

Setting up a Xamarin.Forms Project

Start by creating a new Xamarin.Forms project. You wíll learn more by going through the steps yourself.

Create a new or existing Xamarin forms (.Net standard) Project with Android and iOS Platform.

Create TintImage

Now, Create a TintImage class inherited from RoutingEffect for changing image color.

TintImage.cs

public class TintImage: RoutingEffect
{
public Color TintColor { get; private set; }
public TintImage(Color color) : base($"MyCompany.{nameof(TintImage)}")
{
TintColor = color;
}
}

Android Implementation

Here, implement platform effects for TintImage at runtime.

TintImageImpl.cs

[assembly: ExportEffect(typeof(TintImageImpl), nameof(XamarinStudy.Common.Controls.TintImage))]
namespace XamarinStudy.Droid.Effects
{
public class TintImageImpl: PlatformEffect
{
protected override void OnAttached()
{
try
{
var effect = (XamarinStudy.Common.Controls.TintImage)Element.Effects.FirstOrDefault(e => e is XamarinStudy.Common.Controls.TintImage);
if (effect == null || !(Control is ImageView image))
return;
var filter = new PorterDuffColorFilter(effect.TintColor.ToAndroid(), PorterDuff.Mode.SrcIn);
image.SetColorFilter(filter);
}
catch (Exception ex)
{
}
}
protected override void OnDetached() { }
}
}

iOS Implementation

Here, implement platform effects for TintImage at runtime.

TintImageImpl.cs

[assembly: ExportEffect(typeof(XamarinStudy.iOS.Effects.TintImageImpl), nameof(TintImage))]
namespace XamarinStudy.iOS.Effects
{
public class TintImageImpl: PlatformEffect
{
protected override void OnAttached()
{
try
{
var effect = (XamarinStudy.Common.Controls.TintImage)Element.Effects.FirstOrDefault(e => e is XamarinStudy.Common.Controls.TintImage);
if (effect == null || !(Control is UIImageView image))
return;
image.Image = image.Image.ImageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate);
image.TintColor = effect.TintColor.ToUIColor();
}
catch (Exception ex)
{
}
}
protected override void OnDetached() { }
}
}

Consuming the TintImage

Now, use the TintImage effect in your XAML code.

MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:behaviors="clr-namespace:XamarinStudy.Common.Behaviors"
xmlns:converters="clr-namespace:XamarinStudy.Common.Converters"
xmlns:Effects="clr-namespace:XamarinStudy.Common.Controls"
x:Class="XamarinStudy.MainPage" Title="Effects">
<StackLayout Margin="10,30,10,0" Spacing="20">
<Image Source="banner.png"/>
<Image Source="favicon.png" Effects:TintImageEffect.TintColor="Green">
</Image>
</StackLayout>
</ContentPage>

Click the "Play" button to try it out.

Actually the image color is gray.

Wow, it's working.

I hope you have understood how to change image color using Tint Image Effects in Xamarin.Forms.

Thanks for reading. Please share your comments and feedback. Happy Coding :)