Kleurkiezer

Een kleurkiezer wordt gebruikt om door kleuren te bladeren en te selecteren. Standaard kan een gebruiker door kleuren in een kleurenspectrum navigeren of een kleur opgeven in red-Green-Blue (RGB), Hue-Saturation-Value (HSV) of hexadecimale tekstvakken.

Is dit de juiste controle?

Gebruik de kleurkiezer om een gebruiker kleuren in uw app te laten selecteren. U kunt deze bijvoorbeeld gebruiken om kleurinstellingen te wijzigen, zoals tekstkleuren, achtergrond- of app-themakleuren.

Als uw app bedoeld is voor het tekenen of vergelijkbare taken met behulp van pen, kunt u overwegen om handschriftbesturingselementen samen met de kleurkiezer te gebruiken.

Aanbevelingen

• Denk na over wat voor soort kleurkieservaring geschikt is voor uw app. Sommige scenario's vereisen mogelijk geen gedetailleerde kleurkeuze en zouden baat hebben bij een vereenvoudigde kiezer.
• Voor de meest nauwkeurige ervaring met het kiezen van kleuren gebruikt u het vierkante spectrum en zorgt u ervoor dat het ten minste 256x256px is of de tekstinvoervelden opneemt om gebruikers de geselecteerde kleur te laten verfijnen.
• Wanneer u een flyout gebruikt, dient tikken in het spectrum of het alleen aanpassen van de schuifregelaar de kleurselectie niet vast te leggen. De selectie bevestigen:
  • Geef doorvoer- en annuleringsknoppen op om de selectie toe te passen of te annuleren. Als u op de knop Terug klikt of buiten de flyout tikt, wordt deze gesloten en wordt de selectie van de gebruiker niet opgeslagen.
  • U kunt de selectie ook doorvoeren wanneer u de flyout sluit, door buiten de flyout te tikken of door op de Terug-knop te drukken.

Een kleurkiezer maken

De WinUI 3 Gallery-app bevat interactieve voorbeelden van de meeste Besturingselementen, functies en functionaliteit van WinUI 3. Haal de app op uit de Microsoft Store of haal de broncode op GitHub op

In dit voorbeeld ziet u hoe u een standaardkleurkiezer maakt in XAML.

<ColorPicker x:Name="myColorPicker"/>

Standaard toont de kleurkiezer een voorbeeld van de gekozen kleur op de rechthoekige balk naast het kleurenspectrum. U kunt de gebeurtenis ColorChanged of de eigenschap Color gebruiken om toegang te krijgen tot de geselecteerde kleur en deze te gebruiken in uw app. Zie de volgende voorbeelden voor gedetailleerde code.

Binden aan de gekozen kleur

Wanneer de kleurselectie onmiddellijk van kracht moet worden, kunt u gegevensbinding gebruiken om de eigenschap Color te binden of de gebeurtenis ColorChanged afhandelen om toegang te krijgen tot de geselecteerde kleur in uw code.

In dit voorbeeld bindt u de eigenschap Kleur van een SolidColorBrush die wordt gebruikt als opvulling voor een rechthoek rechtstreeks aan de geselecteerde kleur van de kleurkiezer. Elke wijziging in de kleurkiezer resulteert in een live wijziging van de gebonden eigenschap.

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

In dit voorbeeld wordt een vereenvoudigde kleurenkiezer gebruikt met alleen de cirkel en de schuifregelaar, wat een algemene 'informele' kleurkiezer is. Wanneer de kleurwijziging kan worden weergegeven en in realtime op het betrokken object wordt uitgevoerd, hoeft u de voorbeeldbalk van de kleur niet weer te geven. Zie het gedeelte De kleurkiezer aanpassen voor meer informatie.

De gekozen kleur opslaan

In sommige gevallen wilt u de kleurwijziging niet onmiddellijk toepassen. Wanneer u bijvoorbeeld een kleurenkiezer in een flyout host, wordt u aangeraden de geselecteerde kleur pas toe te passen nadat de gebruiker de selectie heeft bevestigd of de flyout sluit. U kunt ook de geselecteerde kleurwaarde opslaan om later te gebruiken.

