WPF Custom Control Development Unchained
29. Apr 2015•0 gefällt mir•2,627 views
Downloaden Sie, um offline zu lesen
Melden
Software
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.
thoemmesFolgen
Más contenido relacionado
Was ist angesagt?
2020 UX/UI 디자인 기초 이론/실습 세미나hyungsub08
ux flow and processsuniltalekar1
10 Lessons Account Management Teaches YouHappy Marketer
UX Workshop Activity: Missions, Methods and Mindframes. Centerline Digital.Centerline Digital
UI-UX Practical Talking - Mohamed ShehataMohamed Shehata
Relatório de desenvolvimento de websitenenhuma
Similar a WPF Custom Control Development Unchained
TYPO3 5.0 - Der aktuelle Stand der ZukunftJochen Rau
CodeFluent Entities and AppSofaMykola Dobrochynskyy
Erfolgreiche ITIL-Tool-Implementierung in der Praxis, am Beispiel o2Digicomp Academy AG
TYPO3 CMS 7.1 - Die Neuerungen - pluswerkdie.agilen GmbH
Webinar- Lösungsorientierte Integration vorhandener Werkzeuge in ein Applicat...Minerva SoftCare GmbH
ESEconf2011 - Trost Joachim: "Tool supported technical Code and Design Qualit...Aberla
WPF Custom Control Development Unchained
- 1. WPF CUSTOM CONTROL DEVELOPMENT UNCHAINED David C. Thömmes Senior Software Engineer Lead Software Engineering Standards thoemmes@ergosign.de Ergosign GmbH
- 2. Auf der Suche nach Custom Controls
- 3. CUSTOM CONTROL ANALYSE 3 Abstraktes Vorgehen
- 4. CUSTOM CONTROL ANALYSE 3 Abstraktes Vorgehen Design Anforderungen
- 5. CUSTOM CONTROL ANALYSE 3 Abstraktes Vorgehen Design Anforderungen UI Development Analyse Abstraktion
- 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. 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
- 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. 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
- 12. 8 Template WPF Custom Control Library wählen
- 13. 9 Los gehts!
- 15. 11 Generic.xaml
- 17. 13 Generic.xaml
- 18. WANN IST EIN CUSTOM CONTROL SINNVOLL? 14
- 19. WANN IST EIN CUSTOM CONTROL SINNVOLL? 15
- 20. WANN IST EIN CUSTOM CONTROL SINNVOLL? 15 WPF Standard Control?
- 21. WANN IST EIN CUSTOM CONTROL SINNVOLL? 15 WPF Standard Control? WPF Standard Controls gruppieren?
- 22. WANN IST EIN CUSTOM CONTROL SINNVOLL? 15 WPF Standard Control? WPF Standard Controls gruppieren? Styling & Templating?
- 23. WANN IST EIN CUSTOM CONTROL SINNVOLL? 15 WPF Standard Control? WPF Standard Controls gruppieren? Styling & Templating? ValueConverter/Markup Extensions?
- 24. WANN IST EIN CUSTOM CONTROL SINNVOLL? 15 WPF Standard Control? WPF Standard Controls gruppieren? Styling & Templating? ValueConverter/Markup Extensions? Attached Properties/Behaviors?
- 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. 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. Prototyp vs. Produktiv Code Wiederverwendbarkeit Konsistenz im User Interface Produktivität bei großen Projekten WANN IST EIN CUSTOM CONTROL SINNVOLL? Allgemeine Überlegungen 16
- 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. SEARCHTEXTBOX 19
- 31. SearchTextBox
- 32. ANALYSE 21
- 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. > Registrieren über Statische Funktion > Name > Typ > Control Typ bzw. Klasse > Metadaten Properties anlegen 1/2 (SearchTextBox.cs) 31
- 51. 32 > Verwendung der Methoden GetValue(), SetValue() Properties anlegen 2/2 (SearchTextBox.cs)
- 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. SEARCHTEXTBOX 35
- 55. SEARCHTEXTBOX 35 Child Control löst Command aus
- 56. SEARCHTEXTBOX 35 Parent 1 Child Control löst Command aus
- 57. SEARCHTEXTBOX 35 Parent 2 Parent 1 Child Control löst Command aus
- 58. SEARCHTEXTBOX 35 .... Parent 2 Parent 1 Child Control löst Command aus
- 59. SEARCHTEXTBOX 35 Parent Control mit “Abonnement” führt Aktion aus .... Parent 2 Parent 1 Child Control löst Command aus
- 60. SEARCHTEXTBOX 35 Parent Control mit “Abonnement” führt Aktion aus .... Parent 2 Parent 1 Child Control löst Command aus
- 61. SEARCHTEXTBOX 36
- 62. SEARCHTEXTBOX 36
- 63. SEARCHTEXTBOX 36 1.Button-Click löst das Command aus
- 64. SEARCHTEXTBOX 36 1.Button-Click löst das Command aus 2. SearchTextBox mit “Abonnement” führt Aktion aus
- 65. SEARCHTEXTBOX 36 1.Button-Click löst das Command aus 2. SearchTextBox mit “Abonnement” führt Aktion aus 3. Command stoppt
- 66. 37 > Routed Command anlegen > Name > Control Typ bzw. Klasse Routed Command 1/3 (SearchTextBox.cs) > Execute Aktion > CanExecute Abfrage
- 67. Routed Command 2/3 (SearchTextBox.cs) 38 > Command Binding erzeugen > Command > Execute > CanExecute
- 68. Routed Command 3/3 (Generic.xaml) 39 > Auslösen über Command Property / x:Static Verweis
- 70. Binding (Implementierung INotifyPropertyChanged) SEARCHTEXTBOX ViewModel Kommunikation - Basics 41
- 71. 42 ViewModel Kommunikation 1/3 (MainView.xaml) > Binding an ViewModel Property
- 72. 43 ViewModel Kommunikation 2/3 (SampleViewModel.cs) > Implementieren von INotifyPropertyChanged
- 73. 44 ViewModel Kommunikation 3/3 (SampleViewModel.cs) > Aufrufen von OnPropertyChanged (Update des Bindings) > Aufruf der Update Logik
- 76. POINTCHART 46
- 77. PointChart
- 78. ANALYSE 48
- 79. POINTCHART 49
- 88. POINTCHART 49 ListBox (PointChart) ListBoxItem (PointChartItem) PointChartViewModel Points P1 P2 ...
- 90. POINTCHART 49 ListBox (PointChart) ListBoxItem (PointChartItem) Polyline (PART_Line) Canvas (PART_DrawingArea) PointChartViewModel Points P1 P2 ...
- 104. 52 Polyline (PART_Line) Point-Management innerhalb des Controls PointChartViewModel Points P1 P2 ... POINTCHART
- 105. 52 Polyline (PART_Line) Point-Management innerhalb des Controls (override) ItemsChanged PointChartViewModel Points P1 P2 ... POINTCHART
- 106. 52 Polyline (PART_Line) Point-Management innerhalb des Controls (override) ItemsChanged UnitPointChanged PointChartViewModel Points P1 P2 ... POINTCHART
- 107. 53 Polyline
- 114. POINTCHART Besonderheit ItemsControl (Override) IsItemItsOwnContainerOverride Ist das Item sein eigener Container? (Override) GetContainerForItemOverride Liefert das Element zum Anzeigen des Items 60
- 116. STYLE & TEMPLATE 62
- 119. ONAPPLYTEMPLATE() 65
- 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. Element- Referenzierung 1/2 (Generic.xaml) > Diese beiden Elemente sollen referenziert werden
- 122. Element- Referenzierung 2/2 (PointChart.cs) > Referenz kann null sein!
- 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
- 126. 72 Properties anlegen 1/2 (PointChart.cs) > Was ist das?
- 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. 75 Properties Changed Callback (PointChart.cs) > Angabe Callback > Callback mit ChangedEventArgs
- 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
- 133. LOGIK 79
- 135. 81 Ein Punkt updaten MathHelper Hilfsklasse (PointChart.cs)
- 136. ROUTED EVENTS 82
- 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. 84 Routed Events 1/3 (PointChartItem.cs) > Anlegen des Events in der auslösenden Klasse
- 139. 85 Routed Events 2/3 (PointChartItem.cs) > Aufrufen des angelegten Events
- 140. 86 Routed Events 3/3 (PointChart.cs) > Event abonnieren und Aktion definieren
- 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. ViewModel Kommunikation 1/3 (MainView.xaml) > Binding PointChart > Points > SelectedItem > Binding PointChartItem > XUnitValue > YUnitValue > IsSelected > ...
- 144. ViewModel Kommunikation 2/3 (SampleViewModel.cs) > Aufrufen von OnPropertyChanged (Update des Bindings) > Aufruf der Update Logik
- 145. POINTCHART 91 ListBox (PointChart) ListBoxItem (PointChartItem) Polyline (PART_Line) Canvas (PART_DrawingArea) PointChartViewModel Points P1 P2 ...
- 146. POINTCHART 91 ListBox (PointChart) ListBoxItem (PointChartItem) Polyline (PART_Line) Canvas (PART_DrawingArea) PointChartViewModel Points P1 P2 ... DONE
- 147. BLENDABILITY 92
- 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
- 157. TOOLS 102
- 158. Xaml Styler 1 2 3
- 159. Element & Speicher Analyse Xaml Spy (Alternative WPF Inspector oder Snoop)
- 160. Element & Speicher Analyse Xaml Spy (Alternative WPF Inspector oder Snoop)
- 161. Live Property Editing Xaml Spy (Alternative WPF Inspector oder Snoop)
- 162. Live Property Editing Xaml Spy (Alternative WPF Inspector oder Snoop)
- 163. FAZIT 106
- 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. SOURCE-CODE! 108
- 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. VIELEN DANK! 110
- 169. Ein benutzerzentrierter Prozess ist Voraussetzung für das Design einer positiven User Experience.