WPF UI Development Unchained

Click here to load reader

  • date post

    17-Nov-2014
  • Category

    Technology

  • view

    3.765
  • download

    4

Embed Size (px)

description

Follow our Experts: https://twitter.com/davidcthoemmes - https://twitter.com/ergosign Eine herausragende User Experience interaktiver Produkte setzt einen benutzer-zentrierten Designprozess voraus. Dies allein ist jedoch nicht hinreichend. Erst eine gekonnte software-technische Umsetzung sorgt dafür, dass ein gutes Design auch beim Anwender "ankommt". Tauchen Sie deshalb in die Welt des WPF UI Developments ein und erfahren Sie mehr darüber, wie ein ausgestaltetes UX Design ohne Kompromisse realisiert werden kann. Lernen Sie neben grundlegenden Techniken auch fortgeschrittene Themen wie beispielsweise Attached Properties sowie Behaviors kennen und lassen Sie sich von der Vielfalt des WPF Custom Control Developments begeistern. Neben der technischen Umsetzung spielen auch die Etablierung des UI Developments sowie dazugehörige Workflows, Rollen und Verantwortlichkeiten eine zentrale Rolle.

Transcript of WPF UI Development Unchained

  • 1. WPF UI DEVELOPMENT UNCHAINED David C. Thmmes Software Engineer Lead Software Engineering Standards [email protected] Lanninger UI DeveloperErgosign GmbHErgosign [email protected]

