WPF CUSTOM CONTROL DEVELOPMENT UNCHAINED
David C. Thömmes
Senior Software Engineer
Lead Software Engineering Standards
tho...
Auf der Suche nach
Custom Controls
CUSTOM CONTROL ANALYSE
3
Abstraktes Vorgehen
CUSTOM CONTROL ANALYSE
3
Abstraktes Vorgehen
Design
Anforderungen
CUSTOM CONTROL ANALYSE
3
Abstraktes Vorgehen
Design
Anforderungen
UI
Development
Analyse
Abstraktion
CUSTOM CONTROL ANALYSE
3
Identifikation
Standard UI Elemente
Custom Controls
Anforderungsanalyse pro Custom Control
Funkti...
CUSTOM CONTROL ANALYSE
3
Identifikation
Standard UI Elemente
Custom Controls
Anforderungsanalyse pro Custom Control
Funkti...
CUSTOM CONTROLS?
4
CUSTOM CONTROLS?
Eigentlich “nur”
Ableitung von einer konkreten Klasse != UserControl
Styling- und Template- Möglichkeiten...
Besteht i.d.R aus Klasse, Style, Template
Verwaltung in Custom Control Library (VS Projektvorlage)
Kann beliebe Custom Con...
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
WANN IST EIN CUSTOM CONTROL SINNVOLL?
15
WANN IST EIN CUSTOM CONTROL SINNVOLL?
15
WPF Standard Control?
WANN IST EIN CUSTOM CONTROL SINNVOLL?
15
WPF Standard Control?
WPF Standard Controls
gruppieren?
WANN IST EIN CUSTOM CONTROL SINNVOLL?
15
WPF Standard Control?
WPF Standard Controls
gruppieren?
Styling & Templating?
WANN IST EIN CUSTOM CONTROL SINNVOLL?
15
WPF Standard Control?
WPF Standard Controls
gruppieren?
Styling & Templating?
Val...
WANN IST EIN CUSTOM CONTROL SINNVOLL?
15
WPF Standard Control?
WPF Standard Controls
gruppieren?
Styling & Templating?
Val...
WANN IST EIN CUSTOM CONTROL SINNVOLL?
15
WPF Standard Control?
WPF Standard Controls
gruppieren?
Styling & Templating?
Val...
WANN IST EIN CUSTOM CONTROL SINNVOLL?
15
WPF Standard Control?
WPF Standard Controls
gruppieren?
Styling & Templating?
Val...
Prototyp vs. Produktiv Code
Wiederverwendbarkeit
Konsistenz im User Interface
Produktivität bei großen Projekten
WANN IST ...
PointChart
SearchTextBox
WANN IST EIN CUSTOM CONTROL SINNVOLL?
Die Ausrüstung!
18
Loaded/Unloaded
Routed
Commands
Custom
ControlDependency
Properti...
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...
SEARCHTEXTBOX
22
Watermark
WatermarkFontStyle
WatermarkFontWeight
WatermarkForeground
ClearCommand
(Zurücksetzen des Texts...
SEARCHTEXTBOX
22
Watermark
WatermarkFontStyle
WatermarkFontWeight
WatermarkForeground
ClearCommand
(Zurücksetzen des Texts...
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
Style & Template
(Generic.xaml)
DEPENDENCY PROPERTIES BASICS
29
Oberflächlich wie .NET Properties (Get, Set)
Unterschied liegt in der Implementierung
Ausschließliche Verwendung bei Contr...
> Registrieren über Statische Funktion
> Name
> Typ
> Control Typ bzw. Klasse
> Metadaten
Properties anlegen 1/2
(SearchTe...
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ü...
SEARCHTEXTBOX
35
SEARCHTEXTBOX
35
Child Control löst Command aus
SEARCHTEXTBOX
35
Parent 1
Child Control löst Command aus
SEARCHTEXTBOX
35
Parent 2
Parent 1
Child Control löst Command aus
SEARCHTEXTBOX
35
....
Parent 2
Parent 1
Child Control löst Command aus
SEARCHTEXTBOX
35
Parent Control mit “Abonnement” führt Aktion aus
....
Parent 2
Parent 1
Child Control löst Command aus
SEARCHTEXTBOX
35
Parent Control mit “Abonnement” führt Aktion aus
....
Parent 2
Parent 1
Child Control löst Command aus
SEARCHTEXTBOX
36
SEARCHTEXTBOX
36
SEARCHTEXTBOX
36
1.Button-Click löst das Command aus
SEARCHTEXTBOX
36
1.Button-Click löst das Command aus
2. SearchTextBox mit
“Abonnement” führt Aktion aus
SEARCHTEXTBOX
36
1.Button-Click löst das Command aus
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
> CanE...
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
ViewModel
Kommunikation 2/3
(SampleViewModel.cs)
> Implementieren von
INotifyPropertyChanged
44
ViewModel
Kommunikation 3/3
(SampleViewModel.cs)
> Aufrufen von
OnPropertyChanged (Update
des Bindings)
> Aufruf der
Up...
SEARCHTEXTBOX
45
Watermark
WatermarkFontStyle
WatermarkFontWeight
WatermarkForeground
ClearCommand
(Rucksetzen des Texts)
...
SEARCHTEXTBOX
45
Watermark
WatermarkFontStyle
WatermarkFontWeight
WatermarkForeground
ClearCommand
(Rucksetzen des Texts)
...
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
ListBox (PointChart)
ListBoxItem
(PointChartItem)
PointChartViewModel
Points
P1
P2
...
POINTCHART
49
ListBox (PointChart)
ListBoxItem
(PointChartItem)
Polyline (PART_Line)
PointChartViewModel
Points
P1
P2
...
POINTCHART
49
ListBox (PointChart)
ListBoxItem
(PointChartItem)
Polyline (PART_Line)
Canvas (PART_DrawingArea)
PointChartV...
50
PointChartViewModel
Points
P1
P2
...
POINTCHART
ListBox (PointChart)
50
PointChartViewModel
Points
P1
P2
...
POINTCHART
ListBox (PointChart)
X/YMinimum
50
PointChartViewModel
Points
P1
P2
...
POINTCHART
ListBox (PointChart)
X/YMinimum
X/YMaximum
50
PointChartViewModel
Points
P1
P2
...
POINTCHART
ListBox (PointChart)
X/YMinimum
X/YMaximum
LineThickness
50
PointChartViewModel
Points
P1
P2
...
POINTCHART
ListBox (PointChart)
X/YMinimum
X/YMaximum
LineThickness
LineBrush
50
PointChartViewModel
Points
P1
P2
...
POINTCHART
ListBox (PointChart)
X/YMinimum
X/YMaximum
LineThickness
LineBrush
...
50
Property-
Binding
(ItemsSource)
PointChartViewModel
Points
P1
P2
...
POINTCHART
ListBox (PointChart)
X/YMinimum
X/YMaxi...
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
Un...
52
Polyline (PART_Line)
PointChartViewModel
Points
P1
P2
...
POINTCHART
52
Polyline (PART_Line)
Point-Management innerhalb
des Controls
PointChartViewModel
Points
P1
P2
...
POINTCHART
52
Polyline (PART_Line)
Point-Management innerhalb
des Controls
(override) ItemsChanged
PointChartViewModel
Points
P1
P2
....
52
Polyline (PART_Line)
Point-Management innerhalb
des Controls
(override) ItemsChanged
UnitPointChanged
PointChartViewMod...
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?
(Overri...
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...
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...
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
innerhal...
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 berei...
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...
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
Bi...
ViewModel
Kommunikation 1/3
(MainView.xaml)
> Binding PointChart
> Points
> SelectedItem
> Binding PointChartItem
> XUnitV...
ViewModel
Kommunikation 2/3
(SampleViewModel.cs)
> Aufrufen von
OnPropertyChanged (Update
des Bindings)
> Aufruf der
Updat...
POINTCHART
91
ListBox (PointChart)
ListBoxItem
(PointChartItem)
Polyline (PART_Line)
Canvas (PART_DrawingArea)
PointChartV...
POINTCHART
91
ListBox (PointChart)
ListBoxItem
(PointChartItem)
Polyline (PART_Line)
Canvas (PART_DrawingArea)
PointChartV...
BLENDABILITY
92
Xaml friendly und Blend kompatibel
Default Property Values, Styles und Templates
Zusätzliche Ressourcen als Properties
Kei...
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 meh...
SOURCE-CODE!
108
SOURCE-CODE!
GitHub und Blogs / Kontakte
GitHub Repository mit Slides und Beispielen
https://github.com/dctdct/WPF-UI-Deve...
VIELEN DANK!
110
Ein benutzerzentrierter
Prozess ist Voraussetzung für
das Design einer positiven 

User Experience.
WPF Custom Control Development Unchained
Nächste SlideShare
Wird geladen in …5
×

WPF Custom Control Development Unchained

1.455 Aufrufe

Veröffentlicht am

Zusammen mit André, haben wir vor etwas längerer Zeit einen Vortrag zum Thema WPF Custom Control Development ausgestaltet. Wir hielten den Vortrag auf einigen Konferenzen und .NET UserGroups!

Der Vortrag zeigt zunächst, wie man abstrakt bei der Entwicklung neuer Controls vorgehen kann. Als Ausgangspunkt sollte eine kleine Analyse dienen. Ziel der Analyse ist die Klärung der Schnittstellen des Controls d.h. welche Properties, Events usw. angeboten werden. Danach thematisiert der Vortrag die Frage, wann überhaupt ein Custom Control sinnvoll ist. WPF bietet u.a. mit Styles und Templates unglaubliche Möglichkeiten und der Zeitpunkt zur Erstellung eines eigenes Custom Controls verzögert sich aus der technischen Perspektive stark. Demgegenüber stehen jedoch Überlegungen, ob das Control gerade für einen Prototyp oder realen Produktiv-Code implementiert wird. Für einen Wegwerf-Prototyp darf es gerne quick and dirty sein. Anschließend zeigt der Vortrag einige der handwerkliche Techniken u.a. Custom Control Library, Routed Events, Dependency Properties, Routed Commands, und OnApplyTemplate Methode. Diese Techniken werden anhand einer einfacheren SearchTextBox und eines komplexen PointCharts (Graphen) veranschaulicht.
Im Anschluss wird das Thema Blendability angesprochen und die wichtigsten Attribute vorgestellt.

Ich beschäftige mich schon wirklich lange mit der WPF und gegenwärtigen UI Frameworks. Nach wie vor fasziniert mich die Architektur der WPF unheimlich und aus meiner Sicht gibt es kein UI Framework, welches auch im Hinblick auf Custom Control Development so eine logische und ausgeklügelte Basis bietet! Wer einmal allgemeines Wissen über Control-Bau gelernt hat und sich danach die Techniken der WPF aneignet, wird die WPF lieben.

Veröffentlicht in: Software
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.455
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
10
Aktionen
Geteilt
0
Downloads
14
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

WPF Custom Control Development Unchained

  1. 1. WPF CUSTOM CONTROL DEVELOPMENT UNCHAINED David C. Thömmes Senior Software Engineer Lead Software Engineering Standards thoemmes@ergosign.de Ergosign GmbH
  2. 2. Auf der Suche nach Custom Controls
  3. 3. CUSTOM CONTROL ANALYSE 3 Abstraktes Vorgehen
  4. 4. CUSTOM CONTROL ANALYSE 3 Abstraktes Vorgehen Design Anforderungen
  5. 5. CUSTOM CONTROL ANALYSE 3 Abstraktes Vorgehen Design Anforderungen UI Development Analyse Abstraktion
  6. 6. CUSTOM CONTROL ANALYSE 3 Identifikation Standard UI Elemente Custom Controls Anforderungsanalyse pro Custom Control Funktionale Anforderungen, Properties, Events, .... Abstraktes Vorgehen Design Anforderungen UI Development Analyse Abstraktion
  7. 7. CUSTOM CONTROL ANALYSE 3 Identifikation Standard UI Elemente Custom Controls Anforderungsanalyse pro Custom Control Funktionale Anforderungen, Properties, Events, .... Abstraktes Vorgehen Design Anforderungen Develop UI Development Analyse Abstraktion
  8. 8. CUSTOM CONTROLS? 4
  9. 9. 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
  10. 10. 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
  11. 11. KAPITELTITEL 7 Neues Projekt erstellen
  12. 12. 8 Template WPF Custom Control Library wählen
  13. 13. 9 Los gehts!
  14. 14. 10 CustomControl1.cs
  15. 15. 11 Generic.xaml
  16. 16. 12 SearchTextBox.cs
  17. 17. 13 Generic.xaml
  18. 18. WANN IST EIN CUSTOM CONTROL SINNVOLL? 14
  19. 19. WANN IST EIN CUSTOM CONTROL SINNVOLL? 15
  20. 20. WANN IST EIN CUSTOM CONTROL SINNVOLL? 15 WPF Standard Control?
  21. 21. WANN IST EIN CUSTOM CONTROL SINNVOLL? 15 WPF Standard Control? WPF Standard Controls gruppieren?
  22. 22. WANN IST EIN CUSTOM CONTROL SINNVOLL? 15 WPF Standard Control? WPF Standard Controls gruppieren? Styling & Templating?
  23. 23. WANN IST EIN CUSTOM CONTROL SINNVOLL? 15 WPF Standard Control? WPF Standard Controls gruppieren? Styling & Templating? ValueConverter/Markup Extensions?
  24. 24. WANN IST EIN CUSTOM CONTROL SINNVOLL? 15 WPF Standard Control? WPF Standard Controls gruppieren? Styling & Templating? ValueConverter/Markup Extensions? Attached Properties/Behaviors?
  25. 25. WANN IST EIN CUSTOM CONTROL SINNVOLL? 15 WPF Standard Control? WPF Standard Controls gruppieren? Styling & Templating? ValueConverter/Markup Extensions? Attached Properties/Behaviors? Drittanbieter?
  26. 26. WANN IST EIN CUSTOM CONTROL SINNVOLL? 15 WPF Standard Control? WPF Standard Controls gruppieren? Styling & Templating? ValueConverter/Markup Extensions? Attached Properties/Behaviors? Drittanbieter? My Custom Controlvs.
  27. 27. Prototyp vs. Produktiv Code Wiederverwendbarkeit Konsistenz im User Interface Produktivität bei großen Projekten WANN IST EIN CUSTOM CONTROL SINNVOLL? Allgemeine Überlegungen 16
  28. 28. PointChart SearchTextBox
  29. 29. WANN IST EIN CUSTOM CONTROL SINNVOLL? Die Ausrüstung! 18 Loaded/Unloaded Routed Commands Custom ControlDependency Properties Blendability Attribute Overrid e Style, Template & TemplateBinding OnApplyTemplate Routed Events Custom Control Library & Generic.xaml
  30. 30. SEARCHTEXTBOX 19
  31. 31. SearchTextBox
  32. 32. ANALYSE 21
  33. 33. SEARCHTEXTBOX 22 View Model
  34. 34. SEARCHTEXTBOX 22 View Model
  35. 35. SEARCHTEXTBOX 22 TextBox View Model
  36. 36. SEARCHTEXTBOX 22 TextBox View Model
  37. 37. SEARCHTEXTBOX 22 Watermark WatermarkFontStyle WatermarkFontWeight WatermarkForeground TextBox View Model
  38. 38. SEARCHTEXTBOX 22 Watermark WatermarkFontStyle WatermarkFontWeight WatermarkForeground TextBox View Model
  39. 39. SEARCHTEXTBOX 22 Watermark WatermarkFontStyle WatermarkFontWeight WatermarkForeground ClearCommand (Zurücksetzen des Texts) TextBox View Model
  40. 40. SEARCHTEXTBOX 22 Watermark WatermarkFontStyle WatermarkFontWeight WatermarkForeground ClearCommand (Zurücksetzen des Texts) TextBox View Model
  41. 41. SEARCHTEXTBOX 22 Watermark WatermarkFontStyle WatermarkFontWeight WatermarkForeground ClearCommand (Zurücksetzen des Texts) TextBox PropertyBinding View Model
  42. 42. CUSTOM CONTROL LIBRARY 23
  43. 43. KAPITELTITEL 24 Es kann losgehen!
  44. 44. 25 Basisklasse bestimmen (SearchTextBox.cs)
  45. 45. STYLE & TEMPLATE 26
  46. 46. SEARCHTEXTBOX 27 http://msdn.microsoft.com/en-us/library/aa970773(v=vs.110).aspx
  47. 47. Style & Template (Generic.xaml)
  48. 48. DEPENDENCY PROPERTIES BASICS 29
  49. 49. 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
  50. 50. > Registrieren über Statische Funktion > Name > Typ > Control Typ bzw. Klasse > Metadaten Properties anlegen 1/2 (SearchTextBox.cs) 31
  51. 51. 32 > Verwendung der Methoden GetValue(), SetValue() Properties anlegen 2/2 (SearchTextBox.cs)
  52. 52. ROUTED COMMANDS 33
  53. 53. 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
  54. 54. SEARCHTEXTBOX 35
  55. 55. SEARCHTEXTBOX 35 Child Control löst Command aus
  56. 56. SEARCHTEXTBOX 35 Parent 1 Child Control löst Command aus
  57. 57. SEARCHTEXTBOX 35 Parent 2 Parent 1 Child Control löst Command aus
  58. 58. SEARCHTEXTBOX 35 .... Parent 2 Parent 1 Child Control löst Command aus
  59. 59. SEARCHTEXTBOX 35 Parent Control mit “Abonnement” führt Aktion aus .... Parent 2 Parent 1 Child Control löst Command aus
  60. 60. SEARCHTEXTBOX 35 Parent Control mit “Abonnement” führt Aktion aus .... Parent 2 Parent 1 Child Control löst Command aus
  61. 61. SEARCHTEXTBOX 36
  62. 62. SEARCHTEXTBOX 36
  63. 63. SEARCHTEXTBOX 36 1.Button-Click löst das Command aus
  64. 64. SEARCHTEXTBOX 36 1.Button-Click löst das Command aus 2. SearchTextBox mit “Abonnement” führt Aktion aus
  65. 65. SEARCHTEXTBOX 36 1.Button-Click löst das Command aus 2. SearchTextBox mit “Abonnement” führt Aktion aus 3. Command stoppt
  66. 66. 37 > Routed Command anlegen > Name > Control Typ bzw. Klasse Routed Command 1/3 (SearchTextBox.cs) > Execute Aktion > CanExecute Abfrage
  67. 67. Routed Command 2/3 (SearchTextBox.cs) 38 > Command Binding erzeugen > Command > Execute > CanExecute
  68. 68. Routed Command 3/3 (Generic.xaml) 39 > Auslösen über Command Property / x:Static Verweis
  69. 69. VIEWMODEL KOMMUNIKATION 40
  70. 70. Binding (Implementierung INotifyPropertyChanged) SEARCHTEXTBOX ViewModel Kommunikation - Basics 41
  71. 71. 42 ViewModel Kommunikation 1/3 (MainView.xaml) > Binding an ViewModel Property
  72. 72. 43 ViewModel Kommunikation 2/3 (SampleViewModel.cs) > Implementieren von INotifyPropertyChanged
  73. 73. 44 ViewModel Kommunikation 3/3 (SampleViewModel.cs) > Aufrufen von OnPropertyChanged (Update des Bindings) > Aufruf der Update Logik
  74. 74. SEARCHTEXTBOX 45 Watermark WatermarkFontStyle WatermarkFontWeight WatermarkForeground ClearCommand (Rucksetzen des Texts) TextBox PropertyBinding View Model
  75. 75. SEARCHTEXTBOX 45 Watermark WatermarkFontStyle WatermarkFontWeight WatermarkForeground ClearCommand (Rucksetzen des Texts) TextBox PropertyBinding View Model DONE
  76. 76. POINTCHART 46
  77. 77. PointChart
  78. 78. ANALYSE 48
  79. 79. POINTCHART 49
  80. 80. POINTCHART 49 PointChartViewModel
  81. 81. POINTCHART 49 PointChartViewModel Points
  82. 82. POINTCHART 49 PointChartViewModel Points P1 P2 ...
  83. 83. POINTCHART 49 PointChartViewModel Points P1 P2 ...
  84. 84. POINTCHART 49 PointChartViewModel Points P1 P2 ...
  85. 85. POINTCHART 49 PointChartViewModel Points P1 P2 ...
  86. 86. POINTCHART 49 PointChartViewModel Points P1 P2 ...
  87. 87. POINTCHART 49 ListBox (PointChart) PointChartViewModel Points P1 P2 ...
  88. 88. POINTCHART 49 ListBox (PointChart) ListBoxItem (PointChartItem) PointChartViewModel Points P1 P2 ...
  89. 89. POINTCHART 49 ListBox (PointChart) ListBoxItem (PointChartItem) Polyline (PART_Line) PointChartViewModel Points P1 P2 ...
  90. 90. POINTCHART 49 ListBox (PointChart) ListBoxItem (PointChartItem) Polyline (PART_Line) Canvas (PART_DrawingArea) PointChartViewModel Points P1 P2 ...
  91. 91. 50 PointChartViewModel Points P1 P2 ... POINTCHART ListBox (PointChart)
  92. 92. 50 PointChartViewModel Points P1 P2 ... POINTCHART ListBox (PointChart) X/YMinimum
  93. 93. 50 PointChartViewModel Points P1 P2 ... POINTCHART ListBox (PointChart) X/YMinimum X/YMaximum
  94. 94. 50 PointChartViewModel Points P1 P2 ... POINTCHART ListBox (PointChart) X/YMinimum X/YMaximum LineThickness
  95. 95. 50 PointChartViewModel Points P1 P2 ... POINTCHART ListBox (PointChart) X/YMinimum X/YMaximum LineThickness LineBrush
  96. 96. 50 PointChartViewModel Points P1 P2 ... POINTCHART ListBox (PointChart) X/YMinimum X/YMaximum LineThickness LineBrush ...
  97. 97. 50 Property- Binding (ItemsSource) PointChartViewModel Points P1 P2 ... POINTCHART ListBox (PointChart) X/YMinimum X/YMaximum LineThickness LineBrush ...
  98. 98. 51 ListBoxItem: (PointChartItem) PointChartViewModel Points P1 P2 ... POINTCHART
  99. 99. 51 ListBoxItem: (PointChartItem) XUnitValue PointChartViewModel Points P1 P2 ... POINTCHART
  100. 100. 51 ListBoxItem: (PointChartItem) XUnitValue YUnitValue PointChartViewModel Points P1 P2 ... POINTCHART
  101. 101. 51 ListBoxItem: (PointChartItem) XUnitValue YUnitValue Property Binding PointChartViewModel Points P1 P2 ... POINTCHART
  102. 102. 51 ListBoxItem: (PointChartItem) XUnitValue YUnitValue Property Binding PointChartViewModel Points P1 P2 ... POINTCHART UnitPointChanged-RoutedEvent (PointChart)
  103. 103. 52 Polyline (PART_Line) PointChartViewModel Points P1 P2 ... POINTCHART
  104. 104. 52 Polyline (PART_Line) Point-Management innerhalb des Controls PointChartViewModel Points P1 P2 ... POINTCHART
  105. 105. 52 Polyline (PART_Line) Point-Management innerhalb des Controls (override) ItemsChanged PointChartViewModel Points P1 P2 ... POINTCHART
  106. 106. 52 Polyline (PART_Line) Point-Management innerhalb des Controls (override) ItemsChanged UnitPointChanged PointChartViewModel Points P1 P2 ... POINTCHART
  107. 107. 53 Polyline
  108. 108. POINTCHART 54 That’s it!
  109. 109. CUSTOM CONTROL LIBRARY 55
  110. 110. 56 Custom Control Library erstellen
  111. 111. 57 Basisklasse bestimmen (PointChart.cs)
  112. 112. 58 Basisklasse bestimmen (PointChartItem.cs)
  113. 113. 59 Basisklasse bestimmen (PointChart.cs) (PointChartItem.cs)
  114. 114. POINTCHART Besonderheit ItemsControl (Override) IsItemItsOwnContainerOverride Ist das Item sein eigener Container? (Override) GetContainerForItemOverride Liefert das Element zum Anzeigen des Items 60
  115. 115. 61 Besonderheit ItemsControl (PointChart.cs)
  116. 116. STYLE & TEMPLATE 62
  117. 117. Style & Template: PointChart (Generic.xaml)
  118. 118. Style & Template: PointChartItem (Generic.xaml)
  119. 119. ONAPPLYTEMPLATE() 65
  120. 120. 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
  121. 121. Element- Referenzierung 1/2 (Generic.xaml) > Diese beiden Elemente sollen referenziert werden
  122. 122. Element- Referenzierung 2/2 (PointChart.cs) > Referenz kann null sein!
  123. 123. Element- Referenzierung Tips (PointChart.cs)
  124. 124. 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
  125. 125. DEPENDENCY PROPERTIES EXTENDED 71
  126. 126. 72 Properties anlegen 1/2 (PointChart.cs) > Was ist das?
  127. 127. 73 Properties anlegen 2/2 (PointChartItem.cs)
  128. 128. 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
  129. 129. 75 Properties Changed Callback (PointChart.cs) > Angabe Callback > Callback mit ChangedEventArgs
  130. 130. 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
  131. 131. 77 Override Methods (PointChart.cs)
  132. 132. 78 Override Properties (PointChart.cs)
  133. 133. LOGIK 79
  134. 134. 80 Alle Punkte updaten (PointChart.cs)
  135. 135. 81 Ein Punkt updaten MathHelper Hilfsklasse (PointChart.cs)
  136. 136. ROUTED EVENTS 82
  137. 137. 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
  138. 138. 84 Routed Events 1/3 (PointChartItem.cs) > Anlegen des Events in der auslösenden Klasse
  139. 139. 85 Routed Events 2/3 (PointChartItem.cs) > Aufrufen des angelegten Events
  140. 140. 86 Routed Events 3/3 (PointChart.cs) > Event abonnieren und Aktion definieren
  141. 141. VIEWMODEL KOMMUNIKATION 87
  142. 142. SampleViewModel.cs, PointViewModel.cs implementieren INotifyPropertyChanged Binding der Items an XUnitValue, YUnitValue Binding der ItemsSource an ObservableCollection Points POINTCHART ViewModel Kommunikation - Extended 88
  143. 143. ViewModel Kommunikation 1/3 (MainView.xaml) > Binding PointChart > Points > SelectedItem > Binding PointChartItem > XUnitValue > YUnitValue > IsSelected > ...
  144. 144. ViewModel Kommunikation 2/3 (SampleViewModel.cs) > Aufrufen von OnPropertyChanged (Update des Bindings) > Aufruf der Update Logik
  145. 145. POINTCHART 91 ListBox (PointChart) ListBoxItem (PointChartItem) Polyline (PART_Line) Canvas (PART_DrawingArea) PointChartViewModel Points P1 P2 ...
  146. 146. POINTCHART 91 ListBox (PointChart) ListBoxItem (PointChartItem) Polyline (PART_Line) Canvas (PART_DrawingArea) PointChartViewModel Points P1 P2 ... DONE
  147. 147. BLENDABILITY 92
  148. 148. 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
  149. 149. TemplatePart Attribute (PointChart.cs)
  150. 150. ContentProperty Attribute (SearchTextBox.cs)
  151. 151. AlternateContent- Property Attribute (SearchTextBox.cs)
  152. 152. Description Attribute 1/2 (SearchTextBox.cs)
  153. 153. Description Attribute 2/2 (SearchTextBox.cs)
  154. 154. StyledTypedProperty Attribute (PointChart.cs)
  155. 155. Namespace Merge (AssemblyInfo.cs)
  156. 156. DesignTime (AssemblyInfo.cs)
  157. 157. TOOLS 102
  158. 158. Xaml Styler 1 2 3
  159. 159. Element & Speicher Analyse Xaml Spy (Alternative WPF Inspector oder Snoop)
  160. 160. Element & Speicher Analyse Xaml Spy (Alternative WPF Inspector oder Snoop)
  161. 161. Live Property Editing Xaml Spy (Alternative WPF Inspector oder Snoop)
  162. 162. Live Property Editing Xaml Spy (Alternative WPF Inspector oder Snoop)
  163. 163. FAZIT 106
  164. 164. 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
  165. 165. SOURCE-CODE! 108
  166. 166. 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
  167. 167. VIELEN DANK! 110
  168. 168. Ein benutzerzentrierter Prozess ist Voraussetzung für das Design einer positiven 
 User Experience.

×