カラー ピッカー

カラー ピッカーは、色を参照し、選ぶために使用します。 既定では、ユーザーはカラー スペクトル上の色間を移動したり、Red-Green-Blue (RGB)、Hue-Saturation-Value (HSV)、または 16 進テキスト ボックスで色を指定したりできます。

これは適切なコントロールですか?

アプリでユーザーが色を選べるようにするには、カラー ピッカーを使います。 たとえば、フォントの色、背景、またはアプリのテーマの色など、色の設定を変更するために、カラー ピッカーを使います。

ペンを使って絵を描くなどのタスクを実行するアプリの場合は、カラー ピッカーと併せてインク コントロールも使うことを検討してください。

推奨事項

• アプリに適した色選択エクスペリエンスの種類について考えます。 シナリオによっては、細かい設定をして色を選ぶ必要がなく、シンプルなピッカーが便利な場合があります。
• 最も正確に色を選べるようにするには、256 x 256 ピクセル以上に正方形を使うか、ユーザーが選択した色を調整できるようにテキスト入力フィールドを含めます。
• ポップアップで使う場合は、スペクトルをタップするか、スライダーを調節しただけでは、色の選択が確定されないようにします。 選択を確定するには、次のように対応します。
  • 選択内容の適用や取り消しを行う確定ボタンとキャンセル ボタンを提供します。 戻るボタンを押すか、ポップアップ外の領域をタップすると、ポップアップを閉じます。ユーザーの選択内容は保存されません。
  • または、ポップアップ外の領域をタップするか、戻るボタンを押すと、ポップアップを閉じ、ユーザーの選択内容を適用します。

UWP と WinUI 2

重要

この記事の情報と例は、Windows アプリ SDKと WinUI 3 を使用するアプリ向けに最適化されていますが、一般に WinUI 2 を使用する UWP アプリに適用されます。 プラットフォーム固有の情報と例については、UWP API リファレンスを参照してください。

このセクションには、UWP または WinUI 2 アプリでコントロールを使用するために必要な情報が含まれています。

UWP アプリの ColorPicker コントロールは、Windows UI ライブラリ 2 の一部として含まれています。 インストール手順などについて詳しくは、「Windows UI Library (Windows UI ライブラリ)」をご覧ください。 このコントロールの API は、Windows.UI.Xaml.Controls と Microsoft.UI.Xaml.Controls 名前空間の両方に存在します。

• UWP API:ColorPicker クラス、 Color プロパティ、 ColorChanged イベント
• WinUI 2 Apis:ColorPicker クラス、 Color プロパティ、 ColorChanged イベント
• WinUI 2 ギャラリー アプリを開き、ColorPicker の動作を確認します。 WinUI 2 ギャラリー アプリには、ほとんどの WinUI 2 コントロールと機能の対話型の例が含まれています。 Microsoft Store からアプリを入手するか、GitHub でソース コードを取得します。

最新の WinUI 2 を使用して、すべてのコントロールの最新のスタイル、テンプレート、および機能を取得することをお勧めします。 WinUI 2.2 以降には、丸い角を使用するこのコントロール用の新しいテンプレートが含まれています。 詳しくは、「角の半径」をご覧ください。

WinUI 2 でこの記事のコードを使用するには、XAML のエイリアスを使って (ここでは muxc を使用)、プロジェクトに含まれる Windows UI ライブラリ API を表します。 詳細については、「WinUI 2 の概要」を参照してください。

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:ColorPicker />

カラー ピッカーを作成する

• 重要な API:ColorPicker クラス、 Color プロパティ、 ColorChanged イベント

WinUI 3 ギャラリー アプリを開き、ColorPicker の動作を確認します。

WinUI 3 ギャラリー アプリには、ほとんどの WinUI 3 コントロールと機能の対話型の例が含まれています。 Microsoft Store からアプリを入手するか、GitHub でソース コードを取得します。

次の例は、XAML で既定のカラー ピッカーを作成する方法を示しています。

<ColorPicker x:Name="myColorPicker"/>

既定では、カラー ピッカーは、カラー スペクトルの横にある長方形のバーに、選択された色のプレビューを示します。 アプリ内で選択された色にアクセスし、その色を使うには、ColorChanged イベントか Color プロパティを使います。 詳しいコードについては、これ以降の例を参照してください。

選択された色にバインドする

選択した色がすぐに反映される必要がある場合は、コードで、データ バインディングを使って Color プロパティにバインドするか、ColorChanged イベントを処理して選択した色にアクセスします。

次の例では、Rectangle の Fill として使われている SolidColorBrush の Color プロパティを直接カラー ピッカーで選択された色にバインドしています。 カラー ピッカーを変更すると、バインド先のプロパティも直ちに変更されます。

<ColorPicker x:Name="myColorPicker"
             ColorSpectrumShape="Ring"
             IsColorPreviewVisible="False"
             IsColorChannelTextInputVisible="False"
             IsHexInputVisible="False"/>

<Rectangle Height="50" Width="50">
    <Rectangle.Fill>
        <SolidColorBrush Color="{x:Bind myColorPicker.Color, Mode=OneWay}"/>
    </Rectangle.Fill>
</Rectangle>

この例では、よく "簡単" な色選択操作に利用される、円とスライダーだけのシンプルなカラー ピッカーを使っています。 変更が適用されるオブジェクトに、リアルタイムで色の変更が反映される場合は、色のプレビュー バーを表示する必要はありません。 詳しくは「カラー ピッカーをカスタマイズする」のセクションをご覧ください。

選択された色を保存する

