WPF Custom Control Development Unchained

WPF CUSTOM CONTROL DEVELOPMENT UNCHAINEDDavid C. Thömmes Senior Software Engineer Lead Software Engineering Standards [email protected]

Ergosign GmbH

mailto:[email protected]

Auf der Suche nach Custom Controls

CUSTOM CONTROL ANALYSE

3

Abstraktes Vorgehen


3

Abstraktes Vorgehen

Design Anforderungen


3

Abstraktes Vorgehen


UI Development

Analyse

Abstraktion


3

Identifikation

Standard UI Elemente

Custom Controls

Anforderungsanalyse pro Custom Control

Funktionale Anforderungen, Properties, Events, ....

Abstraktes Vorgehen


UI Development

Analyse

Abstraktion


3

Identifikation

Standard UI Elemente

Custom Controls

Anforderungsanalyse pro Custom Control

Funktionale Anforderungen, Properties, Events, ....

Abstraktes Vorgehen

Design Anforderungen Develop

UI Development

Analyse

Abstraktion

CUSTOM CONTROLS?

4

CUSTOM CONTROLS?

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

5

Besteht i.d.R aus Klasse, Style, Template

Verwaltung in Custom Control Library (VS Projektvorlage)

Kann beliebe Custom Controls & Ressourcen enthalten

DefaultStyle wird nach Konvention in “Themes/Generic.xaml” deklariert

Mapping im statischen Konstruktor des Controls (DefaultStyleKeyProperty.OverrideMetadata)

CUSTOM CONTROLS?

Custom Control Library

6

KAPITELTITEL

7

Neues Projekt erstellen

8

Template WPF Custom Control Library

wählen

9

Los gehts!

10

CustomControl1.cs

11

Generic.xaml

12

SearchTextBox.cs

13

Generic.xaml

WANN IST EIN CUSTOM CONTROL SINNVOLL?

14


15


15

WPF Standard Control?


15


WPF Standard Controls gruppieren?


15



Styling & Templating?


15




ValueConverter/Markup Extensions?


15





Attached Properties/Behaviors?


15






Drittanbieter?


15






Drittanbieter?

My Custom Controlvs.

Prototyp vs. Produktiv Code

Wiederverwendbarkeit

Konsistenz im User Interface

Produktivität bei großen Projekten


Allgemeine Überlegungen

16

PointChart

SearchTextBox


Die Ausrüstung!

18

Loaded/Unloaded

Routed Commands

Custom ControlDependency

Properties

Blendability Attribute

Override

Style, Template & TemplateBinding

OnApplyTemplate

Routed Events

Custom Control Library &

Generic.xaml

SEARCHTEXTBOX

19

SearchTextBox

ANALYSE

21

SEARCHTEXTBOX

22

View Model

SEARCHTEXTBOX

22

View Model

SEARCHTEXTBOX

22

TextBox

View Model

SEARCHTEXTBOX

22

TextBox

View Model

SEARCHTEXTBOX

22

Watermark

WatermarkFontStyle

WatermarkFontWeight

WatermarkForeground

TextBox

View Model

SEARCHTEXTBOX

22

Watermark

WatermarkFontStyle

WatermarkFontWeight

WatermarkForeground

TextBox

View Model

SEARCHTEXTBOX

22

Watermark

WatermarkFontStyle

WatermarkFontWeight

WatermarkForeground

ClearCommand

(Zurücksetzen des Texts)

TextBox

View Model

SEARCHTEXTBOX

22

Watermark

WatermarkFontStyle

WatermarkFontWeight

WatermarkForeground

ClearCommand


TextBox

View Model

SEARCHTEXTBOX

22

Watermark

WatermarkFontStyle

WatermarkFontWeight

WatermarkForeground

ClearCommand


TextBox

PropertyBinding

View Model

CUSTOM CONTROL LIBRARY

23

KAPITELTITEL

24

Es kann losgehen!

25

Basisklasse bestimmen

(SearchTextBox.cs)

STYLE & TEMPLATE

26

SEARCHTEXTBOX

27

http://msdn.microsoft.com/en-us/library/aa970773(v=vs.110).aspx

http://msdn.microsoft.com/en-us/library/aa970773(v=vs.110).aspx

Style & Template (Generic.xaml)

DEPENDENCY PROPERTIES BASICS

29

Oberflächlich wie .NET Properties (Get, Set)

Unterschied liegt in der Implementierung

