カラー ピッカーColor picker

カラー ピッカーは、色を参照し、選ぶために使用します。A color picker is used to browse through and select colors. 既定では、ユーザーはカラー ピッカーを使って、カラー スペクトルで色を参照するか、Red-Green-Blue (RGB)、Hue-Saturation-Value (HSV)、または 16 進数のテキスト ボックスのいずれかで色を指定できます。By default, it lets a user navigate through colors on a color spectrum, or specify a color in either Red-Green-Blue (RGB), Hue-Saturation-Value (HSV), or Hexadecimal textboxes.

重要な API:ColorPicker クラスColor プロパティColorChanged イベントImportant APIs: ColorPicker class, Color property, ColorChanged event

既定のカラー ピッカー

適切なコントロールの選択Is this the right control?

アプリでユーザーが色を選べるようにするには、カラー ピッカーを使います。Use the color picker to let a user select colors in your app. たとえば、フォントの色、背景、またはアプリのテーマの色など、色の設定を変更するために、カラー ピッカーを使います。For example, use it to change color settings, such as font colors, background, or app theme colors.

ペンを使って絵を描くなどのタスクを実行するアプリの場合は、カラー ピッカーと併せてインク コントロールも使うことを検討してください。If your app is for drawing or similar tasks using pen, consider using Inking controls along with the color picker.

Examples

XAML コントロール ギャラリーXAML Controls Gallery
XAML controls gallery

XAML コントロール ギャラリー アプリがインストールされている場合、こちらをクリックしてアプリを開き、ColorPicker の動作を確認してください。If you have the XAML Controls Gallery app installed, click here to open the app and see the ColorPicker in action.

カラー ピッカーを作成するCreate a color picker

次の例は、XAML で既定のカラー ピッカーを作成する方法を示しています。This example shows how to create a default color picker in XAML.

<ColorPicker x:Name="myColorPicker"/>

既定では、カラー ピッカーは、カラー スペクトルの横にある長方形のバーに、選択された色のプレビューを示します。By default, the color picker shows a preview of the chosen color on the rectangular bar beside the color spectrum. アプリ内で選択された色にアクセスし、その色を使うには、ColorChanged イベントか Color プロパティを使います。You can use either the ColorChanged event or the Color property to access the selected color and use it in your app. 詳しいコードについては、これ以降の例を参照してください。See the following examples for detailed code.

選択された色にバインドするBind to the chosen color

選択した色がすぐに反映される必要がある場合は、コードで、データ バインディングを使って Color プロパティにバインドするか、ColorChanged イベントを処理して選択した色にアクセスします。When the color selection should take effect immediately, you can either use databinding to bind to the Color property, or handle the ColorChanged event to access the selected color in your code.

次の例では、Rectangle の Fill として使われている SolidColorBrush の Color プロパティを直接カラー ピッカーで選択された色にバインドしています。In this example, you bind the Color property of a SolidColorBrush that’s used as the Fill for a Rectangle directly to the color picker’s selected color. カラー ピッカーを変更すると、バインド先のプロパティも直ちに変更されます。Any change to the color picker results in a live change to the bound property.

<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>

この例では、よく "簡単" な色選択操作に利用される、円とスライダーだけのシンプルなカラー ピッカーを使っています。This example uses a simplified color picker with just the circle and the slider, which is a common "casual" color picking experience. 変更が適用されるオブジェクトに、リアルタイムで色の変更が反映される場合は、色のプレビュー バーを表示する必要はありません。When the color change can be seen and happens in real-time on the affected object, you don't need to show the color preview bar. 詳しくは「カラー ピッカーをカスタマイズする」のセクションをご覧ください。See the Customize the color picker section for more info.

選択された色を保存するSave the chosen color

色の変更を直ちに適用したくない場合もあります。In some cases, you don't want to apply the color change immediately. たとえば、ポップアップでカラー ピッカーをホストする場合は、ユーザーが選択内容を確認して、ポップアップを閉じてから、選択された色を適用することをお勧めします。For example, when you host a color picker in a flyout, we recomend that you apply the selected color only after the user confirms the selection or closes the flyout. 選択された色の値を保存しておき、後で使うこともできます。You can also save the selected color value to use later.

次の例では、確認用とキャンセル用のボタンがあるポップアップ (Flyout) でカラー ピッカーをホストしています。In this example, you host a color picker in a Flyout with Confirm and Cancel buttons. ユーザーが選択した色でよいことを確認すると、選択された色がアプリで後で使用できるように保存されます。When the user confirms their color choice, you save the selected color to use later in your app.

<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();
}

カラー ピッカーを構成するConfigure the color picker

全部のフィールドなくてもユーザーは色を選ぶことができるので、カラー ピッカーは柔軟に扱うことができます。Not all fields are necessary to let a user pick a color, so the color picker is flexible. カラー ピッカーには、ニーズに合わせて構成できるさまざまなオプションがあります。It provides a variety of options that let you configure the control to fit your needs.

たとえば、メモ帳アプリで蛍光ペンの色を選ぶなど、正確なコントロールが必要ない場合は、シンプルな UI を採用できます。For example, when the user doesn't need precise control, like picking a highlighter color in a note taking app, you can use a simplified UI. テキスト入力フィールドを非表示にし、カラー スペクトルを円形に変更します。You can hide the text entry fields and change the color spectrum to a circle.

