Selezione coloriColor picker

Lo strumento selezione colori viene usato per cercare e selezionare i colori.A color picker is used to browse through and select colors. Per impostazione predefinita, il suddetto strumento consente sia di spostarsi tra i colori all'interno dello spettro di colori sia di specificare direttamente il colore nelle caselle di testo Red-Green-Blue (RGB, ovvero rosso, verde, blu), Hue-Saturation-Value (HSV, ossia tonalità, saturazione e valore) o esadecimale.By default, it lets a user navigate through colors on a color spectrum, or specify a color in either Red-Green-Blue (RGB), Hue-Saturation-Value (HSV), or Hexadecimal textboxes.

Strumento selezione colori predefinito

Ottenere la libreria dell'interfaccia utente di WindowsGet the Windows UI Library

Logo WinUI

Il controllo ColorPicker è incluso come parte della libreria dell'interfaccia utente di Windows, un pacchetto NuGet che contiene nuovi controlli e funzionalità dell'interfaccia utente per le app di Windows.The ColorPicker control is included as part of the Windows UI Library, a NuGet package that contains new controls and UI features for Windows apps. Per altre informazioni, incluse le istruzioni per l'installazione, vedi Libreria dell'interfaccia utente di Windows.For more info, including installation instructions, see Windows UI Library.

API della libreria dell'interfaccia utente di Windows: classe ColorPicker, proprietà Color, evento ColorChangedWindows UI Library APIs: ColorPicker class, Color property, ColorChanged event

API della piattaforma: classe ColorPicker, proprietà Color, evento ColorChangedPlatform APIs: ColorPicker class, Color property, ColorChanged event

È il controllo giusto?Is this the right control?

Usa lo strumento selezione colori per permettere all'utente di selezionare i colori all'interno dell'app.Use the color picker to let a user select colors in your app. Usalo, ad esempio, per la modifica delle impostazioni di colore, quali il colore dei caratteri, lo sfondo e i colori del tema dell'app.For example, use it to change color settings, such as font colors, background, or app theme colors.

Se l'app in questione è progettata per il disegno o attività analoghe, che prevedono l'uso della penna, valuta l'impiego dei Controlli per l'input penna in abbinamento a selezione colori.If your app is for drawing or similar tasks using pen, consider using Inking controls along with the color picker.

EsempiExamples

Raccolta di controlli XAMLXAML Controls Gallery
XAML controls gallery

Se è installata l'app Raccolta di controlli XAML, fai clic qui per aprirla e vedere ColorPicker in azione.If you have the XAML Controls Gallery app installed, click here to open the app and see the ColorPicker in action.

Creare uno strumento di selezione coloriCreate a color picker

Questo esempio mostra come creare un strumento selezione colori predefinito in XAML.This example shows how to create a default color picker in XAML.

<ColorPicker x:Name="myColorPicker"/>

Per impostazione predefinita, lo strumento selezione colori mostra un'anteprima del colore scelto nella barra rettangolare posta accanto allo spettro dei colori.By default, the color picker shows a preview of the chosen color on the rectangular bar beside the color spectrum. È possibile usare l'evento ColorChanged o la proprietà Color per accedere al colore selezionato e usarlo nella tua app.You can use either the ColorChanged event or the Color property to access the selected color and use it in your app. Per il codice dettagliato, vedi gli esempi che seguono.See the following examples for detailed code.

Associazione al colore selezionatoBind to the chosen color

Affinché lo strumento selezione colori abbia effetto immediato, è possibile sia ricorrere al data binding per associare la proprietà Color sia gestire l'evento ColorChanged per accedere al colore selezionato nel tuo codice.When the color selection should take effect immediately, you can either use databinding to bind to the Color property, or handle the ColorChanged event to access the selected color in your code.

In questo esempio esegui il binding della proprietà Color di un SolidColorBrush, usato come riempimento per un rettangolo, direttamente al colore selezionato dello strumento di selezione colori.In this example, you bind the Color property of a SolidColorBrush that's used as the Fill for a Rectangle directly to the color picker's selected color. Qualsiasi modifica apportata allo strumento selezione colori ha come esito una modifica in tempo reale alla proprietà associata.Any change to the color picker results in a live change to the bound property.

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

