IconTintColorBehavior

The IconTintColorBehavior is a behavior allows you to tint an image.

Important

The IconTintColorBehavior is not supported on Windows.

Syntax

XAML

Including the XAML namespace

In order to use the toolkit in XAML the following xmlns needs to be added into your page or view:

xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"

Therefore the following:

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

</ContentPage>

Would be modified to include the xmlns as follows:

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">

</ContentPage>

Using the IconTintColorBehavior

The IconTintColorBehavior can be used as follows in XAML:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             x:Class="MyLittleApp.MainPage">
    
    <Image Source="shield.png">
        <Image.Behaviors>
            <toolkit:IconTintColorBehavior TintColor="Red" />
        </Image.Behaviors>
    </Image>

</ContentPage>

C#

The IconTintColorBehavior can be used as follows in C#:

class IconTintColorBehaviorPage : ContentPage
{
    public IconTintColorBehaviorPage()
    {
        var img = new Image();

        var behavior = new IconTintColorBehavior
        {
            TintColor = Color.Red
        };

        img.Behaviors.Add(behavior);

        Content = entry;
    }
}

C# Markup

Our CommunityToolkit.Maui.Markup package provides a much more concise way to use this Behavior in C#.

using CommunityToolkit.Maui.Markup;

class IconTintColorBehaviorPage : ContentPage
{
    public IconTintColorBehaviorPage()
    {
        Content = new Image()
        .Behaviors(new IconTintColorBehavior
        {
            Tintcolor = Color.Red
        });                 
    }
}

Properties

Property	Type	Description
TintColor	Color	The Color name from the Microsoft.Maui.Graphics namespace.

Examples

You can find an example of this behavior in action in the .NET MAUI Community Toolkit Sample Application.

API

You can find the source code for IconTintColorBehavior over on the .NET MAUI Community Toolkit GitHub repository.