2. UI DEVELOPMENT?2 3. UI DEVELOPMENT? USER CENTERED DESIGN4 4. UI DEVELOPMENT? USER CENTERED DESIGNDESIGNANALYSESPECIFYVALIDATEDEVELOP4 5. Kontextuelle Analyse Beobachtungen und semistrukturierte Interviews bei Endanwendern vor Ort. 6. Konzeptionelles Design Ein ganzheitlich optimiertes Bedienkonzept bildet die Eckpfeiler des User Interface. 7. Visuelles Design Nach einem gemeinsamen Stilfindungsprozess wird anhand der erarbeiteten Vorgaben ein ansprechendes Visuelles Design entwickelt. 8. Prototyping Prototypen sind in verschiedenen Phasen der Gestaltung von Bedeutung, beispielsweise im Rahmen von Userund Task-Analyse, Design, Usability Testing oder zur untersttzenden Dokumentation bei der Spezifikation. 9. Usability Testing Ein Usability Test mit reprsentativen Endanwendern liefert entscheidende Hinweise zur Optimierung eines User Interface. 10. SPECIFY10 11. UI DEVELOPMENT? USER CENTERED DESIGNSpezifikation11 12. UI DEVELOPMENT? USER CENTERED DESIGNSpezifikationwtf? :-D 11 13. UI DEVELOPMENT? DEKLARATIVE PROGRAMMIERUNGReminder - Deklarative Programmierung mit XAML, Styling, Templates...ButtonDesignerXAMLDeveloper12 14. UI DEVELOPMENT? MODEL VIEW VIEWMODELReminder - Model View ViewModel - Klare Trennung Visualisierung & LogikViewPrsentation XAML + Code BehindData BindingView ModelModelInteraktionslogikDaten & Geschftslogik13 15. UI DEVELOPMENT? ABER WAS SIND DIE PROBLEME?Probleme Komplexitt und Umfang der Dokumente (Style Guide, etc.) Interpretationsfreirume des Software Engineers Know-how zur Realisierung fehlt Allgemein UI Development unterbewertet14 16. UI DEVELOPMENT? ABER WAS SIND DIE PROBLEME?UI Developer als Schlsselelement Lsung Rolle UI Developer mit eigener Wissensbasis forcierenFokus UI Development Zwischen UX Designer und Software Engineer aktiv angesiedelt Schicht Prsentation und Interaktion Styling, Templating, Layouting, Views, ViewModels, Custom Control Development...15 17. UI DEVELOPMENT? WPF UI DEVELOPERStufenmodell16 18. UI DEVELOPMENT? WPF UI DEVELOPERStufenmodellFundamentDesign BasicsUsability Engineering BasicsDesigner & UI Developer Workow16 19. UI DEVELOPMENT? WPF UI DEVELOPERStufenmodellStufe 1StylesControl TemplatesXAMLFundamentDesign BasicsBlendTemplate BindingControls & LayoutAnimationenResource ManagementUsability Engineering BasicsTrigger & VSM Data Binding BasicsDesigner & UI Developer Workow16 20. UI DEVELOPMENT? WPF UI DEVELOPERStufenmodellStufe 2MVVMApplication FrameworksData Binding AdvancedStufe 1StylesFundamentData TemplatesControl TemplatesXAMLDesign BasicsBlend.NETAttached PropertiesTemplate BindingControls & LayoutVisual StudioAnimationenResource ManagementUsability Engineering BasicsBehaviors AdornerTrigger & VSM Data Binding BasicsDesigner & UI Developer Workow16 21. UI DEVELOPMENT? WPF UI DEVELOPERStufenmodell Stufe 3Custom Control DevelopmentStufe 2MVVMApplication FrameworksData Binding AdvancedStufe 1StylesDesign BasicsBlend.NETData TemplatesControl TemplatesXAMLFundamentCustom Layout PanelsAttached PropertiesTemplate BindingControls & LayoutVisual StudioAnimationenResource ManagementUsability Engineering BasicsMiscellaneousBehaviors AdornerTrigger & VSM Data Binding BasicsDesigner & UI Developer Workow16 22. UI DEVELOPMENT? FAZITZusammenfassung UI Development muss als eigene Disziplin innerhalb des Software Engineerings verstanden werden! UX Design ist die Basis fr UI Development Ein benutzer-zentrierter Designprozess ist essentiell!17 23. UI DEVELOPMENT? FAZITZusammenfassung UI Development muss als eigene Disziplin innerhalb des Software Engineerings verstanden werden! UX Design ist die Basis fr UI Development Ein benutzer-zentrierter Designprozess ist essentiell! User Centered Design + Software Engineering + UI Development = Application! ;-)17 24. DESIGN UND DEVELOPMENT IM EINKLANG18 25. DesignDevelopmentEigene Prozesse 26. DESIGN UND DEVELOPMENT IM EINKLANG UI DEVELOPMENTAbstraktes Vorgehen UI Developer - Styling und Custom Control Development20 27. DESIGN UND DEVELOPMENT IM EINKLANG UI DEVELOPMENTAbstraktes Vorgehen UI Developer - Styling und Custom Control DevelopmentDesign Anforderungen20 28. DESIGN UND DEVELOPMENT IM EINKLANG UI DEVELOPMENTAbstraktes Vorgehen UI Developer - Styling und Custom Control DevelopmentDesign AnforderungenAbstraktionUI Development Analyse20 29. DESIGN UND DEVELOPMENT IM EINKLANG UI DEVELOPMENTAbstraktes Vorgehen UI Developer - Styling und Custom Control DevelopmentDesign AnforderungenAbstraktionUI Development AnalyseIdentifikation Standard UI Elemente Custom Controls Anforderungsanalyse pro Custom Control Funktionale Anforderungen, Properties, Events, .... Views20 30. DESIGN UND DEVELOPMENT IM EINKLANG UI DEVELOPMENTAbstraktes Vorgehen UI Developer - Styling und Custom Control DevelopmentDesign AnforderungenAbstraktionUI Development AnalyseDevelopIdentifikation Standard UI Elemente Custom Controls Anforderungsanalyse pro Custom Control Funktionale Anforderungen, Properties, Events, .... Views20 31. DESIGN UND DEVELOPMENT IM EINKLANG UI DEVELOPMENTDesigner und UI Developer Schnittstellen...21 32. DESIGN UND DEVELOPMENT IM EINKLANG UI DEVELOPMENTDesigner und UI Developer Schnittstellen...21 33. DESIGN UND DEVELOPMENT IM EINKLANG UI DEVELOPMENTDesigner und UI Developer Schnittstellen...21 34. DESIGN UND DEVELOPMENT IM EINKLANG UI DEVELOPMENTDesigner und UI Developer Schnittstellen...21 35. DESIGN UND DEVELOPMENT IM EINKLANG UI DEVELOPMENTDesigner und UI Developer Schnittstellen...21 36. DESIGN UND DEVELOPMENT IM EINKLANG UI DEVELOPMENTDesigner und UI Developer Schnittstellen...21 37. EIN UI...22 38. Styling? Custom Controls? 39. DER WEG ZUM CUSTOM CONTROL24 40. DER WEG ZUM CUSTOM CONTROL DEFINITION CUSTOM CONTROLReminder - Eigentlich nur Ableitung von einer konkreten Klasse != UserControl Styling- und Template- Mglichkeiten Visueller Aufbau im Control Template Default Style mglich Generic.xaml Zusammenfassung in einer Control Library mglich25 41. DER WEG ZUM CUSTOM CONTROL TECHNISCHE VORGEHENSWEISE26 42. DER WEG ZUM CUSTOM CONTROL TECHNISCHE VORGEHENSWEISEWPF Standard Control?26 43. DER WEG ZUM CUSTOM CONTROL TECHNISCHE VORGEHENSWEISEWPF Standard Control?WPF Standard Controls gruppieren?26 44. DER WEG ZUM CUSTOM CONTROL TECHNISCHE VORGEHENSWEISEWPF Standard Control?WPF Standard Controls gruppieren?Styling & Templating?26 45. DER WEG ZUM CUSTOM CONTROL TECHNISCHE VORGEHENSWEISEWPF Standard Control?WPF Standard Controls gruppieren?Styling & Templating?ValueConverter/Markup Extensions?26 46. DER WEG ZUM CUSTOM CONTROL TECHNISCHE VORGEHENSWEISEWPF Standard Control?WPF Standard Controls gruppieren?Styling & Templating?ValueConverter/Markup Extensions?Attached Properties/Behaviors?26 47. DER WEG ZUM CUSTOM CONTROL TECHNISCHE VORGEHENSWEISEWPF Standard Control?WPF Standard Controls gruppieren?Styling & Templating?ValueConverter/Markup Extensions?Attached Properties/Behaviors?Drittanbieter?26 48. DER WEG ZUM CUSTOM CONTROL TECHNISCHE VORGEHENSWEISEWPF Standard Control?WPF Standard Controls gruppieren?Styling & Templating?vs.My Custom ControlValueConverter/Markup Extensions?Attached Properties/Behaviors?Drittanbieter?26 49. DER WEG ZUM CUSTOM CONTROL TECHNISCHE VORGEHENSWEISEWeitere Faktoren zur Entscheidung Custom Control Prototyp vs. Produktiv-Code Wiederverwendbarkeit Konsistenz im User Interface27 50. SearchTextBox, aber nicht als Custom Control! 51. SEARCHTEXTBOX29 52. ANALYSE30 53. SEARCHTEXTBOX ANALYSEView Model31 54. SEARCHTEXTBOX ANALYSEView Model31 55. SEARCHTEXTBOX ANALYSEView ModelTextBox31 56. SEARCHTEXTBOX ANALYSEView ModelTextBox31 57. SEARCHTEXTBOX ANALYSEView ModelTextBoxWatermark WatermarkFontStyle WatermarkFontWeight WatermarkForeground31 58. SEARCHTEXTBOX ANALYSEView ModelTextBoxWatermark WatermarkFontStyle WatermarkFontWeight WatermarkForeground31 59. SEARCHTEXTBOX ANALYSEView ModelTextBoxWatermark WatermarkFontStyleClearCommandWatermarkFontWeight(Zurcksetzen des Texts)WatermarkForeground31 60. SEARCHTEXTBOX ANALYSEView ModelTextBoxWatermark WatermarkFontStyleClearCommandWatermarkFontWeight(Zurcksetzen des Texts)WatermarkForeground31 61. SEARCHTEXTBOX ANALYSEView ModelPropertyBindingTextBoxWatermark WatermarkFontStyleClearCommandWatermarkFontWeight(Zurcksetzen des Texts)WatermarkForeground31 62. STYLE & TEMPLATE32 63. Style & Template (TextBox.xaml) 64. ATTACHED PROPERTIES34 65. SEARCHTEXTBOX ATTACHED PROPERTIESAttached Properties Gleich wie Dependency Properties Metadaten und Speicherperformance, nderungsbenachrichtigungen, Grundlage fr Trigger, Data Binding, Animationen etc.Definition nicht fr eine bestimmtes Control sondern global in einer zentralen Klasse fr alle Controls Mglichkeit auf einem beliebigen Control zusetzen Hufig verwendet bei Layout Panels Grid.Row, Grid.Column, ...35 66. > Zentrale Klasse anlegenAttached Properties anlegen 1/4 36 67. > Registrieren ber statische Funktion > Name > Type > Zugehrige Klasse > MetadatenAttached Properties anlegen 2/4 (AttachedProperties.cs) 37 68. > Statische Funktionen fr den Zugriff > Verwendung der Methoden GetValue(), SetValue()Attached Properties anlegen 3/4 (AttachedProperties.cs) 38 69. > Wie DependencyProperties verwendbar > TemplateBinding mglich > Klasse.PropertyNameAttached Properties anlegen 4/4 (TextBox.xaml) 39 70. READ-ONLY ATTACHED PROPERTIES40 71. SEARCHTEXTBOX READ-ONLY ATTACHED PROPERTIESRead-Only Attached Properties Von Auen nur lesbar und nicht schreibbarVerwaltung ber internen Schlssel DependencyPropertyKey Besteht aus Schlssel & Dependency Property41 72. > Schlssel registrieren ber statische Funktion> Anlegen der PropertyRead-Only Attached Properties anlegen 1/2 (AttachedProperties.cs) 42 73. > Verwendung der Methoden GetValue(), SetValue()Attached Properties anlegen 2/2 (AttachedProperties.cs) 43 74. > Referenz ber CommandParameterCommandAction definieren (AttachedProperties.cs) 44 75. > Setzen der Bindings > Command > CommandParameter (Referenz)TemplateBinding (TextBox.xaml) 45 76. > Binding an ViewModel PropertyViewModel Kommunikation (MainView.xaml) 46 77. SEARCHTEXTBOX ABSCHLUSSView ModelPropertyBindingTextBoxWatermark WatermarkFontStyleClearCommandWatermarkFontWeight(Zurcksetzen des Texts)WatermarkForeground47 78. WAS FINDEN WIR NOCH... ?48 79. Styling? Custom Controls? 80. CircularProgressBar 81. CIRCULAR PROGRESSBAR51 82. ANALYSE52 83. CIRCULAR PROGRESSBAR ANALYSEView Model53 84. CIRCULAR PROGRESSBAR ANALYSEView Model53 85. CIRCULAR PROGRESSBAR ANALYSEView ModelProgressBar53 86. CIRCULAR PROGRESSBAR ANALYSEView ModelProgressBar53 87. CIRCULAR PROGRESSBAR ANALYSEView ModelProgressBarValueAsAngle53 88. CIRCULAR PROGRESSBAR ANALYSEView ModelProgressBarValueAsAngle53 89. CIRCULAR PROGRESSBAR ANALYSEView ModelPropertyBindingProgressBarValueAsAngle53 90. CIRCULAR PROGRESSBAR ANALYSEView ModelPropertyBindingProgressBarValueAsAngle53 91. STYLE & TEMPLATE54 92. > MultiBinding > Minimum > Maximum > Value => ValueAsAngleStyle & Template (ProgressBar.xaml) 93. CONVERTER56 94. CIRCULAR PROGRESSBAR CONVERTERConverter Implementieren des entsprechenden Interfaces IValueConverter IMultiValueConverterKonvertieren einen/mehrere Wert/e in das gewnschte Format bzw. den gewnschten Typ57 95. CIRCULAR PROGRESSBAR CONVERTERConverter - IValueConverter58 96. CIRCULAR PROGRESSBAR CONVERTERConverter - IValueConverterProperty Typ/FormatA58 97. CIRCULAR PROGRESSBAR CONVERTERConverter - IValueConverterProperty Typ/FormatAProperty Typ/FormatB58 98. CIRCULAR PROGRESSBAR CONVERTERConverter - IValueConverterBinding Property Typ/FormatAProperty Typ/FormatB58 99. CIRCULAR PROGRESSBAR CONVERTERConverter - IValueConverterBinding Property Typ/FormatAConverterProperty Typ/FormatB58 100. CIRCULAR PROGRESSBAR CONVERTERConverter - IMultiValueConverter59 101. CIRCULAR PROGRESSBAR CONVERTERConverter - IMultiValueConverterProperty Typ/FormatA59 102. CIRCULAR PROGRESSBAR CONVERTERConverter - IMultiValueConverterProperty Typ/FormatAProperty Typ/FormatB... 59 103. CIRCULAR PROGRESSBAR CONVERTERConverter - IMultiValueConverterProperty Typ/FormatA Property Typ/FormatC Property Typ/FormatB... 59 104. CIRCULAR PROGRESSBAR CONVERTERConverter - IMultiValueConverterProperty Typ/FormatAMultiBinding Property Typ/FormatCProperty Typ/FormatB... 59 105. CIRCULAR PROGRESSBAR CONVERTERConverter - IMultiValueConverterProperty Typ/FormatAMultiBinding ConverterProperty Typ/FormatCProperty Typ/FormatB... 59 106. > Klasse anlegenConverter 1/3 60 107. > Interface implementieren > Convert(...) > ConvertBack(...)Converter 2/3 (ValueAsAngleConverter.cs) 61 108. > Anlegen als Resource > Converter Property setzenConverter 3/3 (Converters.xaml, ProgressBar.xaml) 109. > Binding an ViewModel PropertyViewModel Kommunikation (DataTemplates.xaml) 63 110. CIRCULAR PROGRESSBAR ANALYSEView ModelPropertyBindingProgressBarValueAsAnge64 111. LOADING INDICATOR65 112. ANALYSE66 113. LOADING INDICATOR ADORNER67 114. LOADING INDICATOR ADORNER67 115. LOADING INDICATOR ADORNER67 116. LOADING INDICATOR ANALYSEView Model68 117. LOADING INDICATOR ANALYSEView Model68 118. LOADING INDICATOR ANALYSEView ModelBeliebiger Content68 119. LOADING INDICATOR ANALYSEView ModelBeliebiger Content68 120. LOADING INDICATOR ANALYSEView ModelIsLoadingBeliebiger ContentLoadingContent LoadingTemplate LoadingDataContext68 121. LOADING INDICATOR ANALYSEView ModelIsLoadingBeliebiger ContentLoadingContent LoadingTemplate LoadingDataContext68 122. LOADING INDICATOR ANALYSEView ModelPropertyBindingIsLoadingBeliebiger ContentLoadingContent LoadingTemplate LoadingDataContext68 123. ADORNER LAYER UND ADORNER69 124. LOADING INDICATOR ADORNER LAYER UND ADORNERberblick AdornerLayer = zustzliche Zeichen/Renderebene Mglichkeit Inhalte ber einem Control darzustellenAdorner reprsentieren die Inhalte in einem AdornerLayer Adorner werden in den nchst liegenden AdornerDecorator platziert (Default von Window)Adorner selbst mssen implementiert werden! Beispielsweise Darstellung eines Button im Adorner70 125. > Klasse anlegenImplementieren eines Adorners mit Content Data Template 1/5 71 126. > Ableiten von Adorner > Abstrakte Klasse > BasisimplementierungImplementieren eines Adorners mit Content Data Template 2/5 (LoadingBehaviorAdorner.cs) 72 127. > Member definieren> Properties definierenImplementieren eines Adorners mit Content Data Template 3/5 (LoadingBehaviorAdorner.cs) 73 128. > berschreiben von Methoden zur korrekten Darstellung des ContentsImplementieren eines Adorners mit Content Data Template 4/5 (LoadingBehaviorAdorner.cs) 74 129. > Elemente initialisierenImplementieren eines Adorners mit Content Data Template 5/5 (LoadingBehaviorAdorner.cs) 75 130. Adorner manuell verwendet (MainView.xaml.cs) 76 131. BEHAVIOR77 132. LOADING INDICATOR BEHAVIORIdee Behavior verwenden und den Source-Code zur AdornerErzeugung und Verwaltung zentral zu definieren Per Behavior die Circular ProgressBar innerhalb des Adorner darstellen Behavior steuert das Verhalten78 133. LOADING INDICATOR BEHAVIORBehavior Kapselt eine gewisse Funktionalitt und Logik in eine wiederverwendbare Klasse Kann an eine beliebiges Control angeheftet werdenReprsentiert durch die Klasse Behavior wobei T = Typ des AssociatedObjectsOverride Methoden OnAttached(), OnDetaching() und Property AssociatedObject bieten dem Entwickler volle Flexibilitt sowie Kontrolle79 134. > Klasse anlegenImplementieren einer Behavior 1/6 80 135. > Ableiten von Behavior wobei T den Typ des AssociatedObjects widerspiegelt> berschreiben der Methoden OnAttached(), OnDetaching()Implementieren einer Behavior 2/6 (LoadingBehavior.cs) 81 136. > Anlegen der Properties & Property Changed CallbacksImplementieren einer Behavior 3/6 (LoadingBehavior.cs) 82 137. > Unser Adorner verwenden > Get AdornerLayer> Adorner anlegen > Parameter = AdorneredElementImplementieren einer Behavior 4/6 (LoadingBehavior.cs) 83 138. > Hinzufgen/Lschen des Adorners aus dem dazugehrigen AdornerLayerImplementieren einer Behavior 5/6 (LoadingBehavior.cs) 84 139. > LoadingBehavior zum gewnschten Element hinzufgenImplementieren einer Behavior 6/6 (MainView.xaml) 85 140. > Binding an ViewModel PropertyViewModel Kommunikation (DataTemplates.xaml) 86 141. LOADING INDICATOR ANALYSEView ModelPropertyBindingIsLoadingBeliebiger ContentLoadingContent LoadingTemplate LoadingDataContext87 142. BEHAVIOR VS. ATTACHED PROPERTIES88 143. LOADING INDICATOR BEHAVIOR VS. ATTACHED PROPERTIESAttachedProperties Da AttachedProperties statisch angelegt werden, sollten sie nur zur: weiteren Eigenschaftsbeschreibung (Watermark, CornerRadius usw.) oder zur Realisierung berschaubarer Zusatzfunktionalitt (ClearCommand) verwendet werden. Nachteil Referenz Problem89 144. LOADING INDICATOR BEHAVIOR VS. ATTACHED PROPERTIESBehavior Behaviors hingegen bieten die Mglichkeit komplexeren Code in eine wiederverwendbare Klassen zu kapseln (LoadingBehavior) Mittels AssociatedObject, AssociatedType, OnAttached(), OnDetaching() mglichst groe Flexibilitt und Komfort.90 145. DA WAR DOCH NOCH WAS...91 146. PointChart 147. FAZIT93 148. FAZITFazit Denken Sie an einen benutzer-zentrierten Designprozess Schtzen Sie gutes UI Development Reizen Sie die Mglichkeiten von WPF aus! (Keine halben Sachen) Legen Sie Wert auf Struktur und Konsistenz whrend der Entwicklung94 149. FRAGEN?95 150. VIELEN DANK. 151. VIELEN DANK.www.ergosign.de [email protected] GmbH Europaallee 12 66113 Saarbrcken GermanyErgosign GmbH Bernhard-Nocht-Strae 109 20359 Hamburg GermanyErgosign GmbH Adams-Lehmann-Strae 44 80797 Mnchen GermanyErgosign Switzerland AG Badenerstrasse 808 8048 Zrich SwitzerlandT +49 681 988412-0 F +49 681 988412-10T +49 40 3179868-0 F +49 40 3179868-10T +49 89 6890607-0 F +49 89 6890607-10T +41 44 54293-04 F +41 44 54293-07 152. Ein benutzerzentrierter Prozess ist Voraussetzung fr das Design einer positiven User Experience.