Sdílet prostřednictvím

Výběr barvy

Nástroj pro výběr barev slouží k procházení a výběru barev. Ve výchozím nastavení umožňuje uživateli procházet barvy na barevném spektru nebo zadat barvu v červenýchGreen-Blue (RGB), hue -Saturation-Value (HSV) nebo šestnáctkových textových polích.

výchozí výběr barev

Je to správná kontrola?

Pomocí nástroje pro výběr barvy umožníte uživateli vybrat barvy ve vaší aplikaci. Můžete ho například použít ke změně nastavení barev, jako jsou barvy písma, pozadí nebo barvy motivu aplikace.

Pokud je vaše aplikace určená pro kreslení nebo podobné úkoly pomocí pera, zvažte použití ovládacích prvků rukopisu spolu s výběrem barvy.

Recommendations

  • Zamyslete se nad tím, jaký druh prostředí pro výběr barev je vhodný pro vaši aplikaci. Některé scénáře nemusí vyžadovat podrobný výběr barev a mohou těžit ze zjednodušeného výběru.
  • Pro nejpřesnější výběr barev použijte čtvercové spektrum a ujistěte se, že je to nejméně 256 × 256px, nebo zahrňte pole pro zadávání textu, abyste uživatelům umožnili upřesnit jejich vybranou barvu.
  • Pokud se používá ve vysouvacím panelu, klepnutí na spektrum nebo úprava posuvníku by samy o sobě neměly potvrdit výběr barvy. Potvrzení výběru:
    • Přidejte tlačítka Potvrdit a Zrušit k použití nebo zrušení výběru. Stisknutím tlačítka Zpět nebo klepnutím mimo informační panel ho zavřete a neuložíte výběr uživatele.
    • Nebo po zavření informačního rámečku potvrďte výběr tak, že klepnete mimo informační panel nebo stisknete tlačítko Zpět.

Vytvoření nástroje pro výběr barvy

Otevření aplikace Galerie WinUI 3 a zobrazení ColorPickeru v akci

Ikona galerie WinUI 3 Aplikace Galerie WinUI 3 obsahuje interaktivní příklady ovládacích prvků a funkcí WinUI. Získejte aplikaci z Microsoft Store nebo vyhledejte zdrojový kód na GitHub.

Tento příklad ukazuje, jak vytvořit výchozí výběr barvy v XAML.

<ColorPicker x:Name="myColorPicker"/>

Ve výchozím nastavení zobrazí výběr barvy náhled zvolené barvy na obdélníkovém pruhu vedle barevného spektra. Pomocí události ColorChanged nebo vlastnosti Color můžete získat přístup k vybrané barvě a použít ji ve své aplikaci. Podrobný kód najdete v následujících příkladech.

Navázání na zvolenou barvu

Když se má výběr barvy projevit okamžitě, můžete použít datové vazby na vlastnost Barva nebo zpracovat událost ColorChanged pro přístup k vybrané barvě v kódu.

V tomto příkladu svážete vlastnost Color SolidColorBrush, která se používá jako výplň pro obdélník, přímo s vybranou barvou v nástroji pro výběr barev. Jakákoli změna ve výběru barvy způsobí okamžitou změnu vázané vlastnosti.

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

V tomto příkladu se používá zjednodušený výběr barvy pouze s kruhem a posuvníkem, což je běžné "neformální" prostředí pro výběr barev. Když se změna barvy zobrazí a stane se v reálném čase u ovlivněného objektu, nemusíte zobrazovat pruh náhledu barev. Další informace najdete v části Přizpůsobte výběr barev.

Uložení zvolené barvy

V některých případech nechcete změnu barvy použít okamžitě. Pokud například hostujete výběr barev v informačním rámečku, doporučujeme použít vybranou barvu až po potvrzení výběru nebo zavření informačního rámečku. Vybranou hodnotu barvy můžete uložit také pro pozdější použití.

