Share via

Procédure pas à pas : édition de XAML dans le Concepteur WPF

  • Article

[Cette documentation constitue un aperçu et pourra faire l'objet de modifications dans les versions ultérieures. Des rubriques vierges sont incluses en tant qu'espaces réservés.]

Le Concepteur WPF pour Visual Studio fournit un éditeur XAML comprenant bien des fonctionnalités que vous trouvez dans les autres éditeurs de langages de Visual Studio. Cette rubrique vous indique comment utiliser des fonctionnalités telles qu'IntelliSense et le mode Plan.

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

  • créer un projet WPF ;

  • créer des ressources ;

  • afficher la coloration syntaxique ;

  • utiliser la navigation de balises ;

  • utiliser le mode Plan ;

  • utiliser IntelliSense ;

  • utiliser les accolades correspondantes ;

  • utiliser la mise en forme automatique.

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 Paramètres Visual Studio.

Composants requis

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

  • Visual Studio 2012 RC.

Création du projet

La première étape consiste à créer le projet pour l'application hôte.

Pour créer le projet

Création de ressources

Vous utiliserez souvent des ressources dans vos applications WPF. WPF Designer fournit le mode Plan réductible pour les sections de ressource et la navigation vers les sections de ressource dans la fenêtre Structure du document.

Pour créer des ressources

  1. Ouvrez MainWindow.xaml dans le WPF Designer.

  2. En mode XAML, insérez le balisage XAML suivant après la balise d'ouverture de MainWindow.

    Ce code XAML crée un pinceau à dégradé linéaire possédant un spectre de couleurs.

    <Window.Resources>
    <LinearGradientBrush x:Key="backgroundBrush1" StartPoint="0,0" EndPoint="1,1">
        <GradientStop Color="Yellow" Offset="0.0" />
        <GradientStop Color="Red" Offset="0.25" />
        <GradientStop Color="Blue" Offset="0.75" />
        <GradientStop Color="LimeGreen" Offset="1.0" />
    </LinearGradientBrush>
</Window.Resources>

Coloration syntaxique

Le WPF Designer rend votre code XAML plus lisible en colorant votre texte selon sa syntaxe.

Pour afficher la coloration syntaxique

  • Dans la vue XAML, remplacez l'élément <Grid> par défaut par le balisage suivant.

    <Grid Name="grid1" Background="{StaticResource backgroundBrush1}">

</Grid>

    L'élément, la propriété et la valeur de propriété possèdent chacun une couleur unique.

    Coloration syntaxique dans la vue XAML

    L'extension de balisage est liée à la propriété Background. De plus, l'arrière-plan de grille est mis à jour en mode Design.

    Ressource d'arrière-plan en mode Création

    Vous pouvez modifier la couleur des attributs et éléments XAML. Pour plus d'informations, consultez Comment : modifier les paramètres de vue XAML.

Vous pouvez vous déplacer d'une balise à une autre en utilisant le navigateur des balises. Vous pouvez également naviguer en utilisant la vue Structure du document. Pour plus d'informations, consultez Navigation dans la hiérarchie des éléments d'un document WPF.

Pour utiliser le navigateur des balises

  1. En mode XAML, cliquez sur la balise d'ouverture de l'élément <Grid>.

  2. En bas du WPF Designer, repérez le navigateur des balises. Il indique Grid (grid1) Window/Grid.

  3. Dans le navigateur de balises, déplacez le pointeur de la souris sur l'élément Window.

    Une miniature de MainWindow s'affiche.

    Navigateur de balises avec miniature dans la vue XAML

  4. Dans le navigateur de balises, cliquez sur le lien hypertexte Window.

    Dans la vue XAML, la balise ouvrante de MainWindow est mise en surbrillance.

  5. En mode XAML, cliquez sur la balise <Window.Resources>.

    Le navigateur de balises affiche la hiérarchie de l'arborescence XAML à l'élément <Window.Resources>.

  6. Dans le navigateur de balises, cliquez sur la flèche Sélectionner l'enfant à droite de Ressources.

    L'élément enfant s'affiche dans un message.

  7. Cliquez sur LinearGradientBrush (backgroundBrush1).

    L'élément <LinearGradientBrush> est sélectionné en mode XAML.

