Présentation WPF
3 j'aime2,799 vues
La présentation traite de Windows Presentation Foundation (WPF), une plateforme pour créer des interfaces utilisateur avancées et améliorer la productivité des développeurs et designers grâce à l'utilisation de XAML. WPF utilise des concepts comme le databinding, les animations, et intègre des éléments multimédias pour offrir une expérience utilisateur enrichissante. Le document aborde également l'interopérabilité avec Windows Forms et la possibilité d'exécuter des applications WPF dans des navigateurs web.
Présentation WPF
- 1. Windows Presentation Foundation Présenté par: M’Rabet Ihsen
- 2. Présentation de Windows Presentation Foundation Vers une nouvelle génération d’interfaces graphiques
- 3. Windows Presentation Foundation - Agenda Windows Presentation Foundation Les Bases Le DataBinding Les animations / Les transformations La 3D Interop WPF/WindowsForms Applications navigateurs Conclusion Ressources
- 4. Le Framework .NET 3.0
- 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. 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
- 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. 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
- 9. XAML ou la programmation déclarative 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
- 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. 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>
- 13. Les Templates Contenu variable Template = Définition du contenu Notion de « graph d’objets »: Button ContentPresenter Image … Templated Button
- 14. Texte et Documents Support des polices ClearType Support de l’anti-aliasing API pour faciliter la lecture Zoom Recherche Multipages
- 15. Audio et Video Formats: WMV, MPEG, AVIs Peuvent être synchronisés avec des animations <Border Width="400" BorderBrush="Green" BorderThickness="9"> <StackPanel> <MediaElement Source="aero.wmv" /> <Button>Hello</Button> </StackPanel> </Border>
- 16. 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
- 17. 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
- 18. 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
- 19. Intéropérabilité WindowsForms / WPF Incorporez WPF dans vos applications WindowsForms tout en conservant votre existant
- 20. 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 »
- 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. Merci
Notes de l'éditeur
- #6: 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.
- #7: 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
- #8: 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.
- #9: 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….)
- #10: 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.
- #12: 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
- #14: 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.
- #15: WPF supporte les polices ClearType qui fournissent une meilleure lisibilité et une meilleure compréhension du texte à vos utilisateur.
- #16: WPF supporte la plupart des formats audio/vidéo exstants: WMV ASF MPEG AVI
- #17: 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
- #20: 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 => Mixer les capacités de WPF et des WindowsForms pour augmenter l’expérience utilisateur