색 선택기Color picker

색 선택은 색을 찾아보고 선택하는 데 사용됩니다.A color picker is used to browse through and select colors. 색 선택을 사용하면 사용자가 기본적으로 색 스펙트럼에서 색을 탐색하거나 RGB(Red-Green-Blue), 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.

기본 색 선택

Windows UI 라이브러리 가져오기Get the Windows UI Library

WinUI 로고

ColorPicker 컨트롤은 Windows 앱용 새 컨트롤과 UI 기능을 포함하는 NuGet 패키지인 Windows UI 라이브러리의 일부로 포함되었습니다.The ColorPicker control is included as part of the Windows UI Library, a NuGet package that contains new controls and UI features for Windows apps. 설치 지침을 비롯한 자세한 내용은 Windows UI 라이브러리를 참조하세요.For more info, including installation instructions, see Windows UI Library.

Windows UI 라이브러리 API: ColorPicker 클래스, Color 속성, ColorChanged 이벤트Windows UI Library APIs: ColorPicker class, Color property, ColorChanged event

플랫폼 API: ColorPicker 클래스, Color 속성, ColorChanged 이벤트Platform 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 Controls GalleryXAML 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.

이 예제에서는 확인 및 취소 단추로 플라이아웃에 색 선택을 호스트합니다.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"/>

원 스펙트럼이 있는 색 선택

사각형과 원 색 스펙트럼 중 하나를 선택해야 하는 경우 첫 번째로 고려해야 할 사항은 정밀도입니다.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
  • 가장 정밀한 색 선택 환경이 필요한 경우 256x256px 이상의 사각형 스펙트럼을 사용하거나 텍스트 입력 필드를 포함하여 사용자가 선택한 값을 미세 조정할 수 있게 하세요.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