Ausschließliche Verwendung bei Controls

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

SEARCHTEXTBOX

Dependency Properties - Basics

30

> Registrieren über Statische Funktion

> Name

> Typ

> Control Typ bzw. Klasse

> Metadaten Properties anlegen 1/2 (SearchTextBox.cs)

31

32

> Verwendung der Methoden GetValue(), SetValue()

Properties anlegen 2/2 (SearchTextBox.cs)

ROUTED COMMANDS

33

RoutedCommand Klasse implementiert ICommand

Löst eine Aktion innerhalb eines Controls aus und muss abonniert werden

Verknüpfung mit Methode oder Funktion der Control Klasse per CommandBinding

Kann über Command Property ausgelöst werden

SEARCHTEXTBOX

RoutedCommands

34

SEARCHTEXTBOX

35

SEARCHTEXTBOX

35

Child Control löst Command aus

SEARCHTEXTBOX

35

Parent 1


SEARCHTEXTBOX

35

Parent 2

Parent 1


SEARCHTEXTBOX

35

....

Parent 2

Parent 1


SEARCHTEXTBOX

35

Parent Control mit “Abonnement” führt Aktion aus

....

Parent 2

Parent 1


SEARCHTEXTBOX

35

Parent Control mit “Abonnement” führt Aktion aus

....

Parent 2

Parent 1


SEARCHTEXTBOX

36

SEARCHTEXTBOX

36

SEARCHTEXTBOX

36

1.Button-Click löst das Command aus

SEARCHTEXTBOX

36


2. SearchTextBox mit

“Abonnement” führt Aktion aus

SEARCHTEXTBOX

36


2. SearchTextBox mit

“Abonnement” führt Aktion aus

3. Command stoppt

37

> Routed Command anlegen

> Name

> Control Typ bzw. Klasse

Routed Command 1/3 (SearchTextBox.cs)

> Execute Aktion

> CanExecute Abfrage

Routed Command 2/3 (SearchTextBox.cs)

38

> Command Binding erzeugen

> Command

> Execute

> CanExecute

Routed Command 3/3 (Generic.xaml)

39

> Auslösen über Command Property / x:Static Verweis

VIEWMODEL KOMMUNIKATION

40

Binding (Implementierung INotifyPropertyChanged)

SEARCHTEXTBOX

ViewModel Kommunikation - Basics

41

42

ViewModel Kommunikation 1/3

(MainView.xaml)

> Binding an ViewModel Property

43


(SampleViewModel.cs)

> Implementieren von INotifyPropertyChanged

44



> Aufrufen von OnPropertyChanged (Update des Bindings)

> Aufruf der Update Logik

SEARCHTEXTBOX

45

Watermark

WatermarkFontStyle

WatermarkFontWeight

WatermarkForeground

ClearCommand

(Rucksetzen des Texts)

TextBox

PropertyBinding

View Model

SEARCHTEXTBOX

45

Watermark

WatermarkFontStyle

WatermarkFontWeight

WatermarkForeground

ClearCommand

(Rucksetzen des Texts)

TextBox

PropertyBinding

View Model

DONE

POINTCHART

46

PointChart

ANALYSE

48

POINTCHART

49

POINTCHART

49

PointChartViewModel

POINTCHART

49

PointChartViewModel

Points

POINTCHART

49

PointChartViewModel

Points

P1

P2

...

POINTCHART

49

PointChartViewModel

Points

P1

P2

...

POINTCHART

49

PointChartViewModel

Points

P1

P2

...

POINTCHART

49

PointChartViewModel

Points

P1

P2

...

POINTCHART

49

PointChartViewModel

Points

P1

P2

...

POINTCHART

49

ListBox (PointChart)

PointChartViewModel

Points

P1

P2

...

POINTCHART

49


ListBoxItem

(PointChartItem)

PointChartViewModel

Points

P1

P2

...

POINTCHART

49


ListBoxItem

(PointChartItem)

Polyline (PART_Line)

PointChartViewModel

Points

P1

P2

...

POINTCHART

49


ListBoxItem

(PointChartItem)


Canvas (PART_DrawingArea)

PointChartViewModel

Points

P1

P2

...

50

PointChartViewModel

Points

P1

P2

...

POINTCHART


50

PointChartViewModel

Points

P1

P2

...

POINTCHART


X/YMinimum

50

PointChartViewModel

Points

P1

P2

...

POINTCHART


X/YMinimum

X/YMaximum