In dit voorbeeld host u een kleurenkiezer in een flyout met de knoppen Bevestigen en Annuleren. Wanneer de gebruiker de gewenste kleur bevestigt, slaat u de geselecteerde kleur op die u later in uw app wilt gebruiken.

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

De kleurkiezer configureren

Niet alle velden zijn nodig om een gebruiker een kleur te laten kiezen, dus de kleurkiezer is flexibel. Het biedt diverse opties waarmee u het besturingselement aan uw behoeften kunt aanpassen.

Als de gebruiker bijvoorbeeld geen nauwkeurige controle nodig heeft, zoals het kiezen van een markeerstiftkleur in een app voor het maken van notities, kunt u een vereenvoudigde gebruikersinterface gebruiken. U kunt de tekstinvoervelden verbergen en het kleurenspectrum wijzigen in een cirkel.

Wanneer de gebruiker nauwkeurige controle nodig heeft, zoals in een grafische ontwerp-app, kunt u zowel schuifregelaars als tekstinvoervelden weergeven voor elk aspect van de kleur.

Het cirkelspectrum weergeven

In dit voorbeeld ziet u hoe u de eigenschap ColorSpectrumShape gebruikt om de kleurkiezer te configureren voor het gebruik van een cirkelvormig spectrum in plaats van het standaardplein.

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

Wanneer u moet kiezen tussen het vierkants- en cirkelkleurspectrum, is een primaire overweging nauwkeurigheid. Een gebruiker heeft meer controle wanneer hij een specifieke kleur selecteert met behulp van een vierkant, omdat meer van het kleurengamma wordt weergegeven. Je zou het cirkel spectrum moeten beschouwen als een meer informele kleurkeuze-ervaring.

Het alfakanaal weergeven

In dit voorbeeld schakelt u een ondoorzichtigheidsschuifregelaar en tekstvak in op de kleurkiezer.

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

Een eenvoudige kiezer weergeven

In dit voorbeeld ziet u hoe u de kleurenkiezer configureert met een eenvoudige gebruikersinterface voor 'casual' gebruik. U geeft het cirkelvormige spectrum weer en verbergt de standaardtekstinvoervakken. Wanneer de kleurwijziging kan worden weergegeven en in realtime op het betrokken object wordt uitgevoerd, hoeft u de voorbeeldbalk van de kleur niet weer te geven. Anders moet u het kleurenvoorbeeld zichtbaar laten.

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

De indelingsrichting opgeven

Gebruik de eigenschap Oriëntatie om op te geven of de ColorPicker verticaal of horizontaal moet worden uitgelijnd. Dit is van invloed op de locatie van de besturingselementen voor bewerken ten opzichte van het kleurenspectrum. Standaard is de afdrukstand Verticaal.

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

Aanvullende functies weergeven of verbergen

In deze tabel ziet u alle opties die u kunt gebruiken om het bedieningselement ColorPicker te configureren.

UWP en WinUI 2

Het ColorPicker-element voor UWP-apps is opgenomen als onderdeel van WinUI 2. Zie WinUI 2 voor meer informatie, inclusief installatie-instructies. APIs voor deze controle zijn beschikbaar in zowel de Windows.UI.Xaml.Controls als de Microsoft.UI.Xaml.Controls naamruimten.

U wordt aangeraden de nieuwste WinUI 2 te gebruiken om de meest recente stijlen, sjablonen en functies voor alle besturingselementen te verkrijgen. WinUI 2.2 of hoger bevat een nieuwe sjabloon voor dit besturingselement dat gebruikmaakt van afgeronde hoeken. Zie Hoekstraal voor meer informatie.

Als u de code in dit artikel wilt gebruiken met WinUI 2, gebruikt u een alias in XAML (we gebruiken muxc) om de API's van de Windows UI-bibliotheek weer te geven die zijn opgenomen in uw project. Zie Aan de slag met WinUI 2 voor meer informatie.

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

<muxc:ColorPicker />

Verwante artikelen

• Pen- en Stylusinteracties in Windows-apps
• inktbewerking