Version

Configuring Selected Color (xamColorPicker)

Topic Overview

Purpose

This topic describes how to identify and modify the selected color in the xamColorPicker™ control.

Required background

The following topics are prerequisites to understanding this topic:

Topic Purpose

This topic describes how to add a xamColorPicker control to your page using XAML and procedural code.

User Interactions and Usability

User interactions summary chart

The following table summarizes the user interaction capabilities of the xamColorPicker control related to the color selection.

The user can… Using… Configurable?

Select a color from the Current Color Palette, the Derived Color Palette or the Recent Color Palette

Mouse click

No.png

Preview a color from the Current Color Palette, the Derived Color Palette or the Recent Color Palette

Hover over a color

No.png

Select a color from the Advanced editor and click the OK button

Mouse click

Restore the previous selected color

ESC key

No.png

Restore the previous selected color

Mouse click outside of the editor

No.png

Configuring the Selected Color

Overview

Use the xamColorPicker SelectedColor property to get/set the currently selected color.

Note
Note

After selecting a particular color, this color is added to the Recent Color Palette.

Property settings

The following table maps the desired configuration to the property settings that manage it.

In order to: Use this property: And set it to:

Specify the selected color

Color?

Example

The screenshot below demonstrates how the xamColorPicker would look as a result of the following settings:

Property Value

Blue

Selected Color 6.png

Following is the code that implements this example.

In XAML:

<ig:XamColorPicker SelectedColor="Blue" Height="30" Width="150" />

In C#:

var colorPicker = new XamColorPicker {SelectedColor = Colors.Blue, Height = 30, Width = 150};

In Visual Basic:

Dim colorPicker = New XamColorPicker() With
{
            .SelectedColor = Colors.Blue,
            .Height = 30,
            .Width = 150
}

Using the SelectedColorChanged Event

Overview

The SelectedColorChanged event is fired when the selected color within the xamColorPicker is changed.

It is fired when a user clicks on a specific color in some of the xamColorPicker Palettes.

This event receives an argument of type SelectedColorChangedEventArgs that provides information about the new and previous selected color.

Previewing the Selected Color

Use the xamColorPicker SelectedColorPreview property to identify the color that is currently being hovered.

This property is updated every time a user hovers over a color from the Current Color Palette, the Derived Color Palette, the Recent Color Palette or the palette in the Advanced editor.

In case the user isn’t hovering over colors, the SelectedColorPreview value is the same as the SelectedColor value.

Property settings

The following table maps the desired behavior to the property settings that manage it.

In order to: Use this property: And set it to:

Preview the selected color on mouse hover

Color?

Related Topics

The following topics provide additional information related to this topic.

Topic Purpose

This topic describes the advanced editor section of the xamColorPicker control that allows the user to select a color that is not available in the palette that is supplied.

This topic describes the palettes in the xamColorPicker control.

This topic describes how to create a custom palette in the xamColorPicker control.