50

PointChartViewModel

Points

P1

P2

...

POINTCHART


X/YMinimum

X/YMaximum

LineThickness

50

PointChartViewModel

Points

P1

P2

...

POINTCHART


X/YMinimum

X/YMaximum

LineThickness

LineBrush

50

PointChartViewModel

Points

P1

P2

...

POINTCHART


X/YMinimum

X/YMaximum

LineThickness

LineBrush

...

50

Property-Binding

(ItemsSource)

PointChartViewModel

Points

P1

P2

...

POINTCHART


X/YMinimum

X/YMaximum

LineThickness

LineBrush

...

51

ListBoxItem:

(PointChartItem)

PointChartViewModel

Points

P1

P2

...

POINTCHART

51

ListBoxItem:

(PointChartItem)

XUnitValue

PointChartViewModel

Points

P1

P2

...

POINTCHART

51

ListBoxItem:

(PointChartItem)

XUnitValue

YUnitValue

PointChartViewModel

Points

P1

P2

...

POINTCHART

51

ListBoxItem:

(PointChartItem)

XUnitValue

YUnitValue

Property Binding

PointChartViewModel

Points

P1

P2

...

POINTCHART

51

ListBoxItem:

(PointChartItem)

XUnitValue

YUnitValue

Property Binding

PointChartViewModel

Points

P1

P2

...

POINTCHART

UnitPointChanged-RoutedEvent

(PointChart)

52


PointChartViewModel

Points

P1

P2

...

POINTCHART

52


Point-Management innerhalb des Controls

PointChartViewModel

Points

P1

P2

...

POINTCHART

52



(override) ItemsChanged

PointChartViewModel

Points

P1

P2

...

POINTCHART

52



(override) ItemsChanged

UnitPointChanged

PointChartViewModel

Points

P1

P2

...

POINTCHART

53

Polyline

POINTCHART

54

That’s it!

CUSTOM CONTROL LIBRARY

55

56

Custom Control Library erstellen

57

Basisklasse bestimmen (PointChart.cs)

58

Basisklasse bestimmen

(PointChartItem.cs)

59

Basisklasse bestimmen (PointChart.cs)

(PointChartItem.cs)

POINTCHART

Besonderheit ItemsControl

(Override) IsItemItsOwnContainerOverride

Ist das Item sein eigener Container?

(Override) GetContainerForItemOverride

Liefert das Element zum Anzeigen des Items

60

61

Besonderheit ItemsControl

(PointChart.cs)

STYLE & TEMPLATE

62

Style & Template: PointChart (Generic.xaml)

Style & Template: PointChartItem

(Generic.xaml)

ONAPPLYTEMPLATE()

65

