Atelier « Premiers pas avec Silverlight et Expression Blend »

Par Christophe Lauer - Septembre 2007

Durée et Audience cible

Durée : La durée de ce Hands On Labs est d’approximativement 45 minutes, hors temps de téléchargement et d’installation de Silverlight et d’Expression Blend

Cible : Développeurs tous niveaux ou Designers, avec ou sans première expérience en développement .NET

Pré-requis : Ordinateur fonctionnant sous Windows XP SP2 ou Windows Vista, Compte Windows Live ID pour télécharger la version d’évaluation d’Expression Blend (facultatif).

Contenu

Table des matières

• Durée et Audience cible
• Contenu
• Avant Propos
• Préparer et configurer son environnement de travail
  • Installation de Silverlight
  • Installation d’Expression Blend
• Exercice 1 : Créer le projet
  • Etape 1 : Créer la structure du projet
  • Etape 2 : Définir le Canvas de base
  • Etape 3 : Ajouter le fond de la vidéo
• Exercice 2 : Ajouter la vidéo
  • Etape 1 : Ajouter l’élément player vidéo
  • Etape 2 : Modifier les propriétés de la vidéo
  • Etape 3 : Prévisualiser l’application
  • Etape 4 : Comprendre le fonctionnement du plug-in Silverlight
  • Etape 5 : Modifier les options du MediaElement
• Exercice 3 : Ajouter de l’interactivité
  • Etape 1 : Créer le design du bouton
  • Etape 2 : Ajouter une icône
  • Etape 3 : Constituer le bouton
  • Etape 4 : Créer le Bouton Pause
• Exercice 4 : Utiliser les Animations
  • Etape 1 : Créer une animation simple
• Exercice 5 : Scripter le comportement des boutons
  • Etape 1 : Nommer le MediaElement
  • Etape 2 : Ecrire le code Javascript
  • Etape 3 : Gérer les évènements
• Conclusion et Ressources
  • Ressources

Avant Propos

Silverlight est le nom d’une nouvelle technologie de couche de présentation Web qui a été conçue pour pouvoir fonctionner sur un large éventail de plate-formes. Cette technologie permet la création et l’exécution d’applications proposant des interactions riches, ainsi que des effets visuels captivants et le support de contenus multi-médias tels que le son ou la vidéo, y compris le rendu de vidéos en Haute Définition.

A l’instar de WPF (alias Windows Presentation Foundation) qui est la technologie de présentation apparue avec le Microsoft .NET Framework 3.0, Silverlight est basé sur un langage de description d’interfaces nommé XAML (eXtensible Application Markup Language).

Toutefois, les objectifs de WPF et de Silverlight étant différents, le langage XAML supporté par Silverlight est relativement restreint par rapport à celui de son ainé WPF, et peut être vu comme un sous-ensemble de ce dernier. Certaines fonctionnalités présentes dans WPF sont pour le moment absentes de Silverlight 1.0, comme par exemple les contrôles permettant de gérer le Layout des éléments dans une scène, les contrôles visuels de type Combobox, Textbox, Listbox, etc… ainsi que les fonctionnalités liées au rendu de scènes en 3D.

Silverlight était anciennement connu sous le nom de code de « WPF/E » pour « Windows Presentation Foundation / Everywhere », pour souligner son aspect multi-plateformes.

Supportant côté client un large éventail de navigateurs (Internet Explorer 6 et 7, Mozilla Firefox et Safari d’Apple sur MacOSX), Silverlight n’a en revanche aucune dépendance avec la ou les technologies serveur que vous utilisez sur vos sites Web.

Une application Silverlight est essentiellement constituée par une page HTML, un fichier Javascript qui va contenir le code définissant le comportement et les interactions de l’application et éventuellement un ensemble de ressources telles que des images, du son ou de la vidéo.

Vous pouvez donc totalement envisager d’ajouter des fonctionnalités en Silverlight sur vos sites existants en Java JSP, PHP, CGI ou toute autre technologie serveur, qu’elle provienne du catalogue de Microsoft ou pas.

Contrairement à d’autres technologies permettant la création d’interfaces utilisateur riches et réactives dans le navigateur, telles que les Applets Java, les contrôles ActiveX ou les objets Flash, qui sont distribués sous la forme de contenus binaires, les scènes XAML sont reçues par le navigateur sous la forme de fichiers XML humainement lisibles, et dont le contenu peut être indexé par les moteurs de recherche tels que Windows Live Search.

