Download - WPF UI Development Unchained

Transcript
Page 1: WPF UI Development Unchained

WPF UI DEVELOPMENT UNCHAINEDAndré LanningerUI Developer

[email protected]

Ergosign GmbH

David C. ThömmesSoftware EngineerLead Software Engineering Standards [email protected]

Ergosign GmbH

www.davidchristian.de

Page 2: WPF UI Development Unchained

UI DEVELOPMENT?

2

Page 3: WPF UI Development Unchained
Page 4: WPF UI Development Unchained
Page 5: WPF UI Development Unchained

UI DEVELOPMENT? USER CENTERED DESIGN

4

Page 6: WPF UI Development Unchained

DEVELOP

SPECIFY

VALIDATE

DESIGN

ANALYSE

UI DEVELOPMENT? USER CENTERED DESIGN

4

Page 7: WPF UI Development Unchained

Kontextuelle Analyse

Beobachtungen und semistrukturierte Interviews bei Endanwendern vor Ort.

Page 8: WPF UI Development Unchained

Konzeptionelles Design

Ein ganzheitlich optimiertes Bedienkonzept bildet die Eckpfeiler des User Interface.

Page 9: WPF UI Development Unchained

Visuelles Design

Nach einem gemeinsamen Stilfindungsprozess wird anhand der erarbeiteten Vorgaben ein ansprechendes Visuelles Design entwickelt.

Page 10: WPF UI Development Unchained

Prototyping

Prototypen sind in verschiedenen Phasen der Gestaltung von Bedeutung, beispielsweise im Rahmen von User- und Task-Analyse, Design, Usability Testing oder zur unterstützenden Dokumentation bei der Spezifikation.

Page 11: WPF UI Development Unchained

Usability Testing

Ein Usability Test mit repräsentativen Endanwendern liefert entscheidende Hinweise zur Optimierung eines User Interface.

Page 12: WPF UI Development Unchained

SPECIFY

10

Page 13: WPF UI Development Unchained

UI DEVELOPMENT? USER CENTERED DESIGN

Spezifikation

11

Page 14: WPF UI Development Unchained

UI DEVELOPMENT? USER CENTERED DESIGN

Spezifikation

11

wtf? :-D

Page 15: WPF UI Development Unchained

UI DEVELOPMENT? DEKLARATIVE PROGRAMMIERUNG

Reminder - Deklarative Programmierung mit XAML, Styling, Templates...

12

Designer XAML Developer

Button

Page 16: WPF UI Development Unchained

UI DEVELOPMENT? MODEL VIEW VIEWMODEL

Reminder - Model View ViewModel - Klare Trennung Visualisierung & Logik

13

Präsentation XAML+

Code Behind

Interaktionslogik Daten & Geschäftslogik

View View Model Model

Data Binding

Page 17: WPF UI Development Unchained

UI DEVELOPMENT? 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

14

Page 18: WPF UI Development Unchained

UI DEVELOPMENT? ABER WAS SIND DIE PROBLEME?

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

15

Page 19: WPF UI Development Unchained

UI DEVELOPMENT? WPF UI DEVELOPER

16

Stufenmodell

Page 20: WPF UI Development Unchained

UI DEVELOPMENT? WPF UI DEVELOPER

16

Design Basics Designer & UI Developer Workflow Usability Engineering BasicsFundament

Stufenmodell

Page 21: WPF UI Development Unchained

UI DEVELOPMENT? WPF UI DEVELOPER

16

Design Basics Designer & UI Developer Workflow Usability Engineering BasicsFundament

Stufe 1 Styles AnimationenControl Templates

XAML Resource ManagementBlend Controls & Layout

Template Binding Trigger & VSM

Data Binding Basics

Stufenmodell

Page 22: WPF UI Development Unchained

UI DEVELOPMENT? WPF UI DEVELOPER

16

Design Basics Designer & UI Developer Workflow Usability Engineering BasicsFundament

Stufe 1 Styles AnimationenControl Templates

XAML Resource ManagementBlend Controls & Layout

Template Binding Trigger & VSM

Data Binding Basics

Stufe 2 Behaviors

AdornerData Binding Advanced

MVVM

Data Templates Attached Properties

