Erstellen und Anpassen eines FormularsCreate and customize a form

Wenn Sie eine App erstellen, die umfangreiche Informationen von Benutzern abfragt, werden Sie wahrscheinlich ein Formular erstellen, das sich einfach ausfüllen lässt. In diesem Artikel erfahren Sie, wie Sie ein nützliches und stabiles Formular erstellen.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.

Dieser Artikel ist kein Tutorial.This is not a tutorial. Wenn Sie ein Tutorial suchen, sehen Sie sich unser Tutorial zu adaptiven Layouts an, in dem Sie schrittweise Anleitungen finden.If you want one, see our adaptive layout tutorial, which will provide you with a step-by-step guided experience.

Wir erläutern, welche XAML-Steuerelemente in ein Formular gehören, wie diese am besten auf der Seite angeordnet werden und wie Sie Ihr Formular optimal an unterschiedliche Bildschirmgrößen anpassen.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. Da es in einem Formular jedoch um die relative Position visueller Elemente geht, lassen Sie uns zunächst das Seitenlayout mit XAML besprechen.But because a form is about the relative position of visual elements, let's first discuss page layout with XAML.

WissenswertesWhat do you need to know?

UWP weist kein explizites Formularsteuerelement auf, das Sie Ihrer App hinzufügen und dann konfigurieren können.UWP does not have an explicit form control that you can add to your app and configure. Stattdessen müssen Sie ein Formular erstellen, indem Sie eine Reihe von Benutzeroberflächenelementen auf einer Seite anordnen.Instead, you'll need to create a form by arranging a collection of UI elements on a page.

Dazu sollten Ihnen Layoutpanels geläufig sein.To do so, you'll need to understand layout panels. Hierbei handelt es sich um Container, die die Benutzeroberflächenelemente Ihrer App enthalten, die Sie anordnen und gruppieren können.These are containers that hold your app's UI elements, allowing you to arrange and group them. Durch das Einfügen von Layoutpanels in andere Layoutpanels können Sie sehr gut kontrollieren, wo und wie Elemente im Verhältnis zueinander angezeigt werden.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. Damit wird es auch wesentlich einfacher, Ihre App an unterschiedliche Bildschirmgrößen anzupassen.This also makes it far easier to adapt your app to changing screen sizes.

Lesen Sie diese Dokumentation zu Layoutpanels.Read this documentation on layout panels. Da Formulare in der Regel in einer oder mehreren vertikalen Spalten angezeigt werden, sollten Sie ähnliche Elemente in einem StackPanel gruppieren und diese bei Bedarf in einem RelativePanel anordnen.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. Beginnen Sie jetzt mit der Zusammenstellung einiger Panels. Falls Sie eine Referenz benötigen, finden Sie unten ein grundlegendes Layout-Framework für ein zweispaltiges Formular: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>

Was gehört in ein Formular?What goes in a form?

Sie müssen Ihr Formular mit verschiedenen XAML-Steuerelementen füllen.You'll need to fill your form with an assortment of XAML Controls. Wahrscheinlich sind Sie damit vertraut. Sie können jedoch gerne weiterlesen, wenn Sie eine Auffrischung gebrauchen können.You're probably familiar with those, but feel free to read up if you need a refresher. Sie benötigen insbesondere Steuerelemente, mit denen Benutzer Text eingeben oder Werte aus einer Liste auswählen können.In particular, you'll want controls that allow your user to input text or choose from a list of values. Hier ist eine grundlegende Liste von Optionen, die Sie hinzufügen können – Sie müssen nicht alles darüber lesen, nur so viel, dass Sie verstehen, wie sie aussehen und funktionieren.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.

  • Mit TextBox kann ein Benutzer Text in Ihre App eingeben.TextBox lets a user input text into your app.
  • Mit ToggleSwitch kann ein Benutzer zwischen zwei Optionen auswählen.ToggleSwitch lets a user choose between two options.
  • Mit DatePicker kann ein Benutzer einen Datumswert auswählen.DatePicker lets a user select a date value.
  • Mit TimePicker kann ein Benutzer einen Wert für die Uhrzeit auswählen.TimePicker lets a user select a time value.
  • ComboBox lässt sich erweitern, um eine Liste mit auswählbaren Elementen anzuzeigen.ComboBox expand to display a list of selectable items. Weitere Informationen dazu erhalten Sie hier.You can learn more about them here

