Créez des applications Silverlight 3

David RoussetRelations Techniques avec les développeurs

Microsoft France

davrous@microsoft.com / http://blogs.msdn.com/davrous

Agenda• Présentation générale• Intérêts, démo en action, outillages & types de contrôles

disponibles

• Les bases d’une application Silverlight• Structure, hébergement, XAML, contrôles de base & gestion

évènementielle

• Quelques notions plus graphiques• Gestion de contenu vidéos, téléchargements asynchrones• Styles & templating• DataBinding & Binding entre éléments• Transformations dont pseudo 3D

• Utilisation de Blend 3• Modification du visuel• Mise en place d’animations classiques puis naturelles

Agenda• Notions plus avancées• Appels de services WCF• SandBoxing – OpenFileDialog / SaveFileDialog• Pixel Shaders• Out of Browser• Accélération matérielle GPU

• Scénarios métiers orientés données• Introduction à .NET RIA Services

Quelques notions plus graphiquesGestion de contenu vidéos, téléchargements

asynchronesStyles & templating

DataBinding & Binding entre élémentsTransformations dont pseudo 3D

Contenus multimédias• Silverlight peut lire la plupart des formats :• WMV, VC1• WMA• MP3• H264• …

• Silverlight apporte son propre jeu de codecs• Permet de lire des vidéos HD jusqu’à 1080p• Permet de faire de l’incrustation d’images, du

chapitrage• ASP.NET 3.5 permet de créer son propre lecteur

multimédia en quelques clics (<asp:MediaPlayer> qui crée un lecteur multimédia skinnable gérant les chapitres)

• Microsoft Media Encoder permet de créer automatiquement des vignettes ainsi que des « marqueurs » pour « chapitrer » une vidéo

Smooth Streaming• Streaming adaptif en fonction• De la bande passante• Des capacités de la machine

• Fonctionne à travers de simples URL HTTP• Caching classique HTTP extrêmement simple

• Nécessite IIS 7.0/Windows 2008 pour la diffusion du flux• Création des 7 flux (résolutions et débits différents) grâce à

Expression Media Encoder

• Démo : http://www.iis.net/media/experiencesmoothstreaming • Exemples récents : Roland Garros en 720p avec contrôle du

direct et le Tour de France 2009

Integration de Media• <MediaElement />• Utilisé pour jouer de la musique ou de la vidéo

<Canvas> <MediaElement Source="/halo.wmv" /> </Canvas>

<Canvas> <MediaElement Source="/halo.wmv" /> </Canvas>

Integration de Media• <VideoBrush />• Utilisé pour utiliser une video en tant que Brush

<MediaElement x:Name="Vid" Width ="640" Height="480" Source="/Halo.wmv" Opacity="0"></MediaElement>

<Path Stroke="#FF000000" Data="M10,43 C10,(…),10,43&#xd;&#xa;10,43 z"> <Path.Fill> <VideoBrush SourceName="Vid"></VideoBrush> </Path.Fill></Path>

<MediaElement x:Name="Vid" Width ="640" Height="480" Source="/Halo.wmv" Opacity="0"></MediaElement>

<Path Stroke="#FF000000" Data="M10,43 C10,(…),10,43&#xd;&#xa;10,43 z"> <Path.Fill> <VideoBrush SourceName="Vid"></VideoBrush> </Path.Fill></Path>

WebClient• Alléger le chargement d’une application Silverlight en

téléchargeant les contenus volumineux à la demande, en fonction des besoins de l’application (Vidéos, Images, ZIP, etc…)

• Toutes les requêtes sont asynchrones:• DownloadStringAsync : téléchargement de texte (resource

XML par ex)• OpenReadAsync : téléchargement (média, zip,…) • DownloadStringCompleted : fin du téléchargement de texte• OpenReadCompleted : fin du téléchargement• DownloadProgressChanged : permet d’afficher la progression

du téléchargement

• e.Result : contient les données téléchargées

Lab – Etape 2Chargeons puis jouons de la vidéo-= WebClient et MediaElement =-

Styles

• Le but des styles est de personnaliser un contrôle

• Les styles sont placés dans les ressources de l’application

• Utilisation et buts similaire à CSS / HTML

Templating • Modification de l’aspect d’un contrôle tout en

conservant sa logique (propriétés, événements, etc…) :• Modification de la façon dont le contrôle est créé

• Exemple• A gauche un slider, à droite un contrôle beaucoup plus riche

visuellement. Fonctionnellement pour le développeur, ils sont identiques

Templating

DataBinding• Connexion entre l’interface utilisateur et un objet ou une

source de données

• L’objet de l’interface utilisateur est appelé la cible, le fournisseur de données est appelé la source

• La source doit implémenter INotifyPropertyChanged

• 3 modes de Binding :• OneTime : la cible est mise à jour lors de la création du binding• OneWay : idem que OneTime, de plus une modification sur la

source met à jour la cible• TwoWay : idem, que OneWay, de plus une modification sur la

cible met à jour la source

DataBinding• Au niveau de la cible précision de la propriété de la