Visual Studio.NETApplication Frameworks

Stufenmodell

Page 23: WPF UI Development Unchained

UI DEVELOPMENT? WPF UI DEVELOPER

16

Design Basics Designer & UI Developer Workflow Usability Engineering BasicsFundament

Stufe 1 Styles AnimationenControl Templates

XAML Resource ManagementBlend Controls & Layout

Template Binding Trigger & VSM

Data Binding Basics

Stufe 2 Behaviors

AdornerData Binding Advanced

MVVM

Data Templates Attached Properties

Visual Studio.NETApplication Frameworks

Stufe 3 Custom Control Development Custom Layout Panels Miscellaneous

Stufenmodell

Page 24: WPF UI Development Unchained

UI DEVELOPMENT? FAZIT

Zusammenfassung

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!

17

Page 25: WPF UI Development Unchained

UI DEVELOPMENT? FAZIT

Zusammenfassung

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!

17

User Centered Design+ Software Engineering+ UI Development

= Application! ;-)

Page 26: WPF UI Development Unchained

DESIGN UND DEVELOPMENT IM EINKLANG

18

Page 27: WPF UI Development Unchained

Eigene Prozesse

Design Development

Page 28: WPF UI Development Unchained

DESIGN UND DEVELOPMENT IM EINKLANG UI DEVELOPMENT

20

Abstraktes Vorgehen UI Developer - Styling und Custom Control Development

Page 29: WPF UI Development Unchained

DESIGN UND DEVELOPMENT IM EINKLANG UI DEVELOPMENT

20

Abstraktes Vorgehen UI Developer - Styling und Custom Control Development

DesignAnforderungen

Page 30: WPF UI Development Unchained

DESIGN UND DEVELOPMENT IM EINKLANG UI DEVELOPMENT

20

Abstraktes Vorgehen UI Developer - Styling und Custom Control Development

DesignAnforderungen

UI DevelopmentAnalyse

Abstraktion

Page 31: WPF UI Development Unchained

DESIGN UND DEVELOPMENT IM EINKLANG UI DEVELOPMENT

20

Identifikation

Standard UI Elemente

Custom Controls

Anforderungsanalyse pro Custom Control

Funktionale Anforderungen, Properties, Events, ....

Views

Abstraktes Vorgehen UI Developer - Styling und Custom Control Development

DesignAnforderungen

UI DevelopmentAnalyse

Abstraktion

Page 32: WPF UI Development Unchained

DESIGN UND DEVELOPMENT IM EINKLANG UI DEVELOPMENT

20

Identifikation

Standard UI Elemente

Custom Controls

Anforderungsanalyse pro Custom Control

Funktionale Anforderungen, Properties, Events, ....

Views

Abstraktes Vorgehen UI Developer - Styling und Custom Control Development

DesignAnforderungen DevelopUI Development

Analyse

Abstraktion

Page 33: WPF UI Development Unchained

21

Designer und UI Developer Schnittstellen...

DESIGN UND DEVELOPMENT IM EINKLANG UI DEVELOPMENT

Page 34: WPF UI Development Unchained

21

Designer und UI Developer Schnittstellen...

DESIGN UND DEVELOPMENT IM EINKLANG UI DEVELOPMENT

Page 35: WPF UI Development Unchained

21

Designer und UI Developer Schnittstellen...

DESIGN UND DEVELOPMENT IM EINKLANG UI DEVELOPMENT

Page 36: WPF UI Development Unchained

21

Designer und UI Developer Schnittstellen...

DESIGN UND DEVELOPMENT IM EINKLANG UI DEVELOPMENT

Page 37: WPF UI Development Unchained

21

Designer und UI Developer Schnittstellen...

DESIGN UND DEVELOPMENT IM EINKLANG UI DEVELOPMENT

Page 38: WPF UI Development Unchained

21

Designer und UI Developer Schnittstellen...

DESIGN UND DEVELOPMENT IM EINKLANG UI DEVELOPMENT

Page 39: WPF UI Development Unchained

EIN UI...

22

Page 40: WPF UI Development Unchained

Styling?

Custom Controls?

Page 41: WPF UI Development Unchained