Enfin, les scènes Silverlight sont exécutées dans le cadre d’un plug-in léger (il s’agit d’environ 2Mo pour le plug-in Silverlight 1.0) qui peut être installé à la demande depuis toute page web contenant une scène Silverlight, et sans nécessiter que l’utilisateur ne possède les privilèges Administrateur sur sa machine, ni redémarrage du système d’exploitation.

Du point de vue de la création d’applications Silverlight, Microsoft propose un ensemble cohérent d’outils à destination des Designers et des Développeurs, sous la forme d’une famille d’outils de la gamme Expression d’une part, et de Visual Studio 2008 d’autre part, qui permettent de créer une chaine de production cohérente et qui favorise la collaboration entre les populations de designers et de développeurs. Nous allons d’ailleurs utiliser le produit Expression Blend plus tard dans ce tutoriel pour réaliser notre première application Silverlight.

NB : Les outils de la gamme Expression ainsi que Visual Studio 2008 ne fonctionnent que sur Windows. Il n’existe pas de version MacOSX de ces outils.

Préparer et configurer son environnement de travail

Installation de Silverlight

Comme nous l’avons évoqué dans l’Avant-propos, une scène Silverlight est définie dans un fichier XML qui contient les éléments XAML constitutifs de l’application. Si dans l’absolu, il est parfaitement possible d’éditer ce fichier XAML avec un simple éditeur de texte tel que Notepad, il est des opérations pour lesquelles le recours à un outil spécifique permet des gains de productivité importants.

Il est temps maintenant de faire entrer les outils Expression Design et Expression Blend en scène. Ces outils permettent de designer des objets ou des scènes complètes depuis des environnements graphiques puissants, et d’exporter le tout sous la forme d’assets XAML ou de projets qui pourront ensuite être partagés avec les développeurs du projet qui viendront enrichir les éléments statiques de Design produits par les designers pour leur ajouter les différents comportements et interactions souhaités avec l’utilisateur.

Par la suite, nous allons limiter notre utilisation de ces outils à Expression Blend. Mais avant d’installer Expression Blend, nous allons déjà préparer notre environnement en installant le plug-in permettant l’affichage et le rendu des scènes et applications Silverlight.

Pour installer Silverlight sur votre machine, ouvrez votre navigateur et faites le pointer sur l’adresse suivante : http://www.microsoft.com/silverlight

Depuis cette page, cliquez sur le lien « Tools and Resources » dans le menu de gauche, puis cliquez sur l’option « Installation Files ». Vérifiez que votre système correspond aux pré-requis indiqués dans les pages « System Requirements » de la section « Silverlight 1.0 » puis cliquez sur le logo de Windows ou de MacOSX en fonction du type d’ordinateur que vous utilisez.

L’installation démarre et en quelques instants, vous devriez voir apparaitre la boite de dialogue suivante qui confirme que l’installation de Silverlight sur votre ordinateur est terminée :

L’installation s’effectue en deux clics depuis Windows XP, et en trois clics sur Windows Vista, du fait de la présence de UAC (= User Access Control).

Installation d’Expression Blend

Si vous ne possédez pas de licence d’utilisation d’Expression Blend, vous pouvez vous rendre à l’adresse suivante afin de télécharger une version d’évaluation complète, toutefois limitée dans le temps, du produit :

http://www.microsoft.com/expression/products/download.aspx?key=blend2preview

NB : Pour pouvoir télécharger cette pré-version d’Expression Blend, vous devrez posséder un compte Windows Live ID valide.

Votre environnement de travail est maintenant prêt. Vous allez pouvoir commencer à suivre les étapes de ce Labo de Travaux Dirigés dont le résultat sera une application de type player vidéo dont voici un aperçu :

Vous aurez remarqué que ce document comporte une vingtaine de pages. La longueur (relative) de ce « Hands On Labs » vient du fait que nous avons souhaité détailler chacune des étapes et des opérations pour votre plus grand confort.

Toutefois, vous ne devriez pas avoir besoin de plus de 45 minutes pour compléter ce lab, hors temps de téléchargement et d’installation de Silverlight et d’Expression Blend.

En route !

Exercice 1 : Créer le projet

Sans plus attendre, lançons l’exécution d’Expression Blend et créons notre projet.

Arrêtons nous un instant pour prendre le temps de repérer certaines zones et outils importants pour la suite de cet atelier. Voici une capture d’écran de Expression Blend 2 :

1 – Il s’agit des onglets permettant de basculer entre la vue « Designer visuel » et code source XAML pour la scène de notre application.

2 – Cet outil représenté par un carré contenant des rectangles de couleur est l’outil Canvas. A ne pas confondre avec l’outil Rectangle, symbolisé par un rectangle plein et situé juste au dessus.

