XAML - Configuration de l'environnement

Microsoft fournit deux outils importants pour XAML -

• Visual Studio
• Mélange d'expression

Actuellement, les deux outils peuvent créer du XAML, mais le fait est que Visual Studio est davantage utilisé par les développeurs tandis qu'Expression Blend est encore plus souvent utilisé par les concepteurs.

Microsoft fournit une version gratuite de Visual Studio qui peut être téléchargée à partir de https://www.visualstudio.com/en-us/downloads/download-visual-studio-vs.aspx

Note- Pour ce didacticiel, nous utiliserons principalement des projets WPF et l'application Windows Store. Mais la version gratuite de Visual Studio ne prend pas en charge l'application Windows Store. Donc, à cette fin, vous aurez besoin d'une version sous licence de Visual Studio.

Installation

Suivez les étapes ci-dessous pour installer Visual Studio sur votre système -

• Après avoir téléchargé les fichiers, exécutez le programme d'installation. La boîte de dialogue suivante s'affiche.

• Cliquez sur le bouton Installer et il lancera le processus d'installation.

• Une fois le processus d'installation terminé, vous verrez l'écran suivant.

• Fermez cette boîte de dialogue et redémarrez votre ordinateur si nécessaire.

• Maintenant, ouvrez Visual studio à partir du menu Démarrer qui affichera la boîte de dialogue suivante. Cela prendra du temps pour la première fois, uniquement pour la préparation.

Une fois que tout est fait, vous verrez la fenêtre principale de Visual Studio.

Premier pas vers la mise en œuvre

Commençons par une implémentation simple. Suivez les étapes ci-dessous -

• Cliquez sur l'option de menu Fichier → Nouveau → Projet.

• La boîte de dialogue suivante s'affiche -

• Sous Modèles, sélectionnez Visual C # et sélectionnez Application WPF. Donnez un nom au projet et cliquez sur le bouton OK.

• Dans le fichier mainwindow.xaml, les balises XAML suivantes sont écrites par défaut. Vous comprendrez toutes ces balises plus tard dans ce tutoriel.

<Window x:Class = "FirstStepDemo.MainWindow"
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   xmlns:local = "clr-namespace:FirstStepDemo" 
   mc:Ignorable = "d" Title = "MainWindow" Height = "350" Width = "604"> 
	
   <Grid> 
         
   </Grid> 
</Window>

Par défaut, une grille est définie comme premier élément après la page.

Ajoutons un bouton et un bloc de texte sous l'élément Grid. C'est appeléobject element syntax, un crochet gauche suivi du nom de ce que nous voulons instancier, par exemple un bouton, puis définissez une propriété de contenu. La chaîne attribuée au contenu sera affichée sur le bouton. Réglez maintenant la hauteur et la largeur du bouton sur 30 et 50 respectivement. De même, initialisez les propriétés du bloc de texte.

Maintenant, regardez la fenêtre de conception. Vous verrez un bouton. Appuyez maintenant sur F5 pour exécuter ce code XAML.

<Window x:Class = "FirstStepDemo.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   xmlns:local = "clr-namespace:FirstStepDemo" 
   mc:Ignorable = "d" Title = "MainWindow" Height = "350" Width = "604"> 
	
   <Grid> 
      <Button Content = "First Button" Height = "30" Width = "80"/> 
      <TextBlock Text = "Congratulations you have successfully build your first app" 
         Height = "30" Margin = "162,180,122,109"/> 
   </Grid> 
	
</Window>

Lorsque vous compilez et exécutez le code ci-dessus, vous verrez la fenêtre suivante.

Félicitations! Vous avez conçu votre premier bouton.