DER WEG ZUM CUSTOM CONTROL

24

Page 42: WPF UI Development Unchained

DER WEG ZUM CUSTOM CONTROL DEFINITION CUSTOM CONTROL

Reminder - Eigentlich “nur”

Ableitung von einer konkreten Klasse != UserControl

Styling- und Template- Möglichkeiten

Visueller Aufbau im Control Template

Default Style möglich Generic.xaml

Zusammenfassung in einer Control Library möglich

25

Page 43: WPF UI Development Unchained

DER WEG ZUM CUSTOM CONTROL TECHNISCHE VORGEHENSWEISE

26

Page 44: WPF UI Development Unchained

DER WEG ZUM CUSTOM CONTROL TECHNISCHE VORGEHENSWEISE

26

WPF Standard Control?

Page 45: WPF UI Development Unchained

DER WEG ZUM CUSTOM CONTROL TECHNISCHE VORGEHENSWEISE

26

WPF Standard Control?

WPF Standard Controls gruppieren?

Page 46: WPF UI Development Unchained

DER WEG ZUM CUSTOM CONTROL TECHNISCHE VORGEHENSWEISE

26

WPF Standard Control?

WPF Standard Controls gruppieren?

Styling & Templating?

Page 47: WPF UI Development Unchained

DER WEG ZUM CUSTOM CONTROL TECHNISCHE VORGEHENSWEISE

26

WPF Standard Control?

WPF Standard Controls gruppieren?

Styling & Templating?

ValueConverter/Markup Extensions?

Page 48: WPF UI Development Unchained

DER WEG ZUM CUSTOM CONTROL TECHNISCHE VORGEHENSWEISE

26

WPF Standard Control?

WPF Standard Controls gruppieren?

Styling & Templating?

ValueConverter/Markup Extensions?

Attached Properties/Behaviors?

Page 49: WPF UI Development Unchained

DER WEG ZUM CUSTOM CONTROL TECHNISCHE VORGEHENSWEISE

26

WPF Standard Control?

WPF Standard Controls gruppieren?

Styling & Templating?

ValueConverter/Markup Extensions?

Attached Properties/Behaviors?

Drittanbieter?

Page 50: WPF UI Development Unchained

DER WEG ZUM CUSTOM CONTROL TECHNISCHE VORGEHENSWEISE

26

WPF Standard Control?

WPF Standard Controls gruppieren?

Styling & Templating?

ValueConverter/Markup Extensions?

Attached Properties/Behaviors?

Drittanbieter?

My Custom Controlvs.

Page 51: WPF UI Development Unchained

Weitere Faktoren zur Entscheidung Custom Control

Prototyp vs. Produktiv-Code

Wiederverwendbarkeit

Konsistenz im User Interface

27

DER WEG ZUM CUSTOM CONTROL TECHNISCHE VORGEHENSWEISE

Page 52: WPF UI Development Unchained

SearchTextBox,

aber nicht als Custom Control!

Page 53: WPF UI Development Unchained

SEARCHTEXTBOX

29

Page 54: WPF UI Development Unchained

ANALYSE

30

Page 55: WPF UI Development Unchained

SEARCHTEXTBOX ANALYSE

31

View Model

Page 56: WPF UI Development Unchained

SEARCHTEXTBOX ANALYSE

31

View Model

Page 57: WPF UI Development Unchained

SEARCHTEXTBOX ANALYSE

31

TextBox

View Model

Page 58: WPF UI Development Unchained

SEARCHTEXTBOX ANALYSE

31

TextBox

View Model

Page 59: WPF UI Development Unchained

SEARCHTEXTBOX ANALYSE

31

Watermark

WatermarkFontStyle

WatermarkFontWeight

WatermarkForeground

TextBox

View Model

Page 60: WPF UI Development Unchained

SEARCHTEXTBOX ANALYSE

31

Watermark

WatermarkFontStyle

WatermarkFontWeight

WatermarkForeground

TextBox

View Model

Page 61: WPF UI Development Unchained

SEARCHTEXTBOX ANALYSE

31

Watermark

WatermarkFontStyle

WatermarkFontWeight

WatermarkForeground

ClearCommand

(Zurücksetzen des Texts)