3 – L’éditeur de « Brushes », qui permet de définir les couleurs de remplissage (ou encore de fond) pour une forme via l’outil « Fill », ou encore la couleur de contour avec « Stroke » et le masque d’opacité en dessous des deux premiers. Les trois onglets en bas de l’encadré rouge permettent de définir (de gauche à droite) : aucune brosse (No brush), une couleur pleine (Solid color brush), et enfin un dégradé (Gradient brush).

4 – L’outil permettant de définir des Storyboards, qu’on utilisera en fin de cet atelier pour créer les animations sur nos boutons Play et Pause.

Etape 1 : Créer la structure du projet

Pour cela, on clique sur l’option « New Project » depuis le menu « File », ou bien on utilise le raccourci clavier « CTRL+SHIFT+N ». La boite de dialogue suivante apparaît :

NB : Si vous ne trouvez pas les options permettant de créer un projet Silverlight dans Expression Blend, c’est que vous utilisez la version standard de Expression Blend, et pas la pré-version de « Expression Blend 2 » qui apporte justement le support des projets Silverlight. Dans ce cas, téléchargez la version d’évaluation de Expression Blend 2 depuis le lien indiqué plus haut. Les deux versions Expression Blend et Expression Blend 2 Preview peuvent être installées côte à côte sur votre machine.

On va choisir un type de projet correspondant à un runtime Silverlight 1.0 en cliquant sur la troisième option en partant de la gauche « Silverlight Application (Javascript) ». On donne au projet le nom de « MonPlayer » et on appuie sur le bouton « OK ». Vous trouverez l’indication du langage C# dans la troisième combobox. De toutes façons, le seul langage utilisable en Silverlight 1.0 est Javascript, la valeur de cette troisième combobox n’a donc aucun effet sur la création de notre projet.

Expression Blend crée alors la structure du projet, ainsi que les éléments minimaux nécessaires à son exécution. Détaillons le contenu du projet ainsi créé en explorant l’arborescence des fichiers dans l’onglet « Project » de la boite à outils de droite :

On constate que notre projet se compose d’une page HTML par défaut, nommée Default.html qui va servir de conteneur à notre application nommée Page.xaml. Chacun de ces deux éléments est associé à un fichier Javascript. Le fichier Default_html.js contient l’appel à la fonction qui réalise l’instanciation du conteneur Silverlight dans la page HTML, quant au fichier Page.xaml.js, il va contenir le code Javascript définissant le comportement de l’application. Nous reviendrons plus tard sur ce fichier Page.xaml.js en fin de Lab pour ajouter les actions liées aux boutons Play et Pause que nous allons créer.

Etape 2 : Définir le Canvas de base

Par défaut, le Canvas de base dans notre projet est créé par Expression Blend avec une taille de 640 par 480 pixels. Afin de conserver une taille raisonnable à notre application, nous allons le redimensionner en 400 par 300. Pour cela, on clique sur la surface blanche du Canvas dans le designer, ou bien on va sélectionner ce Canvas dans la hiérarchie des objets du projet en cliquant sur l’élément nommé Page, comme montré sur la copie d’écran suivante :

Puis depuis l’onglet « Properties » de la boite à outils de droite, on va modifier les propriétés Width et Height de notre Canvas pour en fixer sa dimension à 400 par 300 pixels, comme sur la capture d’écran suivante :

Etape 3 : Ajouter le fond de la vidéo

En tant que première étape, nous allons ajouter un fond noir dans notre Canvas de base. Cette étape n’est pas indispensable mais elle permettra d’afficher un fond sombre plus agréable en attendant que la vidéo soit affichée dans notre player.

Pour cela, on va sélectionner l’outil Rectangle dans la boite à outils de gauche et placer un rectangle par-dessus notre Canvas de base, de dimensions 380 par 280 pixels, centré sur le Canvas de base. On aboutit à un objet supplémentaire dans la hiérarchie de notre projet, comme sur cette capture d’écran :

On va ensuite modifier la couleur de remplissage et de l’entourage de notre rectangle, en allant dans ses propriétés dans les boites à outils de droite. Avec notre nouveau rectangle sélectionné, on va cliquer sur l’outil « Fill » dans la zone d’édition des « Brush » et sélectionner la couleur noire, puis après avoir sélectionné l’outil « Stroke », on va choisir l’option « No Brush » pour rendre le contour invisible. Voici le résultat :

Arrêtons nous un instant dans la construction de notre player pour basculer en mode « Editeur XAML et observer ce que nous avons créé pour l’instant. Pour cela, on va cliquer sur l’onglet « XAML » en haut à droite de la surface de notre designer, et on voit apparaître le code XAML suivant :

