Skapa och anpassa ett formulär

Om du skapar en app som kräver att användarna anger en stor mängd information är det sannolikt att du vill skapa ett formulär som de kan fylla i. Den här artikeln visar vad du behöver veta för att skapa ett formulär som är användbart och robust.

Vi går igenom vilka XAML-kontroller som går in i ett formulär, hur du bäst ordnar dem på din sida och hur du optimerar formuläret för ändrade skärmstorlekar. Men eftersom ett formulär handlar om den relativa positionen för visuella element ska vi först diskutera sidlayout med XAML.

Vad behöver du veta?

UWP har ingen explicit formulärkontroll som du kan lägga till i din app och konfigurera. I stället måste du skapa ett formulär genom att ordna en samling gränssnittselement på en sida.

För att göra det måste du förstå layout-paneler. Det här är containrar som innehåller appens användargränssnittselement, så att du kan ordna och gruppera dem. Om du placerar layoutpaneler i andra layoutpaneler får du stor kontroll över var och hur dina objekt visas i förhållande till varandra. Detta gör det också mycket enklare att anpassa din app till att ändra skärmstorlekar.

Läs den här dokumentationen om layoutpaneler. Eftersom formulär vanligtvis visas i en eller flera lodräta kolumner vill du gruppera liknande objekt i en StackPaneloch ordna dem inom en RelativePanel- om du behöver. Börja sätta ihop några paneler nu – om du behöver en referens finns nedan ett grundläggande layoutramverk för ett formulär med två kolumner:

<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>

Vad går i ett formulär?

Komplettera ditt formulär med ett urval av XAML-komponenter. Du är förmodligen bekant med dem, men läs gärna upp om du behöver en uppdatering. I synnerhet vill du ha kontroller som gör att användaren kan mata in text eller välja från en lista med värden. Det här är en grundläggande lista över alternativ som du kan lägga till – du behöver inte läsa allt om dem, bara tillräckligt så att du förstår hur de ser ut och hur de fungerar.

• TextBox låter en användare mata in text i din app.
• ToggleSwitch låter en användare välja mellan två alternativ.
• DatePicker låter en användare välja ett datumvärde.
• TimePicker låter en användare välja ett tidsvärde.
• ComboBox expandera för att visa en lista över valbara objekt. Du kan lära dig mer om dem här

Du kanske också vill lägga till knappar, så att användaren kan spara eller avbryta.

Formatera kontroller i layouten

Du vet hur du ordnar layoutpaneler och har objekt som du vill lägga till, men hur ska de formateras? Formulärsidan har vissa specifika designriktlinjer. Läs igenom avsnitten i Typer av formulär och layout för användbara råd. Vi kommer att diskutera tillgänglighet och relativ layout mer inom kort.

Med det rådet i åtanke bör du börja lägga till valfria kontroller i layouten, se till att de får etiketter och är korrekt fördelade. Här är till exempel en enkel version av ett ensidesformulär med hjälp av layout, kontroller och designvägledning från ovan.

<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>

Anpassa dina kontroller med fler egenskaper för en bättre visuell upplevelse.

Gör layouten responsiv

Användare kan visa användargränssnittet på en mängd olika enheter med olika skärmbredder. För att säkerställa att de har en bra upplevelse oavsett skärm bör du använda dynamisk design. Läs igenom den sidan för goda råd om designfilosofierna att tänka på när du fortsätter.

Sidan Dynamiska layouter med XAML ger en detaljerad översikt över hur du implementerar detta. För tillfället fokuserar vi på flytande layouter och visuella tillstånd i XAML-.

Den grundläggande formulärdispositionen som vi har sammanställt är redan en flytande layout, eftersom den främst beror på kontrollernas relativa position med endast minimal användning av specifika pixelstorlekar och positioner. Ha den här vägledningen i åtanke för fler UIs som du kan skapa i framtiden.

Viktigare för dynamiska layouter är visuella tillstånd. Ett visuellt tillstånd definierar egenskapsvärden som tillämpas på ett visst element när ett visst villkor är sant. Läs mer om hur du gör detta i xamloch implementera dem sedan i formuläret. Så här kan en mycket grundläggande se ut i vårt tidigare exempel:

<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>

Det är inte praktiskt att skapa visuella tillstånd för en mängd olika skärmstorlekar, och det är inte heller mer än ett par som kan ha stor inverkan på appens användarupplevelse. Vi rekommenderar att du i stället designar med några viktiga brytpunkter i åtanke – du kan läsa mer här.

Lägg till hjälpmedelsstöd

Nu när du har en välkonstruerad layout som svarar på ändringar i skärmstorlekar är det sista du kan göra för att förbättra användarupplevelsen att göra appen tillgänglig. Mycket kan ingå i detta, men i en form som denna är det lättare än vad det verkar. Fokusera på följande:

• Tangentbordsstöd – se till att ordningen på elementen i användargränssnittspanelerna matchar hur de visas på skärmen, så att en användare enkelt kan ta en flik genom dem.
• Stöd för skärmläsare – se till att alla kontroller har ett beskrivande namn.

När du skapar mer komplexa layouter med fler visuella element, kan du konsultera den tillgänglighetschecklista för mer information. Även om tillgänglighet inte är nödvändigt för en app hjälper det den trots allt att nå och engagera en större publik.

Gå vidare

Även om du har skapat ett formulär här gäller begreppen layouter och kontroller för alla XAML-UIs som du kan skapa. Gå gärna tillbaka genom de dokument som vi har länkat dig till och experimentera med formuläret du har, lägga till nya användargränssnittsfunktioner och ytterligare förfina användarupplevelsen. Om du vill ha stegvis vägledning genom mer detaljerade layoutfunktioner kan du läsa vår självstudie om anpassningsbar layout

Formulär behöver inte heller finnas i ett vakuum – du kan gå ett steg längre och bädda in dina i ett list-/detaljmönster eller en NavigationView. Eller om du vill arbeta med koden bakom ditt formulär kanske du vill ta del av vår översikt över händelser.

Användbara API:er och dokument

Här är en snabb sammanfattning av API:er och annan användbar dokumentation som hjälper dig att komma igång med databindning.

Användbara API:er

Användbara dokument

Användbara kodexempel