Sie können auch Schaltflächen zum Speichern oder Abbrechen hinzufügen.You also might want to add buttons, so the user can save or cancel.

Formatieren von Steuerelementen im LayoutFormat controls in your layout

Sie wissen, wie Sie Layoutpanels anordnen und gewünschte Elemente hinzufügen können, fragen sich aber jetzt, wie diese formatiert werden?You know how to arrange layout panels and have items you'd like to add, but how should they be formatted? Die Seite Formulare bietet einige spezifische Designleitfäden.The forms page has some specific design guidance. Hilfreiche Tipps finden Sie in den Abschnitten Formulartypen und Layout.Read through the sections on Types of forms and layout for useful advice. In Kürze gehen wir auf Barrierefreiheit und das relative Layout ein.We'll discuss accessibility and relative layout more shortly.

Vor diesem Hintergrund sollten Sie beginnen, die gewünschten Steuerelemente in das Layout einzufügen. Achten Sie darauf, sie mit geeigneten Bezeichnungen zu versehen und im richtigen Abstand anzuordnen.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. Hier sehen Sie ein einfach strukturiertes Beispiel für ein einseitiges Formular, in dem das Layout, die Steuerelemente und die Designleitfäden berücksichtigt wurden, die oben genannt sind: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>

Um die visuelle Erfahrung zu verbessern, können Sie die Steuerelemente jederzeit mit weiteren Eigenschaften anpassen.Feel free to customize your controls with more properties for a better visual experience.

Entwerfen von dynamischen LayoutsMake your layout responsive

Benutzer zeigen die App-Oberfläche möglicherweise auf verschiedenen Geräten mit unterschiedlichen Bildschirmbreiten an.Users might view your UI on a variety of devices with different screen widths. Um unabhängig vom jeweiligen Bildschirm eine benutzerfreundliche Anzeige sicherzustellen, sollten Sie ein dynamisches Design verwenden.To ensure that they have a good experience regardless of their screen, you should use responsive design. Auf dieser Seite finden Sie wertvolle Designphilosophien, die Sie bei Ihren weiteren Schritten berücksichtigen sollten.Read through that page for good advice on the design philosophies to keep in mind as you proceed.

Auf der Seite Dynamische Layouts mit XAML finden Sie eine ausführliche Übersicht mit Informationen zur Implementierung.The Responsive layouts with XAML page gives a detailed overview of how to implement this. Im Augenblick konzentrieren wir uns auf dynamische Layouts und visuelle Zustände in XAML.For now, we'll focus on fluid layouts and visual states in XAML.

Der grundlegende Formularentwurf, den wir zusammengestellt haben, weist bereits ein dynamisches Layout auf, da er hauptsächlich von der relativen Position der Steuerelemente und nur minimal von bestimmten Pixelgrößen und Positionen abhängig ist.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. Berücksichtigen Sie diese Anweisung jedoch für weitere Benutzeroberflächen, die Sie möglicherweise in Zukunft entwickeln.Keep this guidance in mind for more UIs you might create in the future, though.

Wichtiger für dynamische Layouts sind visuelle Zustände.More important to responsive layouts are visual states. Ein visueller Zustand definiert Eigenschaftswerte, die auf ein bestimmtes Element angewendet werden, wenn eine bestimmte Bedingung zutrifft.A visual state defines property values that are applied to a given element when a given condition is true. Lesen Sie mehr zur Vorgehensweise in XAML, und implementieren Sie diese dann in Ihrem Formular.Read up on how to do this in xaml, and then implement them into your form. So könnte ein sehr einfacher Ansatz in unserem vorherigen Beispiel aussehen: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>

Wichtig