<Canvas
       xmlns="http://schemas.microsoft.com/client/2007"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       Width="400" Height="300"
       Background="White"
       x:Name="Page"
       >
       <Rectangle Width="380" Height="280" Canvas.Left="10" Canvas.Top="10" Fill="#FF000000" />
</Canvas>

Ceci nous enseigne qu’en Silverlight, un élément est positionné relativement au Canvas qui le contient. Ici, on note qu’il y a une marge de 10 pixels horizontalement et verticalement entre notre rectangle et le Canvas de niveau supérieur qui le contient. Si vous modifiez les valeurs de ces propriétés en mode XAML et que vous basculez en mode Design en cliquant sur l’onglet éponyme, vous verrez que les modifications sont immédiatement prises en compte. Le designer visuel XAML de Expression Blend se base donc intégralement et uniquement sur le document XAML pour générer le rendu visuel. Les vues XAML et Design sont donc toujours synchronisées.

Nous sommes prêts maintenant à ajouter le conteneur vidéo à notre player. C’est ce que nous allons faire à l’étape suivante.

Exercice 2 : Ajouter la vidéo

Etape 1 : Ajouter l’élément player vidéo

Dans la barre d’outils de gauche, on va cliquer sur l’icône représentant un double chevron pour faire apparaitre la fenêtre qui contient l’ensemble des éléments à disposition. On coche la case « ShowAll » puis on sélectionne le MediaElement, comme sur la copie d’écran suivante :

Comme on l’a déjà fait pour le Rectangle, on va déposer un MediaElement sur la surface de notre Designer, et on lui donnera une dimension de 360 par 260 pixels. On le centrera aussi au milieu de la surface de notre Canvas de base, ce qui au final aura pour effet de donner une valeur de 20 pixels à ses propriétés Canvas.Left et Canvas.Top.

Etape 2 : Modifier les propriétés de la vidéo

On va maintenant aller modifier les propriétés de notre contrôle MediaElement pour fixer le nom du fichier vidéo, puis modifier la valeur du paramètre qui contrôle l’étirement de la vidéo :

Pour cela, on va cliquer sur l’icône sous la fenêtre des propriétés pour faire apparaitre les propriétés étendues qui contiennent le paramètre « Stretch », qu’on fixera à Fill.

On spécifie le fichier vidéo à lire sur la propriété Source. Le bouton comportant les « … » donne classiquement accès à une boite de dialogue de sélection de fichiers. Vous pourrez trouver des exemples de fichiers vidéo dans le répertoire Videos\Sample Videos de Windows Vista. Selon votre inspiration, vous pouvez sélectionner l’une des trois vidéos Bear.wmv, Butterfly.wmv ou Lake.wmv. Dans cet exemple, nous avons choisi Bear.wmv.

En passant en mode Edition XAML, on vérifie que les propriétés de notre MediaElement sont conformes à ceci :

<MediaElement Width="360" Height="260" Canvas.Left="20" Canvas.Top="20" Source="Bear.wmv" Stretch="Fill"/>

Etape 3 : Prévisualiser l’application

Voilà notre application maintenant prête pour un premier test rapide, afin de s’assurer que tout fonctionne correctement à ce stade intermédiaire.

Pour cela, on va sélectionner l’option « Test application » dans le menu « Project », ou plus simplement et selon un vieux réflexe pour ceux parmi vous habitués à utiliser Visual Studio, on va simplement pressez la touche F5 qui est le raccourci clavier correspondant.

Expression Blend démarre la construction du projet, et démarre un serveur Web local (il s’agit en fait de Cassini, celui là même qui est utilisé par Visual Studio 2005 pendant le développement d’applications web avec ASP.NET). L’infobulle suivante nous indique que Cassini démarre :

Naturellement, Expression Blend démarre ensuite Internet Explorer et affiche notre application dans laquelle la vidéo démarre automatiquement. C’est le comportement par défaut du MediaElement. Nous modifierons ce comportement dans l’étape suivante. Notre application ressemble alors à ceci :

Pour relancer la lecture de la vidéo, à ce stade et n’ayant mis en œuvre aucun contrôle sur l’élément MediaElement, vous devrez recharger l’application dans le navigateur en appuyant sur F5 ou en sélectionnant l’option « Refresh » du menu « View » de Internet Explorer.

Etape 4 : Comprendre le fonctionnement du plug-in Silverlight

