Dela via

Färgväljaren

En färgväljare används för att bläddra igenom och välja färger. Som standard kan en användare navigera genom färger i ett färgspektrum eller ange en färg i textrutorna Red-Green-Blue (RGB), Hue-Saturation-Value (HSV) eller Hexadecimal.

En standardfärgväljare

Är det här rätt kontroll?

Använd färgväljaren för att låta en användare välja färger i din app. Du kan till exempel använda den för att ändra färginställningar, till exempel teckensnittsfärger, bakgrundsfärger eller apptemafärger.

Om din app är avsedd för ritning eller liknande uppgifter med hjälp av en penna, bör du överväga att använda Inking controls tillsammans med färgväljaren.

Recommendations

  • Tänk på vilken typ av färgplockningsupplevelse som passar din app. Vissa scenarier kanske inte kräver detaljerad färgplockning och skulle dra nytta av en förenklad väljare
  • För den mest exakta färgplockningsupplevelsen använder du kvadratspektrumet och ser till att det är minst 256x256px, eller inkluderar textinmatningsfälten så att användarna kan förfina sin valda färg.
  • När det används i ett utfällbart fönster bör du inte bekräfta färgvalet genom att trycka i spektrumet eller justera skjutreglaget enbart. Så här bekräftar du markeringen:
    • Ange inchecknings- och avbryt-knappar för att tillämpa eller avbryta markeringen. Om du trycker på bakåtknappen eller trycker utanför den utfällbara menyn stängs den och användarens val sparas inte.
    • Du kan också bekräfta markeringen när du stänger den utfällbara menyn genom att antingen trycka utanför menyn eller trycka på tillbaka-knappen.

Skapa en färgväljare

Öppna WinUI 3-galleriappen och se hur ColorPicker fungerar

WinUI 3-galleriikon WinUI 3-galleriappen innehåller interaktiva exempel på WinUI-kontroller och funktioner. Hämta appen från Microsoft Store eller bläddra i källkoden på GitHub.

Det här exemplet visar hur du skapar en standardfärgväljare i XAML.

<ColorPicker x:Name="myColorPicker"/>

Som standard visar färgväljaren en förhandsgranskning av den valda färgen i det rektangulära fältet bredvid färgspektrumet. Du kan använda antingen händelsen ColorChanged eller egenskapen Color för att komma åt den valda färgen och använda den i din app. Se följande exempel för detaljerad kod.

Binda till den valda färgen

När färgmarkeringen ska börja gälla omedelbart kan du antingen använda data-bindning för att binda till egenskapen Color eller hantera händelsen ColorChanged för att komma åt den färg som valts i koden.

I det här exemplet binder du egenskapen Color för en SolidColorBrush som används som Fyllning för en rektangel direkt till färgväljarens valda färg. Varje ändring av färgväljaren resulterar i en omedelbar ändring av den bundna egenskapen.

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

I det här exemplet används en förenklad färgväljare med bara cirkeln och skjutreglaget, vilket är en vanlig "avslappnad" färgplockningsupplevelse. När färgändringen kan ses och sker i realtid på det berörda objektet behöver du inte visa färgförhandsgranskningsfältet. Mer information finns i avsnittet Anpassa färgväljaren .

Spara den valda färgen

I vissa fall vill du inte tillämpa färgändringen omedelbart. När du till exempel är värd för en färgväljare i en utfällbara meny rekommenderar vi att du endast använder den markerade färgen när användaren har bekräftat markeringen eller stänger den utfällbara menyn. Du kan också spara det valda färgvärdet som ska användas senare.

I det här exemplet använder du en färgväljare i en utfällbar meny med knapparna Bekräfta och Avbryt. När användaren bekräftar sitt färgval sparar du den valda färgen som ska användas senare i appen.

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

Konfigurera färgväljaren

Alla fält är inte nödvändiga för att låta en användare välja en färg, så färgväljaren är flexibel. Den innehåller en mängd olika alternativ som gör att du kan konfigurera kontrollen så att den passar dina behov.

Om användaren till exempel inte behöver exakt kontroll, som att välja en överstrykningsfärg i en anteckningsapp, kan du använda ett förenklat användargränssnitt. Du kan dölja textinmatningsfälten och ändra färgspektrumet till en cirkel.

När användaren behöver exakt kontroll, som i en grafisk designapp, kan du visa både skjutreglage och textinmatningsfält för varje aspekt av färgen.

Visa cirkelspektrumet

Det här exemplet visar hur du använder egenskapen ColorSpectrumShape för att konfigurera färgväljaren att använda ett cirkulärt spektrum i stället för standardrutan.

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

En färgväljare med ett cirkelspektrum

När du måste välja mellan fyrkants- och cirkelfärgspektrumet är ett primärt övervägande noggrannhet. En användare har mer kontroll när de väljer en specifik färg med en fyrkant eftersom mer av färgomfånget visas. Du bör betrakta cirkelspektrumet som mer av den "avslappnade" färgvalsupplevelsen.

Visa alfakanalen

I det här exemplet aktiverar du ett skjutreglage för opacitet och textruta i färgväljaren.

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

En färgväljare med IsAlphaEnabled inställd på true

Visa en enkel väljare

Det här exemplet visar hur du konfigurerar färgväljaren med ett enkelt användargränssnitt för "tillfällig" användning. Du visar det cirkulära spektrumet och döljer standardrutorna för textinmatning. När färgändringen kan ses och sker i realtid på det berörda objektet behöver du inte visa färgförhandsgranskningsfältet. Annars ska du låta färgförhandsgranskningen vara synlig.

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

En enkel färgväljare

Ange layoutriktningen

Använd egenskapen Orientering för att ange om ColorPicker ska justeras lodrätt eller vågrätt. Detta påverkar platsen för redigeringskontrollerna i förhållande till färgspektrumet. Som standard är orienteringen Lodrät.

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

En färgväljare i vågrät orientering

Anmärkning

Om orienteringen är inställd på vågrät tillämpar ColorPicker inte egenskapen IsMoreButtonVisible.

Visa eller dölja ytterligare funktioner

Den här tabellen visar alla alternativ som du kan använda för att konfigurera ColorPicker-kontrollen.

Egenskap Egenskaper
Färgspektrum ÄrFärgspektrumSynligt, FärgspektrumsForm, FärgspektrumsKomponenter
Förhandsgranskning av färg ÄrFärgFörhandsgranskningSynlig
Färgvärden IsColorSliderVisible, IsColorChannelTextInputVisible
Ogenomskinlighetsvärden ÄrAlphaAktiverad, ÄrAlphaSkjutreglageSynligt, ÄrAlphaTextInputSynligt
Hexvärden ÄrHexInputSynlig

Anmärkning

IsAlphaEnabled måste vara sant för att visa textrutan och skjutreglaget för opacitet. Synligheten för indatakontrollerna kan sedan ändras med hjälp av egenskaperna IsAlphaTextInputVisible och IsAlphaSliderVisible. Mer information finns i API-dokumentationen.

  • Last updated on