{"id":13713169,"url":"https://github.com/UdaraAlwis/XFColorPickerControl","last_synced_at":"2025-05-06T23:30:50.207Z","repository":{"id":102018976,"uuid":"243644048","full_name":"UdaraAlwis/XFColorPickerControl","owner":"UdaraAlwis","description":"An interactive and responsive Color Picker Control for Xamarin.Forms based on SkiaSharp!","archived":false,"fork":false,"pushed_at":"2023-07-03T23:17:01.000Z","size":18079,"stargazers_count":27,"open_issues_count":3,"forks_count":10,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-15T08:44:34.057Z","etag":null,"topics":["color-picker","color-selector","control","ui","xamarin","xamarin-forms"],"latest_commit_sha":null,"homepage":"","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/UdaraAlwis.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-02-28T00:19:31.000Z","updated_at":"2024-03-20T22:53:37.000Z","dependencies_parsed_at":null,"dependency_job_id":"81a3e1e3-a17f-4bf0-bf4f-09eb55c1563b","html_url":"https://github.com/UdaraAlwis/XFColorPickerControl","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UdaraAlwis%2FXFColorPickerControl","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UdaraAlwis%2FXFColorPickerControl/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UdaraAlwis%2FXFColorPickerControl/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UdaraAlwis%2FXFColorPickerControl/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/UdaraAlwis","download_url":"https://codeload.github.com/UdaraAlwis/XFColorPickerControl/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252787183,"owners_count":21804212,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["color-picker","color-selector","control","ui","xamarin","xamarin-forms"],"created_at":"2024-08-02T23:01:28.935Z","updated_at":"2025-05-06T23:30:45.194Z","avatar_url":"https://github.com/UdaraAlwis.png","language":"C#","funding_links":[],"categories":["UI"],"sub_categories":[],"readme":"Color Picker Control for Xamarin.Forms!\n===========\n\nInteractive 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!\n\n\u003cimg src=\"/screenshots/XFColorPickerControl.png\" height=\"300\"/\u003e \u003cimg src=\"/screenshots/Demo iOS.png\" height=\"300\"/\u003e \n\nSetting it up:\n\n* Grab it on NuGet: https://www.nuget.org/packages/Udara.Plugin.XFColorPickerControl/ [![NuGet](https://img.shields.io/nuget/v/Udara.Plugin.XFColorPickerControl.svg?label=NuGet)](https://www.nuget.org/packages/Udara.Plugin.XFColorPickerControl/)\n* Just install in your Xamarin.Forms PCL/.NET Standard  project, you're good to go!\n\nBlog post:\nhttps://theconfuzedsourcecode.wordpress.com/2020/03/17/publishing-the-nuget-of-my-color-picker-control-for-xamarin-forms/\n\n\n## XAML Set up\n\n```xml\nxmlns:xfsegmentedcontrol=\"clr-namespace:Udara.Plugin.XFColorPickerControl;assembly=Udara.Plugin.XFColorPickerControl\"\n```\n\n```xml\n\u003cxfColorPickerControl:ColorPicker\n\tx:Name=\"ColorPicker\"\n\tColorFlowDirection=\"Horizontal\"\n\tColorSpectrumStyle=\"TintToHueToShadeStyle\"\n\tHeightRequest=\"200\"\n\tHorizontalOptions=\"FillAndExpand\"\n\tPickedColorChanged=\"ColorPicker_PickedColorChanged\"\n\tPointerRingBorderUnits=\"0.3\"\n\tPointerRingDiameterUnits=\"0.7\"\n\tPointerRingPositionXUnits=\"0.6\"\n\tPointerRingPositionYUnits=\"0.6\"\u003e\n\t\u003cxfColorPickerControl:ColorPicker.BaseColorList\u003e\n\t\t\u003cx:Array Type=\"{x:Type x:String}\"\u003e\n\t\t\t\u003c!--  Red  --\u003e\n\t\t\t\u003cx:String\u003e#ff0000\u003c/x:String\u003e\n\t\t\t\u003c!--  Yellow  --\u003e\n\t\t\t\u003cx:String\u003e#ffff00\u003c/x:String\u003e\n\t\t\t\u003c!--  Green (Lime)  --\u003e\n\t\t\t\u003cx:String\u003e#00ff00\u003c/x:String\u003e\n\t\t\t\u003c!--  Aqua  --\u003e\n\t\t\t\u003cx:String\u003e#00ffff\u003c/x:String\u003e\n\t\t\t\u003c!--  Blue  --\u003e\n\t\t\t\u003cx:String\u003e#0000ff\u003c/x:String\u003e\n\t\t\t\u003c!--  Fuchsia  --\u003e\n\t\t\t\u003cx:String\u003e#ff00ff\u003c/x:String\u003e\n\t\t\t\u003c!--  Red  --\u003e\n\t\t\t\u003cx:String\u003e#ff0000\u003c/x:String\u003e\n\t\t\u003c/x:Array\u003e\n\t\u003c/xfColorPickerControl:ColorPicker.BaseColorList\u003e\n\u003c/xfColorPickerControl:ColorPicker\u003e\n```\n\n## PickedColorChanged Event\n\n```csharp\nprivate void ColorPicker_PickedColorChanged(object sender, Color colorPicked)\n{\n        // do whatever you want with the colorPicked value\n}\n```\n\n## Bindable Properties\n\n### ```ColorPicked```: \nGets the Picked Color of the Color Picker.\n\nXAML:\n```xml\n\u003cxfColorPickerControl:ColorPicker\n    x:Name=\"ColorPicker\"\n    ColorPicked={Binding UserPickedColor}\n    ... \u003e\n\u003c/xfColorPickerControl:ColorPicker\u003e\n```\nC#:\n```csharp\nvar colorPicked = ColorPicker.ColorPicked;\n```\n\n### ```BaseColorList```: \n\n\u003cimg src=\"/screenshots/GIFS/BaseColorList.gif\" height=\"180\"/\u003e \n\nChange 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.\n#### XML:\n```xml\n\u003cxfColorPickerControl:ColorPicker\n    x:Name=\"ColorPicker\"\n    ... \u003e\n    \u003cxfColorPickerControl:ColorPicker.BaseColorList\u003e\n        \u003cx:Array Type=\"{x:Type x:String}\"\u003e\n            \u003c!--  Yellow  --\u003e\n            \u003cx:String\u003e#ffff00\u003c/x:String\u003e\n            \u003c!--  Aqua  --\u003e\n            \u003cx:String\u003e#00ffff\u003c/x:String\u003e\n            \u003c!--  Fuchsia  --\u003e\n            \u003cx:String\u003e#ff00ff\u003c/x:String\u003e\n            \u003c!--  Yellow  --\u003e\n            \u003cx:String\u003e#ffff00\u003c/x:String\u003e\n        \u003c/x:Array\u003e\n    \u003c/xfColorPickerControl:ColorPicker.BaseColorList\u003e\n\u003c/xfColorPickerControl:ColorPicker\u003e\n```\n#### C#:\n```csharp\nColorPicker.BaseColorList = new List\u003cstring\u003e()\n{\n    \"#00bfff\",\n    \"#0040ff\",\n    \"#8000ff\",\n    \"#ff00ff\",\n    \"#ff0000\",\n};\n```\n\n### ```ColorFlowDirection```: \nChange 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**\n\n#### XAML\n```xml\n\u003cxfColorPickerControl:ColorPicker\n    x:Name=\"ColorPicker\"\n    ColorFlowDirection=\"Horizontal\"\n    ... \u003e\n\u003c/xfColorPickerControl:ColorPicker\u003e\n```\n#### C#:\n```csharp\nColorPicker.ColorFlowDirection =\n    Udara.Plugin.XFColorPickerControl.ColorFlowDirection.Horizontal;\n```\n\n### ```ColorSpectrumStyle```: \n\n\u003cimg src=\"/screenshots/GIFS/ColorSpectrumStyle.gif\" height=\"180\"/\u003e \n\nChange the Color Spectrum gradient style, with the rendering combination of base colors (**Hue**), or lighter colors (**Tint**) or darker colors (**Shade**).\n\nAvailable Styles: \n- HueOnlyStyle\n- HueToShadeStyle\n- ShadeToHueStyle\n- HueToTintStyle\n- TintToHueStyle\n- TintToHueToShadeStyle\n- ShadeToHueToTintStyle\n\n#### XML:\n```xml\n\u003cxfColorPickerControl:ColorPicker\n    x:Name=\"ColorPicker\"\n    ColorSpectrumStyle=\"TintToHueToShadeStyle\"\n    ... \u003e\n\u003c/xfColorPickerControl:ColorPicker\u003e\n```\n#### C#:\n```csharp\nColorPicker.ColorSpectrumStyle = \n    Udara.Plugin.XFColorPickerControl.ColorSpectrumStyle.TintToHueToShadeStyle;\n```\n\n### ```PointerRingDiameterUnits```:\n\n\u003cimg src=\"/screenshots/GIFS/PointerRingSize.gif\" height=\"180\"/\u003e \n\nChanges 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.\n\n#### XML:\n```xml\n\u003cxfColorPickerControl:ColorPicker\n    x:Name=\"ColorPicker\"\n    PointerRingDiameterUnits=\"0.6\"\n    ...    \u003e\n\u003c/xfColorPickerControl:ColorPicker\u003e\n```\n#### C#:\n```csharp\nColorPicker.PointerRingDiameterUnits = 0.6;\n```\n\n### ```PointerRingBorderUnits```:\n\n\u003cimg src=\"/screenshots/GIFS/PointerRingSize.gif\" height=\"180\"/\u003e \n\nChanges 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.\n\n#### XML:\n```xml\n\u003cxfColorPickerControl:ColorPicker\n    x:Name=\"ColorPicker\"\n    PointerRingBorderUnits=\"0.3\"\n    ...    \u003e\n\u003c/xfColorPickerControl:ColorPicker\u003e\n```\n#### C#:\n```csharp\nColorPicker.PointerRingBorderUnits = 0.3;\n```\n\n### ```PointerRingPosition\u003cX,Y\u003eUnits```:\n\n\u003cimg src=\"/screenshots/GIFS/PointerRingPosition.gif\" height=\"180\"/\u003e \n\nChanges 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.\n\n#### XML:\n```xml\n\u003cxfColorPickerControl:ColorPicker\n    x:Name=\"ColorPicker\"\n    PointerRingPositionXUnits=\"0.3\"\n    PointerRingPositionYUnits=\"0.7\"\n    ...    \u003e\n\u003c/xfColorPickerControl:ColorPicker\u003e\n```\n#### C#:\n```csharp\nColorPicker.PointerRingPositionXUnits = 0.3;\nColorPicker.PointerRingPositionYUnits = 0.7;\n```\n\n## Event Handler\n\nFires every time when the selected Color is changed\n\n### ```PickedColorChanged```: \nGets the pickedColor, object type of Color \n\n```xml\n\u003ccontrols:ColorPickerControl\n        x:Name=\"ColorPicker\"\n        PickedColorChanged=\"ColorPicker_PickedColorChanged\" /\u003e\n```\n\n#### C#:\n```csharp\nColorPicker.PickedColorChanged += ColorPicker_PickedColorChanged;\n```\n```csharp\nprivate void ColorPicker_PickedColorChanged(object sender, Color colorPicked)\n{\n    //Do whatever you want with the colorPicker \n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FUdaraAlwis%2FXFColorPickerControl","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FUdaraAlwis%2FXFColorPickerControl","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FUdaraAlwis%2FXFColorPickerControl/lists"}