Attardons-nous un instant sur le contenu de notre page HTML. Comme nous l’avons rapidement évoqué au point 1.1 lors de la création de notre projet, celui-ci est constitué d’une page HTML, d’un fichier XAML et de quelques scripts Javascript.

En fait, notre page HTML contient une balise DIV dont le nom est silverlightHost et qui contient un appel en Javascript à la méthode createSilverlight(), comme ceci :

<div id="SilverlightControlHost" class="silverlightHost">
       <script type="text/javascript">
             createSilverlight();
       </script>
</div>

Cette fonction createSilverlight est définie dans le fichier Javascript Default_html.js et contient le code suivant :

function createSilverlight()
{
       var scene = new MonPlayer.Page();
       Silverlight.createObjectEx({
             source: "Page.xaml",
             parentElement: document.getElementById("SilverlightControlHost"),
             id: "SilverlightControl",
             properties: {
                    width:"400",
                    height:"300",
                    version:"1.0"
             },
             events: {
                    onLoad: Silverlight.createDelegate(scene, scene.handleLoad)
             }
       });
}

En résumé, cette méthode createSilverlight – générée par Expression Blend – va effectuer un appel à la méthode Silverlight.createObjectEx qui est définie dans Silverlight.js, en lui passant en paramètre différentes propriétés de notre scène, en particulier le nom du fichier XAML principal (ici, Page.xaml), les dimensions souhaitées pour le conteneur Silverlight (ici 400 par 300 pixels), et aussi la version de Silverlight nécessaire à l’exécution de cette application.

La méthode Silverlight.createObjectEx comporte des mécanismes de « fallback », ce qui signifie qu’elle va présenter dans la page une image et les liens permettant de télécharger Silverlight depuis les machines dont il serait absent. Ce fallback se présente à l’écran sous la forme suivante :

En cliquant sur cette image, l’utilisateur est amené sur une page du site Microsoft.com depuis laquelle le téléchargement de la version requise de Silverlight lui est proposé. L’installation de Silverlight depuis Internet Explorer ne nécessite pas de redémarrage du navigateur. Pour les autres navigateurs, un redémarrage est nécessaire.

Si Silverlight est présent sur la machine, la méthode Silverlight.createObjectEx va créer le tag OBJECT correct dans la page au niveau de notre DIV silverlightHost, ce qui va rendre possible le démarrage de notre application.

Plutôt que d’utiliser toute cette mécanique, on pourrait limiter le contenu de notre page HTML au tag object suivant :

<object    width="400"
              height="300"
              id="SilverlightControl"
              type="application/x-silverlight">
                    <param name="source" value="Page.xaml">
</object>

Vous pouvez effectuer le test, ça fonctionne parfaitement autant dans Internet Explorer que dans Mozilla Firefox, à condition que Silverlight soit pré-installé. En effet, en utilisant directement ce tag OBJECT on ne dispose pas d’un mécanisme de Fallback.

L’autre petite différence que vous aurez notée est qu’en créant notre conteneur « à la main » avec un tag OBJECT, l’utilisateur doit cliquer une première fois sur la zone pour autoriser l’activation du contenu du tag OBJECT. C’est un autre avantage apporté par l’utilisation de la méthode createSilverlight. Etant créé par un script résidant dans la section HEADER de notre page HTML, notre conteneur est directement actif et l’utilisateur n’a pas besoin de cliquer pour l’activer.

En résumé, le fonctionnement de la chaîne d’instanciation de notre conteneur Silverlight est schématisé sur le graphique suivant :

Le fonctionnement détaillé de la fonction createSilverlight() est documenté dans cet article de MSDN – en Anglais :

http://msdn2.microsoft.com/en-us/library/bb412401.aspx

Etape 5 : Modifier les options du MediaElement

Puisque dans une étape suivante nous allons ajouter des boutons pour contrôler la lecture de notre vidéo, nous ne voulons pas que sa lecture démarre automatiquement au lancement de l’application.

On basculera ensuite en mode Edition XAML pour ajouter une propriété qui empêchera la lecture automatique de la vidéo lors du lancement de notre player. Il suffit pour cela d’ajouter AutoPlay=’’False’’ aux propriétés de notre MediaElement.

On pensera aussi à cocher la case « IsMuted » afin de couper le son lors de la lecture de cette vidéo, car l’écoute de ces sons peut devenir rapidement irritante quand on fait des tests ;)

Au final, on contrôlera en mode Edition XAML que la définition de notre MediaElement est conforme au fragment XAML suivant :

<MediaElement Width="360" Height="260" Canvas.Left="20" Canvas.Top="20" AutoPlay="False" IsMuted="True" Source="Bear.wmv" Stretch="Fill"/>

