Selektor kolorów

Selektor kolorów służy do przeglądania i wybierania kolorów. Domyślnie umożliwia użytkownikowi nawigowanie po kolorach w spektrum kolorów lub określanie koloru w polach tekstowych Czerwony-Green-Blue (RGB), Hue-Saturation-Value (HSV) lub Szesnastkowe.

Czy jest to właściwa kontrola?

Użyj selektora kolorów, aby umożliwić użytkownikowi wybranie kolorów w aplikacji. Możesz na przykład zmienić ustawienia kolorów, takie jak kolory czcionek, tło lub kolory motywu aplikacji.

Jeśli aplikacja służy do rysowania lub podobnych zadań przy użyciu pióra, rozważ użycie kontrolek pisma odręcznego wraz z selektorem kolorów.

Rekomendacje

• Zastanów się, jakiego rodzaju środowisko wybierania kolorów jest odpowiednie dla aplikacji. Niektóre scenariusze mogą nie wymagać szczegółowego wybierania kolorów i skorzystać z uproszczonego selektora
• Aby uzyskać najdokładniejsze doświadczenie wyboru kolorów, użyj spektrum kwadratowego i upewnij się, że ma ono co najmniej 256x256px, lub dołącz pola wprowadzania tekstu, aby umożliwić użytkownikom doprecyzowanie wybranego koloru.
• W przypadku użycia w oknie wysuwanym naciśnięcie spektrum lub dostosowanie suwaka nie powinno zatwierdzać zaznaczenia koloru. Aby zatwierdzić zaznaczenie:
  • Podaj przyciski zatwierdzania i anulowania, aby zastosować lub anulować zaznaczenie. Naciśnięcie przycisku Wstecz lub kliknięcie poza menu rozwijalne spowoduje jego zamknięcie bez zapisywania zaznaczenia użytkownika.
  • Możesz też zatwierdzić zaznaczenie, zamykając wyskakujące okno, poprzez dotknięcie w dowolnym miejscu poza oknem lub naciskając przycisk Wstecz.

Tworzenie selektora kolorów

Aplikacja Galeria WinUI 3 zawiera interaktywne przykłady większości kontrolek, funkcji i funkcji interfejsu WinUI 3. Pobierz aplikację ze Sklepu Microsoft lub pobierz kod źródłowy w witrynie GitHub

W tym przykładzie pokazano, jak utworzyć domyślny selektor kolorów w języku XAML.

<ColorPicker x:Name="myColorPicker"/>

Domyślnie selektor kolorów pokazuje podgląd wybranego koloru na prostokątnym pasku obok spektrum kolorów. Możesz użyć zdarzenia ColorChanged lub właściwości Color, aby uzyskać dostęp do wybranego koloru i użyć go w aplikacji. Zapoznaj się z poniższymi przykładami, aby uzyskać szczegółowy kod.

Wiązanie z wybranym kolorem

Gdy wybór koloru powinien zostać zastosowany natychmiast, możesz użyć powiązania danych w celu powiązania z właściwością Color lub obsłużyć zdarzenie ColorChanged, aby uzyskać dostęp do wybranego koloru w kodzie.

W tym przykładzie powiążesz właściwość Color obiektu SolidColorBrush, który jest używany jako wypełnienie prostokąta, bezpośrednio do koloru wybranego w selektorze kolorów. Zmiana w okienku wyboru kolorów powoduje dynamiczną zmianę właściwości, do której jest przypisana.

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

W tym przykładzie użyto uproszczonego selektora kolorów, składającego się tylko z okręgu i suwaka, co jest typowym "swobodnym" doświadczeniem wybierania kolorów. Gdy zmiana koloru może być widoczna i występuje w czasie rzeczywistym w obiekcie, którego dotyczy problem, nie musisz wyświetlać paska podglądu kolorów. Aby uzyskać więcej informacji, zobacz sekcję Dostosowywanie selektora kolorów.

Zapisz wybrany kolor

W niektórych przypadkach nie chcesz natychmiast zastosować zmiany koloru. Na przykład, gdy umieszczasz wybierania koloru w oknie wysuwanym, zalecamy zastosowanie wybranego koloru dopiero po tym, jak użytkownik potwierdzi wybór lub zamknie okno wysuwane. Możesz również zapisać wybraną wartość koloru, aby użyć jej później.

