Creare e personalizzare un modulo

Articolo
10/05/2023

Se si crea un'app che richiede agli utenti di immettere una quantità significativa di informazioni, è probabile che si voglia creare un modulo che gli stessi utenti possano compilare. Questo articolo illustra ciò che occorre sapere per creare un modulo utile e affidabile.

Verrà descritto ora quali sono i controlli XAML da usare in un modulo, come disporli in modo ottimale nella pagina e come ottimizzare il modulo per la modifica delle dimensioni dello schermo. Tuttavia, poiché un modulo riguarda la posizione relativa degli elementi visivi, verrà preso in esame il layout di pagina con XAML.

Cosa sapere.

La piattaforma UWP non dispone di un modulo di controllo esplicito da aggiungere all'app e configurare. È necessario invece creare un modulo disponendo una raccolta di elementi dell'interfaccia utente in una pagina.

A tale scopo, è necessario conoscere i pannelli di layout. Si tratta di contenitori in cui sono inclusi gli elementi dell'interfaccia utente dell'app e che consentono di disporli e raggrupparli. Inserendo i pannelli di layout all'interno di altri pannelli di layout, si ha a disposizione un elevato livello di controllo sulla posizione e sulla modalità di visualizzazione degli elementi in relazione reciproca. Questo rende anche più semplice l'adattamento dell'app alla modifica delle dimensioni dello schermo.

Leggere questa documentazione sui pannelli di layout. Poiché i moduli sono in genere visualizzati in una o più colonne verticali, è necessario raggruppare elementi simili in un oggetto StackPanel ed effettuare la disposizione di quelli all'interno di un oggettoRelativePanel, se necessario. Iniziare quindi a raggruppare alcuni pannelli. Come riferimento, è un riportato di seguito 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>

Quali elementi vanno inseriti in un modulo?

È necessario inserire nel modulo una serie di controlli XAML. Probabilmente si ha già familiarità con tali controlli, ma è comunque possibile leggere queste informazioni come promemoria. In particolare, è preferibile usare controlli che consentono all'utente di immettere testo o di scegliere da un elenco di valori. Di seguito è riportato un elenco di opzioni che è possibile aggiungere. Non è necessario leggere tutte le informazioni su tali opzioni, ma solo quelle che consentono di comprenderne l'aspetto e il funzionamento.

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 data.
TimePicker consente a un utente di selezionare un valore ora.
ComboBox si espande per visualizzare un elenco di elementi selezionabili. È possibile ottenere altre informazioni a riguardo qui

È anche possibile aggiungere pulsanti che consentono all'utente di salvare o annullare.

Definire il formato dei controlli nel layout

Si è in grado di disporre i pannelli di layout e si è già a conoscenza di quali elementi aggiungere. In quale modo possono essere formattati? Nella pagina moduli sono presenti alcune indicazioni di progettazione specifiche. Leggere le sezioni relative a tipi di moduli e layout per consigli utili. Vengono descritti brevemente i concetti di accessibilità e layout

Tendendo in considerazione quanto sopra indicato, è necessario iniziare ad aggiungere i controlli desiderati nel layout, assicurandosi che siano dotati di etichette e di spaziatura corretta. Ad esempio di seguito è riportata la struttura di base di un modulo a pagina singola che usa il layout, i controlli e le linee guida per la progettazione precedenti:

<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 altre proprietà per una migliore esperienza visiva.

Rendere reattivo il layout

Gli utenti potrebbero visualizzare l'interfaccia utente su un'ampia gamma di dispositivi con larghezze dello schermo differenti. Per garantire un'esperienza ottimale indipendentemente dallo schermo usato dall'utente, è consigliabile la progettazione reattiva. Leggere le informazioni in tale pagina per consigli sulle filosofie di progettazione da considerare mentre si procede.

Nella pagina Layout reattivi con XAML è fornita una panoramica dettagliata di come implementare questo tipo di layout. Ci si concentrerà per il momento sui layout fluidi e sugli stati di visualizzazione in XAML.

La struttura dei moduli di base creati rappresenta già un layout fluido, in quanto dipende principalmente dalla posizione relativa dei controlli con uso minimo di posizioni e dimensioni di pixel specifiche. Tenere in considerazione questo materiale sussidiario per eventuali altre interfacce utente che sarà possibile creare in futuro.

Gli stati di visualizzazione rappresentano un aspetto ancora più importante per i layout reattivi. Uno stato di visualizzazione definisce i valori di proprietà applicati a un determinato elemento quando una condizione specifica viene soddisfatta. Leggere come effettuare tale operazione nel codice xaml e come implementare tali stati in un modulo. Ecco l'aspetto che potrebbe avere uno degli elementi di base nell'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 usi StateTriggers, verifica sempre che la proprietà VisualStateGroups sia associata al primo elemento figlio della radice. In questo caso, Grid è il primo elemento figlio dell’elemento radice Page.