Exercice 3 : Ajouter de l’interactivité

Dans cette étape, nous allons designer deux boutons destinés à lancer la lecture et mettre en pause notre vidéo. Commençons par essayer de créer des boutons visuellement agréables, et cédant aux canons de la mode actuelle, avec des coins arrondis, un gradient de couleur et la semi-transparence :

Vous verrez qu’Expression Blend permet d’obtenir ce type d’effets avec un minimum d’efforts.

Etape 1 : Créer le design du bouton

Commençons par créer un conteneur pour recevoir les différents éléments qui vont constituer notre bouton. On ajoute donc un nouveau Canvas à notre scène, on lui donnera une dimension de 60 par 40 pixels, et on le positionnera  en bas à droite de notre scène avec une valeur de Left à 310 et de Top à 230.

Ajoutons le premier rectangle à notre Canvas, celui-ci va constituer le fond de notre bouton. Faisons lui occuper toute la surface de notre Canvas, donc donnons-lui les mêmes valeurs de géométrie que pour le Canvas conteneur, à savoir une dimension de 60 par 40 pixels, et une valeur de Left à 0 et de Top à 0.

On va ensuite donner des coins arrondis à notre rectangle. Pour cela, on utilisera les poignées qui sont affichées dans le coin supérieur gauche de notre rectangle :

A défaut d’utiliser ces poignées pour régler visuellement la valeur du rayon de l’arrondi, on peut aller directement modifier la valeur de cette propriété au niveau de notre rectangle :

Donnons à cet arrondi la valeur de 7 pixels de rayon pour le rayon vertical et horizontal. Vous pouvez essayer différentes combinaisons de valeurs de rayons en X et Y pour varier les effets.

Nous allons maintenant choisir une couleur de fond rouge #FFFF0000 pour le fond de notre rectangle, et fixer la valeur de son contour à « No Brush » pour le rendre invisible. Ensuite on va régler la transparence de ce rectangle à 85%, ce qui donne le résultat suivant :

Nous allons maintenant placer un second rectangle par-dessus le premier afin d’ajouter le gradient de couleur qui donnera un effet de volume à notre bouton.

De la même façon que l’on vient de le faire, on va créer un bouton dont les propriétés sont les suivantes :

• Width =55
• Height = 35
• Left = 2,5
• Top = 2,5
• RadiusX, RadiusY =5
• Opacity = 85%

Nous allons ensuite fixer l’entourage de ce rectangle à « No Brush » puis sélectionner un gradient de couleur pour son fond (Fill) alors que jusqu’à présent on n’avait utilisé que des couleurs pleines (Solid color brush).

Changeons en blanc le premier point de notre gradient qui est noir par défaut. Ajoutons-lui un niveau de transparence. Au final, la couleur de ce premier point est #D0FFFFFF. Déplaçons le second point de ce gradient au milieu du spectre en faisant glisser le curseur, et donnons-lui la couleur de transparence #00FFFFFF. Vous pouvez ajouter d’autres points à ce gradient en cliquant n’importe où sur le spectre, et vous pouvez supprimer des points du gradient en faisant glisser ce point vers le bas en dehors du spectre. Voici le résultat obtenu :

Il nous reste juste à changer l’orientation de ce gradient qui est par défaut horizontal, or, nous le voudrions vertical. Pour cela, on va aller chercher l’outil « Brush transform » dans la barre d’outils. Cet outil est symbolisé par une large flèche oblique :

Ceci fait apparaître une flèche horizontale au dessus de notre rectangle, et nous permet en déplaçant ses extrémités, en faisant varier sa longueur et son orientation de modifier l’aspect de notre gradient de couleurs. Voici les étapes intermédiaires :

En faisant varier la longueur et l’orientation de la flèche contrôlant le gradient :

Pour arriver au résultat final escompté :

Etape 2 : Ajouter une icône

Nous allons maintenant ajouter l’icône triangulaire qui symbolise traditionnellement le lancement de la lecture d’une vidéo. Pour cela, on va ajouter un élément Polygon. Afin de gagner un peu de temps, et pour changer de façon d’opérer, nous allons ajouter cet élément en l’insérant directement entre nos deux rectangles, en mode Edition XAML. Ajouter la ligne suivante entre nos deux rectangles :

<Polygon Canvas.Left="20" Canvas.Top="10" Points="0,0 0,24 24,12" Fill="Black" Opacity="0.70" />

