Windows Presentation Foundation Présenté par: M’Rabet Ihsen
Présentation de  Windows Presentation Foundation Vers une nouvelle génération d’interfaces graphiques
Windows Presentation Foundation - Agenda <ul><li>Windows Presentation Foundation </li></ul><ul><li>Les Bases </li></ul><ul...
Le Framework .NET 3.0
Windows Presentation Foundation Une approche productive et unifiée de l’interface utilisateur, des médias et des documents...
Windows Presentation Foundation <ul><li>Création d’interfaces utilisateur innovatrices </li></ul><ul><li>Augmentation de l...
L’architecture de WPF  Property Engine Input / Eventing System .NET Framework 2.0 Desktop Windows Manager Media Integratio...
Productivité Développeur-Designer <ul><li>Outils Microsoft pour les développeurs et les designers </li></ul><ul><li>Progra...
XAML ou la programmation déclarative <ul><li>XAML = Extensible Application Markup Language </li></ul><ul><li>Facilement ut...
Windows Presentation Foundation
Les contrôles <ul><li>Windows Presentation Foundation fournit un nombre important de contrôles: </li></ul><ul><ul><li>Butt...
Les styles <ul><li>Définissent l’apparence des éléments au sein de l’application </li></ul><ul><li>Utilisation des Setter ...
Les Templates <ul><li>Contenu variable </li></ul><ul><li>Template = Définition du contenu  </li></ul><ul><li>Notion de « g...
Texte et Documents <ul><li>Support des polices ClearType </li></ul><ul><li>Support de l’anti-aliasing </li></ul><ul><li>AP...
Audio et Video <ul><li>Formats: WMV, MPEG, AVIs </li></ul><ul><li>Peuvent être synchronisés avec des animations </li></ul>...
Data Binding <ul><li>L’interface utilisateur peut être liée à des objets .NET ou à du XML </li></ul><ul><li>Les “Dependenc...
Les Animations / Transformations < StackPanel> <StackPanel.Triggers> <EventTrigger RoutedEvent=“Button.Click&quot;> <Event...
WPF et la 3D <ul><li>Les APIs de WPF pour la 3D facilitent la création de contrôles/dessins 3D </li></ul><ul><li>Namespace...
Intéropérabilité WindowsForms / WPF <ul><li>Incorporez WPF dans vos applications WindowsForms tout en conservant votre exi...
Applications navigateurs <ul><ul><li>Applications WPF fonctionnant dans un navigateur Web </li></ul></ul><ul><ul><li>Le mê...
Conclusions Fournir des expériences utilisateur innovantes Améliorer la productivité Développeur-Designer Permettre un dép...
Merci
Prochain SlideShare
Chargement dans…5
×

Présentation WPF

3 813 vues

Publié le