Non è pratico creare stati di visualizzazione per un'ampia gamma di dimensioni dello schermo, né è probabile che più di due di essi possano avere un impatto significativo sull'esperienza utente dell'app. È consigliabile invece effettuare la progettazione per pochi punti di interruzione chiave. Leggere qui per altre informazioni.

Aggiungere il supporto di accessibilità

Dopo aver creato correttamente un layout in grado di reagire alle modifiche delle dimensioni dello schermo, è possibile migliorare ulteriormente l'esperienza utente rendendo accessibile l'app. A tale scopo, possono essere eseguite numerose operazioni, ma nel caso di un modulo come quello indicato è veramente semplice. Concentrarsi su quanto segue:

Supporto per tastiera: verificare che gli elementi nei pannelli dell'interfaccia utente siano disposti nello stesso ordine con cui vengono visualizzati sullo schermo, per consentire all'utente di spostarsi facilmente tra di essi.
Supporto per l'utilità per la lettura dello schermo: assicurarsi che tutti i controlli dispongano di un nome descrittivo.

Quando vengono creati layout più complessi con più elementi visivi, è necessario consultare l'elenco di controllo per l'accessibilità per altri dettagli. Oltre a essere necessaria per un'app, l'accessibilità consente di raggiungere ed entrare in contatto con un pubblico più ampio.

Approfondimenti

Nonostante sia stato creato un modulo in questo contesto, i concetti di layout e controlli sono applicabili a tutte le interfacce utente XAML che è possibile creare. Consultare la documentazione indicata e fare alcune prove con il modulo a disposizione, aggiungendo nuove funzionalità dell'interfaccia utente e perfezionando ulteriormente l'esperienza utente. Per istruzioni ancora più dettagliate sulle funzionalità di layout, vedere le esercitazioni sulla creazione di layout adattivi

Anche i moduli non devono essere isolati. È possibile procedere ulteriormente e incorporare i dati all'interno di un modello di elenco/dettagli o in un controllo NavigationView. Per usare il file code-behind per il modulo, puoi iniziare con quanto indicato nella panoramica degli eventi.

API e documentazione utili

Di seguito un breve riepilogo delle API e di altra documentazione utile per iniziare a usare il data binding.

API utili

API	Descrizione
Controlli utili per i moduli	Elenco di controlli di input utili per la creazione di moduli e materiale sussidiario che indica dove usarli.
Griglia	Pannello per la disposizione degli elementi in layout su più righe e colonne.
RelativePanel	Pannello per la disposizione degli elementi rispetto ad altri elementi e ai limiti del pannello.
StackPanel	Pannello per la disposizione degli elementi in una singola riga orizzontale o verticale.
VisualState	Consente di impostare l'aspetto degli elementi dell'interfaccia utente che si trovano in stati particolari.

Documentazione utile

Argomento	Descrizione
Panoramica dell'accessibilità	Panoramica su larga scala delle opzioni di accessibilità nelle app.
Elenco di controllo per l'accessibilità	Elenco di controllo utile per garantire che l'app soddisfi gli standard di accessibilità.
Panoramica degli eventi	Informazioni dettagliate sull'aggiunta e sull'organizzazione di eventi per gestire le azioni dell'interfaccia utente.
Moduli	Linee guida generali per la creazione di moduli.
Pannelli di layout	Viene fornita una panoramica dei tipi di pannelli di layout e delle posizioni in cui usarli.
Modello elenco/dettagli	Modello di progettazione che può essere implementato per uno o più moduli.
NavigationView	Controllo che può contenere uno o più moduli.
Progettazione reattiva	Panoramica dei principi di responsive design su larga scala.
Layout reattivi con XAML	Informazioni specifiche sugli stati di visualizzazione e altre implementazioni del responsive design.
Dimensioni dello schermo per il responsive design	Indicazioni sulle dimensioni dello schermo per le quali devono essere definiti i layout reattivi.

Esempi utili di codice

Esempio di codice	Descrizione
Database degli ordini cliente	Layout e moduli in azione su un esempio di codice aziendale su più pagine.
Raccolta di controlli XAML	Selezione di controlli XAML e informazioni su come vengono implementati.
Esempi di codice aggiuntivi	Scegli Controlli, layout e testo nell'elenco a discesa delle categorie per visualizzare esempi di codice correlati.