Creare e personalizzare un moduloCreate and customize a form

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.If you're creating an app that requires users to input a significant amount of information, chances are you'll want to create a form for them to fill out. This article will show you what you need to know in order to create a form that is useful and robust.

Non si tratta di un'esercitazione.This is not a tutorial. Se si desidera consultarne una, vedere l'esercitazione sul layout adattivo, che offre un'esperienza guidata dettagliata.If you want one, see our adaptive layout tutorial, which will provide you with a step-by-step guided experience.

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.We'll discuss what XAML controls go into a form, how to best arrange them on your page, and how to optimize your form for changing screen sizes. Tuttavia, poiché un modulo riguarda la posizione relativa degli elementi visivi, verrà preso in esame il layout di pagina con XAML.But because a form is about the relative position of visual elements, let's first discuss page layout with XAML.

Cosa sapere.What do you need to know?

La piattaforma UWP non dispone di un modulo di controllo esplicito da aggiungere all'app e configurare.UWP does not have an explicit form control that you can add to your app and configure. È necessario invece creare un modulo disponendo una raccolta di elementi dell'interfaccia utente in una pagina.Instead, you'll need to create a form by arranging a collection of UI elements on a page.

A tale scopo, è necessario conoscere i pannelli di layout.To do so, you'll need to understand layout panels. Si tratta di contenitori in cui sono inclusi gli elementi dell'interfaccia utente dell'app e che consentono di disporli e raggrupparli.These are containers that hold your app's UI elements, allowing you to arrange and group them. 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.Placing layout panels within other layout panels gives you a great deal of control over where and how your items display in relation to one another. Questo rende anche più semplice l'adattamento dell'app alla modifica delle dimensioni dello schermo.This also makes it far easier to adapt your app to changing screen sizes.

Leggere questa documentazione sui pannelli di layout.Read this documentation on layout panels. 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.Because forms are usually displayed in one or more vertical columns, you'll want to group similar items in a StackPanel, and arrange those within a RelativePanel if you need to. Iniziare quindi a raggruppare alcuni pannelli. Come riferimento, è un riportato di seguito un framework di layout di base per un modulo a due colonne:Start putting together some panels now — if you need a reference, below is a basic layout framework for a two-column form:

<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?What goes in a form?

È necessario inserire nel modulo una serie di controlli XAML.You'll need to fill your form with an assortment of XAML Controls. Probabilmente si ha già familiarità con tali controlli, ma è comunque possibile leggere queste informazioni come promemoria.You're probably familiar with those, but feel free to read up if you need a refresher. In particolare, è preferibile usare controlli che consentono all'utente di immettere testo o di scegliere da un elenco di valori.In particular, you'll want controls that allow your user to input text or choose from a list of values. 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.This is a basic list of options you could add – you don't need to read everything about them, just enough so you understand what they look like and how they work.

  • TextBox consente a un utente di immettere testo nell'app.TextBox lets a user input text into your app.
  • ToggleSwitch consente a un utente di scegliere tra due opzioni.ToggleSwitch lets a user choose between two options.
  • DatePicker consente a un utente di selezionare un valore data.DatePicker lets a user select a date value.
  • TimePicker consente a un utente di selezionare un valore ora.TimePicker lets a user select a time value.
  • ComboBox si espande per visualizzare un elenco di elementi selezionabili.ComboBox expand to display a list of selectable items. È possibile ottenere altre informazioni a riguardo quiYou can learn more about them here

È anche possibile aggiungere pulsanti che consentono all'utente di salvare o annullare.You also might want to add buttons, so the user can save or cancel.

Definire il formato dei controlli nel layoutFormat controls in your 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?You know how to arrange layout panels and have items you'd like to add, but how should they be formatted? Nella pagina moduli sono presenti alcune indicazioni di progettazione specifiche.The forms page has some specific design guidance. Leggere le sezioni relative a tipi di moduli e layout per consigli utili.Read through the sections on Types of forms and layout for useful advice. Vengono descritti brevemente i concetti di accessibilità e layoutWe'll discuss accessibility and relative layout more shortly.

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.With that advice in mind, you should start adding your controls of choice into your layout, being sure they're given labels and spaced properly. 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:As an example, here's the bare-bones outline for a single-page form using the above layout, controls, and design guidance:

<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.Feel free to customize your controls with more properties for a better visual experience.

Rendere reattivo il layoutMake your layout responsive

Gli utenti potrebbero visualizzare l'interfaccia utente su un'ampia gamma di dispositivi con larghezze dello schermo differenti.Users might view your UI on a variety of devices with different screen widths. Per garantire un'esperienza ottimale indipendentemente dallo schermo usato dall'utente, è consigliabile la progettazione reattiva.To ensure that they have a good experience regardless of their screen, you should use responsive design. Leggere le informazioni in tale pagina per consigli sulle filosofie di progettazione da considerare mentre si procede.Read through that page for good advice on the design philosophies to keep in mind as you proceed.

Nella pagina Layout reattivi con XAML è fornita una panoramica dettagliata di come implementare questo tipo di layout.The Responsive layouts with XAML page gives a detailed overview of how to implement this. Ci si concentrerà per il momento sui layout fluidi e sugli stati di visualizzazione in XAML.For now, we'll focus on fluid layouts and visual states 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.The basic form outline that we've put together is already a fluid layout, as it's depending mostly on the relative position of controls with only minimal use of specific pixel sizes and positions. Tenere in considerazione questo materiale sussidiario per eventuali altre interfacce utente che sarà possibile creare in futuro.Keep this guidance in mind for more UIs you might create in the future, though.

Gli stati di visualizzazione rappresentano un aspetto ancora più importante per i layout reattivi.More important to responsive layouts are visual states. Uno stato di visualizzazione definisce i valori di proprietà applicati a un determinato elemento quando una condizione specifica viene soddisfatta.A visual state defines property values that are applied to a given element when a given condition is true. Leggere come effettuare tale operazione nel codice xaml e come implementare tali stati in un modulo.Read up on how to do this in xaml, and then implement them into your form. Ecco l'aspetto che potrebbe avere uno degli elementi di base nell'esempio precedente:Here's what a very basic one might look like in our previous sample:

<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.When you use StateTriggers, always ensure that VisualStateGroups is attached to the first child of the root. In questo caso, Grid è il primo elemento figlio dell’elemento radice Page.Here, Grid is the first child of the root Page element.

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.It's not practical to create visual states for a wide array of screen sizes, nor are more than a couple likely to have significant impact on the user experience of your app. È consigliabile invece effettuare la progettazione per pochi punti di interruzione chiave. Leggere qui per altre informazioni.We recommend designing instead for a few key breakpoints - you can read more here.

Aggiungere il supporto di accessibilitàAdd accessibility support

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.Now that you have a well-constructed layout that responds to changes in screen sizes, a last thing you can do to improve the user experience is to make your app accessible. A tale scopo, possono essere eseguite numerose operazioni, ma nel caso di un modulo come quello indicato è veramente semplice.There's a lot that can go into this, but in a form like this one it's easier than it looks. Concentrarsi su quanto segue:Focus on the following:

  • 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.Keyboard support - ensure the order of elements in your UI panels match how they're displayed on screen, so a user can easily tab through them.
  • Supporto per l'utilità per la lettura dello schermo: assicurarsi che tutti i controlli dispongano di un nome descrittivo.Screen reader support - ensure all your controls have a descriptive name.

Quando vengono creati layout più complessi con più elementi visivi, è necessario consultare l'elenco di controllo per l'accessibilità per altri dettagli.When you're creating more complex layouts with more visual elements, you'll want to consult the accessibility checklist for more details. Oltre a essere necessaria per un'app, l'accessibilità consente di raggiungere ed entrare in contatto con un pubblico più ampio.After all, while accessibility isn't necessary for an app, it helps it reach and engage a larger audience.

ApprofondimentiGoing further

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.Though you've created a form here, the concepts of layouts and controls are applicable across all XAML UIs you might construct. 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.Feel free to go back through the docs we've linked you to and experiment with the form you have, adding new UI features and further refining the user experience. Per istruzioni ancora più dettagliate sulle funzionalità di layout, vedere le esercitazioni sulla creazione di layout adattiviIf you want step-by-step guidance through more detailed layout features, see our adaptive layout tutorial