Bei Verwendung von StateTrigger-Elementen müssen Sie immer sicherstellen, dass VisualStateGroups an das erste untergeordnete Element des Stammelements angefügt wird.When you use StateTriggers, always ensure that VisualStateGroups is attached to the first child of the root. Hier ist Grid das erste untergeordnete Element des Page-Stammelements.Here, Grid is the first child of the root Page element.

Es ist nicht sinnvoll, visuelle Zustände für eine Vielzahl von Bildschirmgrößen zu erstellen. Ein paar Zustände sollten ausreichen, da sich die Benutzerfreundlichkeit Ihrer App durch viele weitere Zustände wahrscheinlich nicht deutlich beeinflussen lässt.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. Wir empfehlen, stattdessen Zustände für einige Schlüsselgrößen, sogenannte Breakpoints, zu entwerfen, über die Sie hier mehr erfahren.We recommend designing instead for a few key breakpoints - you can read more here.

Unterstützung der BarrierefreiheitAdd accessibility support

Nachdem Sie jetzt über ein gut aufgebautes Layout verfügen, das auf veränderte Bildschirmgrößen reagiert, können Sie zuletzt die Benutzerfreundlichkeit verbessern, indem Sie Ihre App barrierefrei gestalten.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. Hier gibt es zahlreiche Möglichkeiten. In einem Formular wie diesem ist es aber einfacher als gedacht.There's a lot that can go into this, but in a form like this one it's easier than it looks. Konzentrieren Sie sich auf Folgendes:Focus on the following:

  • Tastaturunterstützung: Stellen Sie sicher, dass die Reihenfolge der Elemente in den Benutzeroberflächenpanels mit der Darstellung auf dem Bildschirm übereinstimmt, damit Benutzer mühelos durch die Elemente navigieren können.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.
  • Unterstützung der Sprachausgabe: Vergewissern Sie sich, dass alle Steuerelemente über einen aussagekräftigen Namen verfügen.Screen reader support - ensure all your controls have a descriptive name.

Wenn Sie komplexere Layouts mit mehreren visuellen Elementen erstellen, finden Sie weitere Details in der Prüfliste für die Barrierefreiheit.When you're creating more complex layouts with more visual elements, you'll want to consult the accessibility checklist for more details. Zwar ist Barrierefreiheit für eine App nicht unbedingt erforderlich, trägt aber dazu bei, dass Sie eine größere Zielgruppe erreichen und einbinden.After all, while accessibility isn't necessary for an app, it helps it reach and engage a larger audience.

VertiefungGoing further

Auch wenn Sie hier ein Formular erstellt haben, gelten die Layout- und Steuerelementkonzepte für alle XAML-Benutzeroberflächen, die Sie entwickeln können.Though you've created a form here, the concepts of layouts and controls are applicable across all XAML UIs you might construct. Sie können jederzeit zu den hier verlinkten Dokumenten zurückkehren und mit dem vorhandenen Formular experimentieren, indem Sie neue Benutzeroberflächenfeatures hinzufügen und die Benutzererfahrung weiter optimieren.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. Eine schrittweise Anleitung zu detaillierteren Layoutfeatures finden Sie in unserem Tutorial zu adaptiven Layouts.If you want step-by-step guidance through more detailed layout features, see our adaptive layout tutorial

Formulare existieren außerdem nicht in einem Vakuum – Sie können einen Schritt weitergehen und Ihr Formular in ein Master/Details-Muster oder Pivotsteuerelement einbetten.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. Wenn Sie das CodeBehind des Formulars bearbeiten möchten, finden Sie die ersten Schritte in unserer Übersicht über Ereignisse.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.

Nützliche APIs und DokumenteUseful APIs and docs

Nachfolgend finden Sie eine kurze Zusammenfassung zu den APIs und weitere nützliche Dokumente, die Sie bei Ihren ersten Schritten rund um die Datenbindung unterstützen.Here's a quick summary of APIs and other useful documentation to help you get started working with Data Binding.

Nützliche APIsUseful APIs