L'esempio in questione impiega uno strumento selezione colori semplificato con solo cerchio e dispositivo di scorrimento. Ciò rappresenta una comune esperienza di selezione del colore "informale".This example uses a simplified color picker with just the circle and the slider, which is a common "casual" color picking experience. Nei casi in cui la modifica del colore è visibile e ha effetto in tempo reale sull'oggetto interessato, non è necessario mostrare la barra dell'anteprima del colore.When the color change can be seen and happens in real-time on the affected object, you don't need to show the color preview bar. Per ulteriori informazioni, vedi la selezione Personalizzazione dello strumento Selezione colori.See the Customize the color picker section for more info.

Salvare il colore selezionatoSave the chosen color

Talvolta potresti non voler apportare immediatamente la modifica del colore.In some cases, you don't want to apply the color change immediately. Ad esempio, nei casi in cui ospiti uno strumento selezione colori all'interno di un riquadro a comparsa, consigliamo che il colore sia applicato solo a seguito di conferma della selezione o di chiusura del riquadro a comparsa da parte dell'utente.For example, when you host a color picker in a flyout, we recomend that you apply the selected color only after the user confirms the selection or closes the flyout. È anche possibile salvare il valore del colore selezionato per un uso successivo.You can also save the selected color value to use later.

In questo esempio, lo strumento selezione colori è ospitato in un riquadro a comparsa che include i pulsanti Conferma e Annulla.In this example, you host a color picker in a Flyout with Confirm and Cancel buttons. Quando l'utente conferma la propria scelta di colore, salva il colore selezionato per uso successivo all'interno della tua app.When the user confirms their color choice, you save the selected color to use later in your app.

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

Configurazione dello strumento selezione coloriConfigure the color picker

Non tutti i campi sono necessari per far sì che l'utente selezioni un colore, pertanto lo strumento selezione colori è flessibile.Not all fields are necessary to let a user pick a color, so the color picker is flexible. Lo strumento offre una gamma di opzioni per consentirti di configurare il controllo in base alle tue esigenze.It provides a variety of options that let you configure the control to fit your needs.

Ad esempio, nei casi in cui all'utente non sia richiesto un determinato controllo, quale la selezione del colore dell'evidenziatore all'interno di un'app per prendere appunti, è possibile fare uso di un'interfaccia utente semplificata.For example, when the user doesn't need precise control, like picking a highlighter color in a note taking app, you can use a simplified UI. È possibile nascondere i campi per l'immissione di testo e trasformare lo spettro dei colori in un cerchio.You can hide the text entry fields and change the color spectrum to a circle.

Quando all'utente è richiesto un determinato controllo, come ad esempio all'interno di un'app di progettazione grafica, puoi decidere di mostrare sia i dispositivi di scorrimento sia i campi per l'immissione di testo per ogni aspetto del colore.When the user does need precise control, like in a graphic design app, you can show both sliders and text entry fields for each aspect of the color.

Mostrare lo spettro dei colori in forma circolareShow the circle spectrum

Questo esempio mostra come usare la proprietà ColorSpectrumShape per configurare lo strumento selezione colori in moto tale che usi uno spettro circolare anziché il quadrato predefinito.This example shows how to use the ColorSpectrumShape property to configure the color picker to use a circular spectrum instead of the default square.

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

Strumento selezione colori con uno spettro circolare

Quando si deve scegliere tra lo spettro dei colori in forma quadrata e quello in forma circolare, una considerazione fondamentale da fare è legata all'accuratezza.When you must choose between the square and circle color spectrum, a primary consideration is accuracy. Un utente ha maggiore controllo quando seleziona un colore specifico mediante un quadrato, poiché può visualizzare la gran parte della gamma dei colori.A user has more control when they select a specific color using a square because more of the color gamut is shown. Lo spettro in forma circolare è da considerarsi come un'esperienza di scelta del colore più "informale".You should consider the circle spectrum as more of the "casual" color choosing experience.

Mostrare il canale alfaShow the alpha channel

In questo esempio è mostrata la procedura per l'abilitazione di un dispositivo di scorrimento Opacità e di una casella di testo nello strumento selezione colori.In this example, you enable an opacity slider and textbox on the color picker.

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

Strumento selezione colori con IsAlphaEnabled impostato su true

