Créez des applications Silverlight 3 David Rousset Relations Techniques avec les développeurs Microsoft France

Présentation au sujet: "Créez des applications Silverlight 3 David Rousset Relations Techniques avec les développeurs Microsoft France"— Transcription de la présentation:

1 Créez des applications Silverlight 3 David Rousset Relations Techniques avec les développeurs Microsoft France davrous@microsoft.comdavrous@microsoft.com / http://blogs.msdn.com/davroushttp://blogs.msdn.com/davrous

2 Concepts XAML Formes de bases et Events

3 eXtensible Application Markup Language Langage déclaratif comme le XML Décrit l’interface utilisateur Généré par les outils Microsoft Expression Tout ce qui est faisable en XAML peut être fait en code… … mais utilisez au maximum le XAML pour décrire l’interface! LightBlue XAML Button b1 = new Button(); b1.Content = "OK"; b1.Background = new SolidColorBrush(Colors.LightBlue); b1.Width = 100; C# Dim b1 As New Button b1.Content = "OK" b1.Background = New _ SolidColorBrush(Colors.LightBlue) b1.Width = 100 VB.NET

4 Collaboration entre Designer/Developpeur

5 eXstensible Application Markup Language Permet la séparation entre présentation et logique C++ C# VB.NET Papier JPG / TIFF PSD PPT MOV / WMV XAML DesignerDeveloper

6 XAML – les basiques Un fichier XAML contient un élément racine déclarant au minimum les espaces de nom Silverlight et XAML : <UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="SilverlightApplication1.Page" xmlns:custom="clr-namespace;MonEspaceDeNom;assembly=MonAssembly" Width="640" Height="480" Background="Red" > Vous pouvez dessiner directement avec du XAML XAML est constitué de balises Chaque balise représente un élément de l’interface ou un conteneur E.g. Rectangle, Ellipse, Canvas, Storyboard, etc… Toutes les balises ne sont pas des éléments graphiques (ex : animations) Espace de nom XAML Espace de nom custom

7 Exemple de XAML Container principal 3 types de container principaux : Grid – Grille pour positionner sur colonne X et ligne Y StackPanel – Pour empiler les contrôles horizontalement ou verticalement Canvas – Pour positionner de manière relative au top left

8 Positionnement Relatif La position est toujours relative au Canvas parent <Canvas Width="150" Height="100" Background="Orange"> <Ellipse Canvas.Top="25" Canvas.Left="50" Width="150" Height="75" Fill="Blue" /> <Canvas Width="150" Height="100" Background="Orange"> <Ellipse Canvas.Top="25" Canvas.Left="50" Width="150" Height="75" Fill="Blue" />

9 Formes vectorielles (ligne entre 2 points) (figure avec un nombre arbitraire de côtés) (série de lignes connectées)

10 Brushes Déterminent comment les objets sont peints Pour remplir des objets (ex : Fill) Pour peindre des lignes (ex : Stroke) Supporte les couleurs unies, les gradients, les images et les vidéos

11 Solid Colors 141 noms de couleurs sont supportés (ex : Blue, Red, Green) Supporte aussi la syntaxe #FFFFFF ou #FFFFFFFF (alpha en plus)

12 Linear Gradients StartPoint et EndPoint définissent les extrêmités du Gradient GradientStop définit différents points intermédiaires <GradientStop Color="LightBlue" Offset="0" /> <GradientStop Color="Black" Offset="1" /> <GradientStop Color="LightBlue" Offset="0" /> <GradientStop Color="Black" Offset="1" />

13 Radial Gradients <GradientStop Color="Red" Offset="0" /> <GradientStop Color="Black" Offset="1" /> <GradientStop Color="Red" Offset="0" /> <GradientStop Color="Black" Offset="1" />

14 Peindre avec des Images <ImageBrush ImageSource="http://.../XBox360Logo.jpg" /> <ImageBrush ImageSource="http://.../XBox360Logo.jpg" />

15 Utilisation du texte Hello <TextBlock FontFamily="Courier New">Hello <TextBlock FontFamily="Courier New">Hello Hello Hello there, how are you? Hello there, how are you? Hello there, how are you? Hello there, how are you? Hello there, how are you? Hello there, how are you?

16 Utilisation des Images

17 Applications interactives Silverlight permet de gérer les événements de la souris et du clavier afin de créer des applications interactives : KeyUp KeyDown MouseLeftButtonUp MouseLeftButtonDown MouseMove MouseEnter MouseLeave …

18 Abonnement aux événements Depuis le code XAML : <UserControl x:Class="SilverlightApplication1.Page" xmlns="http://schemas.microsoft.com/client/2006/Presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400" Height="300" > Depuis le code.NET Même syntaxe qu’avec n’importe quelle autre application.NET Rect1.MouseEnter += new MouseEventHandler(Rect1_MouseEnter); private void Rect1_MouseEnter(object sender, MouseEventArgs e) { } Rect1.MouseEnter += new MouseEventHandler(Rect1_MouseEnter); private void Rect1_MouseEnter(object sender, MouseEventArgs e) { }

19 © 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.