Mode Plan

Le WPF Designer prend intégralement en charge le mode Plan réductible. 

Pour utiliser le mode Plan

  1. En mode XAML, défilez jusqu'à l'élément <Window.Resources>.

  2. À gauche de la balise d'ouverture, cliquez sur le bouton de réduction.

    L'élément <Window.Resources> est réduit à une ligne unique.

    Plan réduit dans la vue XAML

  3. À gauche de la balise d'ouverture, cliquez sur le bouton développer.

    L'élément <Window.Resources> se développe pour revenir à son état d'origine.

IntelliSense

Le WPF Designer prend complètement en charge IntelliSense.

Pour utiliser IntelliSense

  1. Dans l'élément grid1, tapez <Gr.

    La liste IntelliSense apparaît, avec la classe Grid sélectionnée.

    XAML IntelliSense

  2. Appuyez sur TABULATION pour compléter la balise d'ouverture.

  3. Tapez .c. (Soyez sûr d'inclure le point.)

    La liste IntelliSense apparaît, la première propriété commençant par la lettre C sélectionnée.

  4. Utilisez la touche de DIRECTION VERS LE BAS pour atteindre la propriété ColumnDefinitions.

  5. Appuyez sur TABULATION pour compléter la balise.

    Pour plus d'informations sur l'utilisation d'IntelliSense pour les types personnalisés, consultez Comment : importer un espace de noms en XAML.

Accolades correspondantes

Vous pouvez naviguer dans un élément en utilisant la fonctionnalité d'accolades correspondantes.

Pour utiliser les accolades correspondantes

  1. En mode XAML, cliquez sur la balise d'ouverture <LinearGradientBrush>.

  2. Appuyez sur CTRL+].

    Le curseur se déplace à la fin de la balise d'ouverture.

  3. Appuyez à nouveau sur CTRL+].

    Le curseur se déplace au début de la balise de fermeture.

  4. Supprimez le signe « supérieur à » '>' de fin de la balise de fermeture de l'élément <LinearGradientBrush>.

  5. Tapez '>' pour compléter la balise de fermeture.

    Le mode XAML met en surbrillance les balises d'ouverture et de fermeture.

    Accolades correspondantes dans la vue XAML

Mise en forme automatique

Vous pouvez mettre en forme votre code XAML en appuyant sur CTRL+KD, et vous pouvez spécifier des paramètres de mise en forme automatique. Pour plus d'informations, consultez Comment : modifier les paramètres de vue XAML.

Pour utiliser la mise en forme automatique

  1. En mode XAML, sélectionnez les quatre éléments <GradientStop>.

  2. Appuyez sur MAJ+TAB.

    Les quatre déclarations d'élément se déplacent à gauche.

  3. Appuyez sur CTRL+KD.

    Les quatre déclarations d'élément sont mises en retrait. Vous pouvez remarquer d'autres modifications à votre code XAML.

  4. Dans la première balise <GradientStop>, cliquez dans l'espace avant l'attribut Color.

  5. Appuyez sur la touche ENTRÉE pour débuter une nouvelle ligne.

  6. Cliquez dans l'espace avant l'attribut Offset et appuyez sur la touche ENTRÉE pour débuter une nouvelle ligne.

  7. Appuyez sur CTRL+KD.

    Les attributs restent dans les nouvelles lignes.

  8. Insérez quatre espaces avant l'attribut Color et appuyez sur CTRL+KD.

    L'attribut Color ne change pas de position.

Voir aussi

Tâches

Comment : importer un espace de noms en XAML

Comment : modifier les paramètres de vue XAML

Concepts

Navigation dans la hiérarchie des éléments d'un document WPF

Autres ressources

Concepteur WPF

Procédures pas à pas pour XAML et le code