Daniel Greitens, maximago GmbH. Steuerelemententwicklung mit WPF / Silverlight / WP7

Transkript

1 Daniel Greitens, maximago GmbH Steuerelemententwicklung mit WPF / Silverlight / WP7

2 Inhalt dieser Session Praxisorientierte Steuerelement-Entwicklung Verschiedene Strategien zur Implementierung von Logik und Visualisierung unter Berücksichtigung von: Wartbarkeit Performance Konsistenz im UI Effizienz in der Entwicklung Blendability 2

3 Gemeinsamer Nenner für WPF, SL und WP7 Sehr ähnliche Technologie, aber Gemeinsamer Code? MSDN: Because of the differences between the XAML in Silverlight and WPF, the following elements are harder to reuse: Complex views (XAML) Controls Styling Animation Gemeinsame Vorgehensweise? Ja, Inhalt dieser Session. 3

4 Einführung

5 Steuerelemente im MVVM-Kontext Interaktion Steuerelemente Views ViewModels Business-Objekte Services Datenfluss 5

6 Aufgaben von Steuerelementen Datenanbindung Übersetzung Daten zu Visualisierung Übersetzung Interaktion zu Daten Visualisierungssteuerung Schichtentrennung Logik / Visualisierung Soll-Ergebnis: Wartungsarmes User-Interface Konsistenz im User-Interface Effizienz in der Entwicklung 6

7 Beispiel

8 Grundstrategien User Control Custom Control XAML + Code-Behind Control + Templates 8

9 Grundstrategien User Control Einfache Implementierung Kann nicht erben Lässt sich erweitern Schlechte Performance Visualisierung hart mit Logik verzahnt Referenzen auf XAML- Elemente einfach Custom Control Aufwendigere Implementierung Kann erben Lässt sich erweitern Gute Performance Visualisierung in Template separiert Referenzen auf XAML- Elemente aufwendiger 9

10 KURZ-DEMO User Control und Custom Control

11 DependencyProperty Registrierungssystem für Eigenschaften Überwacht deren Wert unter Berücksichtigung von u.a.: Bindings Animationen Standard-Werten Validierungsmechanismen Notwendig für: Animation der Eigenschaft DataBinding auf die Eigenschaft Auslagern eines Werts in Styles TemplateBinding in Templates 11

12 Erweiterungsmöglichkeiten User Controls Ableitung und Erweiterung von User Control it seems like WPF doesn't want us to do that. Ergänzung eigener DependencyProperties in Code Behind eines UserControls Zugriff auf Properties in XAML per Element-Binding auf Root (WPF, SL und WP7) RelativeSource (nur WPF und ab SL5) Tipp: Design-Time-Unterstützung in Blend per FallbackValue im Binding: Text="{Binding Description, ElementName=UserControl, FallbackValue=Designtime-Anzeige}" 12

13 KURZ-DEMO Erweiterung User Control

14 Aufbau Custom Control Abgeleitete Klasse (min. von FrameworkElement) Style (= ausgelagerte Eigenschaftswerte) Template (= ausgelagerter Gesamtaufbau) Styles und Templates ausgelagert in Resource-Dictionaries 14

15 Auszug Vererbungskette - DependencyObject,Visual, UIElement - FrameworkElement - Height, Width - Styling - FocusVisualStyle - Control - Template - Font-Properties - Alignment, Padding - Background, Border - ContentControl, TextBoxBase - Content - ButtonBase - Click-event - Button - ToggleButton - CheckBox 15

16 Styles <Button Style= {StaticResource MyButtonStyle} /> <Resources> <Style x:key= MyButtonStyle TargetType= Button > <Setter Property= Background Value="Red"/> <Setter Property= Width" Value= 25"/> </Style> </Resources>

17 Control-Template <Button Content= MyButton > <Button.Template> <ControlTemplate TargetType= {x:type Button} > <Border> <ContentPresenter/> </Border> </ControlTemplate> </Button.Template> </Button>

18 Ablage des DefaultStyles in generic.xaml Resource-Dictionary, das im Ordner Themes im Root der Class Library liegen muss Steuerelement-Klasse muss DefaultStyleKey setzen Aktivierung per ThemeInfo in AssemblyInfo in Class Library (WPF, SL automatisch) Ressourcen werden dann automatisch bei Referenzierung in anderen Projekten gezogen Theme-abhängige Resourcen möglich (z.b. Vista, XP) Ohne generic.xaml müssen alle Ressourcen manuell eingebunden werden 18

19 Datenflug im Custom Control ViewModel DataBinding { Control } TemplateParts TemplateBinding VisualStates <Template /> 19

20 Control-Template mit Template-Binding <Button Content= MyButton Background= Red > <Button.Template> <ControlTemplate TargetType= {x:type Button} > <Border Background= {TemplateBinding Background} > <ContentPresenter/> </Border> </ControlTemplate> </Button.Template> </Button>

21 Control-Template mit Template-Binding <Button Content= MyButton Background= Red > <Button.Template> <ControlTemplate TargetType= {x:type Button} > <Border Background= {TemplateBinding Background} > <ContentPresenter/> </Border> </ControlTemplate> </Button.Template> </Button> Tipp: Converter im TemplateBinding: TemplateBinding auf DataContext und reines DataBinding mit Converter auf die Eigenschaft.

