WPF UI DEVELOPMENT BEST PRACTICES (EXTENDED EDITION)David C. ThömmesSoftware EngineerLead Software Engineering Standardsth...
WPF = BESSERE & SCHÖNERE UI‘S2
WPF = BESSERE & SCHÖNERE UI‘S4
WPF = BESSERE & SCHÖNERE UI‘S4FAILED
PROZESSE5
PROZESSE USER CENTERED DESIGN6
DEVELOPSPECIFYVALIDATEDESIGNANALYSEPROZESSE USER CENTERED DESIGN6
ANALYSEScoping & IdeationUser ResearchPersonas & SzenarienKontextuelle AnalyseExpert ReviewsBenchmarkingUsability-Vergleic...
Kontextuelle AnalyseBeobachtungen und semistrukturierteInterviews bei Endanwendern vor Ort.
DESIGNKonzeptionelles DesignGrundlayout und Navigationskonzept anhand vonWireframesVisuelles DesignÜberführung der Wirefra...
Konzeptionelles DesignEin ganzheitlich optimiertesBedienkonzept bildet die Eckpfeiler desUser Interface.
Visuelles DesignNach einem Stilfindungsprozess wirdanhand der erarbeiteten Vorgaben einansprechendes Visuelles Designentwi...
PrototypingPrototypen sind in verschiedenenPhasen der Gestaltung von Bedeutung,beispielsweise im Rahmen von User-und Task-...
VALIDATEUsability TestingUsability LaborInformelles TestingExpert ReviewsModellbasierte Analysen
Usability TestingEin Usability Test mit repräsentativenEndanwendern liefert entscheidendeHinweise zur Optimierung eines Us...
SPECIFYDesign ManualStyle GuideUI ToolboxInteraktiver Styleguide
Design ManualEin Design Manual fasst die wichtigsten Design-Entscheidungen zusammen und verzichtet aufdie Spezifikationen ...
PROZESSE USER CENTERED DESIGNSpezifikation17
PROZESSE USER CENTERED DESIGNSpezifikation17wtf? :-D
PROZESSE DEKLARATIVE PROGRAMMIERUNGReminder - Deklarative Programmierung mit XAML,Styling, Templates...18Designer XAMLDeve...
PROZESSE MODEL VIEW VIEWMODELReminder - Model View ViewModel - Klare TrennungVisualisierung & Logik19Präsentation XAML+Cod...
PROZESSE ABER WAS SIND DIE PROBLEME?ProblemeKomplexität und Umfang der Dokumente (Style Guide, etc.)Interpretationsfreiräu...
PROZESSE ABER WAS SIND DIE PROBLEME?UI Developer als SchlüsselelementLösungRolle „UI Developer“ mit eigener Wissensbasis f...
PROZESSE UI DEVELOPMENT IN DER ANWENDUNGSARCHITEKTUR22PräsentationDatenInteraktionDatenmanagementGeschäftslogik
PROZESSE UI DEVELOPMENT IN DER ANWENDUNGSARCHITEKTUR22PräsentationDatenInteraktionDatenmanagementUI DevelopmentPräsentatio...
PROZESSE FAZITZusammenfassungUI Development muss als eigene Disziplin innerhalb desSoftware Engineerings verstanden werden...
PROZESSE FAZITZusammenfassungUI Development muss als eigene Disziplin innerhalb desSoftware Engineerings verstanden werden...
WPF UI DEVELOPMENT BEST PRACTICES24
WPF UI DEVELOPMENT BEST PRACTICES24JETZT ABER ;-)
RESOURCE MANAGEMENT25
WPF UI DEVELOPMENT RESOURCE MANAGEMENTStrategie26Zentrales „Styling Projekt“ für alle relevanten WPFRessourcenBeinhaltet w...
WPF UI DEVELOPMENT RESOURCE MANAGEMENT27Styling Projekt
WPF UI DEVELOPMENT RESOURCE MANAGEMENT28Feingranulare StrukturStyling Projekt
WPF UI DEVELOPMENT RESOURCE MANAGEMENT29Auslagern von Colors undBrushesColors & Brushes
Farbpalette desUI Designs alsColor Objekteanlegen(Redundanzfrei)
Aus ColorsBrushes erstellen
WPF UI DEVELOPMENT RESOURCE MANAGEMENT32Konstanten, Pfade,Schriftgrößen,Fonts ...Settings & Typo
WPF UI DEVELOPMENT RESOURCE MANAGEMENT33Definition der Schrift-Layer (Größen)Settings & Typo
WPF UI DEVELOPMENT RESOURCE MANAGEMENT34Pro Control-Typ eigenesResource DictionaryStyles
Fokus auf StyleSetter undControl TemplateKompakter XAMLSource-Code
WPF UI DEVELOPMENT RESOURCE MANAGEMENT36Beinhaltet alle Rastergrafiken(PNG, JPEG, ...)Bitmap Graphics
WPF UI DEVELOPMENT RESOURCE MANAGEMENT37Verwaltung als ImageSourceBitmap Graphics
WPF UI DEVELOPMENT RESOURCE MANAGEMENT38DrawingBrushVector Graphics
WPF UI DEVELOPMENT RESOURCE MANAGEMENT39Data Templates ebenfalls auslagernData Templates
WPF UI DEVELOPMENT RESOURCE MANAGEMENT40Ein Resource Dictionary das alleRessourcen beinhaltetKann später in App.xamleingeb...
Reihenfolgebeachten!
WPF UI DEVELOPMENT RESOURCE MANAGEMENT42Einfaches einbinden...Look and Feel Resource Dictionary
WPF UI DEVELOPMENT RESOURCE MANAGEMENT43Look and Feel Resource Dictionary
Default Stylesanbieten!(Kein x:Key)
SHARED RESOURCE DICTIONARY45
WPF UI DEVELOPMENT RESOURCE MANAGEMENT46Shared Resource DictionaryVorsichtBei MergedDictionaries (Speicherfresser)Bewirkt ...
WPF UI DEVELOPMENT RESOURCE MANAGEMENT47Shared Resource Dictionary
WPF UI DEVELOPMENT RESOURCE MANAGEMENT47Shared Resource DictionaryFührt zu Mehrfachanlegung
Shared ResourceDictionary
WPF UI DEVELOPMENT RESOURCE MANAGEMENT49Verwendung wie gewohnt, aber...Shared Resource Dictionary
PreprocessorSymbol zumsteuernverwenden :-)
WPF UI DEVELOPMENT RESOURCE MANAGEMENT53In eigener Assembly auslagern und Namespace Mappingin AssemblyInfo.cs definieren ;...
MODULARE PROJEKTE54
WPF UI DEVELOPMENT RESOURCE MANAGEMENTModulare Projekte55
WPF UI DEVELOPMENT RESOURCE MANAGEMENTModulare Projekte55Strategie„Common Styling“ Projektfür allgemeine RessourcenPro Mod...
USERCONTROL56
Leicht zu erstellen und benutzenStruktur = ContentElement-Referenzierung mit x:NameStyling und Templating möglichCode-Behi...
WPF UI DEVELOPMENT USER CONTROL58View = UserControlModel View ViewModel im Überblick
UserControls dienen der Zusammenfassung undGruppierung mehrerer Controls und Layout Panels.WPF UI DEVELOPMENT USER CONTROL...
WPF UI DEVELOPMENT USER CONTROL60UserControl vs. Custom Control - Gegenüberstellung
USER CONTROL CUSTOM CONTROLTECHNIKLOGIK & VISUALSTYLINGAUFWAND*REUSEXAML + Code Behind Klasse + Style + TemplateHarte Verd...
USER CONTROL CUSTOM CONTROLTECHNIKLOGIK & VISUALSTYLINGAUFWAND*REUSEXAML + Code Behind Klasse + Style + TemplateHarte Verd...
USER CONTROL CUSTOM CONTROLTECHNIKLOGIK & VISUALSTYLINGAUFWAND*REUSEXAML + Code Behind Klasse + Style + TemplateHarte Verd...
USER CONTROL CUSTOM CONTROLTECHNIKLOGIK & VISUALSTYLINGAUFWAND*REUSEXAML + Code Behind Klasse + Style + TemplateHarte Verd...
USER CONTROL CUSTOM CONTROLTECHNIKLOGIK & VISUALSTYLINGAUFWAND*REUSEXAML + Code Behind Klasse + Style + TemplateHarte Verd...
USER CONTROL CUSTOM CONTROLTECHNIKLOGIK & VISUALSTYLINGAUFWAND*REUSEXAML + Code Behind Klasse + Style + TemplateHarte Verd...
DAVIDS TOP 3 „USERCONTROL MISUSED“61
WPF UI DEVELOPMENT USER CONTROL62UserControl - Davids Top 3 „UserControl#1Interaktions-, Geschäfts- und Anwendungslogik mi...
WPF UI DEVELOPMENT USER CONTROL63UserControl - Davids Top 3 „UserControl#2Atomare Controls (Button, CheckBox, ...) in User...
WPF UI DEVELOPMENT USER CONTROL64UserControl - Davids Top 3 „UserControl#3UserControl mit vollem Code-Behind per Copy & Pa...
STYLE VERERBUNG65
WPF UI DEVELOPMENT STYLE VERERBUNG66VererbungVererbung über Property BasedOn des Styles möglichVererbt werden alle per Set...
WPF UI DEVELOPMENT STYLE VERERBUNG67Beispiel an zwei Buttons
WPF UI DEVELOPMENT STYLE VERERBUNG68Beispiel an zwei Buttons
Je mehrTemplateBindingdesto „sauberer“und flexibler derStyle!
WPF UI DEVELOPMENT STYLE VERERBUNG70Beispiel an zwei Buttons
WPF UI DEVELOPMENT STYLE VERERBUNG70Beispiel an zwei ButtonsSecondaryButtonStyle erbt von PrimaryButtonStyleLediglich über...
Wann immermögliche Triggerauf Style Ebene
BASIS STYLE72
WPF UI DEVELOPMENT STYLE VERERBUNG73Basis Style
WPF UI DEVELOPMENT STYLE VERERBUNG73Basis StyleBei Styling ist ein Basis Style für alle UI Elemente empfehlenswertWichtige...
BEISPIEL SEGMENTED RADIOBUTTONS74
WPF UI DEVELOPMENT STYLE VERERBUNG75Beispiel Segmented RadioButtons
Drei Teile notwendigUnterschied BorderThickness, CornerRadiusWPF UI DEVELOPMENT STYLE VERERBUNG75Beispiel Segmented RadioB...
Styling des LeftSegmentedRadioButton
WPF UI DEVELOPMENT STYLE VERERBUNG77Beispiel Segmented RadioButtons - Middle
WPF UI DEVELOPMENT STYLE VERERBUNG77Beispiel Segmented RadioButtons - MiddleTrotz Vererbung müssen wir die Control Templat...
WPF UI DEVELOPMENT STYLE VERERBUNG78Beispiel Segmented RadioButtons - Right
WPF UI DEVELOPMENT STYLE VERERBUNG79Beispiel Segmented RadioButtons...
KEINE ANGST VOR CUSTOM CONTROLS!80
WPF UI DEVELOPMENT CUSTOM CONTROLS81Oh oh Custom ControlsAbleitung von einer konkreten Klasse != UserControlStyling- und T...
WPF UI DEVELOPMENT CUSTOM CONTROLS82AnatomieCustomControlsLoaded /UnloadedRoutedCommandsRoutedEventsDependencyPropertiesOn...
Nur Propertieshinzufügen :-)
TemplateBindingan die neuenPropertiesmöglich
WPF UI DEVELOPMENT CUSTOM CONTROLS86Das Beispiel mit den Extended Radio Buttons
WPF UI DEVELOPMENT CUSTOM CONTROLS86Das Beispiel mit den Extended Radio ButtonsKein kopieren der Control Template notwendi...
WPF UI DEVELOPMENT CUSTOM CONTROLS87Das Beispiel mit den Extended Radio Buttons
WPF UI DEVELOPMENT CUSTOM CONTROLS88EffizienzgewinnSource-Code Schnipsel für Properties :-)
LEICHTGEWICHTIG89
WPF UI DEVELOPMENT CUSTOM CONTROLS90Counter, wird an diversen Stellen im UI verwendet...Leichtgewichtig... :-)
CUSTOM LAYOUT CONTAINER91
WPF UI DEVELOPMENT CUSTOM CONTROLS92Custom Layout ContainerStrategieLayout und Design Patterns als Custom Controls abbilde...
WPF UI DEVELOPMENT CUSTOM CONTROLS93Custom Layout Container
ProblemKomplexes Layout erhöht die Gefahr vonInkonsistenzen während der UI Entwicklung
WPF UI DEVELOPMENT CUSTOM CONTROLS100EigeneItem Wrapperverwenden :-)Custom Layout Container - Überschreiben MethodenItemsC...
WPF UI DEVELOPMENT CUSTOM CONTROLS101Custom Layout ContainerVorteilVerhindern, dass Developer UI zerstören ;-)XAML Code wi...
EFFEKTE102
WPF UI DEVELOPMENT EFFEKTE103Die Wahrheit über Effekte...Effekte (Basisklasse Effect)Blur und DropShadowPerformance-hungri...
WPF UI DEVELOPMENT EFFEKTE104Was tun?StrategieEffekte mit Custom Controls simulierenRectangle, Border & Co. in Kombination...
EFFEKTE BEISPIEL CUSTOM CONTROL105
WPF UI DEVELOPMENT EFFEKTE106Beispiel Drop Shadow per Custom Control
WPF UI DEVELOPMENT EFFEKTEBeispiel Drop Shadow per Custom Control107
WPF UI DEVELOPMENT EFFEKTEBeispiel Drop Shadow per Custom Control107Leichtgewichtiges CustomControlNur Properties ohne Log...
NurProperties :-)
Grid mit zweiTextBlöcken
WPF UI DEVELOPMENT EFFEKTE111Beispiel Drop Shadow per Custom ControlTranslateTransform auf „ShadowText“Werte über Properti...
WPF UI DEVELOPMENT EFFEKTE112Beispiel Drop Shadow per Custom Control
WPF UI DEVELOPMENT EFFEKTE113Beispiel Drop Shadow per Custom Control
WPF UI DEVELOPMENT EFFEKTE114Beispiel Drop Shadow per Custom Control
EFFEKTE BEISPIEL RECTANGLE115
WPF UI DEVELOPMENT EFFEKTE116Tabs mit SchattenBeispiel Drop Shadow per Rectangle
WPF UI DEVELOPMENT EFFEKTE117Rectangle mit LinearGradientBrushBeispiel Drop Shadow per Rectangle
WPF UI DEVELOPMENT EFFEKTE118Beispiel Drop Shadow per Rectangle
WPF UI DEVELOPMENT EFFEKTE119Mit Alpha Wert der Farbe arbeitenBeispiel Drop Shadow per Rectangle
XAML KONVENTIONEN120
WPF UI DEVELOPMENT XAML KONVENTIONEN121Warum?Lesbarkeit des Source-Codes erhöhenZusammenarbeit erleichternPflege und Wartu...
WPF UI DEVELOPMENT XAML KONVENTIONEN122XAML!AllgemeinJede Stufe der Hierarchie (UI) einrückenx:Name oder x:Key Attribute a...
ERWEITERTE ATTRIBUT FORMATIERUNG123
WPF UI DEVELOPMENT XAML KONVENTIONEN124Erweiterte Attribut FormatierungAttribute eines Elementes in jeweils einer separate...
ÜberblickLeichtes Scannen für Auge
Blend...Formatierung?Reihenfolge?
WPF UI DEVELOPMENT XAML KONVENTIONEN127Erweiterte Attribut FormatierungAnwenden beiElemente bzw. Controls die als Content ...
WPF UI DEVELOPMENT XAML KONVENTIONEN128Erweiterte Attribut FormatierungAusnahmenSetterTriggerColorsBrushes...Nicht für Kon...
Failed O_oAuge bleibt bei jeder Zeile an dementsprechenden Value Attribut "hängen"
XAML NAMENSKONVENTIONEN130
WPF UI DEVELOPMENT XAML KONVENTIONEN131XAML NamenskonventionenAllgemein„PascalCase“Buchstaben und ZahlenBeispiel: <Individ...
PERFORMANCE TOP 10132
WPF UI DEVELOPMENT PERFORMANCE TOP 101335/10VirtualizingVirtualizingStackPanel bei ItemsControls verwenden + Virtualizatio...
WPF UI DEVELOPMENT PERFORMANCE TOP 1013410/10!Shared Resource Dictionaries verwendenSchützt vor mehrfachen Allokation der ...
WIE WERDE ICH EIN GUTERWPF UI DEVELOPER? ;-)135
WPF UI DEVELOPMENT WIE WERDE ICH EIN GUTER WPF UI DEVELOPER? ;-)136Stufenmodell
WPF UI DEVELOPMENT WIE WERDE ICH EIN GUTER WPF UI DEVELOPER? ;-)136Design Basics Designer & UI Developer WorkflowUsability ...
WPF UI DEVELOPMENT WIE WERDE ICH EIN GUTER WPF UI DEVELOPER? ;-)136Design Basics Designer & UI Developer WorkflowUsability ...
WPF UI DEVELOPMENT WIE WERDE ICH EIN GUTER WPF UI DEVELOPER? ;-)136Design Basics Designer & UI Developer WorkflowUsability ...
WPF UI DEVELOPMENT WIE WERDE ICH EIN GUTER WPF UI DEVELOPER? ;-)136Design Basics Designer & UI Developer WorkflowUsability ...
FAZIT137
FAZITFAZITDenken Sie an einen benutzer-zentrierten DesignprozessSchätzen Sie gutes UI DevelopmentReizen Sie die Möglichkei...
FRAGEN? :-)139
VIELEN DANK!140
Ein benutzerzentrierterProzess ist Voraussetzung fürdas Design einer positivenUser Experience.
Ergosign-wpf-ui-development-best-practices-dotnet
Ergosign-wpf-ui-development-best-practices-dotnet
Ergosign-wpf-ui-development-best-practices-dotnet
Ergosign-wpf-ui-development-best-practices-dotnet
Ergosign-wpf-ui-development-best-practices-dotnet
Ergosign-wpf-ui-development-best-practices-dotnet
Ergosign-wpf-ui-development-best-practices-dotnet
Ergosign-wpf-ui-development-best-practices-dotnet
Ergosign-wpf-ui-development-best-practices-dotnet
Ergosign-wpf-ui-development-best-practices-dotnet
Ergosign-wpf-ui-development-best-practices-dotnet
Ergosign-wpf-ui-development-best-practices-dotnet
Ergosign-wpf-ui-development-best-practices-dotnet
Ergosign-wpf-ui-development-best-practices-dotnet
Ergosign-wpf-ui-development-best-practices-dotnet
Ergosign-wpf-ui-development-best-practices-dotnet
Nächste SlideShare
Wird geladen in …5
×

