présentation de windows presentation foundation vers une nouvelle génération dinterfaces...

Présentation de Windows Presentation Foundation

Vers une nouvelle génération d’interfaces graphiques

Windows Presentation Foundation - Agenda

• Windows Presentation Foundation• Les Bases• Le DataBinding• Les animations / Les transformations• La 3D• Interop WPF/WindowsForms• Applications navigateurs• Conclusion• Ressources

Windows Presentation Foundation

Le Framework .NET 3.0


Une approche productive et unifiée de Une approche productive et unifiée de

l’interface utilisateur, des médias et des l’interface utilisateur, des médias et des

documents afin de livrer une documents afin de livrer une

expérience utilisateur inégaléeexpérience utilisateur inégalée


• 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 Une UX supérieure réunissant l’interface, les médias et les documentsdocuments

L’architecture de WPF

Property Engine

Input / Eventing System

.NET Framework 2.0

Desktop Windows Manager

Media Integration Layer

DirectX

Windows Vista Display Driver (LDDM)

Windows Media Foundation

Composition Engine

Print Spooler

ManagedUnmanaged

Application Services

Deployment Services

Databinding

USER INTERFACE SERVICES

XAML

Accessibility

Property System

Input & Eventing

BASE SERVICES

DOCUMENT SERVICES

Packaging Services

XPS Documents

Animation

2D

3D

AudioImaging

Text

VideoEffects

Composition Engine

MEDIA INTEGRATION LAYER

Controls

LayoutW

ind

ow

s P

rese

nta

tion

Fo

un

da

tion

XP

S V

iew

er

Productivité Développeur-Designer

• Outils Microsoft pour les Outils Microsoft pour les développeurs et les designersdéveloppeurs et les designers

• Programmation déclarative avec Programmation déclarative avec XAMLXAML

• Outils d’éditeurs tiers (Aurora de Outils d’éditeurs tiers (Aurora de Mobiform, ZAM 3D de Electric Rain)Mobiform, ZAM 3D de Electric Rain)Les designers conçoivent les UILes designers conçoivent les UI

Avec XAML, les Avec XAML, les

développeurs et les développeurs et les

designers peuvent affiner designers peuvent affiner

leur collaborationleur collaboration Et les développeurs ajoute la logique métierEt les développeurs ajoute la logique métier

XAML ou la programmation déclarative

XAML = Extensible Application Markup LanguageXAML = 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 Buttonb1.Content = "OK"b1.Background = New _ SolidColorBrush(Colors.LightBlue)b1.Width = 100

VB.NET

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

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>

Les Templates

• Contenu variable

• Template = Définition du contenu

• Notion de « graph d’objets »:

• Button

• ContentPresenter

• Image

• …

Templated Button

Texte et Documents

• Support des polices ClearType• Support de l’anti-aliasing• API pour faciliter la lecture

– Zoom– Recherche– Multipages

<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

Contrôles, styles, templates, etc….

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 ObjectDependency Object ObjectObject

Dependency Property

PropertyTwoWay

OneWay

OneWayToSource

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

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

Animations, Transformations, 3D

Intéropérabilité WindowsForms / WPF

Incorporez WPF dans vos applications Incorporez WPF dans vos applications WindowsForms tout en conservant votre WindowsForms tout en conservant votre

existantexistant

Interopérabilité WindowsForms / WPF

Applications navigateurs

– Applications WPF fonctionnant dans un navigateur Web

– Le même code XAML est utilisé pour:• Les applications « stand alone »

• Les applications navigateurs

– Fonctionnalités en grande partie identiques aux applications « stand alone »

Applications navigateurs

Disponibilité et packaging

La RTM du Framework .NET 3.0 est disponible depuis Novembre 2006

WPF• Composant du Framework .NET 3.0 pour Windows Vista• Fonctionne sur Windows Vista, Windows XP & Windows Server 2003• Fait partit de Windows – pas de cout supplémentaire

Visual Studio “Orcas” sera disponible après Windows VistaMS Expression Interactive Designer sera, lui aussi, disponible après Windows Vista

Q12006

Q2 Q4 Q12007

Q3 Q2 Q3 Q4

Conclusions

Fournir des expériences utilisateur innovantesFournir des expériences utilisateur innovantes

Améliorer la productivité Développeur-DesignerAméliorer la productivité Développeur-Designer

Permettre un déploiement applicatif fléxiblePermettre un déploiement applicatif fléxible

Accroitre la base de code et les techniques Accroitre la base de code et les techniques existantesexistantes

Ressources

• WPF @ Windows Vista Developer Centerhttp://msdn.microsoft.com/windowsvista/building/presentation/

• http://wpf.netfx3.com

• http://blogs.developpeur.org/tom

• http://morpheus.developpez.com

• Contact: [email protected]