Proposal: ColorPicker horizontal mode

API spec proposal: https://github.com/microsoft/microsoft-ui-xaml-specs/pull/53

Proposal: ColorPicker horizontal mode

Summary

The current layout of the ColorPicker is mainly designed to grow in height. However in some cases, it may be better to have the ColorPicker to be wide, not high.

Rationale

• In cases were height is limited, the ColorPicker is problematic to use
• Retemplating the whole control would not be that simple, since we need to completely reorganize the layout
• A horizontal ColorPicker may be easier to integrate due to the fact, that most content and screens are wide

Scope

Capability	Priority
Developers have the possibilities to use ColorPickers where height is very limited, but width is not	Must
The ColorPicker has a display mode, similiar to NavigationView where the developer can specify wether it should layout vertically or horizontally	Should

Important Notes

Open Questions

Examples

A standard ColorPicker using Orientation “Vertical”

<muxc:ColorPicker IsAlphaEnabled="True" Orientation="Vertical"/>

Standard ColorPicker using Orientation “Horizontal”

<muxc:ColorPicker IsAlphaEnabled="True" Orientation="Horizontal"/>

Remarks

API Notes

Orientation: The orientation determining wether to display horizontally or vertically.

API Details

[webhosthidden]
unsealed runtimeclass ColorPicker
{
    /// Gets or sets the DisplayMode of the ColorPicker
    Windows.UI.Xaml.Controls.Orientation Orientation = Windows.UI.Xaml.Controls.Orientation.Vertical;
}

[gabbybilka]

Hey folks,

As you may have seen with the opening of this spec we have re-invested into this feature to add an additional Orientation property to ColorPicker to support a horizontal layout. We are aiming to include this in WinUI 2.7. Thank you to @chingucoding for hopping in to help spec and develop this feature! 🎉

[mdtauk]

Good memory recall @robloo

If the Suffix/Prefix feature for the TextBox is accepted #784 They could be used to further minify the ColorPicker