Using ColorConverters [MAUI Community Toolkit]

Post en Español

In the same way as Xamarin.Forms, the .NET MAUI framework has all the necesary tools (without extra packages) to create an application that fullfils all our requirements and that also looks and feels really good. But if we want to save some time and effort, it is a good alternative to include Nuget Packages.

For Xamarin.Forms we have the Xamarin Community Toolkit (XCT), and now for .NET MAUI we have a MAUI Community Toolkit (MCT) that offers us a lot of common functionality that can be used with any of our applications.

All the source code of the package is available on the official repository. And it’s open for contributions!

What does MCT include?

The migration from XCT to MCT is still in progress, I am going to mention some of the features that are already available.

• Behaviors: They add extra functionality to our visual components
  • EventToCommand: To use commands instead of events (for instance ListView.ItemTapped).
  • MaskedBehavior: Forces the format of an input using a mask (date Entry with DD/MM/AAAA format).
  • MaxLengthReached: When the max length is reached, an action is fired.
  • ProgressBarAnimation: Adds an animation when progress is changed for a ProgressBar.
  • UserStoppedTyping: Fires certain action when the user stops tipying in a field.



• Converters: They adjust the bindable properties as we like. There are a lot available, so I will name only a fiew:
  • ByteArrayToImageSource: To assign a byte[] to an Image/ImageButton (or similar) view.
  • Several ColorConverters (we will talk further about these ones).
  • ImageResourceConverter: From an EmbeddedResource straight to our image showing control.
  • InvertedBoolConverter: I find this converter one of the most useful. It just inverts the value of a bool property.
  • Is(Not)NullOrEmptyConverter: Converts a string to a bool if the string has a value of null or empty.
  • ListIs(Not)NullOrEmptyConverter: Converts a list to a bool if the list is null or if it has no elements.
  • ListToString/StringToList: By telling the converter which separator to use, we can build a list from a string or a string for a list.

There are lots of other components, including views, which will be eventually migrated.

Color Converters!

MCT has 3 big groups of Color Converters
They can be used like any other converter, if you have any doubts you can check the Value Converters official documentation.

From Color to Color

As the name implies, we give the converter a Color, and it returns another Color.

• ColorToBlackOrWhite: If the color is “closer” to Black than it is to White, it returns Colors.Black, otherwise it returns Colors.White
• ColorToColorForText: If we have to display a text and the Background is too dark, we should use a clear TextColor and the opposite case is also true. This converter takes care of that.
• ColorToGrayScale: It transforms a Color to it’s GrayScale version.
• ColorToInverseColor: It returns the inverse color

From Color to Color Component

A color can be decomposed into several components, which vary depending on the Color space that we wish to use.

The most common Color space is the RGB, where each component corresponds to a color channel Red, Green or Blue. You can also refer to it as RGBa, where the last component is the transparency (Alpha). Each component has a value from 0 to 255

Another one is the CMYK Color space, where each component is for Cyan, Magenta, Yellow and Key (Black). These components have a value expressed as percentage, so it will go from 0 to 1

Finally we have the HSL Color space corresponding to it’s component Hue, Saturation and Lightness. The Color class already includes methods for obtaining most of these components, so the MCT only converts a Color to it’s Hue value expressed as Degrees, which goes from 0° to 360°.

All the converts in this category allow us to extract the value of each component separatedly.

From Color to String

In most of the cases we are not going to need the Color components separatedly, but all together because we need all of them to form a Color for a specified Color space.
MCT offers different converters that transform a color into a formatted string that includes all components in a nice and easy to read way. You can get the string from the RGB, CMYK or HSL Color space, or even it’s Hexadecimal representation.

Check it in action

Here it is a small demo application to show a little better how the Color converters work

All the named colors available for .NET MAUI are shown in a CollectionViews, where we can select the one that we like the most.
When a chicken is selected, only the color of the Selected Chicken is changed and all the other are updated automatically based on the color of the selected color by using the color converters.

You can download or check the code from the repository