ColorToGrayScaleColorConverter

The ColorToGrayScaleColorConverter is a one way converter that allows users to convert an incoming Color to a grayscale Color.

The Convert method returns the supplied value converted to a grayscale Color.

The ConvertBack method is not supported.

BaseConverter Properties

The following properties are implemented in the base class, public abstract class BaseConverter:

ICommunityToolkitValueConverter Properties

The following properties are implemented in the public interface ICommunityToolkitValueConverter:

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 ColorToGrayScaleColorConverter

The ColorToGrayScaleColorConverter 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="CommunityToolkit.Maui.Sample.Pages.Converters.ColorToGrayScaleColorConverterPage">

    <ContentPage.Resources>
        <ResourceDictionary>
            <toolkit:ColorToGrayScaleColorConverter x:Key="ColorToGrayScaleColorConverter" />
        </ResourceDictionary>
    </ContentPage.Resources>

    <Label Text="The Text is showing in grayscale"
           TextColor="{Binding AppTextColor, Converter={StaticResource ColorToGrayScaleColorConverter}}" />

</ContentPage>

C#

The ColorToGrayScaleColorConverter can be used as follows in C#:

class ColorToGrayScaleColorConverterPage : ContentPage
{
    public ColorToGrayScaleColorConverterPage()
    {
        var label = new Label { Text = "The Text is showing in grayscale" };

		label.SetBinding(
			Label.TextColorProperty,
			new Binding(
				nameof(ViewModels.AppTextColor),
				converter: new ColorToGrayScaleColorConverter()));

		Content = label;
    }
}

C# Markup

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

using CommunityToolkit.Maui.Markup;

class ColorToGrayScaleColorConverterPage : ContentPage
{
    public ColorToGrayScaleColorConverterPage()
    {
        Content = new Label { Text = "The Text is showing in grayscale" }
            .Bind(
                Label.TextColorProperty,
                static (ViewModel vm) => vm.AppTextColor,
                converter: new ColorToGrayScaleColorConverter());
    }
}

Examples

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

API

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