Creare e personalizzare un modulo

Se si sta creando un'app che richiede agli utenti di immettere una quantità significativa di informazioni, è probabile che si voglia creare un modulo da compilare. Questo articolo illustra ciò che è necessario sapere per creare un modulo utile e affidabile.

Verranno illustrati i controlli XAML che possono essere inseriti in un formulario, come organizzarli al meglio sulla pagina e come ottimizzare il formulario per adattarsi alle dimensioni variabili dello schermo. Tuttavia, poiché un modulo riguarda la posizione relativa degli elementi visivi, esaminiamo prima di tutto il layout di pagina con XAML.

Cosa c'è da sapere?

La piattaforma UWP non dispone di un controllo di modulo esplicito che tu possa configurare e aggiungere alla tua app. Dovrai invece creare un modulo disponendo una raccolta di elementi dell'interfaccia utente in una pagina.

A tale scopo, è necessario comprendere i pannelli di layout . Si tratta di contenitori che contengono gli elementi dell'interfaccia utente dell'app, consentendo di disporre e raggrupparli. L'inserimento di pannelli di layout all'interno di altri pannelli di layout offre un notevole controllo sulla posizione e sul modo in cui gli elementi vengono visualizzati l'uno rispetto all'altro. In questo modo è molto più semplice adattare l'app alla modifica delle dimensioni dello schermo.

Leggi questa documentazione sui pannelli di layout. Poiché i moduli vengono in genere visualizzati in una o più colonne verticali, è consigliabile raggruppare elementi simili in un StackPanele disporre quelli all'interno di un RelativePanel se necessario. Iniziare a mettere insieme alcuni pannelli: se è necessario un riferimento, di seguito è riportato un framework di layout di base per un modulo a due colonne:

<RelativePanel>
    <StackPanel x:Name="Customer" Margin="20">
        <!--Content-->
    </StackPanel>
    <StackPanel x:Name="Associate" Margin="20" RelativePanel.RightOf="Customer">
        <!--Content-->
    </StackPanel>
    <StackPanel x:Name="Save" Orientation="Horizontal" RelativePanel.Below="Customer">
        <!--Save and Cancel buttons-->
    </StackPanel>
</RelativePanel>

Cosa include un modulo?

Dovrai compilare il tuo modulo con un assortimento di controlli XAML . Probabilmente conosci già questi argomenti, ma sentiti libero di leggerli se hai bisogno di un ripasso. In particolare, è necessario che i controlli consentano all'utente di immettere testo o scegliere da un elenco di valori. Si tratta di un elenco di opzioni di base che è possibile aggiungere: non è necessario leggere tutto su di loro, in modo da capire cosa sembrano e come funzionano.

• TextBox consente a un utente di immettere testo nell'app.
• ToggleSwitch consente a un utente di scegliere tra due opzioni.
• DatePicker consente a un utente di selezionare un valore di data.
• TimePicker consente a un utente di selezionare un valore di ora.
• ComboBox si espande per visualizzare un elenco di elementi selezionabili. Puoi saperne di più su di loro qui

È anche possibile aggiungere pulsanti , in modo che l'utente possa salvare o annullare.

Formattare i controlli nel layout

Sai come disporre i pannelli di layout e avere elementi che vuoi aggiungere, ma come devono essere formattati? La pagina dei moduli include alcune linee guida di progettazione specifiche. Leggere le sezioni su Tipi di moduli e layout per consigli utili. L'accessibilità e il layout relativo verranno illustrati più brevemente.

Tenendo presente questo consiglio, è consigliabile iniziare ad aggiungere i controlli che preferisci nel layout, assicurandosi che siano etichettati e distanziati correttamente. Ecco una bozza essenziale di un modulo a pagina singola, utilizzando il layout, i controlli e le linee guida di progettazione indicate sopra.

