5 Different Ways To Visualize A Color Picker Control In Xamarin.Forms
Tags: android, ios, csharp, beginners
Published: 2019-06-20 11:42:13

---
title: 5 Different Ways To Visualize A Color Picker Control In Xamarin.Forms
published: true
tags: android,ios,csharp,beginners
canonical_url: https://blog.syncfusion.com/blogs/post/5-ways-to-create-color-picker-in-xamarin-forms.aspx
---

## Introduction

Nowadays, a UI for picking a color plays a vital role in some mobile applications. A color picker presents a unique UI challenge to adapting to the compact screens of mobile devices. So,[Syncfusion Xamarin.Forms controls](https://www.syncfusion.com/xamarin-ui-controls/) like [Chips](https://www.syncfusion.com/xamarin-ui-controls/chips), [Radial Menu](https://www.syncfusion.com/xamarin-ui-controls/radial-menu), [Picker](https://www.syncfusion.com/xamarin-ui-controls/picker), [Segmented Control](https://www.syncfusion.com/xamarin-ui-controls/segmented-control), and [Range Slider](https://www.syncfusion.com/xamarin-ui-controls/range-slider) will help us to implement various color picker UIs easily.

## Xamarin.Forms Chips as a color picker

The Xamarin.Forms [Chips](https://www.syncfusion.com/xamarin-ui-controls/chips) control will present colors as multiple circles. It arranges multiple color chips in a flex layout. They can be wrapped and grouped to make selection easy.

<figure>

  <img src="https://blog.syncfusion.com/wp-content/uploads/2019/05/chips-300x51.jpg" alt="Xamarin.Forms Chips as Xamarin.Forms Color Picker" style="width:100%">

  <figcaption>Xamarin.Forms Chips as Color Picker</figcaption>

</figure>

The following code illustrates the Xamarin.Forms [Chips](https://www.syncfusion.com/xamarin-ui-controls/Chips) control populated with color values bound as background colors with customized corners.

```xml
<sfbuttons:SfChipGroup  Type="Choice"
                        ChipBorderWidth="1"
                        SelectedItem="{Binding SelectedItem}"
                        ItemsSource="{Binding Colors, Converter={StaticResource ColorsToChips}}"> 
           <sfbuttons:SfChipGroup.ChipLayout>
                     <FlexLayout HorizontalOptions="Start"
                                 VerticalOptions="Center"
                                 Direction="Row"
                                 Wrap="Wrap"
                                 JustifyContent="Start"
                                 AlignContent="Start"
                                 AlignItems="Start"/> 
           </sfbuttons:SfChipGroup.ChipLayout> 
</sfbuttons:SfChipGroup>
```

## Xamarin.Forms Picker Control as a color picker

The Xamarin.Forms [Picker](https://www.syncfusion.com/xamarin-ui-controls/picker) control is one of the most common UIs for color pickers. Users select a color using its name. You can implement this color picker by populating the Xamarin.Forms color values.

<figure>

  <img src="https://blog.syncfusion.com/wp-content/uploads/2019/05/Picker-300x210.jpg" alt="Xamarin.Forms Picker as Xamarin.Forms Color Picker" style="width:100%">

  <figcaption>Xamarin.Forms Picker as Color Picker</figcaption>

</figure>

The following code illustrates the Xamarin.Forms [Picker](https://www.syncfusion.com/xamarin-ui-controls/picker) control populated with a color name as a string value.

```xml
<sfpicker:SfPicker HeaderText="Selected Color"
                   SelectedItem="{Binding SelectedItem}"
                   ItemsSource="{Binding Colors}"/>
```

## Xamarin.Forms Radial Menu as a color picker

The Xamarin.Forms [Radial Menu](https://www.syncfusion.com/xamarin-ui-controls/radial-menu) provides an elegant color picker UI. This UI can fit into any compact mobile screen. The hierarchy of menu items allows you to navigate from a primary color to pick from its shades in the next level. Populating a primary color in first-level radial menus and populating its shades as submenus will look like the following UI.

<figure>

  <img src="https://blog.syncfusion.com/wp-content/uploads/2019/05/Radial-Menu-300x154.jpg" alt="Xamarin.Forms Radial Menu as Color Picker" style="width:100%">

  <figcaption>Xamarin.Forms Radial Menu as Color Picker</figcaption>
</figure>

The following code illustrates the Xamarin.Forms [Radial Menu](https://www.syncfusion.com/xamarin-ui-controls/radial-menu) control populated with primary colors with their shades as subitems.

```xml
<sfradialmenu:SfRadialMenu  CenterButtonBackgroundColor="#383838" >
    <sfradialmenu:SfRadialMenu.Items>
        <sfradialmenu:SfRadialMenuItem BackgroundColor="#FF0000">
            <sfradialmenu:SfRadialMenuItem.Items> <sfradialmenu:SfRadialMenuItem BackgroundColor="#FF0000" /> <sfradialmenu:SfRadialMenuItem BackgroundColor="#FF1E1E" /> <sfradialmenu:SfRadialMenuItem BackgroundColor="#FF3C3C" />  <sfradialmenu:SfRadialMenuItem BackgroundColor="#FF5A5A" />  <sfradialmenu:SfRadialMenuItem BackgroundColor="#FF7878" />  <sfradialmenu:SfRadialMenuItem BackgroundColor="#FF9696" />  <sfradialmenu:SfRadialMenuItem BackgroundColor="#FFB4B4" />  <sfradialmenu:SfRadialMenuItem BackgroundColor="#FFD2D2" /> <sfradialmenu:SfRadialMenuItem BackgroundColor="#FFF0F0" /> </sfradialmenu:SfRadialMenuItem.Items>
        </sfradialmenu:SfRadialMenuItem>
        <sfradialmenu:SfRadialMenuItem BackgroundColor="#FFFF00">
            <sfradialmenu:SfRadialMenuItem.Items> <sfradialmenu:SfRadialMenuItem BackgroundColor="#FFFF00" /> <sfradialmenu:SfRadialMenuItem BackgroundColor="#FFFF1E" /> <sfradialmenu:SfRadialMenuItem BackgroundColor="#FFFF3C" />  <sfradialmenu:SfRadialMenuItem BackgroundColor="#FFFF5A" /> <sfradialmenu:SfRadialMenuItem BackgroundColor="#FFFF78" />  <sfradialmenu:SfRadialMenuItem BackgroundColor="#FFFFB4" /> <sfradialmenu:SfRadialMenuItem BackgroundColor="#FFFFD2" /> <sfradialmenu:SfRadialMenuItem BackgroundColor="#FFFFF0" /> </sfradialmenu:SfRadialMenuItem.Items>
        </sfradialmenu:SfRadialMenuItem>
        <sfradialmenu:SfRadialMenuItem BackgroundColor="#00FF00">
            <sfradialmenu:SfRadialMenuItem.Items> <sfradialmenu:SfRadialMenuItem BackgroundColor="#00FF00" /> <sfradialmenu:SfRadialMenuItem BackgroundColor="#1EFF1E" /> <sfradialmenu:SfRadialMenuItem BackgroundColor="#3CFF3C" />  <sfradialmenu:SfRadialMenuItem BackgroundColor="#78FF78" /> <sfradialmenu:SfRadialMenuItem BackgroundColor="#96FF96" /> <sfradialmenu:SfRadialMenuItem BackgroundColor="#B4FFB4" /> <sfradialmenu:SfRadialMenuItem BackgroundColor="#D2FFD2" /> <sfradialmenu:SfRadialMenuItem BackgroundColor="#F0FFF0" /> </sfradialmenu:SfRadialMenuItem.Items>
        </sfradialmenu:SfRadialMenuItem>
        <sfradialmenu:SfRadialMenuItem BackgroundColor="#00FFFF">
            <sfradialmenu:SfRadialMenuItem.Items> <sfradialmenu:SfRadialMenuItem BackgroundColor="#00FFFF" /> <sfradialmenu:SfRadialMenuItem BackgroundColor="#1EFFFF" /> <sfradialmenu:SfRadialMenuItem BackgroundColor="#3CFFFF" /> <sfradialmenu:SfRadialMenuItem BackgroundColor="#78FFFF" /> <sfradialmenu:SfRadialMenuItem BackgroundColor="#96FFFF" /> <sfradialmenu:SfRadialMenuItem BackgroundColor="#B4FFFF" /> <sfradialmenu:SfRadialMenuItem BackgroundColor="#D2FFFF" /> <sfradialmenu:SfRadialMenuItem BackgroundColor="#F0FFFF" /> </sfradialmenu:SfRadialMenuItem.Items>
        </sfradialmenu:SfRadialMenuItem>
        <sfradialmenu:SfRadialMenuItem BackgroundColor="#0000FF">
            <sfradialmenu:SfRadialMenuItem.Items> <sfradialmenu:SfRadialMenuItem BackgroundColor="#0000FF" /> <sfradialmenu:SfRadialMenuItem BackgroundColor="#1E1EFF" /> <sfradialmenu:SfRadialMenuItem BackgroundColor="#3C3CFF" /> <sfradialmenu:SfRadialMenuItem BackgroundColor="#7878FF" /> <sfradialmenu:SfRadialMenuItem BackgroundColor="#9696FF" /> <sfradialmenu:SfRadialMenuItem BackgroundColor="#B4B4FF" /> <sfradialmenu:SfRadialMenuItem BackgroundColor="#D2D2FF" /> <sfradialmenu:SfRadialMenuItem BackgroundColor="#F0F0FF" /> </sfradialmenu:SfRadialMenuItem.Items> 
        </sfradialmenu:SfRadialMenuItem>
        <sfradialmenu:SfRadialMenuItem BackgroundColor="#FF00FF">
            <sfradialmenu:SfRadialMenuItem.Items> <sfradialmenu:SfRadialMenuItem BackgroundColor="#FF00FF" /> <sfradialmenu:SfRadialMenuItem BackgroundColor="#FF1EFF" /> <sfradialmenu:SfRadialMenuItem BackgroundColor="#FF3CFF" /> <sfradialmenu:SfRadialMenuItem BackgroundColor="#FF78FF" /> <sfradialmenu:SfRadialMenuItem BackgroundColor="#FF96FF" /> <sfradialmenu:SfRadialMenuItem BackgroundColor="#FFB4FF" /> <sfradialmenu:SfRadialMenuItem BackgroundColor="#FFD2FF" /> <sfradialmenu:SfRadialMenuItem BackgroundColor="#FFF0FF" /> </sfradialmenu:SfRadialMenuItem.Items>
        </sfradialmenu:SfRadialMenuItem>
    </sfradialmenu:SfRadialMenu.Items>
</sfradialmenu:SfRadialMenu>
```

## Xamarin.Forms Range Slider as a color picker

The Xamarin.Forms [Range Slider](https://www.syncfusion.com/xamarin-ui-controls/range-slider) helps the user pick a color by defining the RGB value. Three range slider controls represent the RGB color code and the selection is restricted to between 0 and 255.

<figure>

  <img src="https://blog.syncfusion.com/wp-content/uploads/2019/05/Range-Slider-300x217.jpg" alt="Xamarin.Forms Range Slider as Color Picker" style="width:100%">

  <figcaption>Xamarin.Forms Range Slider as Color Picker</figcaption>

</figure>

The following code illustrates how three Xamarin.Forms [Range Slider](https://www.syncfusion.com/xamarin-ui-controls/range-slider) controls made the previous UI.

```xml
<ContentView.Resources>
        <Style TargetType="sfrangeslider:SfRangeSlider">
            <Setter Property="Orientation" Value="Horizontal"/>
            <Setter Property="ShowValueLabel" Value="False"/>
            <Setter Property="ShowRange" Value="False"/>
            <Setter Property="TrackSelectionThickness" Value="2"/>
            <Setter Property="TrackThickness" Value="1"/>
            <Setter Property="TickFrequency" Value="255"/>
            <Setter Property="StepFrequency" Value="1"/>
            <Setter Property="TickPlacement" Value="None"/>
            <Setter Property="ThumbSize" Value="20"/>
            <Setter Property="Minimum" Value="0"/>
            <Setter Property="Maximum" Value="255"/>
        </Style>
</ContentView.Resources>
 
<sfrangeslider:SfRangeSlider  Value="{Binding RValue, Mode=TwoWay}"
                              TrackColor="#77FF0000"
                              KnobColor="#FFFF0000"
                              TrackSelectionColor="#CCFF0000"/>
 
<sfrangeslider:SfRangeSlider  Value="{Binding GValue, Mode=TwoWay}"
                              TrackColor="#7700FF00"
                              KnobColor="#FF00FF00"
                              TrackSelectionColor="#CC00FF00"/>
 
<sfrangeslider:SfRangeSlider  Value="{Binding BValue, Mode=TwoWay}"
                              TrackColor="#770000FF"
                              KnobColor="#FF0000FF"
                              TrackSelectionColor="#CC0000FF"/>

```

## Xamarin.Forms Segmented control as a color picker

The Xamarin.Forms [Segmented Control](https://www.syncfusion.com/xamarin-ui-controls/segmented-control) provides a linear set of circle tiles, each of which functions as a UI to pick a color. Even though it provides a similar UI to Xamarin.Forms Chips, but it provides selection animation.

<figure>

  <img src="https://blog.syncfusion.com/wp-content/uploads/2019/05/segmented-control-300x47.jpg" alt="Xamarin.Forms Segmented Control as Color Picker" style="width:100%">

  <figcaption>Xamarin.Forms Segmented Control as Color Picker</figcaption>

</figure>

The following code illustrates the Xamarin.Forms [Segmented Control](https://www.syncfusion.com/xamarin-ui-controls/segmented-control) populated with color values and bound with segmented items such as a custom view color and customized corners.

```xml
<sfsegmentedcontrol:SfSegmentedControl BackgroundColor="{Binding SelectedColor}"
                                       SegmentHeight="40"
                                       SegmentWidth="40"
                                       SelectedItem="{Binding SelectedItem}"
                                       ItemsSource="{Binding ViewCollection}"
                                       SelectedIndex="{Binding SelectedIndex, Mode=TwoWay}"
                                       SegmentPadding="5">
      <sfsegmentedcontrol:SfSegmentedControl.SelectionIndicatorSettings>
            <sfsegmentedcontrol:SelectionIndicatorSettings Color="#FFFFFF"
                                                           Position="Border"
                                                           CornerRadius="20"/>
      </sfsegmentedcontrol:SfSegmentedControl.SelectionIndicatorSettings>
</sfsegmentedcontrol:SfSegmentedControl>
```

## Summary

In this blog post, we have walked through the [Syncfusion Xamarin.Forms](https://www.syncfusion.com/xamarin-ui-controls/) controls used to create a variety of color picker UIs. The sample for this is available in this [GitHub location](https://github.com/SyncfusionExamples/syncfusion-xamarin-forms-color-picker-demo). We invite you to check out our [Xamarin.Forms controls](https://www.syncfusion.com/xamarin-ui-controls/). You can always [download our free evaluation](https://www.syncfusion.com/downloads/xamarin) to see all these controls in action. You can also explore our samples available on [Google Play](https://play.google.com/store/apps/details?id=com.syncfusion.samplebrowser) and [Microsoft store](https://www.microsoft.com/en-us/p/syncfusion-essential-studio-for-xamarin/9nn069tldzf4). Learn about advanced features in [our documentation](https://help.syncfusion.com/xamarin/).

If you have any questions or require clarification about these controls, please let us know in the comments below. You can also contact us through our [support forum](https://www.syncfusion.com/forums), [Direct-Trac](https://www.syncfusion.com/support/directtrac/), or [Feedback Portal](https://www.syncfusion.com/feedback/xamarin-forms). We are happy to assist you!

The post [5 Different Ways To Visualize A Color Picker Control In Xamarin.Forms](https://blog.syncfusion.com/blogs/post/5-ways-to-create-color-picker-in-xamarin-forms.aspx) appeared first on [Syncfusion Blogs](https://blog.syncfusion.com/blogs).