ColorToByteRedConverter

The ColorToByteRedConverter is a one way converter that allows users to convert an incoming Color to the red component as a value between 0 and 255.

The Convert method returns the red component as a value between 0 and 255 from the supplied value.

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

The following examples will show how to use the ColorToByteRedConverter to display the red component of a specific Color.

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 ColorToByteRedConverter

The ColorToByteRedConverter 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.ColorToByteRedConverterPage">

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

    <VerticalStackLayout>
         <Label Text="The red component is:" />

         <Label Text="{Binding MyFavoriteColor, Converter={StaticResource ColorToByteRedConverter}}" />
     </VerticalStackLayout>

</ContentPage>

C#

The ColorToByteRedConverter can be used as follows in C#:

class ColorToByteRedConverterPage : ContentPage
{
    public ColorToByteRedConverterPage()
    {
        var label = new Label();

 		label.SetBinding(
 			Label.TextProperty,
 			new Binding(
 				nameof(ViewModel.MyFavoriteColor),
 				converter: new ColorToByteRedConverter()));

 		Content = new VerticalStackLayout
 		{
 			Children =
 			{
 				new Label { Text = "The red component is:" },
 				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 ColorToByteRedConverterPage : ContentPage
{
    public ColorToByteRedConverterPage()
    {
        Content = new VerticalStackLayout
        {
            Children =
            {
                new Label()
                    .Text("The red component is:"),
                new Label()
                    .Bind(
                        Label.TextProperty,
                        static (ViewModel vm) => vm.MyFavoriteColor,
                        converter: new ColorToByteRedConverter())
            }
        };
    }
}

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 ColorToByteRedConverter over on the .NET MAUI Community Toolkit GitHub repository.