Créer et personnaliser un formulaire

Si vous créez une application qui oblige les utilisateurs à entrer une quantité importante d’informations, vous souhaitez créer un formulaire pour qu’ils remplissent. Cet article vous montre ce que vous devez savoir pour créer un formulaire qui est utile et robuste.

Nous allons aborder ce que contrôles XAML entrer dans un formulaire, comment les organiser le mieux sur votre page et comment optimiser votre formulaire pour modifier les tailles d’écran. Toutefois, étant donné qu’un formulaire concerne la position relative des éléments visuels, commençons par discuter de la mise en page avec XAML.

Que devez-vous savoir ?

UWP n’a pas de contrôle de formulaire explicite que vous pouvez ajouter à votre application et configurer. Au lieu de cela, vous devez créer un formulaire en organisant une collection d’éléments d’interface utilisateur sur une page.

Pour ce faire, vous devez comprendre panneaux de mise en page. Il s’agit de conteneurs qui contiennent les éléments d’interface utilisateur de votre application, ce qui vous permet de les organiser et de les regrouper. Placer des panneaux de disposition dans d’autres panneaux de disposition vous donne beaucoup de contrôle sur l’emplacement et la façon dont vos éléments s’affichent par rapport à l’autre. Cela facilite également l’adaptation de votre application à la modification des tailles d’écran.

Lisez cette documentation sur les panneaux de mise en page. Étant donné que les formulaires sont généralement affichés dans une ou plusieurs colonnes verticales, vous souhaiterez regrouper des éléments similaires dans un StackPanel et les organiser dans un RelativePanel si nécessaire. Commencez à rassembler certains panneaux maintenant : si vous avez besoin d’une référence, vous trouverez ci-dessous une infrastructure de disposition de base pour un formulaire à deux colonnes :

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

Qu’est-ce qui se passe dans un formulaire ?

Vous devez remplir votre formulaire avec un assortiment de contrôles XAML . Vous êtes probablement familiarisé avec ceux-ci, mais n’hésitez pas à lire si vous avez besoin d’un actualisation. En particulier, vous souhaiterez des contrôles qui permettent à votre utilisateur d’entrer du texte ou de choisir parmi une liste de valeurs. Il s’agit d’une liste de bases d’options que vous pouvez ajouter : vous n’avez pas besoin de tout lire sur eux, juste assez pour comprendre ce qu’ils ressemblent et comment ils fonctionnent.

• TextBox permet à un utilisateur d’entrer du texte dans votre application.
• interrupteur à bascule permet à un utilisateur de choisir entre deux options.
• DatePicker permet à un utilisateur de sélectionner une valeur de date.
• TimePicker permet à un utilisateur de sélectionner une valeur de temps.
• ComboBox développe pour afficher une liste d’éléments sélectionnables. Vous pouvez en savoir plus ici

Vous pouvez également ajouter des boutons afin que l’utilisateur puisse enregistrer ou annuler.

Contrôles de format dans votre mise en page

Vous savez comment organiser des panneaux de disposition et avoir des éléments que vous souhaitez ajouter, mais comment les mettre en forme ? La page des formulaires et contient des recommandations spécifiques en matière de conception. Lisez les sections sur Types de formulaires et disposition pour obtenir des conseils utiles. Nous aborderons plus rapidement l’accessibilité et la disposition relative.

Avec ces conseils à l’esprit, vous devriez commencer à ajouter les composants de votre choix dans votre mise en page, en vous assurant qu'ils portent des étiquettes et sont correctement espacés. Par exemple, voici la structure de base pour un formulaire monopage en utilisant la disposition, les contrôles et les conseils de conception mentionnés ci-dessus.

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

N’hésitez pas à personnaliser vos contrôles avec plus de propriétés pour une meilleure expérience visuelle.

Rendre votre mise en page adaptative

Les utilisateurs peuvent afficher votre interface utilisateur sur différents appareils avec différentes largeurs d’écran. Pour vous assurer qu’ils ont une bonne expérience, quel que soit leur écran, vous devez utiliser la conception réactive. Lisez cette page pour obtenir de bons conseils sur les philosophies de conception à garder à l’esprit au fur et à mesure que vous continuez.

Les mises en page réactives avec XAML donnent une vue d’ensemble détaillée de la façon d’implémenter cette fonctionnalité. Pour l'instant, nous allons nous concentrer sur agencements fluides et sur états visuels en XAML.

Le contour de formulaire de base que nous avons mis en place est déjà un disposition fluide, car il dépend principalement de la position relative des contrôles avec seulement une utilisation minimale de tailles et de positions de pixels spécifiques. Gardez à l’esprit ces conseils pour plus d’UIs que vous pouvez créer à l’avenir.

Ce qui est plus important pour les dispositions réactives, ce sont les états visuels. Un état visuel définit les valeurs des propriétés appliquées à un élément donné lorsqu’une condition donnée est vraie. Découvrez comment procéder en xaml, puis implémentez-les dans votre formulaire. Voici à quoi un très basique pourrait ressembler dans notre exemple précédent :

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

Il n’est pas pratique de créer des états visuels pour un large éventail de tailles d’écran, ni plus d’un couple susceptible d’avoir un impact significatif sur l’expérience utilisateur de votre application. Nous vous recommandons de concevoir pour quelques points d’arrêt clés : vous pouvez en savoir plus ici.

Ajouter une prise en charge de l’accessibilité

Maintenant que vous disposez d’une disposition bien construite qui répond aux modifications apportées aux tailles d’écran, vous pouvez faire une dernière chose pour améliorer l’expérience utilisateur : rendre votre application accessible. Il y a beaucoup de choses qui peuvent entrer dans ce domaine, mais dans une forme comme celle-ci, il est plus facile qu’il ne semble. Concentrez-vous sur les éléments suivants :

• Prise en charge du clavier : assurez-vous que l’ordre des éléments dans vos panneaux d’interface utilisateur correspond à la façon dont ils sont affichés à l’écran, afin qu’un utilisateur puisse facilement les parcourir.
• Prise en charge du lecteur d’écran : vérifiez que tous vos éléments de contrôle ont un nom descriptif.

Lorsque vous créez des dispositions plus complexes avec plus d’éléments visuels, vous devez consulter la liste de contrôle d’accessibilité pour plus d’informations. Après tout, alors que l’accessibilité n’est pas nécessaire pour une application, elle permet d’atteindre et d’impliquer un public plus large.

Aller plus loin

Bien que vous ayez créé un formulaire ici, les concepts de dispositions et de contrôles s’appliquent à toutes les interfaces utilisateur XAML que vous pouvez construire. N’hésitez pas à revenir dans la documentation à laquelle nous vous avons lié et à expérimenter le formulaire que vous avez, en ajoutant de nouvelles fonctionnalités d’interface utilisateur et en affinant davantage l’expérience utilisateur. Si vous souhaitez obtenir des conseils pas à pas via des fonctionnalités de disposition plus détaillées, consultez notre didacticiel de disposition adaptative

Les formulaires n'ont pas besoin d'exister en isolation : vous pouvez aller plus loin et intégrer le vôtre dans un modèle liste et détails ou un NavigationView. Ou si vous souhaitez travailler sur le code-behind de votre formulaire, vous pouvez commencer par consulter notre aperçu des événements .

API et documents utiles

Voici un résumé rapide des API et d’autres documentations utiles pour vous aider à commencer à utiliser la liaison de données.

API utiles

Documents utiles

Exemples de code utiles