Skip to content

[Feature] Add a Reimagined Color Picker #3363

Closed

Description

The current WinUI ColorPicker has some deficiencies:

  1. #1637 It is a big control without an adaptive layout. There is no way to switch between horizontal or vertical mode based on available space.
  2. #2309 It does not follow the 'Picker' convention by having a preview button that can be pressed to open an editing flyout
  3. #1659 There is no way to select from a pre-existing list of swatches.
  4. The existing ColorPicker doesn't use NumberBox

Describe the solution

A brand new ColorSwatchPicker control (deriving from ColorPicker) with a totally redesigned layout:

  • Spectrum | to visually select a color on the color spectrum
  • Swatches/Palette | to select a pre-defined color from a palette. This could be from a system colors list, a recent colors list, or a custom-developer supplied list of colors. A configuration will be added so the swatches can be a circle or square.
  • Channels | to create a color using numerical component values. Sliders will be added for each component along with NumberBoxes.

The ColorSwatchPicker will appear as a drop-down button previewing the selected color with a totally redesigned picker within the flyout to edit it.

A custom color pallete (list of swatches) is now supported as well using three properties (and their associated DPs):

        /// <summary>
        /// Gets the list of custom palette colors.
        /// </summary>
        public ObservableCollection<Windows.UI.Color> CustomPaletteColors { get; }

        /// <summary>
        /// Gets or sets the number of colors in each section of the custom color palette.
        /// A section is the number of columns within an entire row in the palette.
        /// Within a standard palette, rows are shades and columns are unique colors.
        /// </summary>
        public int CustomPaletteSectionCount { get; set; }

        /// <summary>
        /// Gets or sets a custom IPalette.
        /// This will automatically set <see cref="CustomPaletteColors"/> and <see cref="CustomPaletteSectionCount"/> 
        /// overwriting any existing values.
        /// </summary>
        public IColorPalette CustomPalette { get; set; }

This requires the implementation of a new interface which I feel is useful enough to be general purpose.

    /// <summary>
    /// Interface to define a color palette.
    /// </summary>
    public interface IColorPalette
    {
        /// <summary>
        /// Gets the total number of colors in this palette.
        /// A color is not necessarily a single value and may be composed of several shades.
        /// </summary>
        int ColorCount { get; }

        /// <summary>
        /// Gets the total number of shades for each color in this palette.
        /// Shades are usually a variation of the color lightening or darkening it.
        /// </summary>
        int ShadeCount { get; }

        /// <summary>
        /// Gets a color in the palette by index.
        /// </summary>
        /// <param name="colorIndex">The index of the color in the palette.
        /// The index must be between zero and <see cref="ColorCount"/>.</param>
        /// <param name="shadeIndex">The index of the color shade in the palette.
        /// The index must be between zero and <see cref="ShadeCount"/>.</param>
        /// <returns>The color at the specified index or an exception.</returns>
        Color GetColor(int colorIndex, int shadeIndex);
    }

Describe alternatives you've considered

The alternative is to modify ColorPicker directly but these changes are too far reaching for existing users of the ColorPicker. Its better to implement this as a brand new control.

Additional context & Screenshots

Below is the implementation of ColorSwatchPicker. Functionally, it is complete as proposed. With styling further work is needed around the sliders to dynamically change the background colors (if possible without too much complexity).

example1

Spectrum Palette Channels
Spectrum Palette Channels1
Channels2
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions