ColorPicker with Gradient Support in WPF ColorPicker

Color Picker now comes with Gradient tool which returns a brush of type Solid, Linear or Radial. The offsets can be added or dropped dynamically and its position can be changed to produce different color combinations.

ColorPicker with Gradient Mode

Interactive features with gradient support

The following are the key features of the ColorPicker with Gradient support.

Brush mode

This property specifies whether Brush is of type Solid or Gradient. The following code snippets illustrate this:

<Syncfusion:ColorPicker x:Name="colorPicker"  BrushMode="Solid"   ></  Syncfusion: ColorPicker >
<Syncfusion: ColorPicker x:Name="colorPicker"  BrushMode="Gradient"   ></  Syncfusion: ColorPicker >
ColorPicker colorPicker = new ColorPicker ();
colorPicker.BrushMode =  BrushModes.Solid;
colorPicker.BrushMode =  BrushModes.Gradient;

ColorPicker with Solid Brush mode

ColorPicker with Solid Gradient mode

Enable solid to gradient switch

This property specifies whether switching between Solid and Gradient BrushMode and vice-versa is enabled at runtime or not.

The following code examples illustrate this:

<Syncfusion: ColorPicker x:Name="colorPicker"  EnableSolidToGradientSwitch="true"   ></  Syncfusion: ColorPicker >
<Syncfusion:ColorEdit x:Name="colorPicker"  EnableSolidToGradientSwitch="false"   ></  Syncfusion: ColorEdit >
ColorPicker colorPicker = new ColorPicker ();
colorPicker.EnableSolidToGradientSwitch =  true;
colorPicker.EnableSolidToGradientSwitch =  false;

when EnableSolidToGradientSwitch property is Enabled

when EnableSolidToGradientSwitch property is disabled

IsGradientPropertyEnabled

ColorPicker with Gradient tool comes with a Gradient Editor to change the Start Point/End Point when Brush is of type LinearGradient and Gradient Origin is Center/Radius, if Brush is of type RadialGradient dynamically. IsGradientPropertyEnabled property specifies whether GradientEditor is made visible or hidden.

The following code example illustrate this:

<Syncfusion:ColorPicker x:Name="colorPicker"  IsGradientEditorEnabled="true"   ></  Syncfusion: ColorPicker >
<Syncfusion: ColorPicker x:Name="colorPicker"  IsGradientEditorEnabled="false"   ></  Syncfusion: ColorPicker >
ColorPicker colorPicker = new ColorPicker ();
colorPicker.IsGradientEditorEnabled =  true;
colorPicker. IsGradientEditorEnabled =  false;

when IsGradientEditorEnabled property is Enabled

when IsGradientEditorEnabled property is Enabled

GradientPropertyEditorMode

The property specifies whether GradientEditor should be displayed as a Popup or in extended mode.

<Syncfusion:ColorPicker x:Name="colorPicker"    GradientPropertyEditorMode="Popup" ></ Syncfusion: ColorPicker >
<Syncfusion: ColorPicker x:Name="colorPicker"  GradientPropertyEditorMode="Extended"  ></Syncfusion: ColorPicker >
ColorPicker colorPicker = new ColorPicker ();
colorPicker.GradientPropertyEditorMode =  GradientPropertyEditorMode.Popup;
colorPicker. GradientPropertyEditorMode =  GradientPropertyEditorMode.Extended;

The GradientEditor is displayed accordingly.

IsAlphaVisible in ColorPicker

ColorPicker now allows you to restrict the change in Alpha value, thus maintaining it as a constant. This can be achieved by setting _IsAlphaVisible_property to false. This collapses the slider which changes the alpha value in RGB mode and text block for editing alpha value is collapsed in HSV mode.

The following code example illustrate this:

<syncfusion:ColorPicker IsAlphaVisible="True"></syncfusion:ColorPicker> 
<syncfusion:ColorPicker IsAlphaVisible="false"></syncfusion:ColorPicker>
ColorPicker colorPicker = new ColorPicker();
colorPicker.IsAlphaVisible = true;
colorPicker.IsAlphaVisible = false;

ColorPicker with Alpha value in Horizontal Alignment

ColorPicker with Alpha value in vertical Alignment

ColorPicker without Alpha value in Horizontal Alignment

ColorPicker without Alpha value in vertical Alignment