Windows Vista Developer Center WPF

1. WPF
Windows Presentation
Foundation

2. Sommaire
 Windows Presentation Foundation
 Les Bases
 Le DataBinding
 Les animations / Les transformations
 La 3D
 Interop WPF/WindowsForms
 Conclusion
 Ressources

3. Présentation de WPF
Windows Presentation
Foundation

4. Windows Presentation
Foundation
Une approche productive et unifiée de
l’interface utilisateur, des médias et des
documents afin de livrer une
expérience utilisateur inégalée

5. Windows Presentation
Foundation
 Création d’interfaces utilisateur innovatrices
 Augmentation de la productivité Designer-
Développeur
 Réalisation d’un déploiement d’application
flexible
 Accroissement de la base existante de code et de
l’ensemble des techniques
Une UX supérieure réunissant l’interface, les médias et les documents

6. Productivité Développeur-
Designer
• Outils Microsoft pour les
développeurs et les designers
• Programmation déclarative avec
XAML
• Outils d’éditeurs tiers (Aurora de
Mobiform, ZAM 3D de Electric Rain)
Les designers conçoivent les UI
Avec XAML, les
développeurs et les
designers peuvent affiner
leur collaboration Et les développeurs ajoute la logique métier

7. Prérequis
 WPF a été introduit avec le Framework .net 3
 Nécessite Windows XP SP2 ou plus.
 Intégré dans Visual Studio 2008 et plus
 Pour créer les interface graphique, nous pouvons
utiliser un nouveau logiciel de Microsoft spécialement
dédié à la création d'interface graphique WPF. Ce
programme, appelé Microsoft Expression Blend,
permet de créer très facilement les interfaces
graphiques, d'un point de vue « design » alors que
VS est plus orienté « code ».

8. XAML
XAML = Extensible Application Markup Language
• Facilement utilisable, basé sur le XML
• Code et contenu sont séparés
• Peut-être affiché dans un navigateur ou une application
<Button Width="100"> OK
<Button.Background>
LightBlue
</Button.Background>
</Button>
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

9. XAML
 Définition: un langage XML qui décrit votre
interface.
 Utilité: utilisé pour créer deux types de
programme:
 Un logiciel classique, sous Windows. C'est alors
WPF qui se charge de comprendre le XAML pour
créer votre interface graphique et la faire interagir
avec votre code .net (C#, Vb.net, ...).
 Une interface Web. Dans ce cas c'est SilverLight
qui prend en charge votre code. Le programme
s'exécutera dans votre navigateur, comme les
applications Flash par exemple.

10. Les bases
Windows Presentation
Foundation

11. Les contrôles
 Windows Presentation Foundation fournit un nombre
important de contrôles:
 Button
 Frame
 Grid
 ListBox
 Etc..
 Certains contrôles (contrôles de date,
NumericUpDown, ColorPicker) ne sont pas présents
 D’autres (Canvas, DockPanel, Grid, etc…) sont
destinés au positionnement des éléments

12. Hello World: XAML
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<TextBlock Text="Hello WPF" />
</Window>
 TextBlock est l’équivalent à label en winforms

13. Equivalent C#
using System;
using System.Windows;
using System.Windows.Controls;
namespace HelloWorld1
{
class HelloWindow
{
static void Main()
{
// Création de la fenetre
Window fenetre = new Window();
// Assignation des propriétées
fenetre.Title = "Window1";
fenetre.Width = 300;
fenetre.Height = 300;
// Création du TextBlock
TextBlock tblock = new TextBlock();
tblock.Text = "Hello World";
// Ajout du contrôle à la fentre
fenetre.Content = tblock;
// Création de l'application et démarrage avec notre fentre
Application app = new Application();
app.Run(fenetre);
}
}
}

14. Première action
----------------MainWindow.xaml-----------
<Window x:Class="WpfApplication3.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Button Click="Button_Click">Cliquez ici !</Button>
</Window>
----------------MainWindow.xaml.cs---------
private void Button_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show("Coucou");
this.Close();
}

