Erstellen und Anpassen eines Formulars

Wenn Sie eine App erstellen, für die Benutzer eine erhebliche Menge an Informationen eingeben müssen, können Sie wahrscheinlich ein Formular erstellen, das sie ausfüllen können. In diesem Artikel erfahren Sie, was Sie wissen müssen, um ein Formular zu erstellen, das nützlich und robust ist.

Es wird erläutert, welche XAML-Steuerelemente in ein Formular wechseln, wie Sie diese auf Ihrer Seite am besten anordnen und wie Sie Ihr Formular für das Ändern von Bildschirmgrößen optimieren. Da es sich bei einem Formular jedoch um die relative Position visueller Elemente handelt, besprechen wir zunächst das Seitenlayout mit XAML.

Was müssen Sie wissen?

UWP verfügt nicht über ein explizites Formularsteuerelement, das Sie Ihrer App hinzufügen und konfigurieren können. Stattdessen müssen Sie ein Formular erstellen, indem Sie eine Sammlung von UI-Elementen auf einer Seite anordnen.

Dazu müssen Sie Layout-Panelsverstehen. Dies sind Container, die die UI-Elemente Ihrer App enthalten, sodass Sie sie anordnen und gruppieren können. Wenn Sie Layoutpanels in anderen Layoutpanels platzieren, haben Sie eine große Kontrolle darüber, wo und wie Ihre Elemente im Verhältnis zueinander angezeigt werden. Dies erleichtert auch die Anpassung Ihrer App an das Ändern von Bildschirmgrößen.

Lesen Sie dieser Dokumentation zu Layoutpanels. Da Formulare in der Regel in einer oder mehreren vertikalen Spalten angezeigt werden, sollten Sie ähnliche Elemente in einem StackPanel-gruppieren und diese in einem RelativePanel- anordnen, falls erforderlich. Beginnen Sie jetzt, einige Panels zusammenzustellen – wenn Sie einen Verweis benötigen, finden Sie unten ein grundlegendes Layoutframework für ein zweispaltiges Formular:

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

Sie müssen Ihr Formular mit einer Reihe von XAML-Steuerelementenbestücken. Ihnen sind diese wahrscheinlich vertraut, aber Sie können gerne nachlesen, wenn Sie eine Auffrischung benötigen. Insbesondere möchten Sie Steuerelemente verwenden, mit denen Der Benutzer Text eingeben oder aus einer Liste von Werten auswählen kann. Dies ist eine einfache Liste der Optionen, die Sie hinzufügen können – Sie müssen nicht alles darüber lesen, nur genug, damit Sie verstehen, wie sie aussehen und wie sie funktionieren.

• mit TextBox- können Benutzer Text in Ihre App eingeben.
• ToggleSwitch ermöglicht einem Benutzer, zwischen zwei Optionen auszuwählen.
• DatePicker- ermöglicht es einem Benutzer, einen Datumswert auszuwählen.
• TimePicker- ermöglicht es einem Benutzer, einen Zeitwert auszuwählen.
• ComboBox erweitern, um eine Liste auswählbarer Elemente anzuzeigen. Weitere Informationen zu ihnen finden Sie hier

Sie könnten auch Schaltflächen hinzufügen, damit der Benutzer speichern oder verwerfen kann.

Formatieren von Steuerelementen im Layout

Sie wissen, wie Sie Layoutbereiche anordnen und elemente haben, die Sie hinzufügen möchten, aber wie sollten sie formatiert werden? Die Seite der Formulare enthält einige spezifische Gestaltungshinweise. Lesen Sie die Abschnitte über Typen von Formularen und Layout für nützliche Hinweise. Wir werden kurz über Barrierefreiheit und relatives Layout sprechen.

Mit diesem Rat sollten Sie damit beginnen, Ihre ausgewählten Steuerelemente in Ihr Layout einzufügen, sicherzustellen, dass sie Beschriftungen erhalten und richtig platziert sind. Als Beispiel sehen Sie hier die grundlegende Gliederung für ein einseitiges Formular unter Verwendung des obenstehenden Layouts, der Steuerelemente und der Designrichtlinien:

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

Sie können Ihre Steuerelemente mit weiteren Eigenschaften anpassen, um eine bessere visuelle Erfahrung zu erzielen.

Machen Sie Ihr Layout responsiv

