SlideShare ist ein Scribd-Unternehmen logo
WPF UI Development Best Practices
                            David C. Thömmes
David C. Thömmes



             Software Engineer & UI Developer @ ERGOSIGN
             Bachelor of Science, Medieninformatik, FH KL


             Aktuelle Schwerpunkte
               UI & Application Development
                   .NET, WPF, Qt, iOS
               Lehrbeauftragter FH KL „UI Development“



                                                            2
WPF = bessere & schönere UI‘s
WPF = bessere & schönere UI‘s




                                4
WPF = bessere & schönere UI‘s




                                4
WPF = bessere & schönere UI‘s
WPF = bessere & schönere UI‘s
          F AILED
                      !
Prozesse
Prozesse - User-centered design




                                  7
Prozesse - User-centered design

                                     Analysis(




                  Implementation(                  Design(




                   Specification(                  Prototype(




                                    Evaluation(



                                                               7
Prozesse - User-centered design

                    Analysis(




 Implementation(                  Design(




  Specification(                  Prototype(




                   Evaluation(



                                              7
Prozesse - User-centered design

                    Analysis(




 Implementation(                  Design(




  Specification(                  Prototype(




                   Evaluation(



                                              7
Prozesse - User-centered design

                    Analysis(




 Implementation(                  Design(




  Specification(                  Prototype(




                   Evaluation(



                                              7
Prozesse - User-centered design

                    Analysis(




 Implementation(                  Design(




  Specification(                  Prototype(




                   Evaluation(



                                              7
Prozesse - User-centered design

                    Analysis(




 Implementation(                  Design(




  Specification(                  Prototype(




                   Evaluation(



                                              7
Prozesse - User-centered design

                    Analysis(




 Implementation(                  Design(




  Specification(                  Prototype(




                   Evaluation(



                                              7
Prozesse - User-centered design - Spezifikation




                                                 8
Prozesse - User-centered design - Spezifikation




                                         wtf? :-D   8
Reminder - Deklarative Programmierung mit XAML, Styling, Templates...




                                           Button
                                                                        9
Reminder - Model View ViewModel - Klare Trennung Visualisierung & Logik




                                                                          10
Prozesse - Aber was sind die Probleme?




         Probleme
           Komplexität und Umfang der Dokumente (Style Guide, etc.)
           Interpretationsfreiräume des Software Engineers
           Know-how zur Realisierung fehlt
           Allgemein UI Development unterbewertet




                                                                      11
Prozesse - UI Developer als Schlüsselelement


          Lösung
           Rolle „UI Developer“ mit eigener Wissensbasis forcieren


          Fokus UI Development
           Zwischen UX Designer und Software Engineer aktiv angesiedelt
           Schicht Präsentation und Interaktion
           Styling, Templating, Layouting, Views, ViewModels, Custom
           Control Development...


                                                                          12
Prozesse - UI Development in der Anwendungsarchitektur



                   Präsentation

                    Interaktion

                  Geschäftslogik

                Datenmanagement

                      Daten



                                                         13
Prozesse - UI Development in der Anwendungsarchitektur



                   Präsentation

                    Interaktion                UI Development

                  Geschäftslogik

                Datenmanagement

                      Daten



                                                                13
Prozesse

           UI Development muss als eigene Disziplin innerhalb des
           Software Engineerings verstanden werden!


           UX Design ist die Basis für UI Development




                                                                    14
Prozesse

           UI Development muss als eigene Disziplin innerhalb des
           Software Engineerings verstanden werden!


           UX Design ist die Basis für UI Development




           Ein benutzer-zentrierter Designprozess ist essentiell!


                                                                    14
Prozesse




            Us e r- c e n t
                            e re d de s ig
           + S o f t wa r                  n
                             e Eng i ne e r
           + U I De ve l o                  i ng
                            pme n t
           = App l ic at
                           i o n ! ;-)




                                                   14
WPF UI Development Best Practices
Jetzt aber ;-)
Resource Management
Resource Management




        Strategie
         Zentrales „Styling Projekt“ für alle relevanten WPF Ressourcen
         Beinhaltet wohldefinierte Struktur aus Resource Dictionaries
         Pflege, Wartbarkeit und Zusammenarbeit vereinfachen
         Vermeidung unnötiger Inkonsistenzen und Redundanzen




                                                                          17
Resource Management - Styling Projekt




                                        18
Resource Management - Styling Projekt




                                        Feingranulare
                                           Struktur




                                                        19
Resource Management - Styling Projekt - Colors & Brushes




                                          Auslagern von Colors und
                                                  Brushes




                                                                     20
Resource Management - Styling Projekt




                                        Farbpalette des UI Designs
                                        als Color Objekte anlegen
                                        (Redundanzfrei)




                                                                     21
Resource Management - Styling Projekt




                                        Aus Colors
                                        Brushes bauen




                                                        22
Resource Management - Styling Projekt - Settings & Typo


                                                      Konstanten,
                                                      Pfade,
                                                      Schriftgrößen,
                                                      Fonts ...




                                                                       23
Resource Management - Styling Projekt - Settings & Typo




                          Definition der Schrift-Layer (Größen)


                                                                 24
Resource Management - Styling Projekt - Styles




                                           Pro Control-Typ eigenes
                                           Resource Dictionary




                                                                     25
Resource Management - Styling Projekt - Styles




                                 Fokus auf Style Setter und Control Template
                                 Kompakter XAML Source-Code




                                                                          26
Resource Management - Styling Projekt - Bitmap Graphics



                                                Beinhaltet alle
                                                Rastergrafiken
                                                (PNG, JPEG, ...)




                                                                   27
Resource Management - Styling Projekt - Bitmap Graphics




                      Verwaltung als ImageSource


                                                          28
Resource Management - Styling Projekt - Vector Graphics




                                     DrawingBrush




                                                          29
Resource Management - Styling Projekt - Data Templates


                             Data Templates ebenfalls auslagern




                                                                  30
Resource Management - Styling Projekt - All XAML




                                 Ein Resource Dictionary das alle
                                 Ressourcen beinhaltet

                                 Kann später in App.xaml
                                 eingebunden werden




                                                                    31
Resource Management - Styling Projekt - All XAML


                                                   Reihenfolge beachten




                                                                          32
Resource Management - Styling Projekt - All XAML


                                          Einfaches einbinden...




                                                                   33
Resource Management - Styling Projekt - All XAML




                                                   34
Resource Management - Styling Projekt - All XAML




                                                   Default Styles anbieten!
                                                   (Kein x:Key)




                                                                              35
Shared Resource Dictionary
Resource Management - Shared Resource Dictionary



         Vorsicht
          bei MergedDictionaries (Speicherfresser)
          Bewirkt mehrfache Allokation der Ressourcen!
          Kritisch bei modularen Projekten mit Ressourcen „Verlinkung“


         Lösung
          Shared Resource Dictionary



                                                                         37
Resource Management - Shared Resource Dictionary




                                                   38
Resource Management - Shared Resource Dictionary




                                                   38
Resource Management - Shared Resource Dictionary




                          Führt zu Mehrfachanlegung
                                                      38
Resource Management - Shared Resource Dictionary




                                                   39
Resource Management - Shared Resource Dictionary




     Verwendung wie gewohnt, aber...



                                                   40
Resource Management - Shared Resource Dictionary




                                                   41
Resource Management - Shared Resource Dictionary




                          Preprocessor Symbol zum steuern verwenden :-)




                                                                      42
Resource Management - Shared Resource Dictionary




                                                   43
Resource Management - Shared Resource Dictionary




 In eigener Assembly auslagern und Namespace Mapping in
                AssemblyInfo.cs definieren ;-)




                                                          44
Modulare Projekte
Resource Management - Modulare Projekte


         Strategie
          „Common Styling“ Projekt für allgemeine Ressourcen
          Pro Module spezifisches „Styling Projekt“
          „Lazy load“ spezifischer Ressourcen lokal in View




                                                               46
UserControl
UserControl




          Leicht zu erstellen und benutzen
          Struktur = Content
          Element-Referenzierung mit x:Name
          Styling und Templating möglich
          Code-Behind (Blend, Visual Studio)




                                               48
UserControl - Model View ViewModel - Überblick



                                                 View = UserControl




                                                                      49
UserControl




                     UserControls dienen der
              Zusammenfassung und Gruppierung
               mehrerer Controls und Layout Panels.




                                                      50
UserControl vs. Custom Control - Gegenüberstellung



                    UserControl                Custom Control

 Technik            XAML + Code Behind         Klasse + Style + Template

 Logik & Visual     Harte Verdrahtung          Getrennt

 Styling            Hart                       Flexibel

 Aufwand*           Wenig                      Etwas aufwändiger

 Reuse              Schlecht                   Gut
                                                                           51
Davids Top 3 „UserControl Misused“
UserControl - Davids Top 3 „UserControl Misused“




                                                   53
UserControl - Davids Top 3 „UserControl Misused“




      #1
        Interaktions-, Geschäfts- und Anwendungslogik mit Model-
        Layer-Zugriffen im Code-Behind des UserControls




                                                                   53
UserControl - Davids Top 3 „UserControl Misused“




                                                   54
UserControl - Davids Top 3 „UserControl Misused“




      #2
        Atomare Controls (Button, CheckBox, ...) in UserControls
        einzeln kapseln nur um Code-Behind verwenden zu können




                                                                   54
UserControl - Davids Top 3 „UserControl Misused“




                                                   55
UserControl - Davids Top 3 „UserControl Misused“




      #3
        UserControl mit vollem Code-Behind per Copy & Paste
        vervielfältigen, weil die Visualisierung unterschiedlich ist
        (Content = Struktur, Styling?)




                                                                       55
Style Vererbung
Style Vererbung




         Vererbung über Property BasedOn des Styles möglich
         Vererbt werden alle per Setter definierten Properties
         Überschreiben eines Setters jeder Zeit möglich


         Style Vererbung sollte aktiv genutzt werden!
           Tabs, Buttons, DataGrid…




                                                                57
Style Vererbung - Beispiel an zwei Buttons




                                             58
Style Vererbung - Beispiel an zwei Buttons




                                             59
Style Vererbung - Beispiel an zwei Buttons


                                             Je mehr TemplateBinding desto
                                             „sauberer“ und flexibler der Style!




                                                                                  60
Style Vererbung - Beispiel an zwei Buttons




                                             61
Style Vererbung - Beispiel an zwei Buttons




 SecondaryButtonStyle erbt von PrimaryButtonStyle

 Lediglich überschreiben von Background, Foreground und
 IsPressed Trigger (Style Ebene)

 Kein Kopieren der Template notwendig, kompakter Source-Code ;-)


                                                                   61
Style Vererbung - Beispiel an zwei Buttons




                         Wenn immer mögliche Trigger auf Style Ebene


                                                                       62
Basis Style
Style Vererbung - Basis Style




     Bei Styling ist ein Basis Style für alle UI Elemente empfehlenswert
     Wichtige Setter für SnapsToDevicePixels, OverridesDefaults etc.



                                                                           64
Beispiel Segmented RadioButtons
Style Vererbung - Beispiel Segmented RadioButtons




                                                    66
Style Vererbung - Beispiel Segmented RadioButtons




                                                    66
Style Vererbung - Beispiel Segmented RadioButtons




                            Drei Teile notwendig
                            Unterschied BorderThickness, CornerRadius

                                                                        66
Style Vererbung - Beispiel Segmented RadioButtons




                                    Styling von Left SegmentedRadioButton




                                                                       67
Style Vererbung - Beispiel Segmented RadioButtons - Middle




Trotz Vererbung müssen wir die Control Template anpassen & kopieren
CornerRadius bei Border und Lichtkante :-(

                                                                      68
Style Vererbung - Beispiel Segmented RadioButtons - Right




                                                            69
Style Vererbung - Beispiel Segmented RadioButtons...




                                                       70
Keine Angst vor Custom Controls!
Oh oh Custom Controls




         Ableitung von einer konkreten Klasse ≠ UserControl
         Styling- und Templating-Möglichkeiten
         Visueller Aufbau im ControlTemplate
         Default Style möglich (Generic.xaml)
         Zusammenfassung in einer Control Library möglich
         Element-Referenzierung über OnApplyTemplate()




                                                              72
Oh oh Custom Controls - Handwerkzeugs...


                                            Loaded /
                                            Unloaded


                            Blendability                 Routed
                             Attribute
                 Commands




                       Style,              Anatomie
                    Template +                                     Routed
                     Template-              Custom                 Events
                      Binding
             Controls



                             Custom
                             Control                    Dependency
                            Library +                    Properties
                           Generic.xaml

                                            OnApply
                                            Template




                                                                             73
Oh oh Custom Controls - Extended RadioButtons

                                          Nur Properties hinzufügen :-)




                                                                          74
Oh oh Custom Controls - Extended RadioButtons




                                                75
Oh oh Custom Controls - Extended RadioButtons




                                           TemplateBinding an die neuen
                                               Properties möglich




                                                                      76
Oh oh Custom Controls - Extended RadioButtons




Kein kopieren der Control Template notwendig :-)
Super kompakter XAML Source-Code ohne Redundanzen

Nächste Stufe Enum „SegmentPostion“ + Trigger ... ;-)

                                                        77
Oh oh Custom Controls - Extended RadioButtons




                                                78
Oh oh Custom Controls - Source-Code Schnipsel :-)




                                                    Effizienzgewinn




                                                                     79
Leichtgewichtig
Oh oh Custom Controls - Leichtgewichtig... :-)




      Counter, wird an diversen Stellen im UI verwendet...




                                                             81
Custom Layout Container
Custom Layout Container

         Strategie
          Layout und Design Patterns als Custom Controls abbilden
          Abstraktion und Identifikation der Patterns


         Ideen
          Formular
          Dialog oder Window
          Master/Detail
          ...

                                                                    83
Custom Layout Container




                          84
Custom Layout Container



                          Problem
                           Komplexes Layout erhöht die Gefahr von
                           Inkonsistenzen während der UI Entwicklung




                                                                       85
Custom Layout Container




                          86
Custom Layout Container




                          87
Custom Layout Container




                          88
Custom Layout Container




                          89
Custom Layout Container




                          90
Custom Layout Container - Überschreiben Methoden ItemsControl




                                                        Eigene
                                                    Item Wrapper
                                                    verwenden :-)




                                                                    91
Custom Layout Container



         Vorteil
          Verhindern, dass Developer UI zerstören ;-)
          XAML Code wird kompakter und einfacher
          Wiederverwendbarkeit und erhöhte Produktivität


         Nachteil
          Aufwändigere Implementierung



                                                           92
Effekte
Effekte

          Effekte (Basisklasse Effect)
           Blur und DropShadow
           Performance-hungrig daher sparsam verwenden
           Drittanbieter stellen weitere Effekte bereit


          Bitmap-Effekte (Basisklasse BitmapEffect)
           Bevel, Emboss, Outer Glow, ...
           Sollte nicht mehr verwendet werden
           Schlechte Performance

                                                          94
Effekte - Was tun?




          Strategie
           Effekte mit Custom Controls simulieren
           Rectangle, Border & Co. in Kombination mit Gradient Brush
           nutzen




                                                                       95
Effekte Beispiel Custom Control
Effekte - Beispiel Drop Shadow




                                 97
Effekte - Beispiel Drop Shadow per Custom Control „ShadowText“


                                Leichtgewichtiges Custom Control
                                Nur Properties ohne Logik notwendig


                                Wichtige Properties
                                  XOffset & YOffset
                                  ShadowBrush
                                  Text* (Optionen)


                                Idee zwei TextBlöcke in Control Template

                                                                           98
Effekte - Beispiel Drop Shadow per Custom Control „ShadowText“




                                                                 99
Effekte - Beispiel Drop Shadow per Custom Control „ShadowText“

                                                   Nur Properties :-)




                                                                        100
Effekte - Beispiel Drop Shadow per Custom Control „ShadowText“
                                               Grid mit zwei TextBlöcken




                                                                           101
Effekte - Beispiel Drop Shadow per Custom Control „ShadowText“




  TranslateTransform auf „ShadowText“
  Werte über Properties X & YOffset Property

  Per TemplateBinding Controls anbinden z.B. Text
                                                                 102
Effekte - Beispiel Drop Shadow per Custom Control „ShadowText“




                                                                 103
Effekte - Beispiel Drop Shadow per Custom Control „ShadowText“




                                                                 104
Effekte - Beispiel Drop Shadow per Custom Control „ShadowText“




                                                                 105
Effekte Beispiel Rectangle
Effekte - Beispiel Drop Shadow per Rectangle




                                   Tabs mit Schatten




                                                       107
Effekte - Beispiel Drop Shadow per Rectangle




        Rectangle mit LinearGradientBrush


                                               108
Effekte - Beispiel Drop Shadow per Rectangle




                                               109
Effekte - Beispiel Drop Shadow per Rectangle




                   Mit Alpha Wert der Farbe arbeiten



                                                       110
XAML Konventionen
XAML Konventionen - Warum?




        Lesbarkeit des Source-Codes erhöhen
        Zusammenarbeit erleichtern
        Pflege und Wartung ermöglichen
        Effizienzgewinn




                                              112
XAML Konventionen - XAML!




        Allgemein
          Jede Stufe der Hierarchie (UI) einrücken
          x:Name oder x:Key Attribute als erstes schreiben
          Attribute nach Zusammengehörigkeit gruppieren
           Width, Height, VerticalAlignment, HorizontalAlignment..-




                                                                      113
Erweiterte Attribut Formatierung
XAML Konventionen - XAML! - Erweiterte Attribut Formatierung




         Attribute eines Elementes in jeweils einer separaten Zeile
         Das erste Attribut steht in der gleichen Zeile wie das Element
         Alle nachfolgenden Attribute werden entlang der Vertikalen
         untereinander ausgerichtet




                                                                          115
XAML Konventionen - XAML! - Erweiterte Attribut Formatierung




                                           Überblick
                                           Leichtes Scannen für Auge




                                                                       116
XAML Konventionen - XAML! - Erweiterte Attribut Formatierung


                                                   Blend...
                                                   Formatierung?
                                                   Reihenfolge?




                                                                   117
XAML Konventionen - XAML! - Erweiterte Attribut Formatierung


         Anwenden bei
             Elemente bzw. Controls die als Content einer Template
             definiert sind (Control Template, Data Template, ...)


             Elemente bzw. Controls die als Content eines Controls mit
             Code-Behind definiert sind (UserControl, Window, Page...)


             Root-Element eines Dokuments und dessen Attribute


                                                                         118
XAML Konventionen - XAML! - Erweiterte Attribut Formatierung



         Ausnahmen
           Setter
           Trigger
           Colors
           Brushes...


         Nicht für Konstrukte mit wiederholenden Zeichenketten geeignet
         Nicht für Konstrukte mit wiederholenden Zeichenketten geeignet

                                                                          119
XAML Konventionen - XAML! - Erweiterte Attribut Formatierung



                                Failed O_o
                                Auge bleibt bei jeder Zeile an dem
                                entsprechenden Value Attribut "hängen"




                                                                         120
XAML Konventionen - XAML! - Erweiterte Attribut Formatierung - VS

          Oben im Menü > Tools > Options > Text Editor > XAML




                                                                    121
XAML Namenskonventionen
XAML Namenskonventionen


        Allgemein
         „PascalCase“
         Buchstaben und Zahlen
         Beispiel: <Individueller Name><Datentyp>


        Beispiele
         WhiteColor, ButtonBackgroundBrush, MainGrid, LoadButton,
         PrimaryButtonStyle, CheckBoxStyle, ...


                                                                    123
Performance Top 10
Performance Top 10
Virtualizing
   VirtualizingStackPanel bei ItemsControls verwenden + VirtualizingStackPanel.VirtualizationMode="Recycling"
   Rendert nur was im ViewPort sichtbar ist, Wrapper z.B. ListBoxItem werden wiederverwendet


Event Handler Leaks
   Event Handler immer abmelden, auf jedes += immer -=


Einfrieren
   PresentationOptions:Freeze="true" auf Freezable Objekten setzen dadurch kein Overhead durch Change Events


StaticResource über DynamicResource
   Wenn keine Änderungen der Ressource zur Laufzeit stattfinden dann immer per StaticResource referenzieren
   Ableitung: BindingMode OneTime bei Data Binding


Simples XAML
   Einfache Layouts, wenig Elemente, keine tiefen Verschachtelungen in Content oder Templates

                                                                                                                125
Performance Top 10
Shared Resource Dictionaries verwenden
   Schützt vor mehrfachen Allokation der Ressourcen, bei Bedarf „lazy load“ von spezifischen Ressourcen lokal in View


Data Binding optimieren
   Ungültige Bindings „System.Windows.Data Error“ aufspüren und entfernen
   Bindings immer wieder freigeben BindingOperations.ClearBinding()


Effekte
   Sollten vermieden werden, besser faken mit Rectangle, Border & Co. in Kombination mit Brushes


Trigger über VSM
   Weniger Overhead da kein Storyboard gestartet werden muss


Main UI Thread nicht blockieren
   Arbeiten mit BackgroundWorker, Threads oder async z.B. AsyncDelegateCommand, „responsive UI“

                                                                                                                       126
Wie werde ich ein guter
WPF UI Developer? ;-)
Wie werde ich ein guter WPF UI Developer? ;-)




                                                128
Wie werde ich ein guter WPF UI Developer? ;-)




 Fundament      Design Basics   Usability Engineering Basics   Designer & UI Developer Workflow




                                                                                                 128
Wie werde ich ein guter WPF UI Developer? ;-)




 Stufe 1        Styles      Control Templates          Template Binding         Animationen        Trigger & VSM


                XAML            Blend        Controls & Layout         Resource Management     Data Binding Basics




 Fundament      Design Basics           Usability Engineering Basics           Designer & UI Developer Workflow




                                                                                                                     128
Wie werde ich ein guter WPF UI Developer? ;-)




 Stufe 2         MVVM             Application Frameworks            .NET            Visual Studio           Behaviors


                 Data Binding Advanced            Data Templates            Attached Properties            Adorner




 Stufe 1        Styles       Control Templates          Template Binding         Animationen            Trigger & VSM


                XAML            Blend         Controls & Layout         Resource Management         Data Binding Basics




 Fundament      Design Basics            Usability Engineering Basics           Designer & UI Developer Workflow




                                                                                                                          128
Wie werde ich ein guter WPF UI Developer? ;-)


 Stufe 3         Custom Control Development                 Custom Layout Panels                    Miscellaneous




 Stufe 2         MVVM             Application Frameworks            .NET            Visual Studio           Behaviors


                 Data Binding Advanced            Data Templates            Attached Properties            Adorner




 Stufe 1        Styles       Control Templates          Template Binding         Animationen            Trigger & VSM


                XAML            Blend         Controls & Layout         Resource Management         Data Binding Basics




 Fundament      Design Basics            Usability Engineering Basics           Designer & UI Developer Workflow




                                                                                                                          128
Fazit
Fazit




   Denken Sie an einen benutzer-zentrierten Designprozess
   Schätzen Sie gutes UI Development
   Reizen Sie die Möglichkeiten von WPF aus! (Keine halben Sachen)
   Legen Sie Wert auf Struktur und Konsistenz während der Entwicklung




                                                                        130
Fragen?
Vielen Dank ;-)

Weitere ähnliche Inhalte

Was ist angesagt?

신입 SW 개발자 취업 준비
신입 SW 개발자 취업 준비신입 SW 개발자 취업 준비
신입 SW 개발자 취업 준비
인서 박
 
React js
React jsReact js
React js
Nikhil Karkra
 
MobX for dummies
MobX for dummiesMobX for dummies
MobX for dummies
Yauheni Nikanovich
 
React and redux
React and reduxReact and redux
React and redux
Mystic Coders, LLC
 
Laravel × レイヤードアーキテクチャを実践して得られた知見と反省 / Practice of Laravel with layered archi...
Laravel × レイヤードアーキテクチャを実践して得られた知見と反省 / Practice of Laravel with layered archi...Laravel × レイヤードアーキテクチャを実践して得られた知見と反省 / Practice of Laravel with layered archi...
Laravel × レイヤードアーキテクチャを実践して得られた知見と反省 / Practice of Laravel with layered archi...
Shohei Okada
 
웹 프론트엔드 개발자의 얕고 넓은 Rx 이야기
웹 프론트엔드 개발자의 얕고 넓은 Rx 이야기웹 프론트엔드 개발자의 얕고 넓은 Rx 이야기
웹 프론트엔드 개발자의 얕고 넓은 Rx 이야기
Kim Hunmin
 
モジュールの凝集度・結合度・インタフェース
モジュールの凝集度・結合度・インタフェースモジュールの凝集度・結合度・インタフェース
モジュールの凝集度・結合度・インタフェース
Hajime Yanagawa
 
React vac pattern
React vac patternReact vac pattern
React vac pattern
NAVER Engineering
 
Wpfと非同期
Wpfと非同期Wpfと非同期
Wpfと非同期yone64
 
[월간 슬라이드] 한시간안에 게시판 만들기 with 스프링부트
[월간 슬라이드] 한시간안에 게시판 만들기 with 스프링부트[월간 슬라이드] 한시간안에 게시판 만들기 with 스프링부트
[월간 슬라이드] 한시간안에 게시판 만들기 with 스프링부트
월간 IT 슬라이드
 
Introduction to Redux
Introduction to ReduxIntroduction to Redux
Introduction to Redux
Ignacio Martín
 
FIFA 온라인 3의 MongoDB 사용기
FIFA 온라인 3의 MongoDB 사용기FIFA 온라인 3의 MongoDB 사용기
FIFA 온라인 3의 MongoDB 사용기
Jongwon Kim
 
SOA - Architecture Orientée Service : Démystification
SOA - Architecture Orientée Service : DémystificationSOA - Architecture Orientée Service : Démystification
SOA - Architecture Orientée Service : Démystification
Khaled Ben Driss
 
MongoDB Fundamentals
MongoDB FundamentalsMongoDB Fundamentals
MongoDB Fundamentals
MongoDB
 
Beyond Java: 자바 8을 중심으로 본 자바의 혁신
Beyond Java: 자바 8을 중심으로 본 자바의 혁신Beyond Java: 자바 8을 중심으로 본 자바의 혁신
Beyond Java: 자바 8을 중심으로 본 자바의 혁신
Sungchul Park
 
[Gridgain]인메모리컴퓨팅 및 국내레퍼런스 소개
[Gridgain]인메모리컴퓨팅 및 국내레퍼런스 소개 [Gridgain]인메모리컴퓨팅 및 국내레퍼런스 소개
[Gridgain]인메모리컴퓨팅 및 국내레퍼런스 소개
CJ Olivenetworks
 
Node.js
Node.jsNode.js
C#の強み、或いは何故PHPから乗り換えるのか
C#の強み、或いは何故PHPから乗り換えるのかC#の強み、或いは何故PHPから乗り換えるのか
C#の強み、或いは何故PHPから乗り換えるのか
Yoshifumi Kawai
 
Spark 의 핵심은 무엇인가? RDD! (RDD paper review)
Spark 의 핵심은 무엇인가? RDD! (RDD paper review)Spark 의 핵심은 무엇인가? RDD! (RDD paper review)
Spark 의 핵심은 무엇인가? RDD! (RDD paper review)
Yongho Ha
 
リレーショナルな正しいデータベース設計
リレーショナルな正しいデータベース設計リレーショナルな正しいデータベース設計
リレーショナルな正しいデータベース設計
Mikiya Okuno
 

Was ist angesagt? (20)

신입 SW 개발자 취업 준비
신입 SW 개발자 취업 준비신입 SW 개발자 취업 준비
신입 SW 개발자 취업 준비
 
React js
React jsReact js
React js
 
MobX for dummies
MobX for dummiesMobX for dummies
MobX for dummies
 
React and redux
React and reduxReact and redux
React and redux
 
Laravel × レイヤードアーキテクチャを実践して得られた知見と反省 / Practice of Laravel with layered archi...
Laravel × レイヤードアーキテクチャを実践して得られた知見と反省 / Practice of Laravel with layered archi...Laravel × レイヤードアーキテクチャを実践して得られた知見と反省 / Practice of Laravel with layered archi...
Laravel × レイヤードアーキテクチャを実践して得られた知見と反省 / Practice of Laravel with layered archi...
 
웹 프론트엔드 개발자의 얕고 넓은 Rx 이야기
웹 프론트엔드 개발자의 얕고 넓은 Rx 이야기웹 프론트엔드 개발자의 얕고 넓은 Rx 이야기
웹 프론트엔드 개발자의 얕고 넓은 Rx 이야기
 
モジュールの凝集度・結合度・インタフェース
モジュールの凝集度・結合度・インタフェースモジュールの凝集度・結合度・インタフェース
モジュールの凝集度・結合度・インタフェース
 
React vac pattern
React vac patternReact vac pattern
React vac pattern
 
Wpfと非同期
Wpfと非同期Wpfと非同期
Wpfと非同期
 
[월간 슬라이드] 한시간안에 게시판 만들기 with 스프링부트
[월간 슬라이드] 한시간안에 게시판 만들기 with 스프링부트[월간 슬라이드] 한시간안에 게시판 만들기 with 스프링부트
[월간 슬라이드] 한시간안에 게시판 만들기 with 스프링부트
 
Introduction to Redux
Introduction to ReduxIntroduction to Redux
Introduction to Redux
 
FIFA 온라인 3의 MongoDB 사용기
FIFA 온라인 3의 MongoDB 사용기FIFA 온라인 3의 MongoDB 사용기
FIFA 온라인 3의 MongoDB 사용기
 
SOA - Architecture Orientée Service : Démystification
SOA - Architecture Orientée Service : DémystificationSOA - Architecture Orientée Service : Démystification
SOA - Architecture Orientée Service : Démystification
 
MongoDB Fundamentals
MongoDB FundamentalsMongoDB Fundamentals
MongoDB Fundamentals
 
Beyond Java: 자바 8을 중심으로 본 자바의 혁신
Beyond Java: 자바 8을 중심으로 본 자바의 혁신Beyond Java: 자바 8을 중심으로 본 자바의 혁신
Beyond Java: 자바 8을 중심으로 본 자바의 혁신
 
[Gridgain]인메모리컴퓨팅 및 국내레퍼런스 소개
[Gridgain]인메모리컴퓨팅 및 국내레퍼런스 소개 [Gridgain]인메모리컴퓨팅 및 국내레퍼런스 소개
[Gridgain]인메모리컴퓨팅 및 국내레퍼런스 소개
 
Node.js
Node.jsNode.js
Node.js
 
C#の強み、或いは何故PHPから乗り換えるのか
C#の強み、或いは何故PHPから乗り換えるのかC#の強み、或いは何故PHPから乗り換えるのか
C#の強み、或いは何故PHPから乗り換えるのか
 
Spark 의 핵심은 무엇인가? RDD! (RDD paper review)
Spark 의 핵심은 무엇인가? RDD! (RDD paper review)Spark 의 핵심은 무엇인가? RDD! (RDD paper review)
Spark 의 핵심은 무엇인가? RDD! (RDD paper review)
 
リレーショナルな正しいデータベース設計
リレーショナルな正しいデータベース設計リレーショナルな正しいデータベース設計
リレーショナルな正しいデータベース設計
 

Ähnlich wie WPF UI-Development Best Practices

Ergosign-wpf-ui-development-best-practices-dotnet
Ergosign-wpf-ui-development-best-practices-dotnetErgosign-wpf-ui-development-best-practices-dotnet
Ergosign-wpf-ui-development-best-practices-dotnet
Ergosign GmbH
 
Wunschfeld Ix Design Workshop World Usability Day 08
Wunschfeld Ix Design Workshop World Usability Day 08Wunschfeld Ix Design Workshop World Usability Day 08
Wunschfeld Ix Design Workshop World Usability Day 08
Dirk Platzek
 
WPF UI Development Unchained
WPF UI Development UnchainedWPF UI Development Unchained
WPF UI Development Unchained
Ergosign GmbH
 
Design Thinking - Was niemand über Design Thinking sagt!
Design Thinking - Was niemand über Design Thinking sagt!Design Thinking - Was niemand über Design Thinking sagt!
Design Thinking - Was niemand über Design Thinking sagt!
Lukas Fischer
 
Yin and Yang - Product Manager and Usability/Ux-Professionals in der Software...
Yin and Yang - Product Manager and Usability/Ux-Professionals in der Software...Yin and Yang - Product Manager and Usability/Ux-Professionals in der Software...
Yin and Yang - Product Manager and Usability/Ux-Professionals in der Software...
Prof. Dr. Alexander Maedche
 
Usability Engineering
Usability  EngineeringUsability  Engineering
Usability Engineering
Nina Rebele
 
Website Konzeption - Eine interdisziplinäre Teamarbeit
Website Konzeption - Eine interdisziplinäre TeamarbeitWebsite Konzeption - Eine interdisziplinäre Teamarbeit
Website Konzeption - Eine interdisziplinäre Teamarbeit
Oliver Annen
 
Executive Summary - App-Entwicklung für Entscheider, Webinale Edition
Executive Summary - App-Entwicklung für Entscheider, Webinale EditionExecutive Summary - App-Entwicklung für Entscheider, Webinale Edition
Executive Summary - App-Entwicklung für Entscheider, Webinale Edition
Bokowsky + Laymann GmbH
 
Content Strategy im Praxistest / CS in der agilen Produktentwicklung
Content Strategy im Praxistest / CS in der agilen ProduktentwicklungContent Strategy im Praxistest / CS in der agilen Produktentwicklung
Content Strategy im Praxistest / CS in der agilen Produktentwicklung
Arne Kittler
 
Ux vs. Agile
Ux vs. AgileUx vs. Agile
Ux vs. Agile
Uwe Thimel
 
developer-experience.pdf
developer-experience.pdfdeveloper-experience.pdf
developer-experience.pdf
Konrad Ferdinand Heimel
 
Agil und kreativ - Moderne Designprozesse
Agil und kreativ - Moderne DesignprozesseAgil und kreativ - Moderne Designprozesse
Agil und kreativ - Moderne Designprozesse
Hans-Joachim Belz
 
Der Markt für Planungs- und Controlling-Systeme
Der Markt für Planungs- und Controlling-SystemeDer Markt für Planungs- und Controlling-Systeme
Der Markt für Planungs- und Controlling-Systeme
BARC GmbH
 
Aktuelle Trends in der Visualisierung von Informationen
Aktuelle Trends in der Visualisierung von InformationenAktuelle Trends in der Visualisierung von Informationen
Aktuelle Trends in der Visualisierung von Informationen
BARC GmbH
 
My application as webdesigner and front-end developer
My application as webdesigner and front-end developerMy application as webdesigner and front-end developer
My application as webdesigner and front-end developerchristianschweinhardt
 
Creating the bigger picture - Die Designvision in agilen Projekten
Creating the bigger picture - Die Designvision in agilen ProjektenCreating the bigger picture - Die Designvision in agilen Projekten
Creating the bigger picture - Die Designvision in agilen Projekten
Silke Kreiling
 
Portalsymposium City&Bits - Usability in Internet- und Mitarbeiterportalen
Portalsymposium City&Bits - Usability in Internet- und Mitarbeiterportalen Portalsymposium City&Bits - Usability in Internet- und Mitarbeiterportalen
Portalsymposium City&Bits - Usability in Internet- und Mitarbeiterportalen
City & Bits GmbH
 
Abayoo Netzwerkpartner AdaPro
Abayoo Netzwerkpartner AdaProAbayoo Netzwerkpartner AdaPro
Abayoo Netzwerkpartner AdaProAdaPro GmbH
 
UX & Design: UX-Optimierungen in SharePoint umsetzen
UX & Design: UX-Optimierungen in SharePoint umsetzenUX & Design: UX-Optimierungen in SharePoint umsetzen
UX & Design: UX-Optimierungen in SharePoint umsetzen
IOZ AG
 
projekt0708 PWR Solution (Release 3.0) für SAP NetWeaver
projekt0708 PWR Solution (Release 3.0) für SAP NetWeaverprojekt0708 PWR Solution (Release 3.0) für SAP NetWeaver
projekt0708 PWR Solution (Release 3.0) für SAP NetWeaver
projekt0708 - Scheffler, Galas & Partner IT Berater
 

Ähnlich wie WPF UI-Development Best Practices (20)

Ergosign-wpf-ui-development-best-practices-dotnet
Ergosign-wpf-ui-development-best-practices-dotnetErgosign-wpf-ui-development-best-practices-dotnet
Ergosign-wpf-ui-development-best-practices-dotnet
 
Wunschfeld Ix Design Workshop World Usability Day 08
Wunschfeld Ix Design Workshop World Usability Day 08Wunschfeld Ix Design Workshop World Usability Day 08
Wunschfeld Ix Design Workshop World Usability Day 08
 
WPF UI Development Unchained
WPF UI Development UnchainedWPF UI Development Unchained
WPF UI Development Unchained
 
Design Thinking - Was niemand über Design Thinking sagt!
Design Thinking - Was niemand über Design Thinking sagt!Design Thinking - Was niemand über Design Thinking sagt!
Design Thinking - Was niemand über Design Thinking sagt!
 
Yin and Yang - Product Manager and Usability/Ux-Professionals in der Software...
Yin and Yang - Product Manager and Usability/Ux-Professionals in der Software...Yin and Yang - Product Manager and Usability/Ux-Professionals in der Software...
Yin and Yang - Product Manager and Usability/Ux-Professionals in der Software...
 
Usability Engineering
Usability  EngineeringUsability  Engineering
Usability Engineering
 
Website Konzeption - Eine interdisziplinäre Teamarbeit
Website Konzeption - Eine interdisziplinäre TeamarbeitWebsite Konzeption - Eine interdisziplinäre Teamarbeit
Website Konzeption - Eine interdisziplinäre Teamarbeit
 
Executive Summary - App-Entwicklung für Entscheider, Webinale Edition
Executive Summary - App-Entwicklung für Entscheider, Webinale EditionExecutive Summary - App-Entwicklung für Entscheider, Webinale Edition
Executive Summary - App-Entwicklung für Entscheider, Webinale Edition
 
Content Strategy im Praxistest / CS in der agilen Produktentwicklung
Content Strategy im Praxistest / CS in der agilen ProduktentwicklungContent Strategy im Praxistest / CS in der agilen Produktentwicklung
Content Strategy im Praxistest / CS in der agilen Produktentwicklung
 
Ux vs. Agile
Ux vs. AgileUx vs. Agile
Ux vs. Agile
 
developer-experience.pdf
developer-experience.pdfdeveloper-experience.pdf
developer-experience.pdf
 
Agil und kreativ - Moderne Designprozesse
Agil und kreativ - Moderne DesignprozesseAgil und kreativ - Moderne Designprozesse
Agil und kreativ - Moderne Designprozesse
 
Der Markt für Planungs- und Controlling-Systeme
Der Markt für Planungs- und Controlling-SystemeDer Markt für Planungs- und Controlling-Systeme
Der Markt für Planungs- und Controlling-Systeme
 
Aktuelle Trends in der Visualisierung von Informationen
Aktuelle Trends in der Visualisierung von InformationenAktuelle Trends in der Visualisierung von Informationen
Aktuelle Trends in der Visualisierung von Informationen
 
My application as webdesigner and front-end developer
My application as webdesigner and front-end developerMy application as webdesigner and front-end developer
My application as webdesigner and front-end developer
 
Creating the bigger picture - Die Designvision in agilen Projekten
Creating the bigger picture - Die Designvision in agilen ProjektenCreating the bigger picture - Die Designvision in agilen Projekten
Creating the bigger picture - Die Designvision in agilen Projekten
 
Portalsymposium City&Bits - Usability in Internet- und Mitarbeiterportalen
Portalsymposium City&Bits - Usability in Internet- und Mitarbeiterportalen Portalsymposium City&Bits - Usability in Internet- und Mitarbeiterportalen
Portalsymposium City&Bits - Usability in Internet- und Mitarbeiterportalen
 
Abayoo Netzwerkpartner AdaPro
Abayoo Netzwerkpartner AdaProAbayoo Netzwerkpartner AdaPro
Abayoo Netzwerkpartner AdaPro
 
UX & Design: UX-Optimierungen in SharePoint umsetzen
UX & Design: UX-Optimierungen in SharePoint umsetzenUX & Design: UX-Optimierungen in SharePoint umsetzen
UX & Design: UX-Optimierungen in SharePoint umsetzen
 
projekt0708 PWR Solution (Release 3.0) für SAP NetWeaver
projekt0708 PWR Solution (Release 3.0) für SAP NetWeaverprojekt0708 PWR Solution (Release 3.0) für SAP NetWeaver
projekt0708 PWR Solution (Release 3.0) für SAP NetWeaver
 

Mehr von Ergosign GmbH

"Wir arbeiten genauso wie davor - nur anders", bitkom-Vortrag
"Wir arbeiten genauso wie davor - nur anders", bitkom-Vortrag"Wir arbeiten genauso wie davor - nur anders", bitkom-Vortrag
"Wir arbeiten genauso wie davor - nur anders", bitkom-Vortrag
Ergosign GmbH
 
"Build Great Services" - Ergosign @ MCBW 2021
"Build Great Services" - Ergosign @ MCBW 2021"Build Great Services" - Ergosign @ MCBW 2021
"Build Great Services" - Ergosign @ MCBW 2021
Ergosign GmbH
 
Talk "3 Gründe -
 Warum menschzentriertes Design die Apokalypse verhindert", ...
Talk "3 Gründe -
 Warum menschzentriertes Design die Apokalypse verhindert", ...Talk "3 Gründe -
 Warum menschzentriertes Design die Apokalypse verhindert", ...
Talk "3 Gründe -
 Warum menschzentriertes Design die Apokalypse verhindert", ...
Ergosign GmbH
 
Talk "Multimodal, collaborative & autonomous", IoT Meetup, 10/2020
Talk "Multimodal, collaborative & autonomous", IoT Meetup, 10/2020Talk "Multimodal, collaborative & autonomous", IoT Meetup, 10/2020
Talk "Multimodal, collaborative & autonomous", IoT Meetup, 10/2020
Ergosign GmbH
 
Talk "Multimodal Systems", VDMA ERFA Meeting, 05/2020
Talk "Multimodal Systems", VDMA ERFA Meeting, 05/2020Talk "Multimodal Systems", VDMA ERFA Meeting, 05/2020
Talk "Multimodal Systems", VDMA ERFA Meeting, 05/2020
Ergosign GmbH
 
USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS
USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONSUSER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS
USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS
Ergosign GmbH
 
USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS
USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONSUSER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS
USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS
Ergosign GmbH
 
Augmented Reality im ux design
Augmented Reality im ux designAugmented Reality im ux design
Augmented Reality im ux design
Ergosign GmbH
 
Quo vadis, Student? Berufsorientierung für angehende UX Designer (World Usabi...
Quo vadis, Student? Berufsorientierung für angehende UX Designer (World Usabi...Quo vadis, Student? Berufsorientierung für angehende UX Designer (World Usabi...
Quo vadis, Student? Berufsorientierung für angehende UX Designer (World Usabi...
Ergosign GmbH
 
Ergosign-Responsive-Design-2013
Ergosign-Responsive-Design-2013Ergosign-Responsive-Design-2013
Ergosign-Responsive-Design-2013
Ergosign GmbH
 
Ergosign-Hilfekonzepte-2013
Ergosign-Hilfekonzepte-2013Ergosign-Hilfekonzepte-2013
Ergosign-Hilfekonzepte-2013
Ergosign GmbH
 
2013 04-12 iud würzburg
2013 04-12 iud würzburg2013 04-12 iud würzburg
2013 04-12 iud würzburgErgosign GmbH
 
METROfizierung industrieller Bedienoberflächen
METROfizierung industrieller BedienoberflächenMETROfizierung industrieller Bedienoberflächen
METROfizierung industrieller Bedienoberflächen
Ergosign GmbH
 
WPF Custom Controls: UX-Design and -Development @ dotnet Cologne Conference
WPF Custom Controls: UX-Design and -Development @ dotnet Cologne ConferenceWPF Custom Controls: UX-Design and -Development @ dotnet Cologne Conference
WPF Custom Controls: UX-Design and -Development @ dotnet Cologne Conference
Ergosign GmbH
 
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN ConferenceWPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
Ergosign GmbH
 
Anforderungsanalyse - Zu Risiken und Nebenwirkungen (be-)fragen Sie Ihren Nut...
Anforderungsanalyse - Zu Risiken und Nebenwirkungen (be-)fragen Sie Ihren Nut...Anforderungsanalyse - Zu Risiken und Nebenwirkungen (be-)fragen Sie Ihren Nut...
Anforderungsanalyse - Zu Risiken und Nebenwirkungen (be-)fragen Sie Ihren Nut...
Ergosign GmbH
 
Kommunikation 2.0 als Designtool im UCD Prozess (ERGOSIGN)
Kommunikation 2.0 als Designtool im UCD Prozess (ERGOSIGN)Kommunikation 2.0 als Designtool im UCD Prozess (ERGOSIGN)
Kommunikation 2.0 als Designtool im UCD Prozess (ERGOSIGN)
Ergosign GmbH
 
UX Management: Effiziente Implementierung von UCD-Methoden in Unternehmen (ER...
UX Management: Effiziente Implementierung von UCD-Methoden in Unternehmen (ER...UX Management: Effiziente Implementierung von UCD-Methoden in Unternehmen (ER...
UX Management: Effiziente Implementierung von UCD-Methoden in Unternehmen (ER...
Ergosign GmbH
 
A Best Practice Approach to the Design of Natural User Interfaces (ERGOSIGN)
A Best Practice Approach to the Design of Natural User Interfaces (ERGOSIGN)A Best Practice Approach to the Design of Natural User Interfaces (ERGOSIGN)
A Best Practice Approach to the Design of Natural User Interfaces (ERGOSIGN)
Ergosign GmbH
 
Establishing Cross-cultural Collaboration in the Field of User Centered Desig...
Establishing Cross-cultural Collaboration in the Field of User Centered Desig...Establishing Cross-cultural Collaboration in the Field of User Centered Desig...
Establishing Cross-cultural Collaboration in the Field of User Centered Desig...
Ergosign GmbH
 

Mehr von Ergosign GmbH (20)

"Wir arbeiten genauso wie davor - nur anders", bitkom-Vortrag
"Wir arbeiten genauso wie davor - nur anders", bitkom-Vortrag"Wir arbeiten genauso wie davor - nur anders", bitkom-Vortrag
"Wir arbeiten genauso wie davor - nur anders", bitkom-Vortrag
 
"Build Great Services" - Ergosign @ MCBW 2021
"Build Great Services" - Ergosign @ MCBW 2021"Build Great Services" - Ergosign @ MCBW 2021
"Build Great Services" - Ergosign @ MCBW 2021
 
Talk "3 Gründe -
 Warum menschzentriertes Design die Apokalypse verhindert", ...
Talk "3 Gründe -
 Warum menschzentriertes Design die Apokalypse verhindert", ...Talk "3 Gründe -
 Warum menschzentriertes Design die Apokalypse verhindert", ...
Talk "3 Gründe -
 Warum menschzentriertes Design die Apokalypse verhindert", ...
 
Talk "Multimodal, collaborative & autonomous", IoT Meetup, 10/2020
Talk "Multimodal, collaborative & autonomous", IoT Meetup, 10/2020Talk "Multimodal, collaborative & autonomous", IoT Meetup, 10/2020
Talk "Multimodal, collaborative & autonomous", IoT Meetup, 10/2020
 
Talk "Multimodal Systems", VDMA ERFA Meeting, 05/2020
Talk "Multimodal Systems", VDMA ERFA Meeting, 05/2020Talk "Multimodal Systems", VDMA ERFA Meeting, 05/2020
Talk "Multimodal Systems", VDMA ERFA Meeting, 05/2020
 
USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS
USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONSUSER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS
USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS
 
USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS
USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONSUSER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS
USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS
 
Augmented Reality im ux design
Augmented Reality im ux designAugmented Reality im ux design
Augmented Reality im ux design
 
Quo vadis, Student? Berufsorientierung für angehende UX Designer (World Usabi...
Quo vadis, Student? Berufsorientierung für angehende UX Designer (World Usabi...Quo vadis, Student? Berufsorientierung für angehende UX Designer (World Usabi...
Quo vadis, Student? Berufsorientierung für angehende UX Designer (World Usabi...
 
Ergosign-Responsive-Design-2013
Ergosign-Responsive-Design-2013Ergosign-Responsive-Design-2013
Ergosign-Responsive-Design-2013
 
Ergosign-Hilfekonzepte-2013
Ergosign-Hilfekonzepte-2013Ergosign-Hilfekonzepte-2013
Ergosign-Hilfekonzepte-2013
 
2013 04-12 iud würzburg
2013 04-12 iud würzburg2013 04-12 iud würzburg
2013 04-12 iud würzburg
 
METROfizierung industrieller Bedienoberflächen
METROfizierung industrieller BedienoberflächenMETROfizierung industrieller Bedienoberflächen
METROfizierung industrieller Bedienoberflächen
 
WPF Custom Controls: UX-Design and -Development @ dotnet Cologne Conference
WPF Custom Controls: UX-Design and -Development @ dotnet Cologne ConferenceWPF Custom Controls: UX-Design and -Development @ dotnet Cologne Conference
WPF Custom Controls: UX-Design and -Development @ dotnet Cologne Conference
 
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN ConferenceWPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
 
Anforderungsanalyse - Zu Risiken und Nebenwirkungen (be-)fragen Sie Ihren Nut...
Anforderungsanalyse - Zu Risiken und Nebenwirkungen (be-)fragen Sie Ihren Nut...Anforderungsanalyse - Zu Risiken und Nebenwirkungen (be-)fragen Sie Ihren Nut...
Anforderungsanalyse - Zu Risiken und Nebenwirkungen (be-)fragen Sie Ihren Nut...
 
Kommunikation 2.0 als Designtool im UCD Prozess (ERGOSIGN)
Kommunikation 2.0 als Designtool im UCD Prozess (ERGOSIGN)Kommunikation 2.0 als Designtool im UCD Prozess (ERGOSIGN)
Kommunikation 2.0 als Designtool im UCD Prozess (ERGOSIGN)
 
UX Management: Effiziente Implementierung von UCD-Methoden in Unternehmen (ER...
UX Management: Effiziente Implementierung von UCD-Methoden in Unternehmen (ER...UX Management: Effiziente Implementierung von UCD-Methoden in Unternehmen (ER...
UX Management: Effiziente Implementierung von UCD-Methoden in Unternehmen (ER...
 
A Best Practice Approach to the Design of Natural User Interfaces (ERGOSIGN)
A Best Practice Approach to the Design of Natural User Interfaces (ERGOSIGN)A Best Practice Approach to the Design of Natural User Interfaces (ERGOSIGN)
A Best Practice Approach to the Design of Natural User Interfaces (ERGOSIGN)
 
Establishing Cross-cultural Collaboration in the Field of User Centered Desig...
Establishing Cross-cultural Collaboration in the Field of User Centered Desig...Establishing Cross-cultural Collaboration in the Field of User Centered Desig...
Establishing Cross-cultural Collaboration in the Field of User Centered Desig...
 

WPF UI-Development Best Practices

  • 1. WPF UI Development Best Practices David C. Thömmes
  • 2. David C. Thömmes Software Engineer & UI Developer @ ERGOSIGN Bachelor of Science, Medieninformatik, FH KL Aktuelle Schwerpunkte UI & Application Development .NET, WPF, Qt, iOS Lehrbeauftragter FH KL „UI Development“ 2
  • 3. WPF = bessere & schönere UI‘s
  • 4. WPF = bessere & schönere UI‘s 4
  • 5. WPF = bessere & schönere UI‘s 4
  • 6. WPF = bessere & schönere UI‘s
  • 7. WPF = bessere & schönere UI‘s F AILED !
  • 10. Prozesse - User-centered design Analysis( Implementation( Design( Specification( Prototype( Evaluation( 7
  • 11. Prozesse - User-centered design Analysis( Implementation( Design( Specification( Prototype( Evaluation( 7
  • 12. Prozesse - User-centered design Analysis( Implementation( Design( Specification( Prototype( Evaluation( 7
  • 13. Prozesse - User-centered design Analysis( Implementation( Design( Specification( Prototype( Evaluation( 7
  • 14. Prozesse - User-centered design Analysis( Implementation( Design( Specification( Prototype( Evaluation( 7
  • 15. Prozesse - User-centered design Analysis( Implementation( Design( Specification( Prototype( Evaluation( 7
  • 16. Prozesse - User-centered design Analysis( Implementation( Design( Specification( Prototype( Evaluation( 7
  • 17. Prozesse - User-centered design - Spezifikation 8
  • 18. Prozesse - User-centered design - Spezifikation wtf? :-D 8
  • 19. Reminder - Deklarative Programmierung mit XAML, Styling, Templates... Button 9
  • 20. Reminder - Model View ViewModel - Klare Trennung Visualisierung & Logik 10
  • 21. Prozesse - Aber was sind die Probleme? Probleme Komplexität und Umfang der Dokumente (Style Guide, etc.) Interpretationsfreiräume des Software Engineers Know-how zur Realisierung fehlt Allgemein UI Development unterbewertet 11
  • 22. Prozesse - UI Developer als Schlüsselelement Lösung Rolle „UI Developer“ mit eigener Wissensbasis forcieren Fokus UI Development Zwischen UX Designer und Software Engineer aktiv angesiedelt Schicht Präsentation und Interaktion Styling, Templating, Layouting, Views, ViewModels, Custom Control Development... 12
  • 23. Prozesse - UI Development in der Anwendungsarchitektur Präsentation Interaktion Geschäftslogik Datenmanagement Daten 13
  • 24. Prozesse - UI Development in der Anwendungsarchitektur Präsentation Interaktion UI Development Geschäftslogik Datenmanagement Daten 13
  • 25. Prozesse UI Development muss als eigene Disziplin innerhalb des Software Engineerings verstanden werden! UX Design ist die Basis für UI Development 14
  • 26. Prozesse UI Development muss als eigene Disziplin innerhalb des Software Engineerings verstanden werden! UX Design ist die Basis für UI Development Ein benutzer-zentrierter Designprozess ist essentiell! 14
  • 27. Prozesse Us e r- c e n t e re d de s ig + S o f t wa r n e Eng i ne e r + U I De ve l o i ng pme n t = App l ic at i o n ! ;-) 14
  • 28. WPF UI Development Best Practices Jetzt aber ;-)
  • 30. Resource Management Strategie Zentrales „Styling Projekt“ für alle relevanten WPF Ressourcen Beinhaltet wohldefinierte Struktur aus Resource Dictionaries Pflege, Wartbarkeit und Zusammenarbeit vereinfachen Vermeidung unnötiger Inkonsistenzen und Redundanzen 17
  • 31. Resource Management - Styling Projekt 18
  • 32. Resource Management - Styling Projekt Feingranulare Struktur 19
  • 33. Resource Management - Styling Projekt - Colors & Brushes Auslagern von Colors und Brushes 20
  • 34. Resource Management - Styling Projekt Farbpalette des UI Designs als Color Objekte anlegen (Redundanzfrei) 21
  • 35. Resource Management - Styling Projekt Aus Colors Brushes bauen 22
  • 36. Resource Management - Styling Projekt - Settings & Typo Konstanten, Pfade, Schriftgrößen, Fonts ... 23
  • 37. Resource Management - Styling Projekt - Settings & Typo Definition der Schrift-Layer (Größen) 24
  • 38. Resource Management - Styling Projekt - Styles Pro Control-Typ eigenes Resource Dictionary 25
  • 39. Resource Management - Styling Projekt - Styles Fokus auf Style Setter und Control Template Kompakter XAML Source-Code 26
  • 40. Resource Management - Styling Projekt - Bitmap Graphics Beinhaltet alle Rastergrafiken (PNG, JPEG, ...) 27
  • 41. Resource Management - Styling Projekt - Bitmap Graphics Verwaltung als ImageSource 28
  • 42. Resource Management - Styling Projekt - Vector Graphics DrawingBrush 29
  • 43. Resource Management - Styling Projekt - Data Templates Data Templates ebenfalls auslagern 30
  • 44. Resource Management - Styling Projekt - All XAML Ein Resource Dictionary das alle Ressourcen beinhaltet Kann später in App.xaml eingebunden werden 31
  • 45. Resource Management - Styling Projekt - All XAML Reihenfolge beachten 32
  • 46. Resource Management - Styling Projekt - All XAML Einfaches einbinden... 33
  • 47. Resource Management - Styling Projekt - All XAML 34
  • 48. Resource Management - Styling Projekt - All XAML Default Styles anbieten! (Kein x:Key) 35
  • 50. Resource Management - Shared Resource Dictionary Vorsicht bei MergedDictionaries (Speicherfresser) Bewirkt mehrfache Allokation der Ressourcen! Kritisch bei modularen Projekten mit Ressourcen „Verlinkung“ Lösung Shared Resource Dictionary 37
  • 51. Resource Management - Shared Resource Dictionary 38
  • 52. Resource Management - Shared Resource Dictionary 38
  • 53. Resource Management - Shared Resource Dictionary Führt zu Mehrfachanlegung 38
  • 54. Resource Management - Shared Resource Dictionary 39
  • 55. Resource Management - Shared Resource Dictionary Verwendung wie gewohnt, aber... 40
  • 56. Resource Management - Shared Resource Dictionary 41
  • 57. Resource Management - Shared Resource Dictionary Preprocessor Symbol zum steuern verwenden :-) 42
  • 58. Resource Management - Shared Resource Dictionary 43
  • 59. Resource Management - Shared Resource Dictionary In eigener Assembly auslagern und Namespace Mapping in AssemblyInfo.cs definieren ;-) 44
  • 61. Resource Management - Modulare Projekte Strategie „Common Styling“ Projekt für allgemeine Ressourcen Pro Module spezifisches „Styling Projekt“ „Lazy load“ spezifischer Ressourcen lokal in View 46
  • 63. UserControl Leicht zu erstellen und benutzen Struktur = Content Element-Referenzierung mit x:Name Styling und Templating möglich Code-Behind (Blend, Visual Studio) 48
  • 64. UserControl - Model View ViewModel - Überblick View = UserControl 49
  • 65. UserControl UserControls dienen der Zusammenfassung und Gruppierung mehrerer Controls und Layout Panels. 50
  • 66. UserControl vs. Custom Control - Gegenüberstellung UserControl Custom Control Technik XAML + Code Behind Klasse + Style + Template Logik & Visual Harte Verdrahtung Getrennt Styling Hart Flexibel Aufwand* Wenig Etwas aufwändiger Reuse Schlecht Gut 51
  • 67. Davids Top 3 „UserControl Misused“
  • 68. UserControl - Davids Top 3 „UserControl Misused“ 53
  • 69. UserControl - Davids Top 3 „UserControl Misused“ #1 Interaktions-, Geschäfts- und Anwendungslogik mit Model- Layer-Zugriffen im Code-Behind des UserControls 53
  • 70. UserControl - Davids Top 3 „UserControl Misused“ 54
  • 71. UserControl - Davids Top 3 „UserControl Misused“ #2 Atomare Controls (Button, CheckBox, ...) in UserControls einzeln kapseln nur um Code-Behind verwenden zu können 54
  • 72. UserControl - Davids Top 3 „UserControl Misused“ 55
  • 73. UserControl - Davids Top 3 „UserControl Misused“ #3 UserControl mit vollem Code-Behind per Copy & Paste vervielfältigen, weil die Visualisierung unterschiedlich ist (Content = Struktur, Styling?) 55
  • 75. Style Vererbung Vererbung über Property BasedOn des Styles möglich Vererbt werden alle per Setter definierten Properties Überschreiben eines Setters jeder Zeit möglich Style Vererbung sollte aktiv genutzt werden! Tabs, Buttons, DataGrid… 57
  • 76. Style Vererbung - Beispiel an zwei Buttons 58
  • 77. Style Vererbung - Beispiel an zwei Buttons 59
  • 78. Style Vererbung - Beispiel an zwei Buttons Je mehr TemplateBinding desto „sauberer“ und flexibler der Style! 60
  • 79. Style Vererbung - Beispiel an zwei Buttons 61
  • 80. Style Vererbung - Beispiel an zwei Buttons SecondaryButtonStyle erbt von PrimaryButtonStyle Lediglich überschreiben von Background, Foreground und IsPressed Trigger (Style Ebene) Kein Kopieren der Template notwendig, kompakter Source-Code ;-) 61
  • 81. Style Vererbung - Beispiel an zwei Buttons Wenn immer mögliche Trigger auf Style Ebene 62
  • 83. Style Vererbung - Basis Style Bei Styling ist ein Basis Style für alle UI Elemente empfehlenswert Wichtige Setter für SnapsToDevicePixels, OverridesDefaults etc. 64
  • 85. Style Vererbung - Beispiel Segmented RadioButtons 66
  • 86. Style Vererbung - Beispiel Segmented RadioButtons 66
  • 87. Style Vererbung - Beispiel Segmented RadioButtons Drei Teile notwendig Unterschied BorderThickness, CornerRadius 66
  • 88. Style Vererbung - Beispiel Segmented RadioButtons Styling von Left SegmentedRadioButton 67
  • 89. Style Vererbung - Beispiel Segmented RadioButtons - Middle Trotz Vererbung müssen wir die Control Template anpassen & kopieren CornerRadius bei Border und Lichtkante :-( 68
  • 90. Style Vererbung - Beispiel Segmented RadioButtons - Right 69
  • 91. Style Vererbung - Beispiel Segmented RadioButtons... 70
  • 92. Keine Angst vor Custom Controls!
  • 93. Oh oh Custom Controls Ableitung von einer konkreten Klasse ≠ UserControl Styling- und Templating-Möglichkeiten Visueller Aufbau im ControlTemplate Default Style möglich (Generic.xaml) Zusammenfassung in einer Control Library möglich Element-Referenzierung über OnApplyTemplate() 72
  • 94. Oh oh Custom Controls - Handwerkzeugs... Loaded / Unloaded Blendability Routed Attribute Commands Style, Anatomie Template + Routed Template- Custom Events Binding Controls Custom Control Dependency Library + Properties Generic.xaml OnApply Template 73
  • 95. Oh oh Custom Controls - Extended RadioButtons Nur Properties hinzufügen :-) 74
  • 96. Oh oh Custom Controls - Extended RadioButtons 75
  • 97. Oh oh Custom Controls - Extended RadioButtons TemplateBinding an die neuen Properties möglich 76
  • 98. Oh oh Custom Controls - Extended RadioButtons Kein kopieren der Control Template notwendig :-) Super kompakter XAML Source-Code ohne Redundanzen Nächste Stufe Enum „SegmentPostion“ + Trigger ... ;-) 77
  • 99. Oh oh Custom Controls - Extended RadioButtons 78
  • 100. Oh oh Custom Controls - Source-Code Schnipsel :-) Effizienzgewinn 79
  • 102. Oh oh Custom Controls - Leichtgewichtig... :-) Counter, wird an diversen Stellen im UI verwendet... 81
  • 104. Custom Layout Container Strategie Layout und Design Patterns als Custom Controls abbilden Abstraktion und Identifikation der Patterns Ideen Formular Dialog oder Window Master/Detail ... 83
  • 106. Custom Layout Container Problem Komplexes Layout erhöht die Gefahr von Inkonsistenzen während der UI Entwicklung 85
  • 112. Custom Layout Container - Überschreiben Methoden ItemsControl Eigene Item Wrapper verwenden :-) 91
  • 113. Custom Layout Container Vorteil Verhindern, dass Developer UI zerstören ;-) XAML Code wird kompakter und einfacher Wiederverwendbarkeit und erhöhte Produktivität Nachteil Aufwändigere Implementierung 92
  • 115. Effekte Effekte (Basisklasse Effect) Blur und DropShadow Performance-hungrig daher sparsam verwenden Drittanbieter stellen weitere Effekte bereit Bitmap-Effekte (Basisklasse BitmapEffect) Bevel, Emboss, Outer Glow, ... Sollte nicht mehr verwendet werden Schlechte Performance 94
  • 116. Effekte - Was tun? Strategie Effekte mit Custom Controls simulieren Rectangle, Border & Co. in Kombination mit Gradient Brush nutzen 95
  • 118. Effekte - Beispiel Drop Shadow 97
  • 119. Effekte - Beispiel Drop Shadow per Custom Control „ShadowText“ Leichtgewichtiges Custom Control Nur Properties ohne Logik notwendig Wichtige Properties XOffset & YOffset ShadowBrush Text* (Optionen) Idee zwei TextBlöcke in Control Template 98
  • 120. Effekte - Beispiel Drop Shadow per Custom Control „ShadowText“ 99
  • 121. Effekte - Beispiel Drop Shadow per Custom Control „ShadowText“ Nur Properties :-) 100
  • 122. Effekte - Beispiel Drop Shadow per Custom Control „ShadowText“ Grid mit zwei TextBlöcken 101
  • 123. Effekte - Beispiel Drop Shadow per Custom Control „ShadowText“ TranslateTransform auf „ShadowText“ Werte über Properties X & YOffset Property Per TemplateBinding Controls anbinden z.B. Text 102
  • 124. Effekte - Beispiel Drop Shadow per Custom Control „ShadowText“ 103
  • 125. Effekte - Beispiel Drop Shadow per Custom Control „ShadowText“ 104
  • 126. Effekte - Beispiel Drop Shadow per Custom Control „ShadowText“ 105
  • 128. Effekte - Beispiel Drop Shadow per Rectangle Tabs mit Schatten 107
  • 129. Effekte - Beispiel Drop Shadow per Rectangle Rectangle mit LinearGradientBrush 108
  • 130. Effekte - Beispiel Drop Shadow per Rectangle 109
  • 131. Effekte - Beispiel Drop Shadow per Rectangle Mit Alpha Wert der Farbe arbeiten 110
  • 133. XAML Konventionen - Warum? Lesbarkeit des Source-Codes erhöhen Zusammenarbeit erleichtern Pflege und Wartung ermöglichen Effizienzgewinn 112
  • 134. XAML Konventionen - XAML! Allgemein Jede Stufe der Hierarchie (UI) einrücken x:Name oder x:Key Attribute als erstes schreiben Attribute nach Zusammengehörigkeit gruppieren Width, Height, VerticalAlignment, HorizontalAlignment..- 113
  • 136. XAML Konventionen - XAML! - Erweiterte Attribut Formatierung Attribute eines Elementes in jeweils einer separaten Zeile Das erste Attribut steht in der gleichen Zeile wie das Element Alle nachfolgenden Attribute werden entlang der Vertikalen untereinander ausgerichtet 115
  • 137. XAML Konventionen - XAML! - Erweiterte Attribut Formatierung Überblick Leichtes Scannen für Auge 116
  • 138. XAML Konventionen - XAML! - Erweiterte Attribut Formatierung Blend... Formatierung? Reihenfolge? 117
  • 139. XAML Konventionen - XAML! - Erweiterte Attribut Formatierung Anwenden bei Elemente bzw. Controls die als Content einer Template definiert sind (Control Template, Data Template, ...) Elemente bzw. Controls die als Content eines Controls mit Code-Behind definiert sind (UserControl, Window, Page...) Root-Element eines Dokuments und dessen Attribute 118
  • 140. XAML Konventionen - XAML! - Erweiterte Attribut Formatierung Ausnahmen Setter Trigger Colors Brushes... Nicht für Konstrukte mit wiederholenden Zeichenketten geeignet Nicht für Konstrukte mit wiederholenden Zeichenketten geeignet 119
  • 141. XAML Konventionen - XAML! - Erweiterte Attribut Formatierung Failed O_o Auge bleibt bei jeder Zeile an dem entsprechenden Value Attribut "hängen" 120
  • 142. XAML Konventionen - XAML! - Erweiterte Attribut Formatierung - VS Oben im Menü > Tools > Options > Text Editor > XAML 121
  • 144. XAML Namenskonventionen Allgemein „PascalCase“ Buchstaben und Zahlen Beispiel: <Individueller Name><Datentyp> Beispiele WhiteColor, ButtonBackgroundBrush, MainGrid, LoadButton, PrimaryButtonStyle, CheckBoxStyle, ... 123
  • 146. Performance Top 10 Virtualizing VirtualizingStackPanel bei ItemsControls verwenden + VirtualizingStackPanel.VirtualizationMode="Recycling" Rendert nur was im ViewPort sichtbar ist, Wrapper z.B. ListBoxItem werden wiederverwendet Event Handler Leaks Event Handler immer abmelden, auf jedes += immer -= Einfrieren PresentationOptions:Freeze="true" auf Freezable Objekten setzen dadurch kein Overhead durch Change Events StaticResource über DynamicResource Wenn keine Änderungen der Ressource zur Laufzeit stattfinden dann immer per StaticResource referenzieren Ableitung: BindingMode OneTime bei Data Binding Simples XAML Einfache Layouts, wenig Elemente, keine tiefen Verschachtelungen in Content oder Templates 125
  • 147. Performance Top 10 Shared Resource Dictionaries verwenden Schützt vor mehrfachen Allokation der Ressourcen, bei Bedarf „lazy load“ von spezifischen Ressourcen lokal in View Data Binding optimieren Ungültige Bindings „System.Windows.Data Error“ aufspüren und entfernen Bindings immer wieder freigeben BindingOperations.ClearBinding() Effekte Sollten vermieden werden, besser faken mit Rectangle, Border & Co. in Kombination mit Brushes Trigger über VSM Weniger Overhead da kein Storyboard gestartet werden muss Main UI Thread nicht blockieren Arbeiten mit BackgroundWorker, Threads oder async z.B. AsyncDelegateCommand, „responsive UI“ 126
  • 148. Wie werde ich ein guter WPF UI Developer? ;-)
  • 149. Wie werde ich ein guter WPF UI Developer? ;-) 128
  • 150. Wie werde ich ein guter WPF UI Developer? ;-) Fundament Design Basics Usability Engineering Basics Designer & UI Developer Workflow 128
  • 151. Wie werde ich ein guter WPF UI Developer? ;-) Stufe 1 Styles Control Templates Template Binding Animationen Trigger & VSM XAML Blend Controls & Layout Resource Management Data Binding Basics Fundament Design Basics Usability Engineering Basics Designer & UI Developer Workflow 128
  • 152. Wie werde ich ein guter WPF UI Developer? ;-) Stufe 2 MVVM Application Frameworks .NET Visual Studio Behaviors Data Binding Advanced Data Templates Attached Properties Adorner Stufe 1 Styles Control Templates Template Binding Animationen Trigger & VSM XAML Blend Controls & Layout Resource Management Data Binding Basics Fundament Design Basics Usability Engineering Basics Designer & UI Developer Workflow 128
  • 153. Wie werde ich ein guter WPF UI Developer? ;-) Stufe 3 Custom Control Development Custom Layout Panels Miscellaneous Stufe 2 MVVM Application Frameworks .NET Visual Studio Behaviors Data Binding Advanced Data Templates Attached Properties Adorner Stufe 1 Styles Control Templates Template Binding Animationen Trigger & VSM XAML Blend Controls & Layout Resource Management Data Binding Basics Fundament Design Basics Usability Engineering Basics Designer & UI Developer Workflow 128
  • 154. Fazit
  • 155. Fazit Denken Sie an einen benutzer-zentrierten Designprozess Schätzen Sie gutes UI Development Reizen Sie die Möglichkeiten von WPF aus! (Keine halben Sachen) Legen Sie Wert auf Struktur und Konsistenz während der Entwicklung 130