15. Conteneurs : la grille
 Le contrôle Window ne peut contenir qu'un seul
élément.
 Les éléments chargés d'en contenir d'autres sont
appelés « conteneurs ».
 La grille peut être vue comme un tableau en XHTML.
Ce tableau représente, comme son nom l'indique,
une grille avec plusieurs colonnes et lignes. Chaque
contrôle est alors positionné dans une des cellules du
tableau. Évidemment, chaque ligne et colonne peut
être de dimension différente. De plus un contrôle peut
appartenir à plusieurs cases à la fois.

16. Dimensions (Width, Height)
 Les dimension peuvent être définit de 3 manières:
 une valeur fixe, permettant de définir précisément la
taille de l'élément (plusieurs unités sont disponibles) ;
 une portion de l'espace disponible, représentée par une
étoile.
 la valeur « Auto » pour que l'élément s'adapte au
contenu.
 Une valeur fixe peut être de plusieurs types :
 le dip (unité px) qui est celle par défaut (ex : « 10pix »
ou « 10 ») ;
 le pouce (unité in, 1in=96pix, ex : 10in) ;
 le centimètre (unité cm, 1cm=96/2.54pix, ex : 10cm) ;
 le point (unité pt, 1pt = 96/72 pix, ex 10pt).

17. <Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="5cm"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="70"/>
<RowDefinition Height="*"/>
<RowDefinition Height="2*"/>
</Grid.RowDefinitions>
</Grid>
Définition des lignes et colonnes

18. Positionnement des contrôles
dans les cellules
 Si vous ajoutez des contrôles à votre grille, ils vont
tous se trouver par défaut assignés à la première
cellule.
 Pour spécifier la position dans la grille on utilise les
propriétés « Grid.Column » et « Grid.Row» pour
spécifier la colonne
 Il s'agit d'un nouveau concept. Les propriétés
attachées (atached property). Ainsi en dehors d'une
grille, aucun contrôle ne possède ces propriétés et
tous les contrôles les possèdent à l'intérieur.
 Il peut parfois être intéressant qu'un contrôle
remplisse plusieurs cellules. Cela se réalise en
utilisant les propriétés attachées «Grid.RowSpan» et
« Grid.ColumnSpan ».

19. <Button Grid.Column="0" Grid.Row="0" Content="Bouton 1"/>
<Button Grid.Column="1" Grid.Row="0" Content="Bouton 2"/>
<Button Grid.Column="2" Grid.Row="0" Content="Bouton 3"/>
<Button Grid.Column="0" Grid.Row="1" Content="Bouton 4"/>
<Button Grid.Column="1" Grid.Row="1" Content="Bouton 5"/>
<Button Grid.Column="2" Grid.Row="1" Content="Bouton 6"/>
<Button Grid.Column="0" Grid.Row="2" Content="Bouton 7"/>
<Button Grid.Column="1" Grid.Row="2" Content="Bouton 8"/>
<Button Grid.Column="2" Grid.Row="2" Content="Bouton 9"/>

21. Remplissage de plusieurs cellules
<Grid> <Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="5cm"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="70"/>
<RowDefinition Height="*"/>
<RowDefinition Height="2*"/>
</Grid.RowDefinitions>
<Button Grid.Column="0" Grid.Row="0"
Grid.ColumnSpan="2" Content="Bouton 1"/>
<Button Grid.Column="2" Grid.Row="0"
Grid.RowSpan="3" Content="Bouton 3"/>
<Button Grid.Column="0" Grid.Row="1" Content="Bouton 4"/>
<Button Grid.Column="1" Grid.Row="1" Content="Bouton 5"/> <Button
Grid.Column="0" Grid.Row="2" Content="Bouton 7"/> <Button Grid.Column="1"
Grid.Row="2" Content="Bouton 8"/>
</Grid>

23. Cas particulier : les grilles
uniformes
 Il s'agit de grilles dont toutes les colonnes ont la
même largeur et toutes les lignes la même
hauteur.
 Il n'y a donc pas besoin de « ColumnDefinition »
