Formulieren

Een formulier is een groep besturingselementen waarmee gegevens van gebruikers worden verzameld en verzonden. Formulieren worden meestal gebruikt voor instellingenpagina's, enquêtes, het maken van accounts en nog veel meer.

In dit artikel worden ontwerprichtlijnen besproken voor het maken van XAML-indelingen voor formulieren.

Wanneer moet u een formulier gebruiken?

Een formulier is een speciale pagina voor het verzamelen van gegevensinvoer die duidelijk aan elkaar zijn gerelateerd. U moet een formulier gebruiken wanneer u expliciet gegevens van een gebruiker moet verzamelen. U kunt een formulier maken voor een gebruiker om het volgende te doen:

• Aanmelden bij een account
• Registreren voor een account
• App-instellingen wijzigen, zoals privacy of weergaveopties
• Een enquête nemen
• Een artikel kopen
• Feedback geven

Typen formulieren

Wanneer u nadenkt over hoe gebruikersinvoer wordt verzonden en weergegeven, zijn er twee typen formulieren:

1. Direct bijwerken

Gebruik een formulier direct bijwerken wanneer u wilt dat gebruikers onmiddellijk de resultaten van het wijzigen van de waarden in het formulier zien. Op instellingenpagina's worden bijvoorbeeld de huidige selecties weergegeven en worden eventuele wijzigingen in de selecties onmiddellijk toegepast. Als u de wijzigingen in uw app wilt bevestigen, moet u een gebeurtenis-handler toevoegen aan elk invoerbeheer. Als een gebruiker een invoerbeheer wijzigt, kan uw app op de juiste manier reageren.

2. Verzenden met knop

Met het andere type formulier kan de gebruiker kiezen wanneer gegevens moeten worden verzonden met een klik op een knop.

Dit type formulier biedt de gebruiker flexibiliteit bij het reageren. Dit type formulier bevat doorgaans meer invoervelden voor vrije formulieren en ontvangt dus een grotere verscheidenheid aan antwoorden. Houd rekening met de volgende aanbevelingen om geldige gebruikersinvoer en correct opgemaakte gegevens te garanderen bij het verzenden:

• Maak het onmogelijk om ongeldige gegevens in te dienen door het juiste besturingselement te gebruiken (gebruik bijvoorbeeld een CalendarDatePicker in plaats van een tekstvak voor kalenderdatums). Meer informatie over het selecteren van de juiste invoerbesturingselementen in uw formulier vindt u later in de sectie Invoerbesturingselementen.
• Wanneer u tekstvakbesturingselementen gebruikt, geeft u gebruikers met de eigenschap PlaceholderText een hint van de gewenste invoerindeling.
• Geef gebruikers het juiste schermtoetsenbord door de verwachte invoer van een besturingselement met de eigenschap InputScope op te geven.
• Markeer de vereiste invoer met een sterretje * op het label.
• Schakel de knop Verzenden uit totdat alle vereiste gegevens zijn ingevuld.
• Als er ongeldige gegevens zijn bij het verzenden, markeert u de besturingselementen met ongeldige invoer met gemarkeerde velden of randen en moet de gebruiker het formulier opnieuw indienen.
• Voor andere fouten, zoals een mislukte netwerkverbinding, moet u een geschikt foutbericht voor de gebruiker weergeven.

Layout

Als u de gebruikerservaring wilt vergemakkelijken en ervoor wilt zorgen dat gebruikers de juiste invoer kunnen invoeren, moet u rekening houden met de volgende aanbevelingen voor het ontwerpen van indelingen voor formulieren.

Labels

Labels moeten links worden uitgelijnd en boven het invoerbesturingselement worden geplaatst. Veel besturingselementen hebben een ingebouwde eigenschap Header om het label weer te geven. Voor besturingselementen die geen eigenschap Header hebben of om groepen besturingselementen te labelen, kunt u in plaats daarvan een TextBlock gebruiken.

Als u wilt ontwerpen voor toegankelijkheid, labelt u alle afzonderlijke besturingselementen en groepen besturingselementen voor duidelijkheid voor zowel menselijke als schermlezers.

Voor lettertypestijlen gebruikt u de standaardoploop voor Windows-typen. Gebruiken TitleTextBlockStyle voor paginatitels, SubtitleTextBlockStyle voor groepskoppen en BodyTextBlockStyle voor besturingslabels.

Doen	Niet doen

Spacing

Als u groepen besturingselementen visueel van elkaar wilt scheiden, gebruikt u uitlijning, marges en opvulling. Afzonderlijke invoerbesturingselementen zijn 80 pixels hoog en moeten 24 pixels uit elkaar worden verdeeld. Groepen invoerbesturingselementen moeten 48 pixels uit elkaar worden verdeeld.

Columns

Het maken van kolommen kan onnodige witruimte in formulieren verminderen, met name met grotere schermgrootten. Als u echter een formulier met meerdere kolommen wilt maken, moet het aantal kolommen afhankelijk zijn van het aantal invoerbesturingselementen op de pagina en de schermgrootte van het app-venster. In plaats van het scherm te overbelasten met talloze invoerbesturingselementen, kunt u overwegen om meerdere pagina's voor uw formulier te maken.

