Atelier « Premiers pas avec Silverlight et Expression ...€¦ · Silverlight était anciennement connu sous le nom de code de « WPF/E » pour « Windows Presentation Foundation

Document préliminaire Send feedback to: [email protected] Page 1

Atelier « Premiers pas avec Silverlight et Expression Blend » (v0.6)

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 .......................................................................................................................... 1

Contenu ................................................................................................................................................... 1

Avant Propos ........................................................................................................................................... 2

Préparer et configurer son environnement de travail ............................................................................ 3

Installation de Silverlight ..................................................................................................................... 3

Installation d’Expression Blend ........................................................................................................... 4

Exercice 1 : Créer le projet ...................................................................................................................... 5

Etape 1 : Créer la structure du projet .................................................................................................. 6

Etape 2 : Définir le Canvas de base ..................................................................................................... 8

Etape 3 : Ajouter le fond de la vidéo ................................................................................................... 8

Exercice 2 : Ajouter la vidéo .................................................................................................................. 10

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

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

Etape 3 : Prévisualiser l’application ................................................................................................... 12

Etape 4 : Comprendre le fonctionnement du plug-in Silverlight ...................................................... 13

Etape 5 : Modifier les options du MediaElement .............................................................................. 15

Exercice 3 : Ajouter de l’interactivité .................................................................................................... 16

Etape 1 : Créer le design du bouton .................................................................................................. 16

Etape 2 : Ajouter une icône ............................................................................................................... 19


Etape 3 : Constituer le bouton .......................................................................................................... 20

Etape 4 : Créer le Bouton Pause ........................................................................................................ 20

Exercice 4 : Utiliser les Animations........................................................................................................ 21

Etape 1 : Créer une animation simple ............................................................................................... 21

Exercice 5 : Scripter le comportement des boutons ............................................................................. 23

Etape 1 : Nommer le MediaElement ................................................................................................. 23

Etape 2 : Ecrire le code Javascript ..................................................................................................... 23

Etape 3 : Gérer les évènements ........................................................................................................ 23

Conclusion et Ressources ...................................................................................................................... 24

Ressources ......................................................................................................................................... 24

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

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 :

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


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 « Brushe » 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.

En Synthèse : Dans cette première partie, nous avons configuré notre machine en installant le plug-in

Silverlight ainsi que l’outil Expression Blend. On se souviendra que bien que les outils de création

d’applications tels que Expression Blend et Visual Studio 2008 ne fonctionnent que sur les

ordinateurs équipés de Microsoft Windows, les applications Silverlight ainsi créées fonctionnent

quant à elles sur Windows et MacOSX et dans les navigateurs principaux (Internet Explorer, Mozilla

Firefox et Apple Safari).

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 ;)

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


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>


En synthèse : Expression Blend est un outil qui peut - entre autres - être utilisé pour créer les scènes,

les animations et le design de nos applications Silverlight. Expression Blend permet de créer des

contenus Silverlight sans avoir besoin de connaître le langage XAML. Toutefois, pour les utilisateurs

avancés,Expression Blend permet de modifier directement le XAML. Expression Blend et Visual

Studio 2008 constituent une chaine de production complète entre les designers et les développeurs,

grâce au format pivot XAML partagé par les deux outils.

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 ;)

En synthèse : Silverlight 1.0 peut être programmé en Javascript. Ce langage est connu et maitrisé par

les développeurs Ajax. Les développeurs qui utilisent Javascript dans leurs applications peuvent tirer

profit de la bibliothèque client Microsoft ASP.NET Ajax. Visual Studio 2008 apporte la fonctionnalité

d’IntelliSense aux développeurs Javascript, participant à l’amélioration de la productivité et à la

meilleure qualité du code produit.

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/silverlight10/default.aspx


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…

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

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

Documents

Atelier « Premiers pas avec Silverlight et Expression ...€¦ · Silverlight était anciennement connu sous le nom de code de « WPF/E » pour « Windows Presentation Foundation