TextBox

View Model

Page 62: WPF UI Development Unchained

SEARCHTEXTBOX ANALYSE

31

Watermark

WatermarkFontStyle

WatermarkFontWeight

WatermarkForeground

ClearCommand

(Zurücksetzen des Texts)

TextBox

View Model

Page 63: WPF UI Development Unchained

SEARCHTEXTBOX ANALYSE

31

Watermark

WatermarkFontStyle

WatermarkFontWeight

WatermarkForeground

ClearCommand

(Zurücksetzen des Texts)

TextBox

PropertyBinding

View Model

Page 64: WPF UI Development Unchained

STYLE & TEMPLATE

32

Page 65: WPF UI Development Unchained

Style & Template(TextBox.xaml)

Page 66: WPF UI Development Unchained

ATTACHED PROPERTIES

34

Page 67: WPF UI Development Unchained

Gleich wie Dependency Properties

Metadaten und Speicherperformance, Änderungsbenachrichtigungen, Grundlage für Trigger, Data Binding, Animationen etc.

Definition nicht für eine bestimmtes Control sondern global in einer zentralen Klasse für alle Controls

Möglichkeit auf einem beliebigen Control zusetzen

Häufig verwendet bei Layout Panels

Grid.Row, Grid.Column, ...

SEARCHTEXTBOX ATTACHED PROPERTIES

Attached Properties

35

Page 68: WPF UI Development Unchained

Attached Properties anlegen 1/4

36

> Zentrale Klasse anlegen

Page 69: WPF UI Development Unchained

37

> Registrieren über statische Funktion

> Name

> Type

> Zugehörige Klasse

> Metadaten

Attached Properties anlegen 2/4

(AttachedProperties.cs)

Page 70: WPF UI Development Unchained

38

> Statische Funktionen für den Zugriff

> Verwendung der Methoden GetValue(), SetValue()

Attached Properties anlegen 3/4

(AttachedProperties.cs)

Page 71: WPF UI Development Unchained

39

Attached Properties anlegen 4/4

(TextBox.xaml)

> Wie DependencyProperties verwendbar

> TemplateBinding möglich

> Klasse.PropertyName

Page 72: WPF UI Development Unchained

READ-ONLY ATTACHED PROPERTIES

40

Page 73: WPF UI Development Unchained

Von Außen nur lesbar und nicht schreibbar

Verwaltung über internen Schlüssel

DependencyPropertyKey

Besteht aus Schlüssel & Dependency Property

SEARCHTEXTBOX READ-ONLY ATTACHED PROPERTIES

Read-Only Attached Properties

41

Page 74: WPF UI Development Unchained

42

Read-Only Attached Properties anlegen 1/2

(AttachedProperties.cs)

> Schlüssel registrieren über statische Funktion

> Anlegen der Property

Page 75: WPF UI Development Unchained

43

Attached Properties anlegen 2/2

(AttachedProperties.cs)

> Verwendung der Methoden GetValue(), SetValue()

Page 76: WPF UI Development Unchained

44

CommandAction definieren

(AttachedProperties.cs)

> Referenz über CommandParameter

Page 77: WPF UI Development Unchained

45

TemplateBinding(TextBox.xaml)

> Setzen der Bindings

> Command

> CommandParameter (Referenz)

Page 78: WPF UI Development Unchained

46

ViewModel Kommunikation

(MainView.xaml)

> Binding an ViewModel Property

Page 79: WPF UI Development Unchained

SEARCHTEXTBOX ABSCHLUSS

47

Watermark

WatermarkFontStyle

WatermarkFontWeight

WatermarkForeground

ClearCommand

(Zurücksetzen des Texts)

TextBox

PropertyBinding

View Model

Page 80: WPF UI Development Unchained

WAS FINDEN WIR NOCH... ?

48

Page 81: WPF UI Development Unchained

Styling?

Custom Controls?

Page 82: WPF UI Development Unchained

CircularProgressBar

Page 83: WPF UI Development Unchained

CIRCULAR PROGRESSBAR

51

Page 84: WPF UI Development Unchained

ANALYSE

52

Page 85: WPF UI Development Unchained

CIRCULAR PROGRESSBAR ANALYSE