Doen	Niet doen

Responsieve indeling

Formulieren moeten het formaat wijzigen wanneer het scherm of de venstergrootte verandert, zodat gebruikers geen invoervelden over het hoofd zien. Zie responsieve ontwerptechnieken voor meer informatie. U wilt bijvoorbeeld specifieke regio's van het formulier altijd in beeld houden, ongeacht de schermgrootte.

Tabbladen

Gebruikers kunnen het toetsenbord gebruiken om door besturingselementen te navigeren met tabstops. Standaard geeft de tabvolgorde van besturingselementen de volgorde weer waarin ze worden gemaakt in XAML. Als u het standaardgedrag wilt overschrijven, wijzigt u de eigenschappen IsTabStop of TabIndex van het besturingselement.

Input-besturingselementen

Invoerbesturingselementen zijn de UI-elementen waarmee gebruikers gegevens in formulieren kunnen invoeren. Hieronder vindt u enkele algemene besturingselementen die aan formulieren kunnen worden toegevoegd, evenals informatie over wanneer u deze kunt gebruiken.

Tekstinvoer

Beheersing	Gebruik	Example
tekstvak	Een of meer regels tekst vastleggen	Namen, reacties op vrije formulieren of feedback
Wachtwoordvak	Persoonlijke gegevens verzamelen door de tekens te verbergen	Wachtwoorden, burgerservicenummers (SSN), pincodes, creditcardgegevens
AutoSuggestBox	Gebruikers een lijst met suggesties van een bijbehorende set gegevens weergeven terwijl ze typen	Zoeken in database, stuur e-mail naar: veld, vorige queries
RichEditBox	Tekstbestanden bewerken met opgemaakte tekst, hyperlinks en afbeeldingen	Bestand uploaden, bekijken en bewerken in de app

Selectie

Beheersing	Gebruik	Example
Selectievakje	Selecteer of deselecteer een of meer actie-items	Ga akkoord met voorwaarden, voeg optionele items toe, selecteer alles dat van toepassing is
RadioButton	Selecteer één optie uit twee of meer opties	Kies type, verzendmethode, enzovoort.
Wisselknop	Kies een van de twee wederzijds exclusieve opties	Aan/uit

Opmerking: Als er vijf of meer selectie-items zijn, gebruikt u een lijstbesturing.

Lists

Beheersing	Gebruik	Example
Combobox	Begin met de compacte status en vouw deze uit om een lijst met selecteerbare items weer te geven	Selecteren uit een lange lijst met items, zoals staten of landen/regio's
ListView	Items categoriseren en groepskoppen toewijzen, items slepen en neerzetten, inhoud cureren en items opnieuw ordenen	Opties voor rangschikken
GridView	Verzamelingen op basis van afbeeldingen rangschikken en bladeren	Een foto, kleur, weergavethema kiezen

Numerieke invoer

Beheersing	Gebruik	Example
schuifregelaar	Een getal selecteren uit een bereik van aaneengesloten numerieke waarden	Percentages, volume, afspeelsnelheid
Beoordeling	Beoordelen met sterren	Klantenfeedback

Datum en tijd

Beheersing	Gebruik
CalendarView	Kies één datum of een reeks datums uit een altijd zichtbare agenda
CalendarDatePicker	Eén datum kiezen uit een contextuele agenda
Datumkiezer	Kies één gelokaliseerde datum wanneer contextuele informatie niet belangrijk is
TimePicker	Eén tijdswaarde kiezen

Aanvullende besturingselementen

Zie de index van besturingselementen per functie voor een volledige lijst met UWP-besturingselementen.

Voor complexere en aangepaste ui-besturingselementen bekijkt u resources die beschikbaar zijn bij bedrijven zoals Telerik, SyncFus, DevExpress, Infragistics, ComponentOne en ActiPro.

Voorbeeld van formulier met één kolom

In dit voorbeeld wordt een acryllijst-/detaillijstweergave en navigatieweergave gebruikt.