W tym przykładzie hostujesz selektor kolorów w wysuwanym oknie z przyciskami Potwierdź i Anuluj. Gdy użytkownik potwierdzi wybór koloru, zapisz wybrany kolor do użycia w dalszej części aplikacji.

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

Konfigurowanie selektora kolorów

Nie wszystkie pola są niezbędne, aby umożliwić użytkownikowi wybranie koloru, więc selektor kolorów jest elastyczny. Udostępnia ona różne opcje, które umożliwiają skonfigurowanie kontrolki zgodnie z potrzebami.

Jeśli na przykład użytkownik nie potrzebuje precyzyjnej kontrolki, takiej jak wybieranie koloru wyróżnienia w aplikacji do tworzenia notatek, możesz użyć uproszczonego interfejsu użytkownika. Możesz ukryć pola wprowadzania tekstu i zmienić spektrum kolorów na okrąg.

Gdy użytkownik potrzebuje precyzyjnej kontrolki, na przykład w aplikacji projektowej grafiki, możesz wyświetlać zarówno suwaki, jak i pola wprowadzania tekstu dla każdego aspektu koloru.

Pokaż spektrum okręgu

W tym przykładzie pokazano, jak użyć właściwości ColorSpectrumShape, aby skonfigurować selektor kolorów do używania spektrum cyklicznego zamiast domyślnego kwadratu.

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

Jeśli musisz wybrać między spektrum kolorów kwadratu i okręgu, główną kwestią jest dokładność. Użytkownik ma większą kontrolę podczas wybierania określonego koloru przy użyciu kwadratu, ponieważ jest wyświetlana większa liczba kolorów. Należy traktować spektrum koła jako bardziej "swobodne" doświadczanie wyboru koloru.

Pokaż kanał alfa

W tym przykładzie włączysz suwak nieprzezroczystości i pole tekstowe selektora kolorów.

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

Pokaż prosty selektor

W tym przykładzie pokazano, jak skonfigurować selektor kolorów przy użyciu prostego interfejsu użytkownika na potrzeby "casual". Wyświetlasz spektrum cykliczne i ukrywasz domyślne pola wprowadzania tekstu. Gdy zmiana koloru może być widoczna i występuje w czasie rzeczywistym w obiekcie, którego dotyczy problem, nie musisz wyświetlać paska podglądu kolorów. W przeciwnym razie należy pozostawić widoczny podgląd kolorów.

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

Określanie kierunku układu

Użyj właściwości Orientacja, aby określić, czy element ColorPicker powinien być wyrównany w pionie, czy poziomo. Ma to wpływ na lokalizację kontrolek edycji względem spektrum kolorów. Domyślnie orientacja jest ustawiona na pionową.

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

Pokaż lub ukryj dodatkowe funkcje

W tej tabeli przedstawiono wszystkie opcje, których można użyć do skonfigurowania kontrolki ColorPicker.

UwP i WinUI 2

Kontrolka ColorPicker dla aplikacji platformy UWP jest dołączona w ramach interfejsu WinUI 2. Aby uzyskać więcej informacji, w tym instrukcje dotyczące instalacji, zobacz WinUI 2. Interfejsy API dla tej kontrolki istnieją zarówno w przestrzeniach nazw Windows.UI.Xaml.Controls , jak i Microsoft.UI.Xaml.Controls .

Zalecamy użycie najnowszego interfejsu WinUI 2 , aby uzyskać najbardziej aktualne style, szablony i funkcje dla wszystkich kontrolek. Interfejs WinUI 2.2 lub nowszy zawiera nowy szablon dla tej kontrolki, który używa zaokrąglonych narożników. Aby uzyskać więcej informacji, zobacz Zaokrąglenie narożnika.

Aby użyć kodu z tego artykułu w WinUI 2, użyj aliasu w XAML (używamy muxc), aby reprezentować API Biblioteki Interfejsu Użytkownika Windows, które są uwzględnione w Twoim projekcie. Aby uzyskać więcej informacji, zobacz Wprowadzenie do interfejsu WinUI 2 .

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

<muxc:ColorPicker />

Powiązane artykuły

• interakcje piórem i rysikiem w aplikacjach systemu Windows
• Tuszowanie