53

View Model

Page 86: WPF UI Development Unchained

CIRCULAR PROGRESSBAR ANALYSE

53

View Model

Page 87: WPF UI Development Unchained

CIRCULAR PROGRESSBAR ANALYSE

53

ProgressBar

View Model

Page 88: WPF UI Development Unchained

CIRCULAR PROGRESSBAR ANALYSE

53

ProgressBar

View Model

Page 89: WPF UI Development Unchained

CIRCULAR PROGRESSBAR ANALYSE

53

ValueAsAngle

ProgressBar

View Model

Page 90: WPF UI Development Unchained

CIRCULAR PROGRESSBAR ANALYSE

53

ValueAsAngle

ProgressBar

View Model

Page 91: WPF UI Development Unchained

CIRCULAR PROGRESSBAR ANALYSE

53

ValueAsAngle

ProgressBar

PropertyBinding

View Model

Page 92: WPF UI Development Unchained

CIRCULAR PROGRESSBAR ANALYSE

53

ValueAsAngle

ProgressBar

PropertyBinding

View Model

Page 93: WPF UI Development Unchained

STYLE & TEMPLATE

54

Page 94: WPF UI Development Unchained

Style & Template(ProgressBar.xaml)

> MultiBinding

> Minimum

> Maximum

> Value

=> ValueAsAngle

Page 95: WPF UI Development Unchained

CONVERTER

56

Page 96: WPF UI Development Unchained

Implementieren des entsprechenden Interfaces

IValueConverter

IMultiValueConverter

Konvertieren einen/mehrere Wert/e in das gewünschte Format bzw. den gewünschten Typ

CIRCULAR PROGRESSBAR CONVERTER

Converter

57

Page 97: WPF UI Development Unchained

CIRCULAR PROGRESSBAR CONVERTER

58

Converter - IValueConverter

Page 98: WPF UI Development Unchained

CIRCULAR PROGRESSBAR CONVERTER

58

Property Typ/FormatA

Converter - IValueConverter

Page 99: WPF UI Development Unchained

CIRCULAR PROGRESSBAR CONVERTER

58

Property Typ/FormatA

Property Typ/FormatB

Converter - IValueConverter

Page 100: WPF UI Development Unchained

CIRCULAR PROGRESSBAR CONVERTER

58

Property Typ/FormatA

Property Typ/FormatB

Converter - IValueConverter

Binding

Page 101: WPF UI Development Unchained

CIRCULAR PROGRESSBAR CONVERTER

58

Property Typ/FormatA

Property Typ/FormatB

Converter - IValueConverter

Converter

Binding

Page 102: WPF UI Development Unchained

CIRCULAR PROGRESSBAR CONVERTER

59

Converter - IMultiValueConverter

Page 103: WPF UI Development Unchained

CIRCULAR PROGRESSBAR CONVERTER

59

PropertyTyp/FormatA

Converter - IMultiValueConverter

Page 104: WPF UI Development Unchained

CIRCULAR PROGRESSBAR CONVERTER

59

PropertyTyp/FormatA

Converter - IMultiValueConverter

PropertyTyp/FormatB

...

Page 105: WPF UI Development Unchained

CIRCULAR PROGRESSBAR CONVERTER

59

PropertyTyp/FormatA

PropertyTyp/FormatC

Converter - IMultiValueConverter

PropertyTyp/FormatB

...

Page 106: WPF UI Development Unchained

CIRCULAR PROGRESSBAR CONVERTER

59

PropertyTyp/FormatA

PropertyTyp/FormatC

Converter - IMultiValueConverter

PropertyTyp/FormatB

...

MultiBinding

Page 107: WPF UI Development Unchained

CIRCULAR PROGRESSBAR CONVERTER

59

PropertyTyp/FormatA

PropertyTyp/FormatC

Converter - IMultiValueConverter

PropertyTyp/FormatB

...

Converter

MultiBinding

Page 108: WPF UI Development Unchained

Converter 1/3

60

> Klasse anlegen

Page 109: WPF UI Development Unchained

61

> Interface implementieren

> Convert(...)

> ConvertBack(...)

Converter 2/3(ValueAsAngleConverter.cs)