22 Besonderheit: Eigenschaft Content DependencyProperty vom Typ object Kann ein einzelnes UI-Element aufnehmen Definition des XML-Kinds per Klassen-Attribut ContentProperty Weitere Kindselemente in Blend per AlternateContentProperty Automatisches TemplateBinding durch ContentPresenter Tipp: ContentControl für Definition von Eigenschaften für Inhaltselement Tipp: AlternateContentProperty in WPF im Namespace Microsoft.Windows.Design.PropertyEditing (Microsoft.Windows.Design.Interaction.dll) 22

23 DEMO Custom Control - Form-Element

24 TemplatePart Referenziert im Control auf ein UI-Element im Template Klassen-Attribut zur Darstellung in Expression Blend WPF-Konvention: Benennung mit vorgestelltem PART_ Einsatzgebiete: Mit Bedacht, da enge Verzahnung von Logik mit Visualisierung. Häufig durch TemplateBinding ersetzbar! Wenn auf Events von UI-Elementen reagiert werden soll Wenn Eigenschaften nicht public sein sollen 24

25 DEMO Custom Control - Form-Element mit Hilfe-Popup

26 Zwischenzusammenfassung User Control Einfachere Implementierung Feste Verzahnung von Logik und Visualisierung Kann nicht erben Schlechte Performance Custom Control Aufwendige Implementierung Separierte Visualisierung Gute Performance Generic.xaml TemplateBinding schleust Werte von Instanz zu Template TemplatePart gewährt Zugriff von Instanz zu Element in Template 26

27 Konzepte zur Steuerung der Visualisierung eines Custom Controls

28 Eine Logik, verschiedene Visualisierungen Kapselung von verschiedenen Visualisierungen für ein und dasselbe Steuerelement Beeinflussung der ganzen Visualisierung durch Setzen eines einzigen Eigenschaftswerts in XAML = Vorteile: Sehr saubere Views, konsistentes Design, weniger Arbeit für Entwickler - Nachteil: Bei Änderung der Logik erhöhter Test-Aufwand 28

29 Eine Logik, verschiedene Visualisierungen Konditionelle Veränderung von Werten im Style per Trigger Konditionelles Switchen von ganzen Templates im Style per Trigger Nur WPF 29

30 DEMO Trigger Form-Element mit 2 Templates

31 Eine Logik, verschiedene Visualisierungen Konditionelle Veränderung von Werten im Style per Trigger Konditionelles switchen von ganzen Templates im Style per Trigger Verändern von Werten im Template per VisualStates Nur WPF WPF, SL und WP7 31

32 Custom Visual States Visual States werden durch Logik in Klasse aktiviert Design der einzelnen States in Template definiert Visual States werden per Klassen-Attribut durch Blend im Template erzeugt Automatisch Übergänge = Erhebliche Effizienz im Design! Keine Ausnahme wenn Visual State nicht in XAML definiert Tipp: VisualStates stehen im Code erst in OnApplyTemplate zur Verfügung! 32

33 DEMO - Form-Element mit 2 States

34 Nebenschauplätze

35 Steuern des Gestaltungsspielraums von Steuerelementen Zentral / Einschränkung der Anpassbarkeit Implementierung: Wenig Template-Binding = Gesteuerte/Eingeschränkte Themability = Konsistentes Design = Hohe Entwickler-Produktivität Beispiel: Software-UI Dezentral / Maximale Anpassbarkeit Implementierung: Viel Template-Binding = Leichte Themability = Hohe Wiederverwendbarkeit Beispiel: Anbieter von Steuerelementen 35

36 Blendability Parameterloser Konstruktor für Instanziierung per XAML DependencyProperties immer mit DefaultValue Steuerelemente nie mit Business-Logik, Daten- Verbindungen oder sonstigen Abhängigkeiten Design-Time-Datenkontext mit d: in Blend einbinden Erkennung der Design-Time: #if SILVERLIGHT _isindesignmode = DesignerProperties.IsInDesignTool; #else var prop = DesignerProperties.IsInDesignModeProperty; _isindesignmode = (bool)dependencypropertydescriptor.fromproperty(prop, typeof(frameworkelement)).metadata.defaultvalue; #endif 36

37 Einfache Design Time Features Category-Attribut Default-Intitializer Und, und, und 37

38 Was Sie tun sollten: Code-Behind nur marginal nutzen (z.b. für Events) Niemals aus Code-Behind eines User Controls hart auf UI- Elemente im XAML referenzieren Steuerelemente meist als Custom Control implementieren Steuerelemente niemals per Code in VisualTree hängen! Sondern Datenobjekte mit Datatemplates o.ä. Kein DataBinding in Styles und Templates Nutzen Sie Expression Blend! Keine überflüssigen Attribute in View setzen Keine Design-Attribute in View setzen, gehören in Style oder Template Separieren Sie Controls und Resources in eigene Assemblies Immer implizite DefaultStyles, nur bewusst explizit in XAML setzen 38