グラフィック デザインアプリなど、正確なコントロールが必要な場合は、色の要素ごとにスライダーとテキスト入力フィールドの両方を提供できます。When the user does need precise control, like in a graphic design app, you can show both sliders and text entry fields for each aspect of the color.

円形のスペクトルを表示するShow the circle spectrum

次の例は、ColorSpectrumShape プロパティを使って、カラー ピッカーで既定の正方形ではなく円形のスペクトルを使うように構成する方法を示しています。This example shows how to use the ColorSpectrumShape property to configure the color picker to use a circular spectrum instead of the default square.

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

円形のスペクトルを表示するカラー ピッカー

スペクトルを正方形と円形のどちらにするかを選ぶ必要がある場合、正確性が主な判断材料の 1 つになります。When you must choose between the square and circle color spectrum, a primary consideration is accuracy. 表示される色域の範囲が広いため、正方形を使って特定の色を選択すると、より正確に色をコントロールできます。A user has more control when they select a specific color using a square because more of the color gamut is shown. "簡単" に色を選択できることを優先する場合は、円形のスペクトルをお勧めします。You should consider the circle spectrum as more of the "casual" color choosing experience.

アルファ チャネルを表示するShow the alpha channel

次の例では、カラー ピッカーで不透明度のスライダーとテキスト ボックスを提供します。In this example, you enable an opacity slider and textbox on the color picker.

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

IsAlphaEnabled を true に設定したカラー ピッカー

シンプルなピッカーを表示するShow a simple picker

次の例では、"簡単" な操作向けのシンプルな UI でカラー ピッカーを構成する方法を示しています。This example shows how to configure the color picker with a simple UI for "casual" use. 円形のスペクトルを表示し、既定のテキスト入力ボックスは非表示にしています。You show the circular spectrum and hide the default text input boxes. 変更が適用されるオブジェクトに、リアルタイムで色の変更が反映される場合は、色のプレビュー バーを表示する必要はありません。When the color change can be seen and happens in real-time on the affected object, you don't need to show the color preview bar. そうでない場合は、色のプレビューは表示したままにします。Otherwise, you should leave the color preview visible.

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

シンプルなカラー ピッカー

追加の機能を表示または非表示にするShow or hide additional features

ColorPicker コントロールの構成に使うことができるすべてのオプションを次の表に示します。This table shows all the options you can use to configure the ColorPicker control.

機能Feature プロパティProperties
カラー スペクトルColor spectrum IsColorSpectrumVisible、ColorSpectrumShape、ColorSpectrumComponentsIsColorSpectrumVisible, ColorSpectrumShape, ColorSpectrumComponents
色のプレビューColor preview IsColorPreviewVisibleIsColorPreviewVisible
色の値Color values IsColorSliderVisible、IsColorChannelTextInputVisibleIsColorSliderVisible, IsColorChannelTextInputVisible
不透明度の値Opacity values IsAlphaEnabled、IsAlphaSliderVisible、IsAlphaTextInputVisibleIsAlphaEnabled, IsAlphaSliderVisible, IsAlphaTextInputVisible
16 進値Hex values IsHexInputVisibleIsHexInputVisible

注意

不透明度のテキスト ボックスとスライダーを表示する場合は、IsAlphaEnabled を true に設定する必要があります。IsAlphaEnabled must be true in order to show the opacity textbox and slider. この設定にすると、IsAlphaTextInputVisible プロパティと IsAlphaSliderVisible プロパティを使って、入力コントロールの表示を変更できるようになります。The visibility of the input controls can then be modified using IsAlphaTextInputVisible and IsAlphaSliderVisible properties. 詳しくは、API ドキュメントをご覧ください。See the API documentation for details.

推奨と非推奨Do's and Don'ts

  • アプリにはどのような色選択操作が適しているかを考えます。Do think about what kind of color picking experience is appropriate for your app. シナリオによっては、細かい設定をして色を選ぶ必要がなく、シンプルなピッカーが便利な場合があります。Some scenarios may not require granular color picking and would benefit from a simplified picker
  • 最も正確に色を選べるようにするには、256 x 256 ピクセル以上に正方形を使うか、ユーザーが選択した色を調整できるようにテキスト入力フィールドを含めます。For the most accurate color picking experience, use the square spectrum and ensure it is at least 256x256px, or include the text input fields to let users refine their selected color.
  • ポップアップで使う場合は、スペクトルをタップするか、スライダーを調節しただけでは、色の選択が確定されないようにします。When used in a flyout, tapping in the spectrum or adjusting the slider alone should not commit the color selection. 選択を確定するには、次のように対応します。To commit the selection:
    • 選択内容の適用や取り消しを行う確定ボタンとキャンセル ボタンを提供します。Provide commit and cancel buttons to apply or cancel the selection. 戻るボタンを押すか、ポップアップ外の領域をタップすると、ポップアップを閉じます。ユーザーの選択内容は保存されません。Hitting the back button or tapping outside of the flyout will dismiss it, and not save the user’s selection.
    • または、ポップアップ外の領域をタップするか、戻るボタンを押すと、ポップアップを閉じ、ユーザーの選択内容を適用します。Or, commit the selection upon dismissing the flyout, by either tapping outside of the flyout or hitting the back button.

サンプル コードを入手するGet the sample code