WPF UI Development Unchained

download WPF UI Development Unchained

of 155

  • date post

    17-Nov-2014
  • Category

    Technology

  • view

    3.752
  • 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 thoemmes@ergosign.deAndr Lanninger UI DeveloperErgosign GmbHErgosign GmbHwww.davidchristian.delanninger@ergosign.de

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. > Schl