Procédure pas à pas : construction d'une disposition selon le positionnement absolu

Dans le positionnement absolu, vous réorganisez des éléments enfants en spécifiant leur emplacement exact par rapport à leur élément parent. Par exemple, vous réorganisez des contrôles sur un panneau en spécifiant les coordonnées gauche et supérieure des contrôles sur le panneau. Pour plus d'informations, consultez Disposition selon les positionnements absolu et dynamique.

Concepteur WPF pour Visual Studio fournit un contrôle de panneau Canvas qui prend en charge le positionnement absolu. Vous pouvez utiliser le contrôle de panneau Canvas pour positionner de façon absolue des éléments dans vos applications.

Important

Autant que possible, il est préférable d'utiliser une disposition dynamique. Les dispositions dynamiques sont les plus flexibles, elles s'adaptent aux modifications de contenu telles que la localisation et elles offrent à l'utilisateur final un meilleur contrôle sur leur environnement. Pour voir des exemples de dispositions dynamiques, consultez Procédure pas à pas : création d'une application redimensionnable à l'aide du Concepteur WPF et Procédure pas à pas : construction d'une disposition dynamique.

Dans cette procédure pas à pas, vous allez effectuer les tâches suivantes :

• Création d'une application WPF

• Ajout d'un contrôle de panneau Canvas à l'application

• Ajout de contrôles au panneau

• Test de la disposition

L'illustration suivante donne un aperçu de votre application.

Notes

Les boîtes de dialogue et les commandes de menu qui s'affichent peuvent être différentes de celles qui sont décrites dans l'aide, en fonction de vos paramètres actifs ou de l'édition utilisée. Pour modifier vos paramètres, choisissez Importation et exportation de paramètres dans le menu Outils. Pour plus d'informations, consultez Utilisation des paramètres.

Composants requis

Pour exécuter cette procédure pas à pas, vous devez disposer des composants suivants :

• Visual Studio 2010

Création du projet

La première procédure consiste à créer le projet d'application.

Pour créer le projet

1. Créez un nouveau projet d'application WPF dans Visual Basic ou Visual C# nommé DispositionAbsolue. Pour plus d'informations, consultez Comment : créer un projet d'application WPF.

   Notes

   Vous n'écrirez pas de code dans cette procédure pas à pas. Le langage que vous choisissez pour votre projet correspond au langage utilisé pour les pages code-behind dans votre application.

   MainWindow.xaml s'ouvre dans le Concepteur WPF.

2. En mode Design, sélectionnez la fenêtre. Pour plus d'informations, consultez Comment : sélectionner et déplacer des éléments sur l'aire de conception.

3. Dans la fenêtre Propriétés, définissez les propriétés suivantes pour Window :

   Propriété	Valeur
   Largeur	400
   Hauteur	200

   Conseil

   Vous pouvez également utiliser les poignées de redimensionnement pour redimensionner la fenêtre en mode Design.

4. (Facultatif) Pour verrouiller la taille de la fenêtre, utilisez l'une des méthodes suivantes :

   1. Dans la fenêtre Propriétés, définissez la propriété suivante pour Window :

      Propriété	Valeur
      ResizeMode	NoResize

   2. Dans la fenêtre Propriétés, définissez les propriétés suivantes pour Window :

      Propriété	Valeur
      MinWidth	400
      MinHeight	200
      MaxWidth	400
      MaxHeight	200

5. Dans le menu Fichier, cliquez sur Enregistrer tout.

Ajout d'un contrôle de panneau

Par défaut, la nouvelle application WPF contient un Window avec un panneau Grid. Pour créer une disposition selon le positionnement absolu, vous devez utiliser un panneau Canvas. Dans cette procédure, vous supprimez le contrôle Grid par défaut et ajoutez un contrôle Canvas.

Pour ajouter un contrôle de panneau

1. En mode Design, sélectionnez la grille.

2. Appuyez sur la touche SUPPR pour supprimer le contrôle Grid.

3. Dans la Boîte à outils, dans le groupe Contrôles, faites glisser un contrôle Canvas sur Window.

4. Dans la fenêtre Propriétés, affectez la valeur Auto à la propriété Height du contrôle Canvas.

   Le contrôle Canvas s'étend sur toute la hauteur de Window.

5. Dans la fenêtre Propriétés, affectez la valeur Auto à la propriété Width du contrôle Canvas.

   Le contrôle Canvas s'étend sur toute la largeur de Window.

6. Dans le menu Fichier, cliquez sur Enregistrer tout.

Ajout de contrôles au panneau