Ergosign-wpf-ui-development-best-practices-dotnet

10.291 Aufrufe

Veröffentlicht am

Follow our Experts: https://twitter.com/davidcthoemmes - https://twitter.com/ergosign

0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
10.291
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
6.679
Aktionen
Geteilt
0
Downloads
81
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Ergosign-wpf-ui-development-best-practices-dotnet

  1. 1. WPF UI DEVELOPMENT BEST PRACTICES (EXTENDED EDITION)David C. ThömmesSoftware EngineerLead Software Engineering Standardsthoemmes@ergosign.deErgosign GmbH
  2. 2. WPF = BESSERE & SCHÖNERE UI‘S2
  3. 3. WPF = BESSERE & SCHÖNERE UI‘S4
  4. 4. WPF = BESSERE & SCHÖNERE UI‘S4FAILED
  5. 5. PROZESSE5
  6. 6. PROZESSE USER CENTERED DESIGN6
  7. 7. DEVELOPSPECIFYVALIDATEDESIGNANALYSEPROZESSE USER CENTERED DESIGN6
  8. 8. ANALYSEScoping & IdeationUser ResearchPersonas & SzenarienKontextuelle AnalyseExpert ReviewsBenchmarkingUsability-Vergleich mit Wettbewerbsprodukten
  9. 9. Kontextuelle AnalyseBeobachtungen und semistrukturierteInterviews bei Endanwendern vor Ort.
  10. 10. DESIGNKonzeptionelles DesignGrundlayout und Navigationskonzept anhand vonWireframesVisuelles DesignÜberführung der Wireframes in ein Visuelles DesignIcon DesignPrototypingVon Click Dummies bis hin zu High-Fidelity-Prototypen
  11. 11. Konzeptionelles DesignEin ganzheitlich optimiertesBedienkonzept bildet die Eckpfeiler desUser Interface.
  12. 12. Visuelles DesignNach einem Stilfindungsprozess wirdanhand der erarbeiteten Vorgaben einansprechendes Visuelles Designentwickelt.
  13. 13. PrototypingPrototypen sind in verschiedenenPhasen der Gestaltung von Bedeutung,beispielsweise im Rahmen von User-und Task-Analyse, Design, UsabilityTesting oder zur unterstützendenDokumentation bei der Spezifikation.
  14. 14. VALIDATEUsability TestingUsability LaborInformelles TestingExpert ReviewsModellbasierte Analysen
  15. 15. Usability TestingEin Usability Test mit repräsentativenEndanwendern liefert entscheidendeHinweise zur Optimierung eines UserInterface.
  16. 16. SPECIFYDesign ManualStyle GuideUI ToolboxInteraktiver Styleguide
  17. 17. Design ManualEin Design Manual fasst die wichtigsten Design-Entscheidungen zusammen und verzichtet aufdie Spezifikationen aller einzelnenKontrollelemente.
  18. 18. PROZESSE USER CENTERED DESIGNSpezifikation17
  19. 19. PROZESSE USER CENTERED DESIGNSpezifikation17wtf? :-D
  20. 20. PROZESSE DEKLARATIVE PROGRAMMIERUNGReminder - Deklarative Programmierung mit XAML,Styling, Templates...18Designer XAMLDeveloperButton
  21. 21. PROZESSE MODEL VIEW VIEWMODELReminder - Model View ViewModel - Klare TrennungVisualisierung & Logik19Präsentation XAML+Code BehindInteraktionslogikDaten & GeschäftslogikViewViewModelModelData Binding
  22. 22. PROZESSE ABER WAS SIND DIE PROBLEME?ProblemeKomplexität und Umfang der Dokumente (Style Guide, etc.)Interpretationsfreiräume des Software EngineersKnow-how zur Realisierung fehltAllgemein UI Development unterbewertet20
  23. 23. PROZESSE ABER WAS SIND DIE PROBLEME?UI Developer als SchlüsselelementLösungRolle „UI Developer“ mit eigener Wissensbasis forcierenFokus UI DevelopmentZwischen UX Designer und Software Engineer aktivangesiedeltSchicht Präsentation und InteraktionStyling, Templating, Layouting, Views, ViewModels, CustomControl Development...21
  24. 24. PROZESSE UI DEVELOPMENT IN DER ANWENDUNGSARCHITEKTUR22PräsentationDatenInteraktionDatenmanagementGeschäftslogik
  25. 25. PROZESSE UI DEVELOPMENT IN DER ANWENDUNGSARCHITEKTUR22PräsentationDatenInteraktionDatenmanagementUI DevelopmentPräsentationInteraktionGeschäftslogik
  26. 26. PROZESSE FAZITZusammenfassungUI Development muss als eigene Disziplin innerhalb desSoftware Engineerings verstanden werden!UX Design ist die Basis für UI DevelopmentEin benutzer-zentrierter Designprozess ist essentiell!23
  27. 27. PROZESSE FAZITZusammenfassungUI Development muss als eigene Disziplin innerhalb desSoftware Engineerings verstanden werden!UX Design ist die Basis für UI DevelopmentEin benutzer-zentrierter Designprozess ist essentiell!23User Centered Design+ Software Engineering+ UI Development= Application! ;-)
  28. 28. WPF UI DEVELOPMENT BEST PRACTICES24
  29. 29. WPF UI DEVELOPMENT BEST PRACTICES24JETZT ABER ;-)
  30. 30. RESOURCE MANAGEMENT25
  31. 31. WPF UI DEVELOPMENT RESOURCE MANAGEMENTStrategie26Zentrales „Styling Projekt“ für alle relevanten WPFRessourcenBeinhaltet wohldefinierte Struktur aus Resource DictionariesPflege, Wartbarkeit und Zusammenarbeit vereinfachenVermeidung unnötiger Inkonsistenzen und Redundanzen
  32. 32. WPF UI DEVELOPMENT RESOURCE MANAGEMENT27Styling Projekt
  33. 33. WPF UI DEVELOPMENT RESOURCE MANAGEMENT28Feingranulare StrukturStyling Projekt
  34. 34. WPF UI DEVELOPMENT RESOURCE MANAGEMENT29Auslagern von Colors undBrushesColors & Brushes
  35. 35. Farbpalette desUI Designs alsColor Objekteanlegen(Redundanzfrei)
  36. 36. Aus ColorsBrushes erstellen
  37. 37. WPF UI DEVELOPMENT RESOURCE MANAGEMENT32Konstanten, Pfade,Schriftgrößen,Fonts ...Settings & Typo
  38. 38. WPF UI DEVELOPMENT RESOURCE MANAGEMENT33Definition der Schrift-Layer (Größen)Settings & Typo
  39. 39. WPF UI DEVELOPMENT RESOURCE MANAGEMENT34Pro Control-Typ eigenesResource DictionaryStyles
  40. 40. Fokus auf StyleSetter undControl TemplateKompakter XAMLSource-Code
  41. 41. WPF UI DEVELOPMENT RESOURCE MANAGEMENT36Beinhaltet alle Rastergrafiken(PNG, JPEG, ...)Bitmap Graphics
  42. 42. WPF UI DEVELOPMENT RESOURCE MANAGEMENT37Verwaltung als ImageSourceBitmap Graphics
  43. 43. WPF UI DEVELOPMENT RESOURCE MANAGEMENT38DrawingBrushVector Graphics
  44. 44. WPF UI DEVELOPMENT RESOURCE MANAGEMENT39Data Templates ebenfalls auslagernData Templates
  45. 45. WPF UI DEVELOPMENT RESOURCE MANAGEMENT40Ein Resource Dictionary das alleRessourcen beinhaltetKann später in App.xamleingebunden werdenLook and Feel Resource Dictionary
  46. 46. Reihenfolgebeachten!
  47. 47. WPF UI DEVELOPMENT RESOURCE MANAGEMENT42Einfaches einbinden...Look and Feel Resource Dictionary
  48. 48. WPF UI DEVELOPMENT RESOURCE MANAGEMENT43Look and Feel Resource Dictionary
  49. 49. Default Stylesanbieten!(Kein x:Key)
  50. 50. SHARED RESOURCE DICTIONARY45
  51. 51. WPF UI DEVELOPMENT RESOURCE MANAGEMENT46Shared Resource DictionaryVorsichtBei MergedDictionaries (Speicherfresser)Bewirkt mehrfache Allokation der Ressourcen!Kritisch bei modularen Projekten mit Ressourcen„Verlinkung“LösungShared Resource Dictionary
  52. 52. WPF UI DEVELOPMENT RESOURCE MANAGEMENT47Shared Resource Dictionary
  53. 53. WPF UI DEVELOPMENT RESOURCE MANAGEMENT47Shared Resource DictionaryFührt zu Mehrfachanlegung
  54. 54. Shared ResourceDictionary
  55. 55. WPF UI DEVELOPMENT RESOURCE MANAGEMENT49Verwendung wie gewohnt, aber...Shared Resource Dictionary
  56. 56. PreprocessorSymbol zumsteuernverwenden :-)
  57. 57. WPF UI DEVELOPMENT RESOURCE MANAGEMENT53In eigener Assembly auslagern und Namespace Mappingin AssemblyInfo.cs definieren ;-)Shared Resource Dictionary
  58. 58. MODULARE PROJEKTE54
  59. 59. WPF UI DEVELOPMENT RESOURCE MANAGEMENTModulare Projekte55
  60. 60. WPF UI DEVELOPMENT RESOURCE MANAGEMENTModulare Projekte55Strategie„Common Styling“ Projektfür allgemeine RessourcenPro Module spezifisches„Styling Projekt“„Lazy load“ spezifischerRessourcen lokal in View
  61. 61. USERCONTROL56
  62. 62. Leicht zu erstellen und benutzenStruktur = ContentElement-Referenzierung mit x:NameStyling und Templating möglichCode-Behind (Blend, Visual Studio)WPF UI DEVELOPMENT USER CONTROL57UserControl
  63. 63. WPF UI DEVELOPMENT USER CONTROL58View = UserControlModel View ViewModel im Überblick
  64. 64. UserControls dienen der Zusammenfassung undGruppierung mehrerer Controls und Layout Panels.WPF UI DEVELOPMENT USER CONTROL59UserControl
  65. 65. WPF UI DEVELOPMENT USER CONTROL60UserControl vs. Custom Control - Gegenüberstellung
  66. 66. USER CONTROL CUSTOM CONTROLTECHNIKLOGIK & VISUALSTYLINGAUFWAND*REUSEXAML + Code Behind Klasse + Style + TemplateHarte Verdrahtung GetrenntHart FlexibelWenig Etwas aufwändigerSchlecht GutWPF UI DEVELOPMENT USER CONTROL60UserControl vs. Custom Control - Gegenüberstellung
  67. 67. USER CONTROL CUSTOM CONTROLTECHNIKLOGIK & VISUALSTYLINGAUFWAND*REUSEXAML + Code Behind Klasse + Style + TemplateHarte Verdrahtung GetrenntHart FlexibelWenig Etwas aufwändigerSchlecht GutWPF UI DEVELOPMENT USER CONTROL60UserControl vs. Custom Control - Gegenüberstellung
  68. 68. USER CONTROL CUSTOM CONTROLTECHNIKLOGIK & VISUALSTYLINGAUFWAND*REUSEXAML + Code Behind Klasse + Style + TemplateHarte Verdrahtung GetrenntHart FlexibelWenig Etwas aufwändigerSchlecht GutWPF UI DEVELOPMENT USER CONTROL60UserControl vs. Custom Control - Gegenüberstellung
  69. 69. USER CONTROL CUSTOM CONTROLTECHNIKLOGIK & VISUALSTYLINGAUFWAND*REUSEXAML + Code Behind Klasse + Style + TemplateHarte Verdrahtung GetrenntHart FlexibelWenig Etwas aufwändigerSchlecht GutWPF UI DEVELOPMENT USER CONTROL60UserControl vs. Custom Control - Gegenüberstellung
  70. 70. USER CONTROL CUSTOM CONTROLTECHNIKLOGIK & VISUALSTYLINGAUFWAND*REUSEXAML + Code Behind Klasse + Style + TemplateHarte Verdrahtung GetrenntHart FlexibelWenig Etwas aufwändigerSchlecht GutWPF UI DEVELOPMENT USER CONTROL60UserControl vs. Custom Control - Gegenüberstellung
  71. 71. USER CONTROL CUSTOM CONTROLTECHNIKLOGIK & VISUALSTYLINGAUFWAND*REUSEXAML + Code Behind Klasse + Style + TemplateHarte Verdrahtung GetrenntHart FlexibelWenig Etwas aufwändigerSchlecht GutWPF UI DEVELOPMENT USER CONTROL60UserControl vs. Custom Control - Gegenüberstellung
  72. 72. DAVIDS TOP 3 „USERCONTROL MISUSED“61
  73. 73. WPF UI DEVELOPMENT USER CONTROL62UserControl - Davids Top 3 „UserControl#1Interaktions-, Geschäfts- und Anwendungslogik mit Model-Layer-Zugriffen im Code-Behind des UserControls
  74. 74. WPF UI DEVELOPMENT USER CONTROL63UserControl - Davids Top 3 „UserControl#2Atomare Controls (Button, CheckBox, ...) in UserControlseinzeln kapseln nur um Code-Behind verwenden zu können
  75. 75. WPF UI DEVELOPMENT USER CONTROL64UserControl - Davids Top 3 „UserControl#3UserControl mit vollem Code-Behind per Copy & Pastevervielfältigen, weil die Visualisierung unterschiedlich ist(Content = Struktur, Styling?)
  76. 76. STYLE VERERBUNG65
  77. 77. WPF UI DEVELOPMENT STYLE VERERBUNG66VererbungVererbung über Property BasedOn des Styles möglichVererbt werden alle per Setter definierten PropertiesÜberschreiben eines Setters jeder Zeit möglichStyle Vererbung sollte aktiv genutzt werden!Tabs, Buttons, DataGrid…
  78. 78. WPF UI DEVELOPMENT STYLE VERERBUNG67Beispiel an zwei Buttons
  79. 79. WPF UI DEVELOPMENT STYLE VERERBUNG68Beispiel an zwei Buttons
  80. 80. Je mehrTemplateBindingdesto „sauberer“und flexibler derStyle!
  81. 81. WPF UI DEVELOPMENT STYLE VERERBUNG70Beispiel an zwei Buttons
  82. 82. WPF UI DEVELOPMENT STYLE VERERBUNG70Beispiel an zwei ButtonsSecondaryButtonStyle erbt von PrimaryButtonStyleLediglich überschreiben von Background, Foreground und IsPressed Trigger(Style Ebene)Kein Kopieren der Template notwendig, kompakter Source-Code ;-)
  83. 83. Wann immermögliche Triggerauf Style Ebene
  84. 84. BASIS STYLE72
  85. 85. WPF UI DEVELOPMENT STYLE VERERBUNG73Basis Style
  86. 86. WPF UI DEVELOPMENT STYLE VERERBUNG73Basis StyleBei Styling ist ein Basis Style für alle UI Elemente empfehlenswertWichtige Setter für SnapsToDevicePixels, OverridesDefaults etc.
  87. 87. BEISPIEL SEGMENTED RADIOBUTTONS74
  88. 88. WPF UI DEVELOPMENT STYLE VERERBUNG75Beispiel Segmented RadioButtons
  89. 89. Drei Teile notwendigUnterschied BorderThickness, CornerRadiusWPF UI DEVELOPMENT STYLE VERERBUNG75Beispiel Segmented RadioButtons
  90. 90. Styling des LeftSegmentedRadioButton
  91. 91. WPF UI DEVELOPMENT STYLE VERERBUNG77Beispiel Segmented RadioButtons - Middle
  92. 92. WPF UI DEVELOPMENT STYLE VERERBUNG77Beispiel Segmented RadioButtons - MiddleTrotz Vererbung müssen wir die Control Template anpassen & kopierenCornerRadius bei Border und Lichtkante :-(
  93. 93. WPF UI DEVELOPMENT STYLE VERERBUNG78Beispiel Segmented RadioButtons - Right
  94. 94. WPF UI DEVELOPMENT STYLE VERERBUNG79Beispiel Segmented RadioButtons...
  95. 95. KEINE ANGST VOR CUSTOM CONTROLS!80
  96. 96. WPF UI DEVELOPMENT CUSTOM CONTROLS81Oh oh Custom ControlsAbleitung von einer konkreten Klasse != UserControlStyling- und Templating-MöglichkeitenVisueller Aufbau im ControlTemplateDefault Style möglich (Generic.xaml)Zusammenfassung in einer Control Library möglichElement-Referenzierung über OnApplyTemplate()
  97. 97. WPF UI DEVELOPMENT CUSTOM CONTROLS82AnatomieCustomControlsLoaded /UnloadedRoutedCommandsRoutedEventsDependencyPropertiesOnApplyTemplateCustomControlLibrary +Generic.xamlStyle,Template +Template-BindingBlendabilityAttributeOh oh Custom Controls - Handwerkzeugs...
  98. 98. Nur Propertieshinzufügen :-)
  99. 99. TemplateBindingan die neuenPropertiesmöglich
  100. 100. WPF UI DEVELOPMENT CUSTOM CONTROLS86Das Beispiel mit den Extended Radio Buttons
  101. 101. WPF UI DEVELOPMENT CUSTOM CONTROLS86Das Beispiel mit den Extended Radio ButtonsKein kopieren der Control Template notwendig :-)Super kompakter XAML Source-Code ohne RedundanzenNächste Stufe Enum „SegmentPostion“ + Trigger ... ;-)
  102. 102. WPF UI DEVELOPMENT CUSTOM CONTROLS87Das Beispiel mit den Extended Radio Buttons
  103. 103. WPF UI DEVELOPMENT CUSTOM CONTROLS88EffizienzgewinnSource-Code Schnipsel für Properties :-)
  104. 104. LEICHTGEWICHTIG89
  105. 105. WPF UI DEVELOPMENT CUSTOM CONTROLS90Counter, wird an diversen Stellen im UI verwendet...Leichtgewichtig... :-)
  106. 106. CUSTOM LAYOUT CONTAINER91
  107. 107. WPF UI DEVELOPMENT CUSTOM CONTROLS92Custom Layout ContainerStrategieLayout und Design Patterns als Custom Controls abbildenAbstraktion und Identifikation der PatternsIdeenFormularDialog oder WindowMaster/Detail...
  108. 108. WPF UI DEVELOPMENT CUSTOM CONTROLS93Custom Layout Container
  109. 109. ProblemKomplexes Layout erhöht die Gefahr vonInkonsistenzen während der UI Entwicklung
  110. 110. WPF UI DEVELOPMENT CUSTOM CONTROLS100EigeneItem Wrapperverwenden :-)Custom Layout Container - Überschreiben MethodenItemsControl
  111. 111. WPF UI DEVELOPMENT CUSTOM CONTROLS101Custom Layout ContainerVorteilVerhindern, dass Developer UI zerstören ;-)XAML Code wird kompakter und einfacherWiederverwendbarkeit und erhöhte ProduktivitätNachteilAufwändigere Implementierung
  112. 112. EFFEKTE102
  113. 113. WPF UI DEVELOPMENT EFFEKTE103Die Wahrheit über Effekte...Effekte (Basisklasse Effect)Blur und DropShadowPerformance-hungrig daher sparsam verwendenDrittanbieter stellen weitere Effekte bereitBitmap-Effekte (Basisklasse BitmapEffect)Bevel, Emboss, Outer Glow, ...Sollte nicht mehr verwendet werdenSchlechte Performance
  114. 114. WPF UI DEVELOPMENT EFFEKTE104Was tun?StrategieEffekte mit Custom Controls simulierenRectangle, Border & Co. in Kombination mit Gradient Brushnutzen
  115. 115. EFFEKTE BEISPIEL CUSTOM CONTROL105
  116. 116. WPF UI DEVELOPMENT EFFEKTE106Beispiel Drop Shadow per Custom Control
  117. 117. WPF UI DEVELOPMENT EFFEKTEBeispiel Drop Shadow per Custom Control107
  118. 118. WPF UI DEVELOPMENT EFFEKTEBeispiel Drop Shadow per Custom Control107Leichtgewichtiges CustomControlNur Properties ohne LogiknotwendigWichtige PropertiesXOffset & YOffsetShadowBrushText* (Optionen)Idee zwei TextBlöcke inControl Template
  119. 119. NurProperties :-)
  120. 120. Grid mit zweiTextBlöcken
  121. 121. WPF UI DEVELOPMENT EFFEKTE111Beispiel Drop Shadow per Custom ControlTranslateTransform auf „ShadowText“Werte über Properties X & YOffset PropertyPer TemplateBinding Controls anbinden z.B. Text
  122. 122. WPF UI DEVELOPMENT EFFEKTE112Beispiel Drop Shadow per Custom Control
  123. 123. WPF UI DEVELOPMENT EFFEKTE113Beispiel Drop Shadow per Custom Control
  124. 124. WPF UI DEVELOPMENT EFFEKTE114Beispiel Drop Shadow per Custom Control
  125. 125. EFFEKTE BEISPIEL RECTANGLE115
  126. 126. WPF UI DEVELOPMENT EFFEKTE116Tabs mit SchattenBeispiel Drop Shadow per Rectangle
  127. 127. WPF UI DEVELOPMENT EFFEKTE117Rectangle mit LinearGradientBrushBeispiel Drop Shadow per Rectangle
  128. 128. WPF UI DEVELOPMENT EFFEKTE118Beispiel Drop Shadow per Rectangle
  129. 129. WPF UI DEVELOPMENT EFFEKTE119Mit Alpha Wert der Farbe arbeitenBeispiel Drop Shadow per Rectangle
  130. 130. XAML KONVENTIONEN120
  131. 131. WPF UI DEVELOPMENT XAML KONVENTIONEN121Warum?Lesbarkeit des Source-Codes erhöhenZusammenarbeit erleichternPflege und Wartung ermöglichenEffizienzgewinn
  132. 132. WPF UI DEVELOPMENT XAML KONVENTIONEN122XAML!AllgemeinJede Stufe der Hierarchie (UI) einrückenx:Name oder x:Key Attribute als erstes schreibenAttribute nach Zusammengehörigkeit gruppierenWidth, Height, VerticalAlignment, HorizontalAlignment..-
  133. 133. ERWEITERTE ATTRIBUT FORMATIERUNG123
  134. 134. WPF UI DEVELOPMENT XAML KONVENTIONEN124Erweiterte Attribut FormatierungAttribute eines Elementes in jeweils einer separaten ZeileDas erste Attribut steht in der gleichen Zeile wie dasElementAlle nachfolgenden Attribute werden entlang der Vertikalenuntereinander ausgerichtet
  135. 135. ÜberblickLeichtes Scannen für Auge
  136. 136. Blend...Formatierung?Reihenfolge?
  137. 137. WPF UI DEVELOPMENT XAML KONVENTIONEN127Erweiterte Attribut FormatierungAnwenden beiElemente bzw. Controls die als Content einer Templatedefiniert sind (Control Template, Data Template, ...)Elemente bzw. Controls die als Content eines Controls mitCode-Behind definiert sind (UserControl, Window, Page...)Root-Element eines Dokuments und dessen Attribute
  138. 138. WPF UI DEVELOPMENT XAML KONVENTIONEN128Erweiterte Attribut FormatierungAusnahmenSetterTriggerColorsBrushes...Nicht für Konstrukte mit wiederholenden ZeichenkettengeeignetNicht für Konstrukte mit wiederholenden Zeichenkettengeeignet
  139. 139. Failed O_oAuge bleibt bei jeder Zeile an dementsprechenden Value Attribut "hängen"
  140. 140. XAML NAMENSKONVENTIONEN130
  141. 141. WPF UI DEVELOPMENT XAML KONVENTIONEN131XAML NamenskonventionenAllgemein„PascalCase“Buchstaben und ZahlenBeispiel: <Individueller Name><Datentyp>BeispieleWhiteColor, ButtonBackgroundBrush, MainGrid, LoadButton,PrimaryButtonStyle, CheckBoxStyle, ...
  142. 142. PERFORMANCE TOP 10132
  143. 143. WPF UI DEVELOPMENT PERFORMANCE TOP 101335/10VirtualizingVirtualizingStackPanel bei ItemsControls verwenden + VirtualizationMode="Recycling"Rendert nur was im ViewPort sichtbar ist, Wrapper z.B. ListBoxItem werdenwiederverwendetEvent Handler LeaksEvent Handler immer abmelden, auf jedes += immer -=EinfrierenPresentationOptions:Freeze="true" auf Freezable Objekten setzenDadurch kein Overhead durch Change EventsStaticResource über DynamicResourceWenn keine Änderungen der Ressource zur Laufzeit stattfindendann immer per StaticResource referenzierenAbleitung: BindingMode OneTime bei Data BindingSimples XAMLEinfache Layouts, wenig Elemente, keine tiefen Verschachtelungen in Content oderTemplates
  144. 144. WPF UI DEVELOPMENT PERFORMANCE TOP 1013410/10!Shared Resource Dictionaries verwendenSchützt vor mehrfachen Allokation der RessourcenBei Bedarf „lazy load“ von spezifischen Ressourcen lokal in ViewData Binding optimierenUngültige Bindings „System.Windows.Data Error“ aufspüren und entfernenBindings immer wieder freigeben BindingOperations.ClearBinding()EffekteSollten vermieden werdenBesser faken mit Rectangle, Border & Co. in Kombination mit BrushesTrigger über VSMWeniger Overhead da kein Storyboard gestartet werden mussMain UI Thread nicht blockierenArbeiten mit BackgroundWorker, Threads oder async z.B. AsyncDelegateCommand„responsive UI“
  145. 145. WIE WERDE ICH EIN GUTERWPF UI DEVELOPER? ;-)135
  146. 146. WPF UI DEVELOPMENT WIE WERDE ICH EIN GUTER WPF UI DEVELOPER? ;-)136Stufenmodell
  147. 147. WPF UI DEVELOPMENT WIE WERDE ICH EIN GUTER WPF UI DEVELOPER? ;-)136Design Basics Designer & UI Developer WorkflowUsability Engineering BasicsFundamentStufenmodell
  148. 148. WPF UI DEVELOPMENT WIE WERDE ICH EIN GUTER WPF UI DEVELOPER? ;-)136Design Basics Designer & UI Developer WorkflowUsability Engineering BasicsFundamentStufe 1 Styles AnimationenControl TemplatesXAML Resource ManagementBlend Controls & LayoutTemplate Binding Trigger & VSMData Binding BasicsStufenmodell
  149. 149. WPF UI DEVELOPMENT WIE WERDE ICH EIN GUTER WPF UI DEVELOPER? ;-)136Design Basics Designer & UI Developer WorkflowUsability Engineering BasicsFundamentStufe 1 Styles AnimationenControl TemplatesXAML Resource ManagementBlend Controls & LayoutTemplate Binding Trigger & VSMData Binding BasicsStufe 2 BehaviorsAdornerData Binding AdvancedMVVMData Templates Attached PropertiesVisual Studio.NETApplication FrameworksStufenmodell
  150. 150. WPF UI DEVELOPMENT WIE WERDE ICH EIN GUTER WPF UI DEVELOPER? ;-)136Design Basics Designer & UI Developer WorkflowUsability Engineering BasicsFundamentStufe 1 Styles AnimationenControl TemplatesXAML Resource ManagementBlend Controls & LayoutTemplate Binding Trigger & VSMData Binding BasicsStufe 2 BehaviorsAdornerData Binding AdvancedMVVMData Templates Attached PropertiesVisual Studio.NETApplication FrameworksStufe 3 Custom Control Development Custom Layout Panels MiscellaneousStufenmodell
  151. 151. FAZIT137
  152. 152. FAZITFAZITDenken Sie an einen benutzer-zentrierten DesignprozessSchätzen Sie gutes UI DevelopmentReizen Sie die Möglichkeiten von WPF aus! (Keine halbenSachen)Legen Sie Wert auf Struktur und Konsistenz während derEntwicklung138
  153. 153. FRAGEN? :-)139
  154. 154. VIELEN DANK!140
  155. 155. Ein benutzerzentrierterProzess ist Voraussetzung fürdas Design einer positivenUser Experience.

×