V tomto příkladu hostujete výběr barvy ve vyskakovacím okně s tlačítky Potvrdit a Zrušit. Když uživatel potvrdí svou volbu barvy, uložíte vybranou barvu pro pozdější použití v aplikaci.

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

Konfigurace výběru barvy

Ne všechna pole jsou nutná k tomu, aby uživatel vybral barvu, takže výběr barvy je flexibilní. Nabízí řadu možností, které umožňují konfigurovat ovládací prvek tak, aby vyhovoval vašim potřebám.

Pokud například uživatel nepotřebuje přesný ovládací prvek, například výběr barvy zvýrazňovače v aplikaci pro pořizování poznámek, můžete použít zjednodušené uživatelské rozhraní. Pole pro zadávání textu můžete skrýt a změnit barevné spektrum na kruh.

Když uživatel potřebuje přesný ovládací prvek, například v aplikaci grafického návrhu, můžete pro každý aspekt barvy zobrazit posuvníky i pole pro zadávání textu.

Zobrazení kruhového spektra

Tento příklad ukazuje, jak pomocí vlastnosti ColorSpectrumShape nakonfigurovat výběr barvy tak, aby místo výchozího čtverce používal kruhové spektrum.

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

nástroj pro výběr barev s kruhovým spektrem

Pokud si musíte vybrat mezi čtvercovým a kruhovým barevným spektrem, je primárním aspektem přesnost. Uživatel má větší kontrolu nad tím, kdy vybere konkrétní barvu pomocí čtverce, protože se zobrazí více barevných gamutů. Kruhové spektrum byste měli zvážit spíše jako «neformální» zážitek výběru barev.

Zobrazení alfa kanálu

V tomto příkladu povolíte posuvník neprůhlednosti a textové pole pro výběr barvy.

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

Výběr barvy s isAlphaEnabled nastaveným na true

Zobrazení jednoduchého výběru

Tento příklad ukazuje, jak nakonfigurovat výběr barev pomocí jednoduchého uživatelského rozhraní pro "neformální" použití. Zobrazíte kruhové spektrum a skryjete výchozí pole pro zadávání textu. Když se změna barvy zobrazí a stane se v reálném čase u ovlivněného objektu, nemusíte zobrazovat pruh náhledu barev. Jinak byste měli nechat náhled barvy viditelný.

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

jednoduchý výběr barvy

Určení směru rozložení

Pomocí vlastnosti Orientace určete, jestli má ColorPicker zarovnat svisle nebo vodorovně. To má vliv na umístění ovládacích prvků pro úpravy vzhledem ke barevnému spektru. Ve výchozím nastavení je orientace Svislá.

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

výběr barvy ve vodorovné orientaci

Poznámka:

Pokud je orientace nastavena na Vodorovně, ColorPicker použít IsMoreButtonVisible vlastnost.

Zobrazení nebo skrytí dalších funkcí

Tato tabulka obsahuje všechny možnosti, které můžete použít ke konfiguraci ovládacího prvku ColorPicker.

Vlastnost Vlastnosti
Barevné spektrum JeBarevnéSpektrumViditelné, TvarBarevnéhoSpektra, KomponentyBarevnéhoSpektra
Náhled barev Je náhled barvy viditelný
Hodnoty barev JePosuvníkBarvyViditelný, JeTextovéVstupníPoleBarevnéhoKanáluViditelné
Hodnoty neprůhlednosti PovoleníAlfa, ViditelnostPosuvníkuAlfa, ViditelnostVstupuTextuAlfa
Šestnáctkové hodnoty JeHexInputViditelný

Poznámka:

IsAlphaEnabled musí být true, aby se zobrazilo textové pole a posuvník průhlednosti. Viditelnost vstupních ovládacích prvků je pak možné upravit pomocí vlastností IsAlphaTextInputVisible a IsAlphaSliderVisible. Podrobnosti najdete v dokumentaci k rozhraní API.

  • Last updated on