Notez au passage que Silverlight réalise l’affichage des éléments dans l’ordre dans lequel il lit la source XAML, sauf autrement spécifié par l’utilisation de la propriété ZIndex. En insérant notre Polygon avant le rectangle contenant le gradient de couleur, il apparaît comme en dessous de celui-ci, et le gradient de couleur s’applique à notre triangle, ce qui donne un meilleur effet de volume à tout notre bouton. Voici notre bouton « Play » terminé :

Etape 3 : Constituer le bouton

Nous allons maintenant donner un nom logique au Canvas contenant les éléments qui constituent notre bouton. En double cliquant sur le label [Canvas] nous allons modifier son nom en « playButton », comme ceci :

Notre Canvas va nous servir de conteneur logique pour notre bouton. Vous remarquerez que si vous modifiez les valeurs de Left ou Top pour ce Canvas, c’est tout notre bouton qui « suit » les déplacements. Nous avons donc via ce Canvas un moyen de contrôler intégralement notre bouton, soit pour le déplacer, soit pour le redimensionner, soit pour le faire apparaître ou disparaitre en jouant sur ses différentes propriétés.

Etape 4 : Créer le Bouton Pause

A vous de jouer maintenant. En reprenant ce que nous venons de faire, vous allez créer un second bouton qui servira à mettre en pause la lecture de notre vidéo.

Petit conseil : En sélectionnant le canvas « playButton », vous pouvez simplement dupliquer ce bouton en faisant un banal CTRL+c puis CTRL+v !

C’est magique ! Renommez ce bouton de « playButton_copy » en « pauseButton » et changez le triangle en deux rectangles allongés qui symbolisent traditionnellement une mise en pause.

Voici le code pour les deux rectangles que vous devrez créer :

<Rectangle Opacity="0.85" Width="8" Height="24" Fill="Black" Stroke="#FF000000" Canvas.Left="20" Canvas.Top="8"/>
<Rectangle Opacity="0.85" Width="8" Height="24" Fill="Black" Stroke="#FF000000" Canvas.Left="34" Canvas.Top="8"/>

Et voilà le travail !

Exercice 4 : Utiliser les Animations

Etape 1 : Créer une animation simple

Nous allons maintenant ajouter des effets à nos boutons. Ces effets vont faire disparaitre progressivement nos boutons après qu’on ait appuyé dessus. Pour cela, on va sélectionner tour à tour chacun de nos boutons et créer un nouveau Storyboard qui contiendra la définition des animations.

On commence par le bouton Play. On clique sur la flèche « > » en face de la liste – pour le moment vide – des Storyboards associés à notre bouton et la liste suivante apparait.

On appuie sur le bouton « + » pour créer une nouvelle animation à laquelle on va donner le nom de FadeOutPlayButton, comme ceci :

Notre Storyboard est créé, et Expression Blend passe en mode « Enregistrement », symbolisé par un cadre rouge autour de notre scène dans le designer :

Il va suffire de définir une position sur l’axe du temps à 1 seconde, puis de fixer alors la valeur de l’Opacité à 0%, puis de revenir à l’instant zéro et fixer l’Opacité à 90%. Voici ce qu’Expression Blend nous affiche :

Pour terminer l’enregistrement de notre Storyboard, on clique sur le bouton rond rouge dans le coin supérieur gauche de la surface du Designer.

En coulisses, Expression Blend a généré le code XAML suivant qui représente cette animation de l’opacité de notre Canvas :

<Canvas.Resources>
       <Storyboard x:Name="FadeOutPlayButton">
             <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="playButton" Storyboard.TargetProperty="(UIElement.Opacity)">
                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.9"/>
                    <SplineDoubleKeyFrame KeyTime="00:00:01" Value="0"/>
             </DoubleAnimationUsingKeyFrames>
       </Storyboard>
</Canvas.Resources>

On lit alors dans ce fragment XAML qu’il s’agit d’une animation qui va faire varier une valeur flottante Double (ie DoubleAnimation), en faisant varier la valeur UIElement.Opacity de l’élément cible playButton, en faisant varier sa valeur de 90% à 0%. C’est bien ce qu’on voulait obtenir ;)

En cliquant sur le petit bouton Play au dessus de la Timeline, on peut voir une prévisualisation de notre animation directement depuis Expression Blend, sans avoir à lancer l’application.

On effectue la même opération pour le bouton Pause et on obtient alors ceci :

<Storyboard x:Name="FadeOutPauseButton">
       <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="pauseButton" Storyboard.TargetProperty="(UIElement.Opacity)">
             <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.9"/>
             <SplineDoubleKeyFrame KeyTime="00:00:01" Value="0"/>
       </DoubleAnimationUsingKeyFrames>