Mostrare uno strumento selezione colori sempliceShow a simple picker

Questo esempio mostra le modalità di configurazione dello strumento selezione colori con un'interfaccia utente semplice per un uso "informale".This example shows how to configure the color picker with a simple UI for "casual" use. Mostra lo spettro in forma circolare e nascondi le caselle di immissione testo predefinite.You show the circular spectrum and hide the default text input boxes. Nei casi in cui la modifica del colore è visibile e ha effetto in tempo reale sull'oggetto interessato, non è necessario mostrare la barra dell'anteprima del colore.When the color change can be seen and happens in real-time on the affected object, you don't need to show the color preview bar. In caso contrario, dovresti lasciare visibile l'anteprima del colore.Otherwise, you should leave the color preview visible.

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

Strumento selezione colori semplice

Mostrare o nascondere le funzionalità aggiuntiveShow or hide additional features

La tabella mostra tutte le opzioni che è possibile usare per configurare il controllo ColorPicker.This table shows all the options you can use to configure the ColorPicker control.

FunzionalitàFeature ProprietàProperties
Spettro dei coloriColor spectrum IsColorSpectrumVisible, ColorSpectrumShape, ColorSpectrumComponentsIsColorSpectrumVisible, ColorSpectrumShape, ColorSpectrumComponents
Anteprima coloreColor preview IsColorPreviewVisibleIsColorPreviewVisible
Valori coloreColor values IsColorSliderVisible, IsColorChannelTextInputVisibleIsColorSliderVisible, IsColorChannelTextInputVisible
Valori opacitàOpacity values IsAlphaEnabled, IsAlphaSliderVisible, IsAlphaTextInputVisibleIsAlphaEnabled, IsAlphaSliderVisible, IsAlphaTextInputVisible
Valori esadecimaliHex values IsHexInputVisibleIsHexInputVisible

Nota

L'opzione IsAlphaEnabled deve essere impostata su true per far sì che la casella di testo e il dispositivo di scorrimento opacità siano visualizzati.IsAlphaEnabled must be true in order to show the opacity textbox and slider. Ciò significa che la visibilità dei controlli di input può essere modificata usando le proprietà IsAlphaTextInputVisible e IsAlphaSliderVisible.The visibility of the input controls can then be modified using IsAlphaTextInputVisible and IsAlphaSliderVisible properties. Consulta la documentazione API per i dettagli.See the API documentation for details.

Cosa fare e cosa non fareDo's and Don'ts

  • Rifletti su quale sia il tipo di esperienza di selezione del colore appropriata per la tua app.Do think about what kind of color picking experience is appropriate for your app. Per alcuni scenari potrebbe non essere necessaria la selezione granulare del colore, potrebbe quindi essere sufficiente uno strumento di selezione semplificatoSome scenarios may not require granular color picking and would benefit from a simplified picker
  • Allo scopo di garantire l'esperienza di selezione più accurata possibile, usa lo spettro di forma quadrata con una dimensione di almeno 256 x 256 px oppure includi i campi di immissione testo per consentire agli utenti per perfezionare il colore selezionato.For the most accurate color picking experience, use the square spectrum and ensure it is at least 256x256px, or include the text input fields to let users refine their selected color.
  • Nei casi di utilizzo all'interno di un riquadro a comparsa, il solo tocco dello spettro o la sola regolazione del dispositivo di scorrimento non dovrebbero consentire la conferma della selezione del colore.When used in a flyout, tapping in the spectrum or adjusting the slider alone should not commit the color selection. Per confermare la selezione:To commit the selection:
    • Fornisci i pulsanti Conferma e Annulla per applicare o annullare la selezione.Provide commit and cancel buttons to apply or cancel the selection. La selezione dell'utente non sarà salvata se si fa clic sul pulsante Indietro o se si esce dal riquadro a comparsa toccando un punto che sia al suo esterno.Hitting the back button or tapping outside of the flyout will dismiss it, and not save the user's selection.
    • Oppure, al contrario, consenti che la selezione sia confermata quando si esce dal riquadro a comparsa toccando un punto al di fuori o facendo clic sul pulsante Indietro.Or, commit the selection upon dismissing the flyout, by either tapping outside of the flyout or hitting the back button.

Scaricare il codice di esempioGet the sample code