色の変更を直ちに適用したくない場合もあります。 たとえば、ポップアップでカラー ピッカーをホストする場合は、ユーザーが選択内容を確認した後、またはポップアップを閉じる場合にのみ、選択した色を適用することをお勧めします。 選択された色の値を保存しておき、後で使うこともできます。

次の例では、確認用とキャンセル用のボタンがあるポップアップ (Flyout) でカラー ピッカーをホストしています。 ユーザーが選択した色でよいことを確認すると、選択された色がアプリで後で使用できるように保存されます。

<Page.Resources>
    <Flyout x:Key="myColorPickerFlyout">
        <RelativePanel>
            <ColorPicker x:Name="myColorPicker"
                         IsColorChannelTextInputVisible="False"
                         IsHexInputVisible="False"/>

            <Grid RelativePanel.Below="myColorPicker"
                  RelativePanel.AlignLeftWithPanel="True"
                  RelativePanel.AlignRightWithPanel="True">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <Button Content="OK" Click="confirmColor_Click"
                        Margin="0,12,2,0" HorizontalAlignment="Stretch"/>
                <Button Content="Cancel" Click="cancelColor_Click"
                        Margin="2,12,0,0" HorizontalAlignment="Stretch"
                        Grid.Column="1"/>
            </Grid>
        </RelativePanel>
    </Flyout>
</Page.Resources>

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Button x:Name="colorPickerButton"
            Content="Pick a color"
            Flyout="{StaticResource myColorPickerFlyout}"/>
</Grid>

private Color myColor;

private void confirmColor_Click(object sender, RoutedEventArgs e)
{
    // Assign the selected color to a variable to use outside the popup.
    myColor = myColorPicker.Color;

    // Close the Flyout.
    colorPickerButton.Flyout.Hide();
}

private void cancelColor_Click(object sender, RoutedEventArgs e)
{
    // Close the Flyout.
    colorPickerButton.Flyout.Hide();
}

カラー ピッカーを構成する

全部のフィールドなくてもユーザーは色を選ぶことができるので、カラー ピッカーは柔軟に扱うことができます。 カラー ピッカーには、ニーズに合わせて構成できるさまざまなオプションがあります。

たとえば、メモ帳アプリで蛍光ペンの色を選ぶなど、正確なコントロールが必要ない場合は、シンプルな UI を採用できます。 テキスト入力フィールドを非表示にし、カラー スペクトルを円形に変更します。

グラフィック デザインアプリなど、正確なコントロールが必要な場合は、色の要素ごとにスライダーとテキスト入力フィールドの両方を提供できます。

円形のスペクトルを表示する

次の例は、ColorSpectrumShape プロパティを使って、カラー ピッカーで既定の正方形ではなく円形のスペクトルを使うように構成する方法を示しています。

<ColorPicker x:Name="myColorPicker"
             ColorSpectrumShape="Ring"/>

スペクトルを正方形と円形のどちらにするかを選ぶ必要がある場合、正確性が主な判断材料の 1 つになります。 表示される色域の範囲が広いため、正方形を使って特定の色を選択すると、より正確に色をコントロールできます。 "簡単" に色を選択できることを優先する場合は、円形のスペクトルをお勧めします。

アルファ チャネルを表示する

次の例では、カラー ピッカーで不透明度のスライダーとテキスト ボックスを提供します。

<ColorPicker x:Name="myColorPicker"
             IsAlphaEnabled="True"/>

シンプルなピッカーを表示する

次の例では、"簡単" な操作向けのシンプルな UI でカラー ピッカーを構成する方法を示しています。 円形のスペクトルを表示し、既定のテキスト入力ボックスは非表示にしています。 変更が適用されるオブジェクトに、リアルタイムで色の変更が反映される場合は、色のプレビュー バーを表示する必要はありません。 そうでない場合は、色のプレビューは表示したままにします。

<ColorPicker x:Name="myColorPicker"
             ColorSpectrumShape="Ring"
             IsColorPreviewVisible="False"
             IsColorChannelTextInputVisible="False"
             IsHexInputVisible="False"/>

レイアウト方向を指定する

Orientation プロパティを使用して、ColorPicker を垂直方向と水平方向のどちらに整列させるかを指定します。 これは、カラー スペクトルに対する編集コントロールの位置に影響します。 既定では、向きは Vertical です。

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

注意

Orientation が Horizontal に設定されている場合、ColorPicker は IsMoreButtonVisible プロパティを適用 "しません"。

追加の機能を表示または非表示にする

ColorPicker コントロールの構成に使うことができるすべてのオプションを次の表に示します。

機能	プロパティ
カラー スペクトル	IsColorSpectrumVisible、ColorSpectrumShape、ColorSpectrumComponents
色のプレビュー	IsColorPreviewVisible
色の値	IsColorSliderVisible、IsColorChannelTextInputVisible
不透明度の値	IsAlphaEnabled、IsAlphaSliderVisible、IsAlphaTextInputVisible
16 進値	IsHexInputVisible

注意

不透明度のテキスト ボックスとスライダーを表示する場合は、IsAlphaEnabled を true に設定する必要があります。 この設定にすると、IsAlphaTextInputVisible プロパティと IsAlphaSliderVisible プロパティを使って、入力コントロールの表示を変更できるようになります。 詳しくは、API ドキュメントをご覧ください。

サンプル コードを入手する

• WinUI ギャラリーのサンプル - すべての XAML コントロールを対話型形式で表示します。

関連記事

• Windows アプリのペン操作とスタイラス操作
• 手描き入力