Benutzer können Ihre Benutzeroberfläche auf einer Vielzahl von Geräten mit unterschiedlichen Bildschirmbreiten anzeigen. Um sicherzustellen, dass sie unabhängig vom Bildschirm ein gutes Erlebnis haben, sollten Sie responsives Designverwenden. Lesen Sie diese Seite, um gute Ratschläge zu den Designphilosophien zu erhalten, die Sie beim Fortfahren berücksichtigen sollten.

Die Responsive Layouts mit XAML--Seite bietet einen detaillierten Überblick über die Implementierung solcher Layouts. Derzeit konzentrieren wir uns auf flüssige Layouts und visuelle Zustände in XAML.

Die grundlegende Formkontur, die wir zusammengestellt haben, ist bereits ein dynamisches Layout, da es hauptsächlich von der relativen Position von Steuerelementen mit nur minimaler Verwendung bestimmter Pixelgrößen und -positionen abhängt. Beachten Sie diese Anleitung für weitere UIs, die Sie in Zukunft erstellen können.

Wichtiger für reaktionsfähige Layouts sind visuelle Zustände. Ein visueller Zustand definiert Eigenschaftswerte, die auf ein bestimmtes Element angewendet werden, wenn eine bestimmte Bedingung wahr ist. Erfahren Sie, wie Sie dies in XAMLtun, und setzen Sie es dann in Ihr Formular um. In unserem vorherigen Beispiel könnte ein sehr grundlegende Aussehen haben:

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

Es ist nicht praktikabel, visuelle Zustände für eine breite Palette von Bildschirmgrößen zu erstellen, und es ist unwahrscheinlich, dass mehr als nur wenige erhebliche Auswirkungen auf die Benutzererfahrung Ihrer App haben. Wir empfehlen, stattdessen einige wichtige Bruchstellen zu entwerfen – Sie können hier mehr lesen.

Hinzufügen von Barrierefreiheitsunterstützung

Nachdem Sie nun über ein gut konstruiertes Layout verfügen, das auf Änderungen der Bildschirmgrößen reagiert, können Sie die Benutzeroberfläche zuletzt verbessern, um die Benutzererfahrung zu verbessern, um Ihre Appbarrierefrei zu machen. Es kann viel in diese Angelegenheit hineinfließen, aber in einem Format wie diesem ist es einfacher, als es den Anschein hat. Konzentrieren Sie sich auf Folgendes:

• Tastaturunterstützung – Stellen Sie sicher, dass die Reihenfolge der Elemente in Ihren UI-Bereichen der Anzeige auf dem Bildschirm entspricht, damit ein Benutzer sie problemlos durchlaufen kann.
• Unterstützung von Bildschirmlesern – Stellen Sie sicher, dass alle Steuerelemente einen beschreibenden Namen haben.

Wenn Sie komplexere Layouts mit mehr visuellen Elementen erstellen, sollten Sie der Checkliste zur Barrierefreiheit weitere Details entnehmen. Schließlich ist die Barrierefreiheit für eine App nicht erforderlich, es hilft ihnen, ein größeres Publikum zu erreichen und zu binden.

Weitere Schritte

Obwohl Sie hier ein Formular erstellt haben, gelten die Konzepte von Layouts und Steuerelementen für alle XAML-UIs, die Sie möglicherweise erstellen. Sie können die Dokumente, auf die wir Sie verlinkt haben, nochmals durchsehen und mit dem von Ihnen erstellten Formular experimentieren, neue UI-Features hinzufügen und die Benutzererfahrung weiter verfeinern. Wenn Sie Schritt-für-Schritt-Anleitungen zu detaillierteren Layout-Features benötigen, lesen Sie unser Tutorial für adaptives Layout

Formulare müssen auch nicht in einem Vakuum vorhanden sein – Sie können einen Schritt weiter gehen und Ihre in ein Listen-/Detailmuster oder einen NavigationVieweinbetten. Oder wenn Sie mit dem Code-Behind für Ihr Formular arbeiten möchten, sollten Sie mit unserer -Ereignisübersichtbeginnen.

Nützliche APIs und Dokumente

Nachfolgend finden Sie eine kurze Zusammenfassung der APIs und anderer nützlicher Dokumentationen, die Ihnen bei den ersten Schritten bei der Arbeit mit der Datenbindung helfen.

Nützliche APIs

Nützliche Dokumente

Nützliche Codebeispiele