Page 110: WPF UI Development Unchained

Converter 3/3(Converters.xaml, ProgressBar.xaml)

> Anlegen als Resource

> Converter Property setzen

Page 111: WPF UI Development Unchained

63

ViewModel Kommunikation(DataTemplates.xaml)

> Binding an ViewModel Property

Page 112: WPF UI Development Unchained

CIRCULAR PROGRESSBAR ANALYSE

64

ValueAsAnge

ProgressBar

PropertyBinding

View Model

Page 113: WPF UI Development Unchained

LOADING INDICATOR

65

Page 114: WPF UI Development Unchained

ANALYSE

66

Page 115: WPF UI Development Unchained

LOADING INDICATOR ADORNER

67

Page 116: WPF UI Development Unchained

LOADING INDICATOR ADORNER

67

Page 117: WPF UI Development Unchained

LOADING INDICATOR ADORNER

67

Page 118: WPF UI Development Unchained

LOADING INDICATOR ANALYSE

68

View Model

Page 119: WPF UI Development Unchained

LOADING INDICATOR ANALYSE

68

View Model

Page 120: WPF UI Development Unchained

LOADING INDICATOR ANALYSE

68

Beliebiger Content

View Model

Page 121: WPF UI Development Unchained

LOADING INDICATOR ANALYSE

68

Beliebiger Content

View Model

Page 122: WPF UI Development Unchained

LOADING INDICATOR ANALYSE

68

Beliebiger Content

View Model

IsLoading

LoadingContent

LoadingTemplate

LoadingDataContext

Page 123: WPF UI Development Unchained

LOADING INDICATOR ANALYSE

68

Beliebiger Content

View Model

IsLoading

LoadingContent

LoadingTemplate

LoadingDataContext

Page 124: WPF UI Development Unchained

LOADING INDICATOR ANALYSE

68

Beliebiger Content

PropertyBinding

View Model

IsLoading

LoadingContent

LoadingTemplate

LoadingDataContext

Page 125: WPF UI Development Unchained

ADORNER LAYER UND ADORNER

69

Page 126: WPF UI Development Unchained

AdornerLayer = zusätzliche Zeichen/Renderebene

Möglichkeit Inhalte über einem Control darzustellen

Adorner repräsentieren die Inhalte in einem AdornerLayer

Adorner werden in den nächst liegenden AdornerDecorator platziert (Default von Window)

Adorner selbst müssen implementiert werden!

Beispielsweise Darstellung eines Button im Adorner

LOADING INDICATOR ADORNER LAYER UND ADORNER

Überblick

70

Page 127: WPF UI Development Unchained

Implementieren eines Adorners mit Content

Data Template 1/571

> Klasse anlegen

Page 128: WPF UI Development Unchained

Implementieren eines Adorners mit Content

Data Template 2/5(LoadingBehaviorAdorner.cs)72

> Ableiten von Adorner

> Abstrakte Klasse

> Basisimplementierung

Page 129: WPF UI Development Unchained

Implementieren eines Adorners mit Content

Data Template 3/5(LoadingBehaviorAdorner.cs)73

> Member definieren

> Properties definieren

Page 130: WPF UI Development Unchained

Implementieren eines Adorners mit Content

Data Template 4/5(LoadingBehaviorAdorner.cs)74

> Überschreiben von Methoden zur korrekten Darstellung des Contents

Page 131: WPF UI Development Unchained

Implementieren eines Adorners mit Content

Data Template 5/5(LoadingBehaviorAdorner.cs)75

> Elemente initialisieren

Page 132: WPF UI Development Unchained

Adorner manuell verwendet

(MainView.xaml.cs)76

Page 133: WPF UI Development Unchained

BEHAVIOR

77

Page 134: WPF UI Development Unchained

Behavior verwenden und den Source-Code zur Adorner-Erzeugung und Verwaltung zentral zu definieren

Per Behavior die Circular ProgressBar innerhalb des Adorner darstellen

Behavior steuert das Verhalten

LOADING INDICATOR BEHAVIOR

Idee

78

Page 135: WPF UI Development Unchained

Kapselt eine gewisse Funktionalität und Logik in eine wiederverwendbare Klasse

