Condividi tramite

Selezione colori

Lo strumento selezione colori viene usato per cercare e selezionare i colori. 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.

Strumento selezione colori predefinito

Questo è il controllo giusto?

Usa lo strumento selezione colori per permettere all'utente di selezionare i colori all'interno dell'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.

Se l'app in questione è progettata per il disegno o attività analoghe che utilizzano la penna, valuta l'impiego dei controlli per l'inchiostrazione in abbinamento al selettore di colori.

Recommendations

  • Rifletti su quale sia il tipo di esperienza di selezione del colore appropriata per la tua app. Per alcuni scenari potrebbe non essere necessaria la selezione granulare del colore, potrebbe quindi essere sufficiente uno strumento di selezione semplificato
  • 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.
  • Quando utilizzato in un riquadro a comparsa, il solo tocco dello spettro o la sola regolazione del cursore non dovrebbe confermare la selezione del colore. Per confermare la selezione:
    • Fornisci i pulsanti Conferma e Annulla per applicare o annullare la selezione. Premere il pulsante Indietro o toccare all'esterno del riquadro a comparsa chiuderà il riquadro e non salverà la selezione dell'utente.
    • 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.

Creare uno strumento di selezione colori

Aprire l'app Raccolta WinUI e visualizzare ColorPicker in azione

La Raccolta WinUI 3 ti consente di esplorare e sfogliare esempi interattivi di controlli, caratteristiche e funzionalità di WinUI 3. Ottenere l'app da Microsoft Store o ottenere il codice sorgente in GitHub.

Questo esempio mostra come creare un strumento selezione colori predefinito 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. È possibile usare l'evento ColorChanged o la proprietà Color per accedere al colore selezionato e usarlo nella tua app. Per il codice dettagliato, vedi gli esempi che seguono.

Collegare al colore selezionato

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.

In questo esempio, esegui il binding della proprietà Color di un SolidColorBrush, utilizzato come riempimento per un rettangolo, direttamente al colore selezionato dal selettore colori. Qualsiasi modifica apportata allo strumento selezione colori ha come esito una modifica in tempo reale alla proprietà associata.

<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". 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. Per ulteriori informazioni, vedi la sezione Personalizza il selettore colori.

Salvare il colore selezionato

Talvolta potresti non voler apportare immediatamente la modifica del colore. 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. È anche possibile salvare il valore del colore selezionato per un uso successivo.

In questo esempio, lo strumento selezione colori è ospitato in un riquadro a comparsa che include i pulsanti Conferma e Annulla. Quando l'utente conferma la propria scelta di colore, salva il colore selezionato per uso successivo all'interno della tua 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 colori

Non tutti i campi sono necessari per far sì che l'utente selezioni un colore, pertanto lo strumento selezione colori è flessibile. Lo strumento offre una gamma di opzioni per consentirti di configurare il controllo in base alle tue esigenze.

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. È possibile nascondere i campi per l'immissione di testo e trasformare lo spettro dei colori in un cerchio.

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.

Mostrare lo spettro dei colori in forma circolare

Questo esempio mostra come usare la proprietà ColorSpectrumShape per configurare il selettore colori in modo tale che utilizzi uno spettro circolare rispetto al quadrato predefinito.

<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. Un utente ha maggiore controllo quando seleziona un colore specifico mediante un quadrato, poiché può visualizzare la gran parte della gamma dei colori. Lo spettro in forma circolare è da considerarsi come un'esperienza di scelta del colore più "informale".

Mostrare il canale alfa

In questo esempio, abiliti un cursore di opacità e una casella di testo nello strumento di selezione colori.

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

Strumento selezione colori con IsAlphaEnabled impostato su true

Mostrare un selettore semplice

Questo esempio mostra le modalità di configurazione dello strumento selezione colori con un'interfaccia utente semplice per un uso "informale". Mostra lo spettro in forma circolare e nascondi le caselle di immissione testo predefinite. 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. In caso contrario, dovresti lasciare visibile l'anteprima del colore.

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

Strumento selezione colori semplice

Specificare la direzione del layout

Utilizzare la proprietà Orientation per specificare se l'oggetto ColorPicker deve essere allineato verticalmente o orizzontalmente. Ciò influisce sulla posizione dei controlli di modifica relativi allo spettro dei colori. Per impostazione predefinita, l'orientamento è Verticale.

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

Selezione colori in un orientamento orizzontale

Annotazioni

Se l'orientamento è impostato su orizzontale, ColorPicker non applica la proprietà IsMoreButtonVisible.

Mostrare o nascondere le funzionalità aggiuntive

La tabella mostra tutte le opzioni che è possibile usare per configurare il controllo ColorPicker.

Caratteristica / Funzionalità Proprietà
Spettro dei colori ÈVisibileLoSpettroDiColori, FormaDelloSpettroDiColori, ComponentiDelloSpettroDiColori
Anteprima colore IsColorPreviewVisible
Valori colore IsColorSliderVisible, IsColorChannelTextInputVisible
Valori dell'opacità IsAlphaEnabled, IsAlphaSliderVisible, IsAlphaTextInputVisible
Valori esadecimali È visibile l'input esadecimale?

Annotazioni

IsAlphaEnabled deve essere impostata su true affinché la casella di testo e il cursore dell'opacità siano visualizzati. Ciò significa che la visibilità dei controlli di input può essere modificata usando le proprietà IsAlphaTextInputVisible e IsAlphaSliderVisible. Consulta la documentazione API per i dettagli.

UWP e WinUI per la piattaforma UWP

Importante

Le informazioni e gli esempi in questo articolo sono ottimizzati per le app che usano Windows App SDK e WinUI 3, ma sono generalmente applicabili alle app UWP che usano WinUI 2. Per informazioni ed esempi specifici della piattaforma, consultare le indicazioni di riferimento sulle API UWP.

Questa sezione contiene informazioni necessarie per usare il controllo in un'app UWP o WinUI 2.

Il controllo ColorPicker per le app UWP è incluso nell'ambito di WinUI per la piattaforma UWP. Per altre info, incluse le istruzioni di installazione, vedi WinUI per UWP. Le API per questo controllo esistono negli spazi dei nomi Windows.UI.Xaml.Controls e Microsoft.UI.Xaml.Controls .

Ti consigliamo di usare la versione più recente di WinUI per la piattaforma UWP per ottenere gli stili, i modelli e le funzionalità più recenti per tutti i controlli. WinUI 2.2 o versioni successive include un nuovo modello per questo controllo che usa angoli arrotondati. Per altre informazioni, vedere Raggio dell'angolo.

Per usare il codice in questo articolo con WinUI 2, usa un alias in XAML (usiamo muxc) per rappresentare le API della libreria dell'interfaccia utente di Windows incluse nel progetto. Per altre informazioni, vedi Introduzione a WinUI 2 .

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

<muxc:ColorPicker />
  • Last updated on