nor0x/maui.colorpicker

a color picker control for .NET MAUI powered by SkiaSharp.

Maui.ColorPicker 🎨

a color picker control for .NET MAUI powered by SkiaSharp.

this is largely based on XFColorPickerControl for Xamarin.Forms (https://github.com/UdaraAlwis/XFColorPickerControl) by UdaraAlwis who allowed me to publish this updated version of the control 🙌

Getting Started

add namespace

 xmlns:controls="clr-namespace:Maui.ColorPicker;assembly=Maui.ColorPicker"

create control

<controls:ColorPicker
    x:Name="ColorPicker"
    ColorListDirection="Horizontal"
    GradientColorStyle="DarkToColorsToLightStyle"
    PickedColorChanged="ColorPicker_PickedColorChanged"
    PointerCircleBorderUnits="0.3"
    PointerCircleDiameterUnits="0.7">
</controls:ColorPicker>

Bindable Properties

ColorPicked:

Gets or sets the Picked Color of the Color Picker.

XAML:

<controls:ColorPicker
    x:Name="ColorPicker"
    ColorPicked={Binding UserPickedColor}
    ... >
</controls:ColorPicker>

C#:

var colorPicked = ColorPicker.ColorPicked;

BaseColorList:

Change the available base Colors on the Color Spectrum, of the Color Picker. This will take a List of strings included with Color names or hex values which is held in an IEnumerable.

XML:

<controls:ColorPicker
    x:Name="ColorPicker"
    ... >
    <controls:ColorPicker.BaseColorList>
        <x:Array Type="{x:Type x:String}">
            <!--  Yellow  -->
            <x:String>#ffff00</x:String>
            <!--  Aqua  -->
            <x:String>#00ffff</x:String>
            <!--  Fuchsia  -->
            <x:String>#ff00ff</x:String>
            <!--  Yellow  -->
            <x:String>#ffff00</x:String>
        </x:Array>
    </controls:ColorPicker.BaseColorList>
</controls:ColorPicker>

C#:

ColorPicker.BaseColorList = new List<string>()
{
    "#00bfff",
    "#0040ff",
    "#8000ff",
    "#ff00ff",
    "#ff0000",
};

ColorFlowDirection:

Change the direction in which the Colors are flowing through on the Color Spectrum, of the Color Picker. This will allow you to set whether the Colors are flowing through from left to right, Horizontally or top to bottom, Vertically

XAML

<controls:ColorPicker
    x:Name="ColorPicker"
    ColorFlowDirection="Horizontal"
    ... >
</controls:ColorPicker>

C#:

ColorPicker.ColorFlowDirection =
    Udara.Plugin.controls.ColorFlowDirection.Horizontal;

ColorSpectrumStyle:

Change the Color Spectrum gradient style, with the rendering combination of base colors (Hue), or lighter colors (Tint) or darker colors (Shade).

Available Styles:

• HueOnlyStyle
• HueToShadeStyle
• ShadeToHueStyle
• HueToTintStyle
• TintToHueStyle
• TintToHueToShadeStyle
• ShadeToHueToTintStyle

XML:

<controls:ColorPicker
    x:Name="ColorPicker"
    ColorSpectrumStyle="TintToHueToShadeStyle"
    ... >
</controls:ColorPicker>

C#:

ColorPicker.ColorSpectrumStyle = 
    Udara.Plugin.controls.ColorSpectrumStyle.TintToHueToShadeStyle;

PointerRingDiameterUnits:

Changes the Diameter size of the Pointer Ring on the Color Picker. It accepts values between 0 and 1, as a representation of numerical units which is compared to the 1/10th of the longest length of the Color Picker Canvas. By default this value is set to 0.6 units.

XML:

<controls:ColorPicker
    x:Name="ColorPicker"
    PointerRingDiameterUnits="0.6"
    ...    >
</controls:ColorPicker>

C#:

ColorPicker.PointerRingDiameterUnits = 0.6;

PointerRingBorderUnits:

Changes the Border Thickness size of the Pointer Ring on the Color Picker. It accepts values between 0 and 1, as a representation of numerical units which is calculated against the diameter of the Pointer Ring. By default this value is set to 0.3 units.

XML:

<controls:ColorPicker
    x:Name="ColorPicker"
    PointerRingBorderUnits="0.3"
    ...    >
</controls:ColorPicker>

C#:

ColorPicker.PointerRingBorderUnits = 0.3;

PointerRingPosition<X,Y>Units:

Changes the Pointer Ring’s position on the Color Picker Canvas programmatically. There are of two bindable properties PointerRingPositionXUnits and PointerRingPositionYUnits, which represents X and Y coordinates on the Color Picker Canvas. It accepts values between 0 and 1, as a presentation of numerical units which is calculated against the Color Picker Canvas’s actual pixel Width and Height. By default both the values are set to 0.5 units, which positions the Pointer Ring in the center of the Color Picker.

XML:

<controls:ColorPicker
    x:Name="ColorPicker"
    PointerRingPositionXUnits="0.3"
    PointerRingPositionYUnits="0.7"
    ...    >
</controls:ColorPicker>

C#:

ColorPicker.PointerRingPositionXUnits = 0.3;
ColorPicker.PointerRingPositionYUnits = 0.7;

Event Handler

Fires every time when the selected Color is changed

PickedColorChanged:

Gets the pickedColor, object type of Color

<controls:ColorPickerControl
        x:Name="ColorPicker"
        PickedColorChanged="ColorPicker_PickedColorChanged" />

C#:

ColorPicker.PickedColorChanged += ColorPicker_PickedColorChanged;

private void ColorPicker_PickedColorChanged(object sender, Color colorPicked)
{
    //Do whatever you want with the colorPicker 
}

Customization

since the control is just a ContentView it can be customized in many ways - this is an example of a Clip applied to the color picker.

12-00-08.mp4

⬇️ Xamarin.Forms Version README.md ⬇️

Color Picker Control for Xamarin.Forms!

Interactive and responsive Color Picker Control for Xamarin.Forms (Android, iOS, UWP) with a whole bunch of awesome features. On a Canvas with a beautiful Color spectrum similar to a rainbow gradient effect spreading across, drag, drop, swipe and pan over the Canvas to pick the Color you need easily, in a fun-to-use interactive experience. Built from pure Xamarin.Forms based on SkiaSharp, lightweight and fast!

Setting it up:

• Grab it on NuGet: https://www.nuget.org/packages/Udara.Plugin.XFColorPickerControl/
• Just install in your Xamarin.Forms PCL/.NET Standard project, you're good to go!

Blog post: https://theconfuzedsourcecode.wordpress.com/2020/03/17/publishing-the-nuget-of-my-color-picker-control-for-xamarin-forms/

XAML Set up

xmlns:xfsegmentedcontrol="clr-namespace:Udara.Plugin.XFColorPickerControl;assembly=Udara.Plugin.XFColorPickerControl"

<xfColorPickerControl:ColorPicker
	x:Name="ColorPicker"
	ColorFlowDirection="Horizontal"
	ColorSpectrumStyle="TintToHueToShadeStyle"
	HeightRequest="200"
	HorizontalOptions="FillAndExpand"
	PickedColorChanged="ColorPicker_PickedColorChanged"
	PointerRingBorderUnits="0.3"
	PointerRingDiameterUnits="0.7"
	PointerRingPositionXUnits="0.6"
	PointerRingPositionYUnits="0.6">
	<xfColorPickerControl:ColorPicker.BaseColorList>
		<x:Array Type="{x:Type x:String}">
			<!--  Red  -->
			<x:String>#ff0000</x:String>
			<!--  Yellow  -->
			<x:String>#ffff00</x:String>
			<!--  Green (Lime)  -->
			<x:String>#00ff00</x:String>
			<!--  Aqua  -->
			<x:String>#00ffff</x:String>
			<!--  Blue  -->
			<x:String>#0000ff</x:String>
			<!--  Fuchsia  -->
			<x:String>#ff00ff</x:String>
			<!--  Red  -->
			<x:String>#ff0000</x:String>
		</x:Array>
	</xfColorPickerControl:ColorPicker.BaseColorList>
</xfColorPickerControl:ColorPicker>

PickedColorChanged Event

private void ColorPicker_PickedColorChanged(object sender, Color colorPicked)
{
        // do whatever you want with the colorPicked value
}

Bindable Properties

ColorPicked:

Gets the Picked Color of the Color Picker.

XAML:

<xfColorPickerControl:ColorPicker
    x:Name="ColorPicker"
    ColorPicked={Binding UserPickedColor}
    ... >
</xfColorPickerControl:ColorPicker>

C#:

var colorPicked = ColorPicker.ColorPicked;

BaseColorList:

Change the available base Colors on the Color Spectrum, of the Color Picker. This will take a List of strings included with Color names or hex values which is held in an IEnumerable.

XML:

<xfColorPickerControl:ColorPicker
    x:Name="ColorPicker"
    ... >
    <xfColorPickerControl:ColorPicker.BaseColorList>
        <x:Array Type="{x:Type x:String}">
            <!--  Yellow  -->
            <x:String>#ffff00</x:String>
            <!--  Aqua  -->
            <x:String>#00ffff</x:String>
            <!--  Fuchsia  -->
            <x:String>#ff00ff</x:String>
            <!--  Yellow  -->
            <x:String>#ffff00</x:String>
        </x:Array>
    </xfColorPickerControl:ColorPicker.BaseColorList>
</xfColorPickerControl:ColorPicker>

C#:

ColorPicker.BaseColorList = new List<string>()
{
    "#00bfff",
    "#0040ff",
    "#8000ff",
    "#ff00ff",
    "#ff0000",
};

ColorFlowDirection:

Change the direction in which the Colors are flowing through on the Color Spectrum, of the Color Picker. This will allow you to set whether the Colors are flowing through from left to right, Horizontally or top to bottom, Vertically

XAML

<xfColorPickerControl:ColorPicker
    x:Name="ColorPicker"
    ColorFlowDirection="Horizontal"
    ... >
</xfColorPickerControl:ColorPicker>

C#:

ColorPicker.ColorFlowDirection =
    Udara.Plugin.XFColorPickerControl.ColorFlowDirection.Horizontal;

ColorSpectrumStyle:

Change the Color Spectrum gradient style, with the rendering combination of base colors (Hue), or lighter colors (Tint) or darker colors (Shade).

Available Styles:

• HueOnlyStyle
• HueToShadeStyle
• ShadeToHueStyle
• HueToTintStyle
• TintToHueStyle
• TintToHueToShadeStyle
• ShadeToHueToTintStyle

XML:

<xfColorPickerControl:ColorPicker
    x:Name="ColorPicker"
    ColorSpectrumStyle="TintToHueToShadeStyle"
    ... >
</xfColorPickerControl:ColorPicker>

C#:

ColorPicker.ColorSpectrumStyle = 
    Udara.Plugin.XFColorPickerControl.ColorSpectrumStyle.TintToHueToShadeStyle;

PointerRingDiameterUnits:

Changes the Diameter size of the Pointer Ring on the Color Picker. It accepts values between 0 and 1, as a representation of numerical units which is compared to the 1/10th of the longest length of the Color Picker Canvas. By default this value is set to 0.6 units.

XML:

<xfColorPickerControl:ColorPicker
    x:Name="ColorPicker"
    PointerRingDiameterUnits="0.6"
    ...    >
</xfColorPickerControl:ColorPicker>

C#:

ColorPicker.PointerRingDiameterUnits = 0.6;

PointerRingBorderUnits:

Changes the Border Thickness size of the Pointer Ring on the Color Picker. It accepts values between 0 and 1, as a representation of numerical units which is calculated against the diameter of the Pointer Ring. By default this value is set to 0.3 units.

XML:

<xfColorPickerControl:ColorPicker
    x:Name="ColorPicker"
    PointerRingBorderUnits="0.3"
    ...    >
</xfColorPickerControl:ColorPicker>

C#:

ColorPicker.PointerRingBorderUnits = 0.3;

PointerRingPosition<X,Y>Units:

Changes the Pointer Ring’s position on the Color Picker Canvas programmatically. There are of two bindable properties PointerRingPositionXUnits and PointerRingPositionYUnits, which represents X and Y coordinates on the Color Picker Canvas. It accepts values between 0 and 1, as a presentation of numerical units which is calculated against the Color Picker Canvas’s actual pixel Width and Height. By default both the values are set to 0.5 units, which positions the Pointer Ring in the center of the Color Picker.

XML:

<xfColorPickerControl:ColorPicker
    x:Name="ColorPicker"
    PointerRingPositionXUnits="0.3"
    PointerRingPositionYUnits="0.7"
    ...    >
</xfColorPickerControl:ColorPicker>

C#:

ColorPicker.PointerRingPositionXUnits = 0.3;
ColorPicker.PointerRingPositionYUnits = 0.7;

Event Handler

Fires every time when the selected Color is changed

PickedColorChanged:

Gets the pickedColor, object type of Color

<controls:ColorPickerControl
        x:Name="ColorPicker"
        PickedColorChanged="ColorPicker_PickedColorChanged" />

C#:

ColorPicker.PickedColorChanged += ColorPicker_PickedColorChanged;

private void ColorPicker_PickedColorChanged(object sender, Color colorPicked)
{
    //Do whatever you want with the colorPicker 
}

maui.colorpicker's Issues

ColorPicker don't work in macOs

macOs:

Android, iOS:

xaml-code:

...
        <Border x:Name="ColorPickerHolderFrame"
                HeightRequest="150"
                HorizontalOptions="Center"
                WidthRequest="300"
                Margin="15">
            <controls:ColorPicker
                x:Name="ColorPickerBody"
                ColorFlowDirection="Horizontal"
                ColorSpectrumStyle="TintToHueToShadeStyle"
                PointerRingBorderUnits="0.3"
                PointerRingDiameterUnits="0.7"
                PickedColorChanged="OnPickedColorChanged">
                <controls:ColorPicker.BaseColorList>
                    <x:Array Type="{x:Type x:String}">
                        <!--  Red  -->
                        <x:String>#ff0000</x:String>
                        <!--  Yellow  -->
                        <x:String>#ffff00</x:String>
                        <!--  Green (Lime)  -->
                        <x:String>#00ff00</x:String>
                        <!--  Aqua  -->
                        <x:String>#00ffff</x:String>
                        <!--  Blue  -->
                        <x:String>#0000ff</x:String>
                        <!--  Fuchsia  -->
                        <x:String>#ff00ff</x:String>
                        <!--  Red  -->
                        <x:String>#ff0000</x:String>
                    </x:Array>
                </controls:ColorPicker.BaseColorList>
        </controls:ColorPicker>
        </Border>
...

Allow to set the initial color

The PickedColor Property has no public setter. I can see no way to set the initial Color of the ColorPicker.

Support for .Net 8

Is .Net 8 support planned?

Setting the pointer ring X position is not always correct

From a default constructed ColorPicker, setting the PointerRingPositionXUnits property from code to 0.666 and the PointerRingPositionYUnits to 0 does not always point to the color "Blue". It sometimes gets off a little bit to the left and gives a lighter variant of blue.

Sometimes, this bug occurs:

Normally, this is the expected behavior:

The problem here is, the drawing and color determination relies on the _lastTouchPoint, which is relative to the CanvasSize. However, in some weird situations, CanvasSize can change, invalidating the coordinates of _lastTouchPoint.

See:

Maui.ColorPicker/Maui.ColorPicker/ColorPicker.xaml.cs

Lines 477 to 479 in ce6fd9b

	// Update as last touch Position on Canvas
	_lastTouchPoint = new SKPoint(Convert.ToSingle(xPosition), Convert.ToSingle(yPosition));
	CanvasView.InvalidateSurface();

Confusing fork

There is a fork of this package with the result that there are now two very similar nuget packages available, where the forked package now has more downloads.

It's a bit confusing for users but it turns out that there are actually some improvements like a fix for #4. It's a pity that the improvements were done in a fork rather than contributing them back via PRs.

Would it be an idea to discuss with @trungnt2910 to have one merged repo and package?