I moduli non devono inoltre essere isolati: è possibile procedere ulteriormente e incorporarli all'interno di un modello master/dettagli o un controllo pivot.Forms also don't have to exist in a vacuum - you could go one step forward and embed yours within a master/details pattern or a pivot control. Per usare il file code-behind per il modulo, puoi iniziare con quanto indicato nella panoramica degli eventi.Or if you want to get to work on the code-behind for your form, you might want to get started with our events overview.

API e documentazione utiliUseful APIs and docs

Di seguito un breve riepilogo delle API e di altra documentazione utile per iniziare a usare il data binding.Here's a quick summary of APIs and other useful documentation to help you get started working with Data Binding.

API utiliUseful APIs

APIAPI DescriptionDescription
Controlli utili per i moduliControls useful for forms Elenco di controlli di input utili per la creazione di moduli e materiale sussidiario che indica dove usarli.A list of useful input controls for creating forms, and basic guidance of where to use them.
Pannello GridGrid Pannello per la disposizione degli elementi in layout su più righe e colonne.A panel for arranging elements in multi-row and multi-column layouts.
RelativePanelRelativePanel Pannello per la disposizione degli elementi rispetto ad altri elementi e ai limiti del pannello.A panel for arraging items in relation to other elements and to the panel's boundaries.
StackPanelStackPanel Pannello per la disposizione degli elementi in una singola riga orizzontale o verticale.A panel for arranging elements into a single horizontal or vertical line.
VisualStateVisualState Consente di impostare l'aspetto degli elementi dell'interfaccia utente che si trovano in stati particolari.Allows you to set the appearance of UI elements when they're in particular states.

Documentazione utileUseful docs

ArgomentoTopic DescriptionDescription
Panoramica dell'accessibilitàAccessibility overview Panoramica su larga scala delle opzioni di accessibilità nelle app.A broad-scale overview of accessibility options in apps.
Elenco di controllo per l'accessibilitàAccessibility checklist Elenco di controllo utile per garantire che l'app soddisfi gli standard di accessibilità.A practical checklist to ensure your app meets accessibility standards.
Panoramica degli eventiEvents overview Informazioni dettagliate sull'aggiunta e sull'organizzazione di eventi per gestire le azioni dell'interfaccia utente.Details on adding and structuring events to handle UI actions.
ModuliForms Linee guida generali per la creazione di moduli.Overall guidance for creating forms.
Pannelli di layoutLayout panels Viene fornita una panoramica dei tipi di pannelli di layout e delle posizioni in cui usarli.Provides an overview of the types of layout panels and where to use them.
Modello master/dettagliMaster/details pattern Modello di progettazione che può essere implementato per uno o più moduli.A design pattern that can be implemented around one or multiple forms.
Controllo PivotPivot control Controllo che può contenere uno o più moduli.A control that can contain one or multiple forms.
Progettazione reattivaResponsive design Panoramica dei principi di responsive design su larga scala.An overview of large-scale responsive design principles.
Layout reattivi con XAMLResponsive layouts with XAML Informazioni specifiche sugli stati di visualizzazione e altre implementazioni del responsive design.Specific information on visual states and other implementations of responsive design.
Dimensioni dello schermo per il responsive designScreen sizes for responsive design Indicazioni sulle dimensioni dello schermo per le quali devono essere definiti i layout reattivi.Guidance on which screen sizes to which responsive layouts should be scoped.

Esempi di codice utiliUseful code samples

Esempio di codiceCode sample DescriptionDescription
Esercitazione sui layout adattiviAdaptive layout tutorial Esperienza guidata dettagliata nell'ambito dei layout adattivi e del responsive design.A step-by-step guided experience through adaptive layouts and responsive design.
Database degli ordini clienteCustomer Orders Database Layout e moduli in azione su un esempio di codice aziendale su più pagine.See layout and forms in action on a multi-page enterprise sample.
Raccolta di controlli XAMLXAML Controls Gallery Selezione di controlli XAML e informazioni su come vengono implementati.See a selection of XAML controls, and how they're implemented.
Esempi di codice aggiuntiviAdditional code samples Scegli Controlli, layout e testo nell'elenco a discesa delle categorie per visualizzare esempi di codice correlati.Choose Controls, layout, and text in the category drop-down list to see related code samples.