<StackPanel>
    <TextBlock Text="New Customer" Style="{StaticResource TitleTextBlockStyle}"/>
    <Button Height="100" Width="100" Background="LightGray" Content="Add photo" Margin="0,24" Click="AddPhotoButton_Click"/>
    <TextBox x:Name="Name" Header= "Name" Margin="0,24,0,0" MaxLength="32" Width="400" HorizontalAlignment="Left" InputScope="PersonalFullName"/>
    <TextBox x:Name="PhoneNumber" Header="Phone Number" Margin="0,24,0,0" MaxLength="15" Width="400" HorizontalAlignment="Left" InputScope="TelephoneNumber" />
    <TextBox x:Name="Email" Header="Email" Margin="0,24,0,0" MaxLength="50" Width="400" HorizontalAlignment="Left" InputScope="EmailNameOrAddress" />
    <TextBox x:Name="Address" Header="Address" PlaceholderText="Address" Margin="0,24,0,0" MaxLength="50" Width="400" HorizontalAlignment="Left" InputScope="EmailNameOrAddress" />
    <TextBox x:Name="Address2" Margin="0,24,0,0" PlaceholderText="Address 2" MaxLength="50" Width="400" HorizontalAlignment="Left" InputScope="EmailNameOrAddress" />
    <RelativePanel>
        <TextBox x:Name="City" PlaceholderText="City" Margin="0,24,0,0" MaxLength="50" Width="200" HorizontalAlignment="Left" InputScope="EmailNameOrAddress" />
        <ComboBox x:Name="State" PlaceholderText="State" Margin="24,24,0,0"  Width="100" RelativePanel.RightOf="City">
             <x:String>WA</x:String>
        </ComboBox>
    </RelativePanel>
    <TextBox x:Name="ZipCode" PlaceholderText="Zip Code" Margin="0,24,0,0" MaxLength="6" Width="100" HorizontalAlignment="Left" InputScope="Number" />
    <StackPanel Orientation="Horizontal">
        <Button Content="Save" Margin="0,24" Click="SaveButton_Click"/>
        <Button Content="Cancel" Margin="24" Click="CancelButton_Click"/>
    </StackPanel>  
</StackPanel>

Voorbeeld van twee kolomformulieren

In dit voorbeeld wordt het draaibesturingselement , de acrylachtergrond en de commandbalk gebruikt naast invoerbesturingselementen.

<Grid>
    <Pivot Background="{ThemeResource SystemControlAccentAcrylicWindowAccentMediumHighBrush}" >
        <Pivot.TitleTemplate>
            <DataTemplate>
                <Grid>
                    <TextBlock Text="Company Name" Style="{ThemeResource HeaderTextBlockStyle}"/>
                </Grid>
            </DataTemplate>
        </Pivot.TitleTemplate>
        <PivotItem Header="Orders" Margin="0"/>    
        <PivotItem Header="Customers" Margin="0">
            <!--Form Example-->
            <Grid Background="White">
                <RelativePanel>
                    <StackPanel x:Name="Customer" Margin="20">
                        <TextBox x:Name="CustomerName" Header= "Customer Name" Margin="0,24,0,0" MaxLength="320" Width="400" HorizontalAlignment="Left" InputScope="PersonalFullName"/>
                        <TextBox x:Name="CustomerPhoneNumber" Header="Phone Number" Margin="0,24,0,0" MaxLength="50" Width="400" HorizontalAlignment="Left" InputScope="TelephoneNumber" />
                        <TextBox x:Name="Address" Header="Address" PlaceholderText="Address" Margin="0,24,0,0" MaxLength="50" Width="400" HorizontalAlignment="Left" InputScope="AlphanumericFullWidth" />
                        <TextBox x:Name="Address2" Margin="0,24,0,0" PlaceholderText="Address 2" MaxLength="50" Width="400" HorizontalAlignment="Left" InputScope="AlphanumericFullWidth" />
                        <RelativePanel>
                            <TextBox x:Name="City" PlaceholderText="City" Margin="0,24,0,0" MaxLength="50" Width="200" HorizontalAlignment="Left" InputScope="Text" />
                            <ComboBox x:Name="State" PlaceholderText="State" Margin="24,24,0,0"  Width="100" RelativePanel.RightOf="City">
                                <x:String>WA</x:String>
                            </ComboBox>
                        </RelativePanel>
                        <TextBox x:Name="ZipCode" PlaceholderText="Zip Code" Margin="0,24,0,0" MaxLength="6" Width="100" HorizontalAlignment="Left" InputScope="Number" />
                    </StackPanel>
                    <StackPanel x:Name="Associate" Margin="20" RelativePanel.RightOf="Customer">
                        <TextBox x:Name="AssociateName" Header= "Associate" Margin="0,24,0,0" MaxLength="320" Width="400" HorizontalAlignment="Left" InputScope="PersonalFullName"/>
                        <TextBox x:Name="AssociatePhoneNumber" Header="Phone Number" Margin="0,24,0,0" MaxLength="50" Width="400" HorizontalAlignment="Left" InputScope="TelephoneNumber" />
                        <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>
                </RelativePanel>
            </Grid>
        </PivotItem>
        <PivotItem Header="Invoices"/>
        <PivotItem Header="Stock"/>
        <Pivot.RightHeader>
            <CommandBar OverflowButtonVisibility="Collapsed" Background="Transparent">
                <AppBarButton Icon="Add"/>
                <AppBarSeparator/>
                <AppBarButton Icon="Edit" />
                <AppBarButton Icon="Delete"/>
                <AppBarSeparator/>
                <AppBarButton Icon="Save"/>
            </CommandBar>
        </Pivot.RightHeader>
    </Pivot>
</Grid>

Voorbeeld van database klantorders

Zie het voorbeeld van de klantenorderdatabase voor informatie over het verbinden van formulierinvoer met een Azure-database en een volledig geïmplementeerd formulier.

Verwante onderwerpen

• Invoerbesturingselementen
• Typografie