source à laquelle se lier, et le mode à utiliser

<TextBlock x:Name="txtNom" Grid.Row="0" Text="{Binding Nom, Mode=OneWay}" />

• Précision d’un DataContext pour indiquer à quel source ce lier

• Le DataContext est hérité• Plutôt que de spécifier un DataContext pour chaque contrôle que

l’on veut lier, il est préférable de spécifier le DataContext sur le conteneur (Grid, Canvas, etc…), les contrôles enfants en hériteront automatiquement.

private Client client = new Client();client.Nom = "Fred";

txtNom.DataContext = client;

private Client client = new Client();client.Nom = "Fred";

txtNom.DataContext = client;

Lab – Etape 3Analyses des styles d’une application

Navigation Application & changement du styleUtilisation du DataBinding et du templatingpour afficher une image dans la combobox

Binding suite…

Binding entre éléments- Modifier la propriété d’un élément modifie

automatiquement la propriété d’un autre élément.

<Slider Width="400" Minimum="0" Maximum="400" Value="200" x:Name="slider“ /><Rectangle Height="100" Fill="Blue" Width="{Binding Path=Value, ElementName=slider, Mode=TwoWay}" />

Binding suite…

Validation des données

<TextBox BindingValidationError="TextBox_BindingValidationError" Text="{Binding MonEntier, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true}" />

- ValidatesOnExceptions : Effectue la validation sur la source de données

- NotifyOnValidationError : Remonte l'erreur au contrôle, qui peut ensuite la gérer comme il le souhaite

Transformations• Utilisées pour appliquer des changements aux objets

<Rectangle Width="200" Height="100" Fill="Black"> <Rectangle.RenderTransform> <RotateTransform CenterX="25" CenterY="100" Angle="45" /> </Rectangle.RenderTransform></Rectangle>

<Rectangle Width="200" Height="100" Fill="Black"> <Rectangle.RenderTransform> <RotateTransform CenterX="25" CenterY="100" Angle="45" /> </Rectangle.RenderTransform></Rectangle>

Render Transform• Possibilité de transformer des groupes d’objets

<Canvas> <Canvas.RenderTransform> <RotateTransform Angle="-45" CenterX="50" CenterY="50"/> </Canvas.RenderTransform> <Ellipse Width="100" Height="100" Fill="Yellow" /> <Ellipse Canvas.Top="25" Canvas.Left="25" Width="10" Height="10" Fill="Black" /> <Ellipse Canvas.Top="25" Canvas.Left="65" Width="10" Height="10" Fill="Black" /> <Line X1="25" Y1="75" X2="75" Y2="75" Stroke="Black" /></Canvas>

<Canvas> <Canvas.RenderTransform> <RotateTransform Angle="-45" CenterX="50" CenterY="50"/> </Canvas.RenderTransform> <Ellipse Width="100" Height="100" Fill="Yellow" /> <Ellipse Canvas.Top="25" Canvas.Left="25" Width="10" Height="10" Fill="Black" /> <Ellipse Canvas.Top="25" Canvas.Left="65" Width="10" Height="10" Fill="Black" /> <Line X1="25" Y1="75" X2="75" Y2="75" Stroke="Black" /></Canvas>

Types de transformations• <RotateTransform />• Rotation

• <ScaleTransform />• Redimensionnement

• <SkewTransform />• Distortion

• <TranslateTransform />• Translation

• <MatrixTransform />• Combinaison

Application de plusieurs transformations• <TransformGroup />

<Canvas> <Canvas.RenderTransform> <TransformGroup> <RotateTransform Angle="-45" CenterX="50" CenterY="50"/> <ScaleTransform ScaleX="1.5" ScaleY="2" /> </TransformGroup> </Canvas.RenderTransform> <Ellipse Width="100" Height="100" Fill="Yellow" /> <Ellipse Canvas.Top="25" Canvas.Left="25" Width="10" Height="10" Fill="Black" /> <Ellipse Canvas.Top="25" Canvas.Left="65" Width="10" Height="10" Fill="Black" /></Canvas>

<Canvas> <Canvas.RenderTransform> <TransformGroup> <RotateTransform Angle="-45" CenterX="50" CenterY="50"/> <ScaleTransform ScaleX="1.5" ScaleY="2" /> </TransformGroup> </Canvas.RenderTransform> <Ellipse Width="100" Height="100" Fill="Yellow" /> <Ellipse Canvas.Top="25" Canvas.Left="25" Width="10" Height="10" Fill="Black" /> <Ellipse Canvas.Top="25" Canvas.Left="65" Width="10" Height="10" Fill="Black" /></Canvas>

Perspective 3D Simulation de rotation d’éléments 2D dans un environnement 3DCe n’est pas de la vraie 3DUtilisation de la propriété “Projection”

<Image Name="img" Source="DSC01297.JPG" Height="298" Width="298" ><Image.Projection>

<PlaneProjection RotationZ="0" RotationY="70" RotationX="10"/>

</Image.Projection></Image>

Lab – Etape 4Transformations 3D

Binding entre éléments

© 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions,

it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.