ColorPicker

The ColorPicker control lets a user pick a color using a color spectrum, palette, sliders, or text input.

XAML

<!--  Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information.  -->
<Page x:Class="ColorPickerExperiment.Samples.ColorPickerSample"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:controls="using:CommunityToolkit.WinUI.Controls"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:local="using:ColorPickerExperiment.Samples"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      mc:Ignorable="d">

    <Grid>
        <controls:ColorPicker HorizontalAlignment="Center"
                              VerticalAlignment="Top"
                              ColorSpectrumShape="{x:Bind local:ColorPickerSample.ConvertStringToColorSpectrumShape(SpectrumShape), Mode=OneWay}"
                              IsAlphaEnabled="{x:Bind AlphaEnabled, Mode=OneWay}"
                              IsAlphaSliderVisible="{x:Bind AlphaSlider, Mode=OneWay}"
                              IsColorChannelTextInputVisible="{x:Bind ColorChannel, Mode=OneWay}"
                              IsColorPaletteVisible="{x:Bind ColorPalette, Mode=OneWay}"
                              IsColorSliderVisible="{x:Bind ColorSlider, Mode=OneWay}"
                              IsColorSpectrumVisible="{x:Bind SpectrumVisible, Mode=OneWay}"
                              ShowAccentColors="{x:Bind AccentColors, Mode=OneWay}"
                              Color="LightBlue" />
    </Grid>
</Page>

C#

// Licensed to the .NET Foundation under one or more agreements.
// The .NET Foundation licenses this file to you under the MIT license.
// See the LICENSE file in the project root for more information.

using ColorSpectrumShape = Microsoft.UI.Xaml.Controls.ColorSpectrumShape;

namespace ColorPickerExperiment.Samples;

[ToolkitSampleBoolOption("AccentColors", true, Title = "ShowAccentColors")]
[ToolkitSampleBoolOption("AlphaEnabled", true, Title = "IsAlphaEnabled")]
[ToolkitSampleBoolOption("AlphaSlider", true, Title = "IsAlphaSliderVisible")]
[ToolkitSampleBoolOption("ColorSlider", true, Title = "IsColorSliderVisible")]
[ToolkitSampleBoolOption("ColorChannel", true, Title = "IsColorChannelTextInputVisible")]
[ToolkitSampleBoolOption("SpectrumVisible", true, Title = "IsColorSpectrumVisible")]
[ToolkitSampleBoolOption("ColorPalette", true, Title = "IsColorPaletteVisible")]

[ToolkitSampleMultiChoiceOption("SpectrumShape", "Box", "Ring", Title = "ColorSpectrumShape")]

[ToolkitSample(id: nameof(ColorPickerSample), "ColorPicker", description: $"A sample for showing how to create and use a {nameof(CommunityToolkit.WinUI.Controls.ColorPicker)} control.")]
public sealed partial class ColorPickerSample : Page
{
    public ColorPickerSample()
    {
        this.InitializeComponent();
    }

    // TODO: See https://github.com/CommunityToolkit/Labs-Windows/issues/149
    public static ColorSpectrumShape ConvertStringToColorSpectrumShape(string shape) => shape switch
    {
        "Ring" => ColorSpectrumShape.Ring,
        "Box" => ColorSpectrumShape.Box,
        _ => throw new System.NotImplementedException(),
    };
}

ColorPickerButton

The ColorPickerButton variant represents a DropDownButton variant which provides a preview of the selected color and allows a user to expand the drop-down to select a new color.

XAML

<!--  Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information.  -->
<Page x:Class="ColorPickerExperiment.Samples.ColorPickerButtonSample"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:controls="using:CommunityToolkit.WinUI.Controls"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:local="using:ColorPickerExperiment.Samples"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      mc:Ignorable="d">

    <Grid>
        <controls:ColorPickerButton HorizontalAlignment="Center"
                                    VerticalAlignment="Top"
                                    SelectedColor="LightBlue" />
    </Grid>
</Page>

C#

// Licensed to the .NET Foundation under one or more agreements.
// The .NET Foundation licenses this file to you under the MIT license.
// See the LICENSE file in the project root for more information.

using ColorSpectrumShape = Microsoft.UI.Xaml.Controls.ColorSpectrumShape;

namespace ColorPickerExperiment.Samples;

[ToolkitSample(id: nameof(ColorPickerButtonSample), "ColorPickerButton", description: $"A sample for showing how to create and use a {nameof(CommunityToolkit.WinUI.Controls.ColorPickerButton)} control.")]
public sealed partial class ColorPickerButtonSample : Page
{
    public ColorPickerButtonSample()
    {
        this.InitializeComponent();
    }
}