Kann an eine beliebiges Control „angeheftet“ werden

Repräsentiert durch die Klasse Behavior<T>

wobei T = Typ des AssociatedObjects

Override Methoden OnAttached(), OnDetaching() und Property AssociatedObject bieten dem Entwickler volle Flexibilität sowie Kontrolle

LOADING INDICATOR BEHAVIOR

Behavior

79

Page 136: WPF UI Development Unchained

Implementieren einer Behavior 1/6

80

> Klasse anlegen

Page 137: WPF UI Development Unchained

Implementieren einer Behavior 2/6

(LoadingBehavior.cs)81

> Ableiten von Behavior<T> wobei T den Typ des AssociatedObjects widerspiegelt

> Überschreiben der Methoden OnAttached(), OnDetaching()

Page 138: WPF UI Development Unchained

Implementieren einer Behavior 3/6

(LoadingBehavior.cs)82

> Anlegen der Properties & Property Changed Callbacks

Page 139: WPF UI Development Unchained

Implementieren einer Behavior 4/6

(LoadingBehavior.cs)83

> Unser Adorner verwenden

> Get AdornerLayer

> Adorner anlegen

> Parameter = AdorneredElement

Page 140: WPF UI Development Unchained

Implementieren einer Behavior 5/6

(LoadingBehavior.cs)84

> Hinzufügen/Löschen des Adorners aus dem dazugehörigen AdornerLayer

Page 141: WPF UI Development Unchained

Implementieren einer Behavior 6/6

(MainView.xaml)85

> LoadingBehavior zum gewünschten Element hinzufügen

Page 142: WPF UI Development Unchained

86

ViewModel Kommunikation(DataTemplates.xaml)

> Binding an ViewModel Property

Page 143: WPF UI Development Unchained

LOADING INDICATOR ANALYSE

87

Beliebiger Content

PropertyBinding

View Model

IsLoading

LoadingContent

LoadingTemplate

LoadingDataContext

Page 144: WPF UI Development Unchained

BEHAVIOR VS. ATTACHED PROPERTIES

88

Page 145: WPF UI Development Unchained

Da AttachedProperties statisch angelegt werden, sollten sie nur zur:

weiteren Eigenschaftsbeschreibung (Watermark, CornerRadius usw.)

oder zur Realisierung überschaubarer Zusatzfunktionalität (ClearCommand) verwendet werden.

Nachteil Referenz Problem

LOADING INDICATOR BEHAVIOR VS. ATTACHED PROPERTIES

AttachedProperties

89

Page 146: WPF UI Development Unchained

Behaviors hingegen bieten die Möglichkeit komplexeren Code in eine wiederverwendbare Klassen zu kapseln (LoadingBehavior)

Mittels AssociatedObject, AssociatedType, OnAttached(), OnDetaching() möglichst große Flexibilität und Komfort.

LOADING INDICATOR BEHAVIOR VS. ATTACHED PROPERTIES

Behavior

90

Page 147: WPF UI Development Unchained

DA WAR DOCH NOCH WAS...

91

Page 148: WPF UI Development Unchained

PointChart

Page 149: WPF UI Development Unchained

FAZIT

93

Page 150: WPF UI Development Unchained

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

94

Page 151: WPF UI Development Unchained

FRAGEN?

95

Page 152: WPF UI Development Unchained

VIELEN DANK.

Page 153: WPF UI Development Unchained

[email protected]

Ergosign GmbHAdams-Lehmann-Straße 4480797 MünchenGermany

T +49 89 6890607-0F +49 89 6890607-10

T +49 681 988412-0F +49 681 988412-10

Ergosign GmbHEuropaallee 1266113 SaarbrückenGermany

Ergosign GmbHBernhard-Nocht-Straße 10920359 HamburgGermany

T +49 40 3179868-0F +49 40 3179868-10

Ergosign Switzerland AGBadenerstrasse 8088048 ZürichSwitzerland

T +41 44 54293-04F +41 44 54293-07

VIELEN DANK.

Page 154: WPF UI Development Unchained
Page 155: WPF UI Development Unchained

Ein benutzerzentrierter Prozess ist Voraussetzung für das Design einer positiven User Experience.