Publié dans : Technologie
0 commentaire
3 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
3 813
Sur SlideShare
0
Issues des intégrations
0
Intégrations
69
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
3
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • Windows Presentation Foundation (WPF), c’est 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. C’est un ensemble de nouvelles APIs constituant la base du système d’affichage de Windows Vista.
  • Création d’interfaces utilisateur innovatrices: Une approche unifiée de l’interface utilisateur, des médias et des documents Un moteur de rendu vectoriel et indépendant de la résolution; des accélérations matériel Un fonctionnement sur Windows Vista, Windows XP et Windows Server 2003 Réalisation d’un déploiement d’application flexible Ecriture du code une seule fois puis déploiement en tant qu’application simple ou application navigateur Accroissement de la base existante de code et de l’ensemble des techniques Interopérabilité avec les WindowsForms, Win32, DirectX, MFC, ActiveX Les connaissances acquises le Framework .NET, les langages .NET et l’IDE Visual Studio
  • Le moteur de composition de WPF (en noir) est l’une des fonctionnalités révolutionnaires de WPF. Ce moteur offre la capacité d’avoir du contenu dans du contenu. Plus simplement, c’est grâce à lui que vous allez pouvoir avoir un objet 3D rotatif à l’intérieur d’un bouton, et en même temps avoir une vidéo projetée sur la surface de votre objet 3D. Le format XPS est un nouveau format qui permet de profiter pleinement des capacités de WPF (vectoriel, zoom, etc..) dans les documents.
  • Si le design est important, les designers le sont aussi Enfin, si les designers sont importants, il faut faire en sorte que ce soit les premiers dans le processus de développement de logiciel. Avant, les designers concevaient les interfaces graphiques, et transmettaient leurs intentions aux développeurs sous formes d’images (PNG, JPG, et…). Le développeur devait alors essayer de reproduire le contenu de ces images dans son programme. Si le designer créait un contrôle non standard, le développeur devait alors coder ce contrôle en utilisant GDI+ ou une autre technologie. Ce processus fonctionnait mais était parfois long et couteux, et il arrivait que le résultat ne soit pas ce à quoi nous nous attendions. Afin d’améliorer la collaboration entre le développeur et le designer, Microsoft a créé le XAML, un format utilisé à la fois par les développeurs et les designers pour accéder aux fonctionnalités de WPF: le XAML est généré par le designer puis il est ensuite utilisé par le développeur. Autre avantage du XAML, la communication peut s’effectuer dans les 2 sens: il est tout à fait possible à un développeur de créer une interface graphique sobre (en XAML) puis de la délivrer à un designer qui va lui donner du style (et redéfinir son apparence). Microsoft a développé des outils, aussi bien coté designer que coté développeur: - Designer: La gamme Expression (Interactive Designer, Graphic Designer) - Développeur: Visual Studio (avec éditeur XAML, etc….)
  • XAML = Extensive Application Markup Language Programmation déclarative: Applications développées en utilisant simplement des éléments XAML Code et contenu séparé: Forte collaboration entre le développeur et le designer Designers font le design, les développeurs ajoutent la logique métier Peut-être affiché dans un navigateur ou une application Le code XAML n’est pas lié à un type d’application mais sera affiché de la même façon que l’on développe une application navigateur ou une application Windows XAML va vous permettre de déclarer une hiérarchie d’objets, accompagnés de leur propriétés. Une fois compilé, votre XAML vous permet d’obtenir la définition d’un ou plusieurs objets.
  • Contrôles de positionnement: Canvas: Positionnement exact grâce aux coordonnées X et Y DockPanel: Pour docker les éléments sans se soucier de leur coordonnées StackPanel: Pour placer les éléments de haut en bas ou de gauche à droite Grid: Positionnement dans une grille, à l’aide de lignes et colonnes
  • Avec WPF, le contenu d’un contrôle n’est jamais vraiment définit: un bouton ne contiendra pas forcément du texte mais pourra contenir une image, etc… Les Templates sont utilisés pour définir quel sera le contenu d’un contrôle et de quelle façon ce contenu sera affiché: dans un bouton inséré dans un ListBoxItem, dans une image insérée dans un bouton, etc…. On a donc une hiérarchie des éléments, qui nous permet de définir le graph d’objets constituant nos contrôles.
  • WPF supporte les polices ClearType qui fournissent une meilleure lisibilité et une meilleure compréhension du texte à vos utilisateur.
  • WPF supporte la plupart des formats audio/vidéo exstants: WMV ASF MPEG AVI
  • Data binding : Processus qui consiste à établir une connection entre l’interface utilisateur et la logique Dependency properties: Propriétés particulières auxquelles vous allez pouvoir: Appliquer un style DataBinder Animer Donner une valeur par défaut Etc.. Exemple de Dependency Property: Background ou FontSize
  • Interopérabilité WPF-Windows Forms: Héberger un contrôle WPF dans une WindowsForms en utilisant un contrôle ElementHost Héberger un contrôle WindowsForms dans une application WPF en utilisant un contrôle WindowsFormsHost =&gt; Mixer les capacités de WPF et des WindowsForms pour augmenter l’expérience utilisateur
  • Présentation WPF

    1. 1. Windows Presentation Foundation Présenté par: M’Rabet Ihsen
    2. 2. Présentation de Windows Presentation Foundation Vers une nouvelle génération d’interfaces graphiques
    3. 3. Windows Presentation Foundation - Agenda <ul><li>Windows Presentation Foundation </li></ul><ul><li>Les Bases </li></ul><ul><li>Le DataBinding </li></ul><ul><li>Les animations / Les transformations </li></ul><ul><li>La 3D </li></ul><ul><li>Interop WPF/WindowsForms </li></ul><ul><li>Applications navigateurs </li></ul><ul><li>Conclusion </li></ul><ul><li>Ressources </li></ul>
    4. 4. Le Framework .NET 3.0
    5. 5. 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
    6. 6. Windows Presentation Foundation <ul><li>Création d’interfaces utilisateur innovatrices </li></ul><ul><li>Augmentation de la productivité Designer-Développeur </li></ul><ul><li>Réalisation d’un déploiement d’application flexible </li></ul><ul><li>Accroissement de la base existante de code et de l’ensemble des techniques </li></ul>Une UX supérieure réunissant l’interface, les médias et les documents
    7. 7. 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 Managed Unmanaged 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 Audio Imaging Text Video Effects Composition Engine MEDIA INTEGRATION LAYER Controls Layout Windows Presentation Foundation XPS Viewer
    8. 8. Productivité Développeur-Designer <ul><li>Outils Microsoft pour les développeurs et les designers </li></ul><ul><li>Programmation déclarative avec XAML </li></ul><ul><li>Outils d’éditeurs tiers (Aurora de Mobiform, ZAM 3D de Electric Rain) </li></ul>Les designers conçoivent les UI <ul><ul><li>Avec XAML, les développeurs et les designers peuvent affiner leur collaboration </li></ul></ul>Et les développeurs ajoute la logique métier
    9. 9. XAML ou la programmation déclarative <ul><li>XAML = Extensible Application Markup Language </li></ul><ul><li>Facilement utilisable, basé sur le XML </li></ul><ul><li>Code et contenu sont séparés </li></ul><ul><li>Peut-être affiché dans un navigateur ou une application </li></ul><Button Width=&quot;100&quot;> OK <Button.Background> LightBlue </Button.Background> </Button> XAML Button b1 = new Button(); b1.Content = &quot;OK&quot;; b1.Background = new SolidColorBrush(Colors.LightBlue); b1.Width = 100; C# Dim b1 As New Button b1.Content = &quot;OK&quot; b1.Background = New _ SolidColorBrush(Colors.LightBlue) b1.Width = 100 VB.NET
    10. 10. Windows Presentation Foundation
    11. 11. Les contrôles <ul><li>Windows Presentation Foundation fournit un nombre important de contrôles: </li></ul><ul><ul><li>Button </li></ul></ul><ul><ul><li>Frame </li></ul></ul><ul><ul><li>Grid </li></ul></ul><ul><ul><li>ListBox </li></ul></ul><ul><ul><li>Etc.. </li></ul></ul><ul><li>Certains contrôles (contrôles de date, NumericUpDown, ColorPicker) ne sont pas présents </li></ul><ul><li>D’autres (Canvas, DockPanel, Grid, etc…) sont destinés au positionnement des éléments </li></ul>
    12. 12. Les styles <ul><li>Définissent l’apparence des éléments au sein de l’application </li></ul><ul><li>Utilisation des Setter pour définir la propriété à modifier et sa valeur: </li></ul><Style x:Key=&quot;Slider_RepeatButton&quot; TargetType=&quot;{x:Type RepeatButton}&quot;> <Setter Property=&quot;OverridesDefaultStyle&quot; Value=&quot;True&quot; /> <Setter Property=&quot;IsTabStop&quot; Value=&quot;false&quot; /> <Setter Property=&quot;Focusable&quot; Value=&quot;false&quot; /> <Setter Property=&quot;Template&quot;> <Setter.Value> <ControlTemplate TargetType=&quot;{x:Type RepeatButton}&quot;> <Border Background=&quot;Transparent&quot; /> </ControlTemplate> </Setter.Value> </Setter> </Style>
    13. 13. Les Templates <ul><li>Contenu variable </li></ul><ul><li>Template = Définition du contenu </li></ul><ul><li>Notion de « graph d’objets »: </li></ul><ul><ul><li>Button </li></ul></ul><ul><ul><ul><li>ContentPresenter </li></ul></ul></ul><ul><ul><ul><ul><li>Image </li></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>… </li></ul></ul></ul></ul></ul>Templated Button
    14. 14. Texte et Documents <ul><li>Support des polices ClearType </li></ul><ul><li>Support de l’anti-aliasing </li></ul><ul><li>API pour faciliter la lecture </li></ul><ul><ul><li>Zoom </li></ul></ul><ul><ul><li>Recherche </li></ul></ul><ul><ul><li>Multipages </li></ul></ul>
    15. 15. Audio et Video <ul><li>Formats: WMV, MPEG, AVIs </li></ul><ul><li>Peuvent être synchronisés avec des animations </li></ul><Border Width=&quot;400&quot; BorderBrush=&quot;Green&quot; BorderThickness=&quot;9&quot;> <StackPanel> <MediaElement Source=&quot;aero.wmv&quot; /> <Button>Hello</Button> </StackPanel> </Border>
    16. 16. Data Binding <ul><li>L’interface utilisateur peut être liée à des objets .NET ou à du XML </li></ul><ul><li>Les “Dependency properties” peuvent également être liées aux objets ADO.NET ou aux Web Services </li></ul><ul><li>Les “Data templates” peuvent être appliqués aux données métiers </li></ul><ul><ul><li>Possibilité de représenter visuellement une classe Person, Product, etc…. </li></ul></ul>UI & Databinding <StackPanel> <Label>Select A Customer</Label> <ListBox Name=&quot;myListBox&quot; Background=&quot;HoneyDew&quot; ItemsSource=&quot;{Binding {StaticResource myDataSource}}&quot; </ListBox> </StackPanel> Cible Source Dependency Object Object Dependency Property Property TwoWay OneWay OneWayToSource
    17. 17. Les Animations / Transformations < StackPanel> <StackPanel.Triggers> <EventTrigger RoutedEvent=“Button.Click&quot;> <EventTrigger.Actions> <BeginStoryboard> <BeginStoryboard.Storyboard> <Storyboard> <ColorAnimation To=&quot;Yellow&quot; Duration=&quot;0:0:0.5“ Storyboard.TargetName=&quot;TheBrush&quot; Storyboard.TargetProperty=&quot;Color&quot; /> <DoubleAnimation To=&quot;45&quot; Duration=&quot;0:0:2&quot; Storyboard.TargetName=&quot;LowerEllipseTransform&quot; Storyboard.TargetProperty=&quot;Angle&quot; /> ... </StackPanel.Triggers> </StackPanel> <ul><li>Fournissent une meilleure expérience utilisateur </li></ul><ul><li>Peuvent être utilisées sur toutes les Dependency Properties </li></ul><ul><li>Classe Transform: </li></ul><ul><ul><li>Rotation </li></ul></ul><ul><ul><li>Translation </li></ul></ul><ul><ul><li>Agrandissement/Réduction </li></ul></ul>
    18. 18. WPF et la 3D <ul><li>Les APIs de WPF pour la 3D facilitent la création de contrôles/dessins 3D </li></ul><ul><li>Namespace System.Windows.Media.Media3D: </li></ul><ul><ul><li>Définit des transformations, animations, outils pour créer des contrôles et dessins 3D </li></ul></ul>
    19. 19. Intéropérabilité WindowsForms / WPF <ul><li>Incorporez WPF dans vos applications WindowsForms tout en conservant votre existant </li></ul>
    20. 20. Applications navigateurs <ul><ul><li>Applications WPF fonctionnant dans un navigateur Web </li></ul></ul><ul><ul><li>Le même code XAML est utilisé pour: </li></ul></ul><ul><ul><ul><li>Les applications « stand alone » </li></ul></ul></ul><ul><ul><ul><li>Les applications navigateurs </li></ul></ul></ul><ul><ul><li>Fonctionnalités en grande partie identiques aux applications « stand alone » </li></ul></ul>
    21. 21. 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
    22. 22. Merci

    ×