ou de « RowDefinition ». Il y a deux propriétés
Rows et Columns qui définissent le nombre de
lignes et de colonnes.
 Les contrôles sont ajoutés à la grille dans l'ordre

24. Exemple avec une grille 3x2 remplie
de boutons.
<UniformGrid Rows="2" Columns="3">
<Button>Bouton 1</Button>
<Button>Bouton 2</Button>
<Button>Bouton 3</Button>
<Button>Bouton 4</Button>
<Button>Bouton 5</Button>
<Button>Bouton 6</Button>
</UniformGrid>

26. Atelier Tableau

27. Les styles
 Définissent l’apparence des éléments au sein de
l’application
 Utilisation des Setter pour définir la propriété à
modifier et sa valeur:
<Style x:Key="Slider_RepeatButton" TargetType="{x:Type RepeatButton}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="IsTabStop" Value="false" />
<Setter Property="Focusable" Value="false" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Border Background="Transparent" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

28. Les Templates
• Contenu variable
• Template = Définition du contenu
• Notion de « graph d’objets »:
• Button
• ContentPresenter
• Image
• …
Templated
Button

29. Texte et Documents
 Support des polices ClearType
 Support de l’anti-aliasing
 API pour faciliter la lecture
 Zoom
 Recherche
 Multipages

30. <Border Width="400"
BorderBrush="Green"
BorderThickness="9">
<StackPanel>
<MediaElement Source="aero.wmv" />
<Button>Hello</Button>
</StackPanel>
</Border>
Audio et Video
 Formats: WMV, MPEG, AVIs
 Peuvent être synchronisés avec des animations

31. Data Binding
 L’interface utilisateur peut être liée à des objets .NET ou à du XML
 Les “Dependency properties” peuvent également être liées aux objets
ADO.NET ou aux Web Services
 Les “Data templates” peuvent être appliqués aux données métiers
 Possibilité de représenter visuellement une classe Person, Product, etc….
UI & Databinding
<StackPanel>
<Label>Select A Customer</Label>
<ListBox
Name="myListBox"
Background="HoneyDew"
ItemsSource="{Binding
{StaticResource myDataSource}}"
</ListBox>
</StackPanel>
Cible Source
Dependency Object Object
Dependency
Property
Property
TwoWay
OneWay
OneWayToSource

32. Les Animations /
Transformations
<StackPanel>
<StackPanel.Triggers>
<EventTrigger RoutedEvent=“Button.Click">
<EventTrigger.Actions>
<BeginStoryboard>
<BeginStoryboard.Storyboard>
<Storyboard>
<ColorAnimation To="Yellow" Duration="0:0:0.5“
Storyboard.TargetName="TheBrush"
Storyboard.TargetProperty="Color" />
<DoubleAnimation To="45" Duration="0:0:2"
Storyboard.TargetName="LowerEllipseTransform"
Storyboard.TargetProperty="Angle" />
...
</StackPanel.Triggers>
</StackPanel>
• Fournissent une meilleure
expérience utilisateur
• Peuvent être utilisées sur
toutes les Dependency
Properties
• Classe Transform:
• Rotation
• Translation
• Agrandissement/Réduction

33. WPF et la 3D
• Les APIs de WPF pour la 3D facilitent la création de contrôles/dessins
3D
• Namespace System.Windows.Media.Media3D:
• Définit des transformations, animations, outils pour créer des
contrôles et dessins 3D

34. Intéropérabilité WindowsForms /
WPF
Incorporez WPF dans vos applications WindowsForms tout
en conservant votre existant

35. Conclusions
Fournir des expériences utilisateur innovantes
Améliorer la productivité Développeur-Designer
Permettre un déploiement applicatif fléxible
Accroitre la base de code et les techniques
existantes

36. Ressources
 WPF @ Windows Vista Developer Center
http://msdn.microsoft.com/windowsvista/building/presentati
on/
 http://wpf.netfx3.com
 http://blogs.developpeur.org/tom
 http://morpheus.developpez.com
 Contact: t-thole@microsoft.com