Nota
L'accesso a questa pagina richiede l'autorizzazione. È possibile provare ad accedere o modificare le directory.
L'accesso a questa pagina richiede l'autorizzazione. È possibile provare a modificare le directory.
I controlli sono gli elementi dell'interfaccia utente che costituiscono l'app Windows, ovvero pulsanti, campi di testo, elenchi, selezione e altro ancora. Un controllo visualizza il contenuto o consente agli utenti di interagire con l'app. Un modello combina più controlli in una ricetta riutilizzabile per scenari comuni come moduli o disposizioni elenco-dettaglio.
Windows offre oltre 45 controlli pronti all'uso, tutti basati sul sistema di progettazione Fluent Design System. Da semplici interruttori a visualizzazioni di dati avanzate come griglia ed elenco, questi controlli consentono di creare interfacce visivamente lucidate, accessibili e reattive tra i dispositivi.
Esplorare gli articoli in questa sezione per indicazioni sulla progettazione, esempi di codice e procedure consigliate per ogni controllo e modello.
Iniziare
Per informazioni su come aggiungere controlli all'app e collegare gestori eventi, vedi Aggiungere controlli e gestire gli eventi. Per personalizzare l'aspetto del controllo con stili XAML riutilizzabili, vedi Applicazione di stili ai controlli.
Controlli
La tabella seguente elenca i controlli delle app Windows disponibili in WinUI, con collegamenti alla relativa documentazione.
Input di base
| Image | Controllo | Descrizione |
|---|---|---|
|
pulsanti | Controllo che risponde all'input dell'utente e genera un evento Click. Include pulsante, pulsante a discesa, pulsante di divisione, interruttore e altro ancora. |
|
Caselle di controllo | Controllo che un utente può selezionare o cancellare. |
|
Caselle combinate | Un elenco a discesa di elementi tra cui un utente può selezionare. |
|
Collegamenti ipertestuali | Pulsante visualizzato come testo del collegamento ipertestuale e può passare a un URI o gestire un evento di clic. |
|
Pulsanti di opzione | Controllo che consente a un utente di selezionare una singola opzione da un gruppo di opzioni. |
|
Controllo classificazione | Valuta qualcosa da 1 a 5 stelle. |
|
dispositivi di scorrimento | Controllo che consente all'utente di selezionare da un intervallo di valori spostando un controllo Thumb lungo una traccia. |
|
Interruttori a levetta | Interruttore che può essere commutato tra 2 stati. |
Collections
| Image | Controllo | Descrizione |
|---|---|---|
|
Visualizzazione Elementi | Controllo che presenta una raccolta di elementi utilizzando diversi layout. |
|
Visualizzazione elenco e visualizzazione griglia | Controlli che presentano una raccolta di elementi in un elenco verticale o in righe e colonne. |
|
Visualizzazione a rotazione | Presenta una raccolta di elementi che l'utente può scorrere, un elemento alla volta. |
|
Cercapersone Pips | Controllo per consentire all'utente di spostarsi in una raccolta impaginata quando i numeri di pagina non devono essere noti visivamente. |
|
Visualizzazione ad albero | Modello di elenco gerarchico con nodi di espansione e compressione che contengono elementi annidati. |
|
Ripetitore di elementi | Controllo flessibile e primitivo per i layout basati sui dati. |
|
Scorrere | Gestura tattile per azioni rapide di menu sugli elementi. |
|
Trascina per aggiornare | Consente di trascinare verso il basso una raccolta di elementi in un elenco o in una griglia per aggiornare il contenuto della raccolta. |
Finestre di dialogo e menu a discesa
| Image | Controllo | Descrizione |
|---|---|---|
|
Dialoghi | Finestra di dialogo che può essere personalizzata per contenere qualsiasi contenuto XAML. |
|
Riquadri a comparsa | Mostra informazioni contestuali e abilita l'interazione dell'utente. |
|
Suggerimento per l'insegnamento | Un pannello a comparsa ricco di contenuti per guidare gli utenti e consentire momenti di insegnamento. |
Forme
| Image | Controllo | Descrizione |
|---|---|---|
| Moduli | Modello per la raccolta e l'invio dell'input dell'utente tramite una combinazione di controlli di input e etichette. |
Elementi multimediali, grafica e forme
| Image | Controllo | Descrizione |
|---|---|---|
|
icone | Rappresentare i controlli icona che usano tipi di immagine diversi come contenuto. |
|
|
Icone animate | Elemento che visualizza e controlla un'icona che si anima quando l'utente interagisce con il controllo. |
|
Immagini e pennelli immagine | Controllo per visualizzare il contenuto dell'immagine. |
|
Riproduzione di contenuti multimediali | Controllo per visualizzare contenuto video e immagine. |
|
Forme | Disegna forme come ellissi, rettangoli e poligoni. |
Annotazioni
Controlli penna (InkCanvas, InkToolbar): Questi controlli UWP non sono disponibili nel canale stabile di WinUI 3.
InkCanvas è disponibile come API sperimentale (introdotta in SDK per app di Windows 2.0 Sperimentale 1). Per informazioni sullo stato corrente e sulle alternative, vedere Gap di controllo noti.
Menu e barre degli strumenti
| Image | Controllo | Descrizione |
|---|---|---|
|
Menu e menu di scelta rapida | Mostra un elenco contestuale di semplici comandi o opzioni. |
|
Barra dei comandi | Barra degli strumenti per la visualizzazione di comandi specifici dell'applicazione che gestisce il layout e il ridimensionamento del relativo contenuto. |
|
Menu a discesa della barra dei comandi | Una barra degli strumenti ridotta che visualizza comandi proattivi e un menu facoltativo di comandi. |
|
Menu a comparsa e barra dei menu | Menu classico, che consente la visualizzazione di MenuItems contenenti MenuFlyoutItems. |
Navigazione
| Image | Controllo | Descrizione |
|---|---|---|
|
Barra dei breadcrumb | Mostra il percorso di spostamento verso la posizione corrente. |
| Elenco/dettagli | Modello che visualizza un elenco di elementi insieme ai dettagli dell'elemento attualmente selezionato. | |
|
Visualizzazione di navigazione | Layout verticale comune per le aree principali dell'app tramite un menu di navigazione collassabile. |
| Screenshot del controllo Pivot | Punto cardine | Presenta informazioni provenienti da origini diverse in una visualizzazione a schede. |
|
Barra del selettore | Presenta informazioni da un piccolo set di origini diverse. L'utente può sceglierne uno. |
|
Visualizzazione a schede | Controllo che visualizza una raccolta di schede che possono essere utilizzate per visualizzare diversi documenti. |
Gente
| Image | Controllo | Descrizione |
|---|---|---|
|
Immagine di una persona | Visualizza l'immagine di una persona/contatto. |
Pickers
| Image | Controllo | Descrizione |
|---|---|---|
|
Selezione colori | Controllo che visualizza uno spettro di colori selezionabile. |
|
Selezione data calendario | Controllo che consente agli utenti di selezionare un valore di data usando un calendario. |
|
Visualizzazione Calendario | Controllo che presenta un calendario da cui un utente può scegliere una data. |
|
Selezione data | Controllo che consente a un utente di selezionare un valore di data. |
|
Selezione dell'ora | Controllo configurabile che consente a un utente di selezionare un valore di ora. |
Scorrimento e layout
| Image | Controllo | Descrizione |
|---|---|---|
| Screenshot del controllo Expander | Expander | Contenitore con un'intestazione che può essere espansa per visualizzare un corpo con più contenuto. |
|
Controlli di scorrimento e panoramica | Controllo contenitore che consente all'utente di eseguire la panoramica e di ingrandirne il contenuto. |
|
Barra di scorrimento annotata | Controllo che estende la funzionalità di una normale barra di scorrimento verticale per una semplice navigazione tra raccolte di grandi dimensioni. |
|
Zoom semantico | Consente all'utente di eseguire lo zoom tra due visualizzazioni diverse di una raccolta, semplificando lo spostamento tra raccolte di elementi di grandi dimensioni. |
|
Vista suddivisa | Contenitore con 2 aree di contenuto, con più opzioni di visualizzazione per il riquadro. |
|
Visualizzazione a due riquadri | Un controllo con due aree di contenuto che si estendono nello spazio disponibile, affiancate o dall'alto al basso. |
Stato e informazioni
| Image | Controllo | Descrizione |
|---|---|---|
|
Progress | Mostra lo stato di avanzamento dell'app in un'attività usando un indicatore di stato o un anello di stato. |
|
Suggerimento | Visualizza informazioni per un elemento in una finestra popup. |
|
Barra informazioni | Messaggio inline per visualizzare le informazioni sulle modifiche dello stato a livello di app. |
|
Notifica informazioni | Interfaccia utente non intrusiva per visualizzare le notifiche o portare l'attenzione su un'area. |
Text
| Image | Controllo | Descrizione |
|---|---|---|
|
Casella di suggerimento automatico | Controllo per fornire suggerimenti durante la digitazione da parte dell'utente. |
|
Blocco di testo | Controllo leggero per la visualizzazione di piccole quantità di testo. |
|
Blocco di testo ricco | Controllo che visualizza testo formattato, collegamenti ipertestuali, immagini inline e altri contenuti avanzati. |
|
Casella di testo | Campo di testo normale a riga singola o a più righe. |
|
Casella di modifica avanzata | Controllo di modifica del testo avanzato che supporta testo formattato, collegamenti ipertestuali e altro contenuto avanzato. |
|
Casella password | Controllo per l'immissione delle password. |
|
Casella numerica | Controllo di testo utilizzato per l'input numerico e la valutazione delle equazioni algebriche. |
| Etichette | Indicazioni per l'aggiunta di etichette accessibili ai controlli di input. |
Barra del titolo
| Image | Controllo | Descrizione |
|---|---|---|
|
Barra del titolo | Personalizzare la barra del titolo della finestra dell'app. |
Raccolta WinUI 3
L'app WinUI 3 Gallery è il modo migliore per esplorare questi controlli pratici. Fornisce demo interattive della maggior parte dei controlli, delle funzionalità e dei modelli fluent design di WinUI, che lo rendono un compagno ideale per questa documentazione. Installarlo per provare i controlli in tempo reale e collegarsi direttamente dalle singole pagine di controllo.
- Ottieni la Raccolta WinUI 3 da Microsoft Store.
- Ottenere il codice sorgente da GitHub.
Controlli e risorse aggiuntivi
Il Windows Community Toolkit è una raccolta di helper, estensioni e controlli aggiuntivi dell'interfaccia utente che integrano i controlli WinUI predefiniti. È basato sulla community e gestito da Microsoft, che copre scenari comuni come layout avanzati, convertitori e animazioni.
Per l'accesso anticipato a controlli e funzionalità sperimentali, vedere Windows Community Toolkit Labs, in cui vengono sviluppati e testati nuovi componenti prima di passare al toolkit principale.