<RelativePanel>
    <StackPanel x:Name="Customer" Margin="20">
        <TextBox x:Name="CustomerName" Header= "Customer Name" Margin="0,24,0,0" HorizontalAlignment="Left" />
        <TextBox x:Name="Address" Header="Address" PlaceholderText="Address" Margin="0,24,0,0" HorizontalAlignment="Left" />
        <TextBox x:Name="Address2" Margin="0,24,0,0" PlaceholderText="Address 2" HorizontalAlignment="Left" />
            <RelativePanel>
                <TextBox x:Name="City" PlaceholderText="City" Margin="0,24,0,0" HorizontalAlignment="Left" />
                <ComboBox x:Name="State" PlaceholderText="State" Margin="24,24,0,0" RelativePanel.RightOf="City">
                    <!--List of valid states-->
                </ComboBox>
            </RelativePanel>
    </StackPanel>
    <StackPanel x:Name="Associate" Margin="20" RelativePanel.Below="Customer">
        <TextBox x:Name="AssociateName" Header= "Associate" Margin="0,24,0,0" HorizontalAlignment="Left" />
        <DatePicker x:Name="TargetInstallDate" Header="Target install Date" HorizontalAlignment="Left" Margin="0,24,0,0"></DatePicker>
        <TimePicker x:Name="InstallTime" Header="Install Time" HorizontalAlignment="Left" Margin="0,24,0,0"></TimePicker>
    </StackPanel>
    <StackPanel x:Name="Save" Orientation="Horizontal" RelativePanel.Below="Associate">
        <Button Content="Save" Margin="24" />
        <Button Content="Cancel" Margin="24" />
    </StackPanel>
</RelativePanel>

È possibile personalizzare i controlli con più proprietà per un'esperienza visiva migliore.

Rendere reattivo il layout

Gli utenti potrebbero visualizzare l'interfaccia utente in un'ampia gamma di dispositivi con larghezze dello schermo diverse. Per assicurarsi che abbiano un'esperienza ottimale indipendentemente dallo schermo, è consigliabile usare progettazione reattiva. Leggere la pagina per consigli utili sulle filosofie di progettazione da tenere a mente mentre si procede.

La pagina Layout reattivi con XAML offre una panoramica dettagliata di come implementare questa funzionalità. Per il momento, ci concentreremo su layout fluidi e stati di visualizzazione in XAML.

La struttura del modulo di base che abbiamo creato è già un layout fluido , poiché si basa principalmente sulla posizione relativa dei controlli, utilizzando solo minimamente dimensioni e posizioni di pixel specifiche. Tenere presente queste indicazioni per altre interfacce utente che è possibile creare in futuro.

Per i layout reattivi, gli stati visivi più importanti sono . Uno stato visivo definisce i valori delle proprietà applicati a un determinato elemento quando una determinata condizione è vera. Informati su come eseguire questa operazione in XAMLe quindi implementarla nel tuo formulario. Ecco come un molto di base potrebbe apparire nel nostro esempio precedente:

<Page ...>
    <Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="640" />
                    </VisualState.StateTriggers>

                    <VisualState.Setters>
                        <Setter Target="Associate.(RelativePanel.RightOf)" Value="Customer"/>
                        <Setter Target="Associate.(RelativePanel.Below)" Value=""/>
                        <Setter Target="Save.(RelativePanel.Below)" Value="Customer"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <RelativePanel>
            <!-- Customer StackPanel -->
            <!-- Associate StackPanel -->
            <!-- Save StackPanel -->
        </RelativePanel>
    </Grid>
</Page>

Importante

Quando utilizzi StateTriggers, assicurati sempre che VisualStateGroups sia collegato al primo elemento figlio della radice. In questo caso, Grid è il primo figlio dell'elemento radice Page.

Non è pratico creare stati visivi per un'ampia gamma di dimensioni dello schermo, né è probabile che più di un paio abbiano un impatto significativo sull'esperienza dell'utente della tua app. È consigliabile invece progettare per alcuni punti di interruzione chiave: puoi leggere di più qui.

Aggiungere il supporto per l'accessibilità