APIAPI BeschreibungDescription
Nützliche Steuerelemente für FormulareControls useful for forms Eine Liste nützlicher Eingabesteuerelemente für das Erstellen von Formularen und ein allgemeiner Überblick zu ihrer VerwendungA list of useful input controls for creating forms, and basic guidance of where to use them.
GridGrid Ein Panel zum Anordnen von Elementen in Layouts mit mehreren Zeilen und SpaltenA panel for arranging elements in multi-row and multi-column layouts.
RelativePanelRelativePanel Ein Panel zum Anordnen von Elementen im Verhältnis zu anderen Elementen und zu den Grenzen des PanelsA panel for arraging items in relation to other elements and to the panel's boundaries.
StackPanelStackPanel Ein Panel zum Anordnen von Elementen in einer einzigen horizontalen oder vertikalen LinieA panel for arranging elements into a single horizontal or vertical line.
VisualStateVisualState Ermöglicht es Ihnen, das Erscheinungsbild von Benutzeroberflächenelementen festzulegen, wenn sie einen bestimmten Zustand aufweisen.Allows you to set the appearance of UI elements when they're in particular states.

Nützliche DokumentationUseful docs

ThemaTopic BeschreibungDescription
Barrierefreiheit im ÜberblickAccessibility overview Eine umfassende Übersicht über Optionen für die Barrierefreiheit in AppsA broad-scale overview of accessibility options in apps.
Prüfliste für die BarrierefreiheitAccessibility checklist Eine praktische Prüfliste, um sicherzustellen, dass Ihre App Standards für die Barrierefreiheit erfülltA practical checklist to ensure your app meets accessibility standards.
Übersicht über EreignisseEvents overview Details zum Hinzufügen und Strukturieren von Ereignissen zur Verarbeitung von BenutzeroberflächenaktionenDetails on adding and structuring events to handle UI actions.
FormulareForms Allgemeine Anweisungen zum Erstellen von FormularenOverall guidance for creating forms.
LayoutpanelsLayout panels Übersicht über die Arten von Layoutpanels und ihre VerwendungProvides an overview of the types of layout panels and where to use them.
Master/Details-MusterMaster/details pattern Ein Entwurfsmuster, das rund um eines oder mehrere Formulare implementiert werden kannA design pattern that can be implemented around one or multiple forms.
PivotsteuerelementPivot control Ein Steuerelement, das eines oder mehrere Formulare enthalten kannA control that can contain one or multiple forms.
Dynamisches DesignResponsive design Eine Übersicht über Prinzipien für das umfangreiche dynamische DesignAn overview of large-scale responsive design principles.
Dynamische Layouts mit XAMLResponsive layouts with XAML Spezifische Informationen zu visuellen Zuständen und anderen Implementierungen des dynamischen DesignsSpecific information on visual states and other implementations of responsive design.
Bildschirmgrößen für das dynamische DesignScreen sizes for responsive design Anweisungen dazu, welche Bildschirmgrößen für dynamische Layouts festgelegt werden solltenGuidance on which screen sizes to which responsive layouts should be scoped.

Nützliche CodebeispieleUseful code samples

CodebeispielCode sample BeschreibungDescription
Tutorial zu adaptiven LayoutsAdaptive layout tutorial Eine schrittweise geführte Anleitung zu adaptiven Layouts und zum dynamischen DesignA step-by-step guided experience through adaptive layouts and responsive design.
Datenbank für KundenaufträgeCustomer Orders Database Layout und Formulare in Aktion in einem mehrseitigen UnternehmensbeispielSee layout and forms in action on a multi-page enterprise sample.
XAML-SteuerelementekatalogXAML Controls Gallery Eine Auswahl von XAML-Steuerelementen und Informationen zu deren ImplementierungSee a selection of XAML controls, and how they're implemented.
Weitere CodebeispieleAdditional code samples Wählen Sie Controls, layout, and text (Steuerelemente, Layout und Text) in der Dropdownliste „Kategorie“ aus, um verwandte Codebeispiele anzuzeigen.Choose Controls, layout, and text in the category drop-down list to see related code samples.