WPF Custom Control Development Unchained
Transcript of WPF Custom Control Development Unchained
WPF CUSTOM CONTROL DEVELOPMENT UNCHAINEDDavid C. Thömmes Senior Software Engineer Lead Software Engineering Standards [email protected]
Ergosign GmbH
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
Funktionale Anforderungen, Properties, Events, ....
Abstraktes Vorgehen
Design Anforderungen
UI Development
Analyse
Abstraktion
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
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
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?
ValueConverter/Markup Extensions?
WANN IST EIN CUSTOM CONTROL SINNVOLL?
15
WPF Standard Control?
WPF Standard Controls gruppieren?
Styling & Templating?
ValueConverter/Markup Extensions?
Attached Properties/Behaviors?
WANN IST EIN CUSTOM CONTROL SINNVOLL?
15
WPF Standard Control?
WPF Standard Controls gruppieren?
Styling & Templating?
ValueConverter/Markup Extensions?
Attached Properties/Behaviors?
Drittanbieter?
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.
Prototyp vs. Produktiv Code
Wiederverwendbarkeit
Konsistenz im User Interface
Produktivität bei großen Projekten
WANN IST EIN CUSTOM CONTROL SINNVOLL?
Allgemeine Überlegungen
16
WANN IST EIN CUSTOM CONTROL SINNVOLL?
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
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
(Zurücksetzen des Texts)
TextBox
View Model
SEARCHTEXTBOX
22
Watermark
WatermarkFontStyle
WatermarkFontWeight
WatermarkForeground
ClearCommand
(Zurücksetzen des Texts)
TextBox
PropertyBinding
View Model
SEARCHTEXTBOX
27
http://msdn.microsoft.com/en-us/library/aa970773(v=vs.110).aspx
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
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
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
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
> CanExecute Abfrage
Routed Command 2/3 (SearchTextBox.cs)
38
> Command Binding erzeugen
> Command
> Execute
> CanExecute
44
ViewModel Kommunikation 3/3
(SampleViewModel.cs)
> 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
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)
PointChartViewModel
Points
P1
P2
...
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/YMaximum
LineThickness
LineBrush
...
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
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
...
POINTCHART
52
Polyline (PART_Line)
Point-Management innerhalb des Controls
(override) ItemsChanged
UnitPointChanged
PointChartViewModel
Points
P1
P2
...
POINTCHART
POINTCHART
Besonderheit ItemsControl
(Override) IsItemItsOwnContainerOverride
Ist das Item sein eigener Container?
(Override) GetContainerForItemOverride
Liefert das Element zum Anzeigen des Items
60
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
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
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
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
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
SampleViewModel.cs, PointViewModel.cs implementieren INotifyPropertyChanged
Binding der Items an XUnitValue, YUnitValue
Binding der ItemsSource an ObservableCollection Points
POINTCHART
ViewModel Kommunikation - Extended
88
ViewModel Kommunikation 1/3
(MainView.xaml)
> Binding PointChart
> Points
> SelectedItem
> Binding PointChartItem
> XUnitValue
> YUnitValue
> IsSelected
> ...
ViewModel Kommunikation 2/3
(SampleViewModel.cs)
> Aufrufen von OnPropertyChanged (Update des Bindings)
> Aufruf der Update Logik
POINTCHART
91
ListBox (PointChart)
ListBoxItem
(PointChartItem)
Polyline (PART_Line)
Canvas (PART_DrawingArea)
PointChartViewModel
Points
P1
P2
...
POINTCHART
91
ListBox (PointChart)
ListBoxItem
(PointChartItem)
Polyline (PART_Line)
Canvas (PART_DrawingArea)
PointChartViewModel
Points
P1
P2
...
DONE
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
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!
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