Ora che hai un layout ben costruito che risponde alle modifiche apportate alle dimensioni dello schermo, un'ultima cosa che puoi fare per migliorare l'esperienza utente consiste nell'rendere l'app accessibile. Ci sono molti elementi che possono contribuire a questo, ma in un formato come questo è più facile di quanto sembri. Concentrarsi sugli elementi seguenti:

• Supporto della tastiera: assicurarsi che l'ordine degli elementi nei pannelli dell'interfaccia utente corrisponda al modo in cui vengono visualizzati sullo schermo, in modo che un utente possa facilmente tabularli.
• Supporto per lettori di schermo: assicurarsi che tutti i controlli abbiano un nome descrittivo.

Quando si creano layout più complessi con più elementi visivi, è consigliabile consultare l'elenco di controllo per l'accessibilità per altri dettagli. Dopo tutto, anche se l'accessibilità non è necessaria per un'app, consente di raggiungere e coinvolgere un pubblico più ampio.

Andare oltre

Anche se hai creato un modulo qui, i concetti di layout e controlli sono applicabili a tutte le interfacce utente XAML che potresti costruire. Sentiti libero di tornare ai documenti a cui ti abbiamo indirizzato e sperimentare con il modulo che hai, aggiungendo nuove funzionalità UI e perfezionando ulteriormente l'esperienza utente. Per una guida passo passo sulle funzionalità di layout più dettagliate, consultare l'esercitazione sul layout adattivo

I moduli non devono necessariamente esistere in un vuoto. È possibile fare un ulteriore passo avanti e incorporare i tuoi moduli all'interno di un modello elenco/dettagli o di un NavigationView. Oppure, se vuoi lavorare al code-behind per il tuo modulo, potresti voler iniziare con la nostra panoramica degli eventi .

API e documenti utili

Di seguito è riportato un breve riepilogo delle API e di altre utili documentazione che consentono di iniziare a usare il data binding.

API utili

API (Interfaccia di Programmazione delle Applicazioni)	Descrizione
Controlli utili per i moduli	Elenco di controlli di input utili per la creazione di moduli e indicazioni di base su dove usarli.
griglia di	Pannello per la disposizione degli elementi in layout a più righe e a più colonne.
Pannello Relativo	Pannello per la disposizione degli elementi in relazione ad altri elementi e ai limiti del pannello.
StackPanel	Pannello per la disposizione degli elementi in una singola linea orizzontale o verticale.
VisualState	Consente di impostare l'aspetto degli elementi dell'interfaccia utente quando si trovano in determinati stati.

Documentazione utile

Argomento	Descrizione
panoramica dell'accessibilità	Panoramica generale delle opzioni di accessibilità nelle app.
elenco di controllo per l'accessibilità	Un elenco di controllo pratico per assicurarsi che l'app soddisfi gli standard di accessibilità.
panoramica degli eventi	Dettagli sull'aggiunta e la strutturazione di eventi per gestire le azioni dell'interfaccia utente.
Forme	Linee guida generali per la creazione di moduli.
pannelli layout	Fornisce una panoramica dei tipi di pannelli di layout e della posizione in cui usarli.
modello elenco/dettagli	Modello di progettazione che può essere implementato intorno a uno o più form.
NavigationView	Un controllo che può contenere uno o più moduli.
progettazione reattiva	Panoramica dei principi della progettazione reattiva su larga scala.
Layout adattivi con XAML	Informazioni specifiche sugli stati di visualizzazione e altre implementazioni della progettazione reattiva.
dimensioni dello schermo per la progettazione reattiva	Indicazioni sulle dimensioni dello schermo a cui definire l'ambito dei layout reattivi.

Esempi di codice utili

Esempio di codice	Descrizione
database degli ordini dei clienti	Vedere layout e moduli in azione in un esempio aziendale a più pagine.
Raccolta di controlli XAML	Vedi una selezione di controlli XAML e come vengono implementati.
esempi di codice aggiuntivi	Scegliere Controlli, layout e testo nell'elenco a discesa delle categorie per visualizzare i campioni di codice correlati.