Créer un projet Silverlight avec Expression Blend

L'outil de développement Expression Blend facilite la création d'applications Silverlight.

Expression Blend est un outil de développement dédié à WPF et XAML et qui permet des réaliser des logiciels et des applications Web. La liste "Outils XAML" indique comment se procurer le logiciel.

Créer un nouveau projet

  1. Dans le menu File, cliquer sur New Project...
    Une boite de dialogue apparait, représentée ci-dessous.
  2. Dans la boite de dialogue, cliquer sur l'image WPF Application pour réaliser un programme exécutable (.exe) ou sur WPF Control Library pour créer une bibliothèque de fonctions à lier aux programmes.
  3. Au dessous, dans le champ Name, tapez le nom du nouveau projet.
  4. Vous avez aussi une liste de langages de programmation à choisir, sélectionner le langage (C# ou Visual Basic).
  5. Puis cliquez sur OK.

.

Créer un nouveau document

Un fois que vous avez créé un projet, vous pouvez ajouter des composantes. Noter que vous avez déjà une fenêtre créée, dans le fichier Windows1 et que créer une fenêtre est inutile.

  1. Dans le menu File, cliquez sur New Item, puis vous avez le choix entre les fonctions suivantes:

    Window
    Ajouter une fenêtre ou une boite de dialogue au projet.
    UserControl
    Pour définir une composante graphique qui va compléter l'interface utilisateur du projet.
    Page
    Cette page contiendra du code auquel vous pourrez accéder avec un gestionnaire de fichier, un navigateur ou un autre programme.
    Resource Dictionary
    Produire une ressource qui sera utilisable à partir d'autres composants du projet.
  2. Dans le champ Name, tapez le nom du document ou conservez le nom généré par défaut.
  3. Cochez la case Include si vous voulez générer du code dans un fichier, pour le document créé.

Maintenant vous êtes prêt à créer votre premier programme sous la forme d'une application binaire.

Premier programme avec Expression Blend

Une fois le projet créé, faire un premier programme avec Expression Blend est d'une facilité déconcertante.

La fenêtre centrale dispose de deux onglets latéraux sur le droite, Design et XAML.
- Design affiche le mode visuel dans lequel on place des composants graphiques dont on modifie les propriétés, tandis que
- XAML affiche le code source correspondant.

Passer en mode XAML. On voit que le code suivant à été généré automatiquement avec le projet:

<Window
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	x:Class="UntitledProject1.Window1"
	x:Name="Window"
	Title="Window1"
	Width="640" Height="480">
 <Grid x:Name="LayoutRoot"/>
</Windows>

Si vous avez déja lu le chapitre Premier programme XAML (ce n'est pas requis), vous noterez qu'ici l'interface est une fenêtre (Window) et non plus un canevas (Canvas), comme c'est le cas pour une page Web.

Par ailleurs une balise Grid vide a été créée, elle doit englober le contenu:

<Grid x:Name="LayoutRoot"/>

C'est dans cette balise que l'on placera le code, il faut donc l'ouvrir:

<Grid x:Name="LayoutRoot">

</Grid>

Reprenons le code que nous avons utilisé dans le chapitre précédent et plaçons le dans le conteneur:

<Grid x:Name="LayoutRoot">
  <TextBlock
    FontFamily="Verdana"
    FontSize="30" >
     Salut le Monde!
  <TextBlock>
</Grid>

On sauvegarde avec les touches Ctrl et S, et cette action occasionne un contrôle de la syntaxe de notre code.
Notre premier programme est terminé!
Il reste à le compiler. Ouvrir le menu Project et cliquer sur la ligne Build Project. Vérifier qu'il n'y a pas de message d'erreur dans la fenêtre du bas.

Si le message suivant s'affiche, tout est parfait:

Build completed

Pour lancer notre programme, cliquer sur la dernière ligne du même menu: Test Solution ou presser F5.
On doit obtenir la fenêtre suivante:


Le programme binaire exécutable (.exe) se trouve dans le sous-répertoire bin\Debug du répertoire de votre projet.

Accéder au code C Sharp

Quand on crée un projet XAML avec Expression Blend, il génère un fichier C# associé. Pour le voir, cliquer sur l'icône à gauche du nom du fichier XAML.

Pour accéder au code C Sharp il est nécessaire d'avoir installé Visual Studio Express au moins. Vous pourrez alors cliquer sur Windows1.xaml.cs pour charger l'éditeur de code.
Il y aura un espance de nom qui est le nom du projet, si c'est l'espace de votre application. Il contient aussi une classe de type Window, c'est la fenêtre principale de votre application.