Ensuite, vous ajoutez des contrôles au panneau et utilisez les propriétés attachées Left et Top du contrôle Canvas pour les positionner de façon absolue.

Pour ajouter des contrôles au panneau

1. Dans la Boîte à outils, dans le groupe Commun, faites glisser un contrôle Label sur le contrôle Canvas.

2. Dans la fenêtre Propriétés, définissez les propriétés suivantes pour Label :

   Propriété	Valeur
   Contenu	Nom :
   Canvas.Left	20
   Canvas.Top	20
   Largeur	120
   Hauteur	23

3. Dans la Boîte à outils, dans le groupe Commun, faites glisser un contrôle Label sur le contrôle Canvas.

4. Dans la fenêtre Propriétés, définissez les propriétés suivantes pour Label :

   Propriété	Valeur
   Contenu	Password:
   Canvas.Left	20
   Canvas.Top	60
   Largeur	120
   Hauteur	23

5. Dans la Boîte à outils, dans le groupe Commun, faites glisser un contrôle TextBox sur le contrôle Canvas.

6. Dans la fenêtre Propriétés, définissez les propriétés suivantes pour TextBox :

   Propriété	Valeur
   Canvas.Left	160
   Canvas.Top	20
   Largeur	200
   Hauteur	23

7. Dans la Boîte à outils, dans le groupe Commun, faites glisser un contrôle TextBox sur le contrôle Canvas.

8. Dans la fenêtre Propriétés, définissez les propriétés suivantes pour TextBox :

   Propriété	Valeur
   Canvas.Left	160
   Canvas.Top	60
   Largeur	200
   Hauteur	23

9. Dans la Boîte à outils, dans le groupe Commun, faites glisser un contrôle Button sur le contrôle Canvas.

10. Dans la fenêtre Propriétés, définissez les propriétés suivantes pour Button :

    Propriété	Valeur
    Contenu	OK
    Canvas.Left	196
    Canvas.Top	120
    Largeur	75
    Hauteur	23

11. Dans la Boîte à outils, dans le groupe Commun, faites glisser un contrôle Button sur le contrôle Canvas.

12. Dans la fenêtre Propriétés, définissez les propriétés suivantes pour Button :

    Propriété	Valeur
    Contenu	Cancel
    Canvas.Left	283
    Canvas.Top	120
    Largeur	75
    Hauteur	23

13. Dans le menu Fichier, cliquez sur Enregistrer tout.

Test de la disposition

Pour finir, vous exécutez l'application et vérifiez que les contrôles respectent le positionnement absolu.

Pour tester la disposition

1. (Facultatif) Si vous avez verrouillé la taille de la fenêtre dans une étape précédente, vous devez la déverrouiller pour exécuter cette procédure. Dans la fenêtre Propriétés, définissez les propriétés suivantes pour Window :

   Propriété	Valeur
   MinWidth	0
   MinHeight	0
   MaxWidth	Infinity
   MaxHeight	Infinity
   ResizeMode	CanResize

2. Dans le menu Déboguer, cliquez sur Démarrer le débogage.

   L'application démarre et la fenêtre apparaît.

3. Redimensionnez la fenêtre.

   Les contrôles respectent le positionnement absolu et ne changent pas de taille ni de position.

4. Fermez la fenêtre.

Assemblage

Voici le fichier MainWindow.xaml terminé :

<Window x:Class="MainWindow"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="200" Width="400" ResizeMode="CanResize" Name="MainWindow" MinWidth="0" MinHeight="0" MaxWidth="Infinity" MaxHeight="Infinity">
    <Canvas Height="Auto" Name="Canvas1" Width="Auto">
        <Label Canvas.Left="20" Canvas.Top="20" Height="23" Width="120" Name="Label1">Name:</Label>
        <Label Canvas.Left="20" Canvas.Top="60" Height="23" Width="120" Name="Label2">Password:</Label>
        <TextBox Canvas.Left="160" Canvas.Top="20" Height="23" Width="200" Name="TextBox1" />
        <TextBox Canvas.Left="160" Canvas.Top="60" Height="23" Width="200" Name="TextBox2" />
        <Button Canvas.Left="196" Canvas.Top="120" Height="23" Width="75" Name="Button1">OK</Button>
        <Button Canvas.Left="283" Canvas.Top="120" Height="23" Width="75" Name="Button2">Cancel</Button>
    </Canvas>
</Window>

Voir aussi

Tâches

Comment : construire une disposition selon le positionnement absolu

Concepts

Alignement dans le Concepteur WPF

Système de disposition

Vue d'ensemble des concepteurs WPF et Silverlight

Autres ressources

Procédures pas à pas relatives aux dispositions