색 선택기

아티클
07/13/2023

색 선택은 색을 찾아보고 선택하는 데 사용됩니다. 기본적으로, 색 선택을 사용하면 사용자가 색 스펙트럼에서 색을 탐색하거나 RGB(Red-Green-Blue), HSV(색상 채도 값) 또는 16진수 텍스트 상자에서 색을 지정할 수 있습니다.

A default color picker

올바른 컨트롤인가요?

색 선택을 사용하여 사용자가 앱에서 색을 선택할 수 있게 하세요. 예를 들어 색 선택을 사용하여 글꼴 색, 배경 또는 앱 테마 색 등의 색 설정을 변경하세요.

앱이 펜을 사용한 그리기 등의 작업용인 경우 색 선택과 함께 잉크 컨트롤 사용을 고려하세요.

권장 사항

어떤 종류의 색상 선택 경험이 앱에 적합한지 생각하세요. 일부 시나리오는 세밀한 색 선택이 필요 없고 간단한 선택이 유리할 수 있습니다.
가장 정밀한 색 선택 환경이 필요한 경우 256x256px 이상의 사각형 스펙트럼을 사용하거나 텍스트 입력 필드를 포함하여 사용자가 선택한 값을 미세 조정할 수 있게 하세요.
플라이아웃에 사용할 경우 스펙트럼을 탭하거나 슬라이더만 조정하여 색 선택을 커밋하면 안 됩니다. 선택을 커밋하려면 다음을 수행합니다.
- 선택 적용 또는 취소를 위한 커밋 및 취소 단추를 제공합니다. 뒤로 단추를 누르거나 플라이아웃 바깥쪽을 탭하면 선택이 해제되고 사용자의 선택 내용이 저장되지 않습니다.
- 또는 플라이아웃 바깥쪽을 탭하거나 뒤로 단추를 눌러 플라이아웃을 해제할 때 선택을 커밋합니다.

UWP 및 WinUI 2

Important

이 문서의 정보 및 예제는 Windows 앱 SDK 및 WinUI 3를 사용하는 앱에 최적화되어 있지만 통상적으로 WinUI 2를 사용하는 UWP 앱에도 적용할 수 있습니다. 플랫폼별 정보 및 예제는 UWP API 참조를 확인하세요.

이 섹션에는 UWP 또는 WinUI 2 앱에서 컨트롤을 사용하는 데 필요한 정보가 있습니다.

UWP 앱용 ColorPicker 컨트롤은 Windows UI 라이브러리 2의 일부로 포함됩니다. 설치 지침을 비롯한 자세한 내용은 Windows UI 라이브러리를 참조하세요. 이 컨트롤용 API는 Windows.UI.Xaml.Controls 및 Microsoft.UI.Xaml.Controls 네임스페이스에 모두 존재합니다.

UWP APIs: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 />

색 선택 만들기

중요 APIs: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>

이 예에서는 "일반적인" 색 선택 환경인 원과 슬라이더가 있는 간단한 색 선택을 사용합니다. 영향을 받는 개체에 색 변경이 실시간으로 적용되면 색 미리 보기 표시줄을 표시할 필요가 없습니다. 자세한 내용은 색 선택 사용자 지정 섹션을 참조하세요.

선택한 색 저장

색 변경을 즉시 적용하지 않으려는 경우가 있습니다. 예를 들어 플라이아웃에서 색 선택을 호스트하는 경우 사용자가 선택 사항을 확인하거나 플라이아웃을 닫은 후에만 선택한 색을 적용하는 것이 좋습니다. 나중에 사용할 수 있게 선택한 색 값을 저장할 수도 있습니다.

이 예제에서는 확인 및 취소 단추로 플라이아웃에 색 선택을 호스트합니다. 사용자가 색 선택을 확인하면 앱에서 나중에 사용할 수 있게 선택한 색을 저장합니다.

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

A color picker with a circle spectrum

사각형과 원 색 스펙트럼 중 하나를 선택해야 하는 경우 첫 번째로 고려해야 할 사항은 정밀도입니다. 사각형을 사용하면 더 많은 색 영역이 표시되기 때문에 더 정밀하게 특정 색을 선택할 수 있습니다. 좀 더 "일반적인" 색 선택을 원하는 경우 원 스펙트럼이 적합합니다.

알파 채널 표시

이 예제에서는 색 선택에서 불투명도 슬라이더와 텍스트 상자를 활성화합니다.

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

A color picker with IsAlphaEnabled set to true

단순 선택 표시

이 예제에서는 "일반" 용도의 단순한 UI로 색 선택을 구성하는 방법을 보여줍니다. 원형 스펙트럼을 표시하고 기본 텍스트 입력 상자를 숨깁니다. 영향을 받는 개체에 색 변경이 실시간으로 적용되면 색 미리 보기 표시줄을 표시할 필요가 없습니다. 그렇지 않으면 색 미리 보기를 표시된 상태로 두어야 합니다.

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

A simple color picker

레이아웃 방향 지정

Orientation 속성을 사용하여 ColorPicker를 세로로 정렬할지 아니면 가로로 정렬할지를 지정합니다. 이는 색 스펙트럼을 기준으로 편집 컨트롤의 위치에 영향을 미칩니다. 기본적으로 방향은 Vertical입니다.

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

A color picker in a horizontal orientation

참고 항목

Orientation이 Horizontal로 설정된 경우 ColorPicker는 IsMoreButtonVisible 속성을 적용하지 않습니다.

추가 기능 표시 또는 숨기기

이 표에는 ColorPicker 구성에 사용할 수 있는 모든 옵션이 나와 있습니다.

기능	속성
색 스펙트럼	IsColorSpectrumVisible, ColorSpectrumShape, ColorSpectrumComponents
색 미리 보기	IsColorPreviewVisible
색 값	IsColorSliderVisible, IsColorChannelTextInputVisible
투명도 값	IsAlphaEnabled, IsAlphaSliderVisible, IsAlphaTextInputVisible
16진수 값	IsHexInputVisible

참고 항목

불투명도 텍스트 상자와 슬라이더를 표시하려면 IsAlphaEnabled가 true여야 합니다. 그러면 IsAlphaTextInputVisible 및 IsAlphaSliderVisible 속성을 사용하여 입력 컨트롤의 가시성을 수정할 수 있습니다. 자세한 내용은 API 설명서를 참조하세요.

샘플 코드 가져오기

WinUI 갤러리 샘플 - 대화형 형식으로 모든 XAML 컨트롤 표시

색 선택기

올바른 컨트롤인가요?

권장 사항

UWP 및 WinUI 2

색 선택 만들기

선택한 색에 바인딩

선택한 색 저장

색 선택 구성

원 스펙트럼 표시

알파 채널 표시

단순 선택 표시

레이아웃 방향 지정

추가 기능 표시 또는 숨기기

샘플 코드 가져오기

피드백

추가 리소스

색 선택기

올바른 컨트롤인가요?

권장 사항

UWP 및 WinUI 2

색 선택 만들기

선택한 색에 바인딩

선택한 색 저장

색 선택 구성

원 스펙트럼 표시

알파 채널 표시

단순 선택 표시

레이아웃 방향 지정

추가 기능 표시 또는 숨기기

샘플 코드 가져오기

관련된 문서

피드백

추가 리소스