Ergosign-wpf-ui-development-best-practices-dotnet
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 6,997 views

 

Statistics

Views

Total Views
6,997
Slideshare-icon Views on SlideShare
3,367
Embed Views
3,630

Actions

Likes
0
Downloads
42
Comments
0

37 Embeds 3,630

http://www.ergosign.de 1716
http://localhost 535
http://ergosign.de 468
http://www.davidchristian.de 404
http://davidchristian.de 173
http://user-centered-design.net 68
http://www.hci-hub.de 67
http://www.gui-dance.com 28
http://www.ergosign.ch 24
http://hci-hub.de 23
http://gui-dance.com 20
http://usability-engineering.org 20
http://usability-engineering.net 16
http://192.168.0.178 16
http://user-centred-design.com 9
http://ergosign.ch 6
http://software-ergonomics.ergosign.net 4
http://ergosing.de 3
http://shaping-interaction.com 3
http://www.theentireworldiscountingonyou.de 3
http://ergosign.net 2
http://hotspot.server 2
http://www.antetype.com 2
http://usability-engineering.de 2
http://www.ergosign.at 2
http://next-generation-hmi.com 2
http://usability.ergosign.net 2
http://www.shapinginteraction.com 1
http://www.user-centered-design.net 1
http://www.user-centred-design.com 1
http://ergosign-technologies.com 1
http://ergo-score.com 1
http://192.168.0.107 1
http://192.168.0.69 1
http://software-ergonomie.ergosign.de 1
http://usability.ergosign.de 1
http://www.ergoscore.de 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • WPF UI DEVELOPMENT BEST PRACTICES (EXTENDED EDITION)David C. ThömmesSoftware EngineerLead Software Engineering Standardsthoemmes@ergosign.deErgosign GmbH
    • 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-Vergleich mit Wettbewerbsprodukten
    • Kontextuelle AnalyseBeobachtungen und semistrukturierteInterviews bei Endanwendern vor Ort.
    • DESIGNKonzeptionelles DesignGrundlayout und Navigationskonzept anhand vonWireframesVisuelles DesignÜberführung der Wireframes in ein Visuelles DesignIcon DesignPrototypingVon Click Dummies bis hin zu High-Fidelity-Prototypen
    • Konzeptionelles DesignEin ganzheitlich optimiertesBedienkonzept bildet die Eckpfeiler desUser Interface.
    • Visuelles DesignNach einem Stilfindungsprozess wirdanhand der erarbeiteten Vorgaben einansprechendes Visuelles Designentwickelt.
    • 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.
    • VALIDATEUsability TestingUsability LaborInformelles TestingExpert ReviewsModellbasierte Analysen
    • Usability TestingEin Usability Test mit repräsentativenEndanwendern liefert entscheidendeHinweise zur Optimierung eines UserInterface.
    • SPECIFYDesign ManualStyle GuideUI ToolboxInteraktiver Styleguide
    • Design ManualEin Design Manual fasst die wichtigsten Design-Entscheidungen zusammen und verzichtet aufdie Spezifikationen aller einzelnenKontrollelemente.
    • PROZESSE USER CENTERED DESIGNSpezifikation17
    • PROZESSE USER CENTERED DESIGNSpezifikation17wtf? :-D
    • PROZESSE DEKLARATIVE PROGRAMMIERUNGReminder - Deklarative Programmierung mit XAML,Styling, Templates...18Designer XAMLDeveloperButton
    • PROZESSE MODEL VIEW VIEWMODELReminder - Model View ViewModel - Klare TrennungVisualisierung & Logik19Präsentation XAML+Code BehindInteraktionslogikDaten & GeschäftslogikViewViewModelModelData Binding
    • 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
    • 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
    • PROZESSE UI DEVELOPMENT IN DER ANWENDUNGSARCHITEKTUR22PräsentationDatenInteraktionDatenmanagementGeschäftslogik
    • PROZESSE UI DEVELOPMENT IN DER ANWENDUNGSARCHITEKTUR22PräsentationDatenInteraktionDatenmanagementUI DevelopmentPräsentationInteraktionGeschäftslogik
    • 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
    • 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! ;-)
    • 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 wohldefinierte Struktur aus Resource DictionariesPflege, Wartbarkeit und Zusammenarbeit vereinfachenVermeidung unnötiger Inkonsistenzen und Redundanzen
    • 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.xamleingebunden werdenLook and Feel Resource Dictionary
    • 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 mehrfache Allokation der Ressourcen!Kritisch bei modularen Projekten mit Ressourcen„Verlinkung“LösungShared Resource Dictionary
    • 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 ;-)Shared Resource Dictionary
    • MODULARE PROJEKTE54
    • WPF UI DEVELOPMENT RESOURCE MANAGEMENTModulare Projekte55
    • WPF UI DEVELOPMENT RESOURCE MANAGEMENTModulare Projekte55Strategie„Common Styling“ Projektfür allgemeine RessourcenPro Module spezifisches„Styling Projekt“„Lazy load“ spezifischerRessourcen lokal in View
    • USERCONTROL56
    • Leicht zu erstellen und benutzenStruktur = ContentElement-Referenzierung mit x:NameStyling und Templating möglichCode-Behind (Blend, Visual Studio)WPF UI DEVELOPMENT USER CONTROL57UserControl
    • WPF UI DEVELOPMENT USER CONTROL58View = UserControlModel View ViewModel im Überblick
    • UserControls dienen der Zusammenfassung undGruppierung mehrerer Controls und Layout Panels.WPF UI DEVELOPMENT USER CONTROL59UserControl
    • WPF UI DEVELOPMENT USER CONTROL60UserControl vs. Custom Control - Gegenüberstellung
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • DAVIDS TOP 3 „USERCONTROL MISUSED“61
    • WPF UI DEVELOPMENT USER CONTROL62UserControl - Davids Top 3 „UserControl#1Interaktions-, Geschäfts- und Anwendungslogik mit Model-Layer-Zugriffen im Code-Behind des UserControls
    • WPF UI DEVELOPMENT USER CONTROL63UserControl - Davids Top 3 „UserControl#2Atomare Controls (Button, CheckBox, ...) in UserControlseinzeln kapseln nur um Code-Behind verwenden zu können
    • 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?)
    • STYLE VERERBUNG65
    • 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…
    • 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 überschreiben von Background, Foreground und IsPressed Trigger(Style Ebene)Kein Kopieren der Template notwendig, kompakter Source-Code ;-)
    • 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 Setter für SnapsToDevicePixels, OverridesDefaults etc.
    • BEISPIEL SEGMENTED RADIOBUTTONS74
    • WPF UI DEVELOPMENT STYLE VERERBUNG75Beispiel Segmented RadioButtons
    • Drei Teile notwendigUnterschied BorderThickness, CornerRadiusWPF UI DEVELOPMENT STYLE VERERBUNG75Beispiel Segmented RadioButtons
    • 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 Template anpassen & kopierenCornerRadius bei Border und Lichtkante :-(
    • 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 Templating-MöglichkeitenVisueller Aufbau im ControlTemplateDefault Style möglich (Generic.xaml)Zusammenfassung in einer Control Library möglichElement-Referenzierung über OnApplyTemplate()
    • WPF UI DEVELOPMENT CUSTOM CONTROLS82AnatomieCustomControlsLoaded /UnloadedRoutedCommandsRoutedEventsDependencyPropertiesOnApplyTemplateCustomControlLibrary +Generic.xamlStyle,Template +Template-BindingBlendabilityAttributeOh oh Custom Controls - Handwerkzeugs...
    • 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 notwendig :-)Super kompakter XAML Source-Code ohne RedundanzenNächste Stufe Enum „SegmentPostion“ + Trigger ... ;-)
    • 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 abbildenAbstraktion und Identifikation der PatternsIdeenFormularDialog oder WindowMaster/Detail...
    • 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 MethodenItemsControl
    • 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
    • EFFEKTE102
    • 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
    • WPF UI DEVELOPMENT EFFEKTE104Was tun?StrategieEffekte mit Custom Controls simulierenRectangle, Border & Co. in Kombination mit Gradient Brushnutzen
    • 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 LogiknotwendigWichtige PropertiesXOffset & YOffsetShadowBrushText* (Optionen)Idee zwei TextBlöcke inControl Template
    • NurProperties :-)
    • Grid mit zweiTextBlöcken
    • WPF UI DEVELOPMENT EFFEKTE111Beispiel Drop Shadow per Custom ControlTranslateTransform auf „ShadowText“Werte über Properties X & YOffset PropertyPer TemplateBinding Controls anbinden z.B. Text
    • 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 Wartung ermöglichenEffizienzgewinn
    • 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..-
    • ERWEITERTE ATTRIBUT FORMATIERUNG123
    • 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
    • ÜberblickLeichtes Scannen für Auge
    • Blend...Formatierung?Reihenfolge?
    • 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
    • WPF UI DEVELOPMENT XAML KONVENTIONEN128Erweiterte Attribut FormatierungAusnahmenSetterTriggerColorsBrushes...Nicht für Konstrukte mit wiederholenden ZeichenkettengeeignetNicht für Konstrukte mit wiederholenden Zeichenkettengeeignet
    • 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: <Individueller Name><Datentyp>BeispieleWhiteColor, ButtonBackgroundBrush, MainGrid, LoadButton,PrimaryButtonStyle, CheckBoxStyle, ...
    • PERFORMANCE TOP 10132
    • 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
    • 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“
    • 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 Engineering BasicsFundamentStufenmodell
    • 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
    • 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
    • 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
    • FAZIT137
    • 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
    • FRAGEN? :-)139
    • VIELEN DANK!140
    • Ein benutzerzentrierterProzess ist Voraussetzung fürdas Design einer positivenUser Experience.