</Storyboard>

Exercice 5 : Scripter le comportement des boutons

Etape 1 : Nommer le MediaElement

Nous aurons besoin d’accéder par le code Javascript à notre MediaElement. Pour nous simplifier la tâche, nous allons le renommer en « mediaElt ». Attention, ceci étant ensuite utilisé depuis le code Javascript, la casse utilisée pour le nom de cet élément est importante. Pour cela, comme nous l’avons déjà fait, on va double cliquer sur le label [MediaElement] dans la barre d’outils de gauche et modifier le nom de notre contrôle.

Etape 2 : Ecrire le code Javascript

Nous allons ajouter le code suivant dans le fichier Page.xaml.js, juste après la définition de la méthode MonPlayer.Page, qui est d’ailleurs vide.

Pour éditer ce code, on va faire un clic droit sur le fichier Page.xaml.js dans l’explorateur de projet dans la barre d’outils de droite, après avoir cliqué sur l’onglet « Project ». Si vous n’avez pas Visual Studio sur votre machine, vous pouvez parfaitement éditer ce fichier avec Notepad.

Voici le code à ajouter :

function  mediaelement_play(sender, args) {
    sender.findName("mediaElt").play();
    sender.findName("FadeOutPlayButton").begin();
    sender.findName("pauseButton").Opacity = 0.85;
}
function mediaelement_pause(sender, args) {
    sender.findName("mediaElt").pause();
    sender.findName("FadeOutPauseButton").begin();
    sender.findName("playButton").Opacity = 0.85;
}

Etape 3 : Gérer les évènements

Il va suffire d’ajouter l’attribut MouseLeftButtonDown à la définition de nos deux boutons Play et Pause. Voici ce qu’il vous faudra ajouter, en passant en mode Edition XAML :

<Canvas x:Name="playButton" MouseLeftButtonDown="mediaelement_play"   (...)

Et …

<Canvas x:Name="pauseButton" MouseLeftButtonDown="mediaelement_pause" (...)

Voilà. Nous avons terminé la réalisation de notre player, et nous pouvons maintenant profiter du résultat final en lançant notre application dans le navigateur en appuyant simplement sur la touche « F5 ».

Vous observerez les animations que nous avons créées : après l’appui sur un bouton, celui-ci s’estompe progressivement et l’autre apparaît. Amusant ;)

Conclusion et Ressources

Bravo ! Vous êtes arrivé au bout de ce premier « Hands On Lab » sur Silverlight et Expression Blend. Dans ce Lab, vous avez appris à :

• Créer un projet Silverlight 1.0
• Les bases de XAML
• Utiliser Expression Blend pour designer une scène, modifier les propriétés des éléments, réaliser un dégradé de couleur, définir un Storyboard et placer des points sur la Timeline
• Scripter les événements et ajouter de l’interactivité à des contrôles Silverlight

Nous espérons que ce Hands On Lab vous aura donné envie d’aller plus loin avec Silverlight… Si tel était le cas, voici un ensemble de ressources que vous ne manquerez pas d’explorer.

Happy coding avec Silverlight !

Ressources

Silverlight 1.0 QuickStarts (en Anglais)

http://www.silverlight.net/quickstarts/silverlight10/default.aspx

Cette série de Quickstarts couvre les concepts de base de Silverlight 1.0, concepts également applicables à Silverlight 1.1, et utilise le langage client Javascript pour la programmation des comportements de l'interface, ainsi que le langage XAML pour la construction de l'interface utilisateur.

Silverlight 1.1 QuickStarts (en Anglais)

http://www.silverlight.net/quickstarts/managed.aspx

Ces tutoriels traitent des spécificités de Silverlight 1.1. Ils ne sont pas des tutoriels d'introduction à Silverlight 1.1. Vous voudrez sans doute suivre les précédents – ceux qui s’appliquent à Silverlight 1.0 - avant d'attaquer celui-ci. Celui-ci traite donc en particulier de l'utilisation du code managé dans Silverlight 1.1, de l'interaction entre le DOM HTML et le code managé, de l'Isolated Storage, des Langages Dynamiques, ou encore de l'utilisation de XML, etc...

Webcasts Silverlight sur Channel9 (enAnglais)

http://channel9.msdn.com/ShowForum.aspx?ForumID=38&TagID=209

Si vous préférez regarder des webcasts plutôt que de suivre des Tutoriels ou des Quickstarts, vous devriez aller voir du côté de Channel9 sur MSDN qui propose une série d'une trentaine de petits webcasts sur différents aspects de Silverlight. A ne pas manquer…