Skip to main content

Overview

The DaisyColorWheel control displays a circular color wheel where users can select colors by choosing hue (angle around the circle) and saturation (distance from center). It uses the HSL color model and provides both mouse/touch and keyboard interaction.
<DaisyColorWheel 
    Color="{Binding SelectedColor, Mode=TwoWay}"
    Lightness="0.5"
    SelectionSize="12"
    ColorChanged="OnColorChanged" />

Properties

Color
Color
default:"Colors.Red"
Gets or sets the selected color. This property automatically syncs with HslColor and updates the selection marker position.
HslColor
HslColor
default:"new HslColor(0, 1, 0.5)"
Gets or sets the HSL color representation. Changes to this property update the Color property and selection marker.
Lightness
double
default:"0.5"
Gets or sets the lightness value (0-1) for the color wheel display. The wheel shows all hues and saturations at this lightness level. Changing this regenerates the wheel bitmap.
SelectionSize
double
default:"10.0"
Gets or sets the diameter of the selection marker in pixels. The marker consists of three concentric circles to ensure visibility on any color.
SelectionOutlineColor
Color
default:"Colors.White"
Gets or sets the color of the outermost selection marker ring. Use white for dark backgrounds or black for light backgrounds.
ShowCenterLines
bool
default:"false"
Gets or sets whether to display crosshair lines through the center of the wheel for precise alignment.
ColorStep
int
default:"4"
Gets or sets the pixel step for generating the wheel bitmap. Lower values (1-2) produce smoother gradients but slower rendering. Higher values (4-8) render faster with slight banding.
OnColorChanged
Action<Color>
Gets or sets an optional callback invoked when the color changes. This provides a simpler alternative to the ColorChanged event.
<DaisyColorWheel OnColorChanged="{x:Bind HandleColorChange}" />
AccessibleText
string
Gets or sets custom accessibility text for screen readers. If not set, defaults to “Color wheel H S ”.

Events

ColorChanged
EventHandler<ColorChangedEventArgs>
Occurs when the selected color changes through user interaction or programmatic updates.
private void OnColorChanged(object sender, ColorChangedEventArgs e)
{
    Debug.WriteLine($"Color changed to: #{e.Color.R:X2}{e.Color.G:X2}{e.Color.B:X2}");
}

Methods

GetColorAtPoint
Color GetColorAtPoint(Point point)
Returns the color at the specified point on the wheel, or Colors.Transparent if the point is outside the wheel radius.
var point = new Point(100, 100);
var color = colorWheel.GetColorAtPoint(point);

Keyboard Navigation

The color wheel supports full keyboard navigation:
  • Arrow Keys: Adjust hue (Left/Right by 5°) and saturation (Up/Down by 5%)
  • Home/End: Jump to 0° or 359° hue
  • Page Up/Down: Adjust saturation by 10%
  • Enter/Space: Step hue forward by 5°

HSL Color Model

The color wheel uses the HSL (Hue, Saturation, Lightness) color model:
  • Hue (H): 0-359 degrees around the color wheel (0=red, 120=green, 240=blue)
  • Saturation (S): 0-1, distance from center (0=gray, 1=full color)
  • Lightness (L): 0-1, controlled by the Lightness property (0=black, 0.5=pure color, 1=white)

Converting Between RGB and HSL

// RGB to HSL
var rgbColor = Colors.Red;
var hslColor = new HslColor(rgbColor);
Debug.WriteLine($"H:{hslColor.H} S:{hslColor.S} L:{hslColor.L}");

// HSL to RGB
var hsl = new HslColor(120, 1.0, 0.5); // Pure green
Color rgb = hsl.ToRgbColor();

// Adjust lightness while preserving hue/saturation
var darkerColor = HslColor.HslToRgb(hslColor.H, hslColor.S, 0.3);

Examples

Basic Color Selection

<DaisyColorWheel 
    Width="200" 
    Height="200"
    Color="{Binding SelectedColor, Mode=TwoWay}"
    ColorChanged="OnWheelColorChanged" />

Custom Lightness Slider

<StackPanel Spacing="12">
    <DaisyColorWheel 
        x:Name="ColorWheel"
        Width="200" 
        Height="200"
        Color="{Binding SelectedColor, Mode=TwoWay}"
        Lightness="{Binding ElementName=LightnessSlider, Path=Value, Mode=OneWay}" />
    
    <StackPanel Orientation="Horizontal" Spacing="8">
        <TextBlock Text="Lightness:" VerticalAlignment="Center" />
        <Slider 
            x:Name="LightnessSlider"
            Minimum="0" 
            Maximum="1" 
            Value="0.5" 
            StepFrequency="0.01"
            Width="150" />
    </StackPanel>
</StackPanel>

High-Quality Rendering

<DaisyColorWheel 
    Width="300" 
    Height="300"
    ColorStep="1"
    SelectionSize="14"
    ShowCenterLines="True"
    Color="{Binding SelectedColor, Mode=TwoWay}" />

Callback Pattern

public sealed partial class ColorPickerPage : Page
{
    public ColorPickerPage()
    {
        InitializeComponent();
    }

    private void HandleColorChange(Color newColor)
    {
        // Update UI or view model
        ColorPreview.Background = new SolidColorBrush(newColor);
    }
}
<DaisyColorWheel OnColorChanged="{x:Bind HandleColorChange}" />

Implementation Notes

  • The wheel bitmap is regenerated when Lightness or ColorStep changes, or when the control is resized
  • The control uses WriteableBitmap for efficient rendering with per-pixel color calculation
  • Selection marker position is calculated from the current HSL values: angle from hue, distance from saturation
  • The control inherits from DaisyBaseContentControl and implements IScalableControl for automatic font scaling

Build docs developers (and LLMs) love