Logic (C#, Klasse) und Visualisierung (Xaml, Template) getrennt

Elemente innerhalb Control Template werden nach Konvention mit PART_... benannt

Element-Referenzierung über OnApplyTemplate() Methode GetTemplateChild() Methode mit PART_... aufrufen

Achtung: Element müssen nicht in der Template vorhanden sein

POINTCHART

OnApplyTemplate()

66

Element-Referenzierung 1/2

(Generic.xaml)

> Diese beiden Elemente sollen referenziert werden

Element-Referenzierung 2/2

(PointChart.cs)

> Referenz kann null sein!

Element-Referenzierung Tips

(PointChart.cs)

POINTCHART

OnApplyTemplate() - Tipps

70

Nur verwenden wenn Template Binding, RoutedCommands oder RoutedEvents nicht zu dem gewünschten Ergebnis führen

NullReferenceException vermeiden und defensiv programmieren

OnApplyTemplate() Methode kann mehrfach aufgerufen werden, mit internen Properties arbeiten (Mehr Kontrolle)

OnApplyTemplate() Methode kann manuell aufgerufen werden. Dadurch wird Control Template geladen

DEPENDENCY PROPERTIES EXTENDED

71

72

Properties anlegen 1/2 (PointChart.cs)

> Was ist das?

73

Properties anlegen 2/2 (PointChartItem.cs)

Reagieren auf Änderungen über Changed Callback möglich

Angabe einer statischen Funktion. Über das Metadatenobjekt innerhalb der Funktion erhält man Zugriff auf die Instanz des Controls sowie Informationen über Änderungen (ChangedEventArgs)

Statische Methoden möglichst kurz halten und auf der Instanz eine Methode aufrufen

POINTCHART

Dependency Properties - Extended 1/2

74

75

Properties Changed Callback

(PointChart.cs)

> Angabe Callback

> Callback mit ChangedEventArgs

Doch was wenn bereits existierende Properties Elemente beeinflussen?

Hier:

Width, Height

Items

Lösung: Überschreiben bereits vorhandener Methoden oder Properties

Dependency Properties - Extended 2/2

76

POINTCHART

77

Override Methods (PointChart.cs)

78

Override Properties (PointChart.cs)

LOGIK

79

80

Alle Punkte updaten (PointChart.cs)

81

Ein Punkt updaten

MathHelper Hilfsklasse (PointChart.cs)

ROUTED EVENTS

82

RoutedEvents können je nach Strategy im visuellen Baum hoch oder hinunter navigieren.

Somit können Sie mehrere Handler auf verschiedenen Elementen auslösen

Strategien:

Tunneling = Down

Bubbling = Up

Direct = Direct (Vergleiche standard .NET Events)

RoutedEvents

83

POINTCHART

84

Routed Events 1/3 (PointChartItem.cs)

> Anlegen des Events in der auslösenden Klasse

85

Routed Events 2/3 (PointChartItem.cs)

> Aufrufen des angelegten Events

86

Routed Events 3/3 (PointChart.cs)

> Event abonnieren und Aktion definieren

VIEWMODEL KOMMUNIKATION

87

SampleViewModel.cs, PointViewModel.cs implementieren INotifyPropertyChanged

Binding der Items an XUnitValue, YUnitValue

Binding der ItemsSource an ObservableCollection Points

POINTCHART

ViewModel Kommunikation - Extended

88


(MainView.xaml)

> Binding PointChart

> Points

> SelectedItem

> Binding PointChartItem

> XUnitValue

> YUnitValue

> IsSelected

> ...



> Aufrufen von OnPropertyChanged (Update des Bindings)

> Aufruf der Update Logik

POINTCHART

91


ListBoxItem

(PointChartItem)



PointChartViewModel

Points

P1

P2

...

POINTCHART

91


ListBoxItem

(PointChartItem)



PointChartViewModel

Points

P1

P2

...

DONE

BLENDABILITY

92

Xaml friendly und Blend kompatibel

Default Property Values, Styles und Templates

Zusätzliche Ressourcen als Properties

Keine tiefe Verschachtelung der Templates

Mode Properties für Trigger

Design Time Features verwenden

...

BLENDABILITY

Blendability

93

TemplatePart Attribute (PointChart.cs)

ContentProperty Attribute

(SearchTextBox.cs)

AlternateContent-Property Attribute

(SearchTextBox.cs)

Description Attribute 1/2

(SearchTextBox.cs)

Description Attribute 2/2

(SearchTextBox.cs)

StyledTypedProperty Attribute

(PointChart.cs)

Namespace Merge (AssemblyInfo.cs)

DesignTime (AssemblyInfo.cs)

TOOLS

102

Xaml Styler

1

2

3

Element & Speicher Analyse Xaml Spy (Alternative WPF Inspector oder

Snoop)

Element & Speicher Analyse Xaml Spy (Alternative WPF Inspector oder

Snoop)

Live Property Editing Xaml Spy (Alternative WPF Inspector oder

Snoop)

Live Property Editing Xaml Spy (Alternative WPF Inspector oder

Snoop)

FAZIT

106

FAZIT

Fazit

WPF bietet die optimale Basis für Custom Control Development

Custom Controls sinnvoll einsetzen

Sorgen für mehr Konsistenz (Bausteine)

Erhöhen die Produktivität (Implementierung, Blendability)

Leben Sie einen benutzerzentrierten Designprozess!

107

SOURCE-CODE!

108

SOURCE-CODE!

GitHub und Blogs / Kontakte

GitHub Repository mit Slides und Beispielen

https://github.com/dctdct/WPF-UI-Development-Best-Practices

Ergosign Blog

http://www.ergosign.de/de/unternehmen/blog

DCT Blog / Twitter / Xing

http://davidchristian.de/

https://twitter.com/davidcthoemmes

https://www.xing.com/profile/DavidC_Thoemmes

109

https://github.com/dctdct/WPF-UI-Development-Best-Practices

http://www.ergosign.de/de/unternehmen/blog

http://davidchristian.de/

https://twitter.com/davidcthoemmes

https://www.xing.com/profile/DavidC_Thoemmes

VIELEN DANK!

110

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