nor0x/Maui.ColorPickerPublic

NotificationsYou must be signed in to change notification settings
Fork15
Star77

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

johnnys.news/2022/08/say-hello-to-Maui-ColorPicker

License

MIT license

77 stars 15 forks Branches Tags Activity

Star

Notifications

You must be signed in to change notification settings

Branches Tags

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 76 Commits
.github		.github
Art		Art
Maui.ColorPicker.Demo		Maui.ColorPicker.Demo
Maui.ColorPicker		Maui.ColorPicker
.gitignore		.gitignore
LICENSE		LICENSE
readme.md		readme.md

Repository files navigation

Maui.ColorPicker 🎨

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

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

Getting Started

initialize SkiaSharp in your app by calling theUseSkiaSharp method on theMauiAppBuilder

publicstaticMauiAppCreateMauiApp(){varbuilder=MauiApp.CreateBuilder();builder.UseMauiApp<App>().UseSkiaSharp()...

add namespace

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

create control

<controls:ColorPickerx:Name="ColorPicker"ColorFlowDirection="Horizontal"ColorSpectrumStyle="ShadeToHueStyle"PickedColorChanged="ColorPicker_PickedColorChanged"PointerRingBorderUnits="0.3"PointerRingDiameterUnits="0.7"></controls:ColorPicker>

Bindable Properties

`ColorPicked`:

Gets or sets the Picked Color of the Color Picker.

XAML:

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

C#:

varcolorPicked=ColorPicker.ColorPicked;

`BaseColorList`:

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

XML:

<controls:ColorPickerx:Name="ColorPicker"    ... >    <controls:ColorPicker.BaseColorList>        <x:ArrayType="{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=newList<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:ColorPickerx: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:ColorPickerx: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:ColorPickerx: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:ColorPickerx: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 propertiesPointerRingPositionXUnits andPointerRingPositionYUnits, 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:ColorPickerx: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:ColorPickerControlx:Name="ColorPicker"PickedColorChanged="ColorPicker_PickedColorChanged" />

C#:

ColorPicker.PickedColorChanged+=ColorPicker_PickedColorChanged;

privatevoidColorPicker_PickedColorChanged(objectsender,ColorcolorPicked){//Do whatever you want with the colorPicker}

Customization

since the control is just aContentView it can be customized in many ways - this is an example of aClip 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:ColorPickerx: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:ArrayType="{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

privatevoidColorPicker_PickedColorChanged(objectsender,ColorcolorPicked){// do whatever you want with the colorPicked value}

Bindable Properties

`ColorPicked`:

Gets the Picked Color of the Color Picker.

XAML:

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

C#:

varcolorPicked=ColorPicker.ColorPicked;

`BaseColorList`:

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

XML:

<xfColorPickerControl:ColorPickerx:Name="ColorPicker"    ... >    <xfColorPickerControl:ColorPicker.BaseColorList>        <x:ArrayType="{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=newList<string>(){"#00bfff","#0040ff","#8000ff","#ff00ff","#ff0000",};

`ColorFlowDirection`:

XAML

<xfColorPickerControl:ColorPickerx: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:ColorPickerx:Name="ColorPicker"ColorSpectrumStyle="TintToHueToShadeStyle"    ... ></xfColorPickerControl:ColorPicker>

C#:

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

`PointerRingDiameterUnits`:

XML:

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

C#:

ColorPicker.PointerRingDiameterUnits=0.6;

`PointerRingBorderUnits`:

XML:

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

C#:

ColorPicker.PointerRingBorderUnits=0.3;

`PointerRingPosition<X,Y>Units`:

XML:

<xfColorPickerControl:ColorPickerx: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:ColorPickerControlx:Name="ColorPicker"PickedColorChanged="ColorPicker_PickedColorChanged" />

C#:

ColorPicker.PickedColorChanged+=ColorPicker_PickedColorChanged;

privatevoidColorPicker_PickedColorChanged(objectsender,ColorcolorPicked){//Do whatever you want with the colorPicker}

About

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

johnnys.news/2022/08/say-hello-to-Maui-ColorPicker

Releases5

Release 2.0.4 Latest

Oct 21, 2024

+ 4 releases

Sponsor this project

Learn more about GitHub Sponsors

Packages

Contributors6

Languages

C#100.0%

Movatterモバイル変換

Uh oh!

License

nor0x/Maui.ColorPicker

Folders and files

Latest commit

History

Repository files navigation

Maui.ColorPicker 🎨

Getting Started

Bindable Properties

ColorPicked:

BaseColorList:

XML:

C#:

ColorFlowDirection:

XAML

C#:

ColorSpectrumStyle:

XML:

C#:

PointerRingDiameterUnits:

XML:

C#:

PointerRingBorderUnits:

XML:

C#:

PointerRingPosition<X,Y>Units:

XML:

C#:

Event Handler

PickedColorChanged:

C#:

Customization

Color Picker Control for Xamarin.Forms!

XAML Set up

PickedColorChanged Event

Bindable Properties

ColorPicked:

BaseColorList:

XML:

C#:

ColorFlowDirection:

XAML

C#:

ColorSpectrumStyle:

XML:

C#:

PointerRingDiameterUnits:

XML:

C#:

PointerRingBorderUnits:

XML:

C#:

PointerRingPosition<X,Y>Units:

XML:

C#:

Event Handler

PickedColorChanged:

C#:

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases5

Sponsor this project

Uh oh!

Packages0

Uh oh!

Uh oh!

Contributors6

Uh oh!

Languages

`ColorPicked`:

`BaseColorList`:

`ColorFlowDirection`:

`ColorSpectrumStyle`:

`PointerRingDiameterUnits`:

`PointerRingBorderUnits`:

`PointerRingPosition<X,Y>Units`:

`PickedColorChanged`:

`ColorPicked`:

`BaseColorList`:

`ColorFlowDirection`:

`ColorSpectrumStyle`:

`PointerRingDiameterUnits`:

`PointerRingBorderUnits`:

`PointerRingPosition<X,Y>Units`:

`PickedColorChanged`:

Packages