1. Einführung in die WindowsPresentation Foundation 7. Mai 2008 Christian Moser Folie 1 Christian MoserSoftware Architect and UX Designer www.wpftutorial.net
3. Was ist die Windows Presentation Foundation? Plattform zur Entwicklung von grafischen Benutzeroberflächen mit Microsoft .NET Nachfolger von Windows Forms Teil von .NET 3.0 oder höher 7. Mai 2008 Christian Moser Folie 3 .NET 3.5 LINQ ASP.NET 3.5 Add-in Framework OtherEnhancements .NET 3.0 WindowsPresentationFoundation WindowsCommunicationFoundation WindowsWorkflowFoundation WindowsCard Space .NET 2.0
4. Ziel von WPF: Vereinheitlichung verschiedener APIs 7. Mai 2008 Christian Moser Folie 4 Einfache Integration Konsistenes Programmiermodell Durchgängiges Layout Weniger Abhängigkeiten zu anderen Frameworks FormulareWinForms 3D GrafikDirect 3D ReportingCrystal Reports MultimediaDirectShow 2D GrafikGDI+ Windows Presentation Foundation
5. Die Rendering Engine von WPF Ist komplett vektorbasiert Verwendet im Hintergrund DirectX Nutzt Hardwarebeschleunigung moderner GPUs 7. Mai 2008 Christian Moser Folie 5 .NET C++
6. Was sind die Minimalanforderungen? Softwareanforderungen Windows XP SP2 oder höher .NET Framework 3.0 oder höher Hardwareanforderungen WPF ist grundsätzlich auf jeder Hardware lauffähig Die Performance hängt alleine von der Komplexität und der Effekte der Software ab Hardwarerendering nur mit modernen GPUs mit DirectX 9 oder höher, sonst Softwarerendering Effekte erfordern Softwarerendering unter Windows XP (mit erheblichen Performance einbussen) 7. Mai 2008 Christian Moser Folie 6
7. XAML eXtensible Application Markup Language XML basierte Sprache zum instanzieren und initialiseren von Objekten mit hierarchischen Beziehungen Wird auch in WCF, WF und Silverlight eingesetzt 7. Mai 2008 Christian Moser Folie 7 <Windowxmlns="http://schemas.microsoft.com/winfx/..."> <StackPanelHorizonalAlignment="Center" > <Image Source="Images/hello.jpg" Height="80" /> <TextBlock Text="Welcome to WPF!"FontSize="14"/> <Button Content="OK" Padding="10,4"/> </StackPanel> </Window>
8. XAML vs. Code Alles was in XAML gemacht werden kann, kann auch in Code gemacht werden XML-Prefixes entsprechen CLR-Namespaces XML-Tags entsprechen Objekten (mit default Konstruktor) XML-Attribute entsprechen Properties 7. Mai 2008 Christian Moser Folie 8 <StackPanel><TextBlock Margin="20">Hello</TextBlock></StackPanel> StackPanelstackPanel=newStackPanel();TextBlock textBlock=new TextBlock();textBlock.Margin=new Thickness(10);textBlock.Text="Welcome to WPF";stackPanel.Children.Add(textBlock);
9. XAML Namespaces CLR-Namespaces werden auf XML-Prefixes gemappt 7. Mai 2008 Christian Moser Folie 9 <Windowxmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentationxmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:l="clr-namespace:Zuehlke.Presentation.Controls"> <Grid><l:MyControl x:Name="myControl" /></Grid> </Window> [assembly:XmlnsDefinition("http://xaml.homag.de", “Homag.App1.UserInterface.Controls")]
10. Property Element Syntax Wenn Properties komplexe Inhalte haben, können sie auch als eigene Kind-Elemente ausgeschrieben werden. 7. Mai 2008 Christian Moser Folie 10 <RectangleFill="Red" /> <Rectangle Width="20" Height="20"> <Rectangle.Fill> <LinearGradientBrush> <GradientStop Color="Red" Offset="0" /> <GradientStop Color="Blue" Offset="1" /> </LinearGradientBrush> </Rectangle.Fill> </Rectangle>
11. Kompilation von XAML 7. Mai 2008 Christian Moser Folie 11 XAML Code Behind MainWindow.xaml MainWindow.cs Markup Compiler MainWindow.baml MainWindow.g.cs C# Compiler Assembly Resources IL Code
12. Type Converters Type Converters sind keine Helferlein, welche die String-Werte der XAML-Attribute in die richtigen Typen konvertieren Machen eine sinnvolle Verwendung von XAML überhaupt erst möglich Sie werden implizit aufgerufen 7. Mai 2008 Christian Moser Folie 12 <TextBlock Background="Red" /> Das Property Background ist vom Typ Brush. Der string «Red» wird durch einem TypeConverterautomatisch in einen Brushkonvertiert.
13. Dependency Properties Grenzen von normalen .NET Properties: Ein Button in WPF hat 96 Properties. 90% davon stehen in der Regel auf dem Default Wert. (Unnötiger Speicherverbrauch) Der Ursprüngliche Wert geht beim Überschreiben verloren Änderungs-Notifikation muss selber nachgebaut werden Um einem Typ ein Property hinzuzufügen, muss man ableiten (unflexibel) Die Werte werden bei hierarchischen Beziehungen nicht vererbt (FontSize, IsEnabled, IsVisible,...) 7. Mai 2008 Christian Moser Folie 13
14. Dependency Properties > Funktionsweise 7. Mai 2008 Christian Moser Folie 14 Property Speicher Dep.Prop. Value DependencyObject HeightProperty 24.0 DockPanel.Dock Left GetValue(key) SetValue(key, value) publicintHeight { get{ return(double)GetValue(HeightProperty); } set{ SetValue(HeightProperty, value); } } Button Der Button registriertseineProperties double Height{ get; set; } publicstaticreadonlyDependencyPropertyHeightProperty = DependencyProperty.Register("Height", typeof(double), typeof(Button), newFrameworkPropertyMetadata(24.0));
15. DependencyProperties > Vorteile Keinlokaler Member vorhanden Nurveränderte Werte belegen Arbeitsspeicher EingebauteÄnderungsnotifikation Jedes Property hat Metadaten (z.Bsp. Default Wert) Wertekönnenvererbtwerden Der Wert eines Dependency Property wirdbeijedemAufruf ( GetValue()) dynamischaufgelöst. DadurchkönnenWertedurch Styles, Trigger oderAnimationentemporär “überlagert” werden 7. Mai 2008 Christian Moser Folie 15
16. Prioritäten bei der dynamischen Wertauflösung 7. Mai 2008 Christian Moser Folie 16 GetValue() SetValue() 1. Animation 2. Local Value / Binding Expr. 2. Local Value 3. Custom Style Trigger 4. Custom Template Trigger 5. Custom Style Setter 6. Default Style Trigger 7. Default Style Setter 8. Inherited Value 9. Default Value
17. Attached DependencyProperties Attached Properties ermöglichen es einem WPF Control um beliebige Properties zu erweitern Keine Ableitung notwendig Eröffnet flexible Anwendungszenarien Beispiel: «Attachen» von Layout Eigenschaften 7. Mai 2008 Christian Moser Folie 17 <DockPanel> <ButtonDockPanel.Dock="Left"Content="Button" /> </DockPanel> <Canvas> <ButtonCanvas.Top="20"Canvas.Left="20" Content="Button" /> </Canvas>
18. Logical- und Visualtree UI Elemente in WPF haben eine hierarchische Beziehung untereinander Diese Beziehungen werden für Rendering, Events, Ressourcen oder Vererbung von Werten verwendet Man unterscheidet zwischen dem Logical- und dem Visual-Tree Der logical Tree bildet die hierarchie der UI Elemente ab. Der visual Tree enthält alle Elemente, die visuell dargestellt werden. (Ein UI Element in WPF besteht wiederum aus mehreren atomaren Elementen) 7. Mai 2008 Christian Moser Folie 18
19. Logical- und Visual Tree 7. Mai 2008 Christian Moser Folie 19 Window Border AdornerDecorator ContentPresenter AdornerLayer Grid Label Button Border Border ContentPresenter ContentPresenter TextBlock TextBlock Visual Tree Rendern der Elemente Hit Testing IsEnabled Opacity Transformation Logical Tree Vererbung von Properties Routed Events Auflösen von DynamicResources ElementName DataBinding
20. Routed Events RoutedEvents werden auf einem WPF Element ausgelöst und traversieren den LogicalTree nach oben und unten Es gibt jeweils einen Event mit der RoutingStrategie Bubbling Und einen PreviewEvent mit der RoutingStrategie Tunneling 7. Mai 2008 Christian Moser Folie 20 Window Grid Click Button Button PreviewClick Image TextBlock
21. Applikationstypen 7. Mai 2008 Christian Moser Folie 21 Browserbasiert Seitenbasiert Formularbasiert
22. Microsoft Silverlight «Kleiner Bruder» von WPF. 4MByte Browser Plugin API ist 99% kompatibel mit .NET und WPF, jedoch nur ein Subset der Funktionen. Verfügbar für Windows, Mac und Linux Out-of-the-Browser Apps möglich 7. Mai 2008 Christian Moser Folie 22
23. Wrap-up Was sind die grossen Vorteile von WPF? Wozu dient XAML? Was sind Dependency Properties? Wie funktioniert der Logical- und Visualtree Wa sind Routed Events? Welche Applikationstypen gibt es? Was ist der Unterschied zwischen WPF und Silverlight? 7. Mai 2008 Christian Moser Folie 23
25. Visual Studio 2010 für Entwickler XAML Editor für Entwickler Gute IntelliSense Gute Funktionen für Dateanbindung Wenig grafische Unterstützung 7. Mai 2008 Christian Moser Folie 25
26. Expression Blend für Designer 7. Mai 2008 Christian Moser Folie 26 XAML Werkzeug für Designer Erstellen von WPF Prototypen Erstellen von Animationen Import von Adobe Photoshop/Illustrator Öffnet gleiche Solution wie VisualStudio TFS Integration
27. Snoop Snoop ist ein nützliches Tool zum Analysieren von Layoutproblemen in WPF Kostenloser Download: http://blois.us/Snoop/ 7. Mai 2008 Christian Moser Folie 27
29. UserControls vs. CustomControls UserControls fassen mehrere Controls zu einer wiederverwendbaren Einheit zusammen (Composition) CustomControls erweitern ein bestehendes Control um weitere Funktionen (Extension) 7. Mai 2008 Christian Moser Folie 29
31. Flexible Komposition 7. Mai 2008 Christian Moser Folie 31 Die wichtigste Aufgabe von WPF Elementen ist die Darstellung von Inhalt. Inhalt könenn Daten oder andere Elemente sein. Dies erlaubt eine sehr flexible Komposition. Deutlich weniger UserControls werden benötigt <Button Content="Hello" /> <Button> <Button.Content> <Image Source="winlogo.png" /> </Button.Content> </Button>
32. Wrap-up Wieso braucht es in WPF viel weniger CustomControls als in WinForms? Was ist der Unterschied zwischen UserControls und Custom Controls? 7. Mai 2008 Christian Moser Folie 32
34. Layout Panels 7. Mai 2008 Christian Moser Folie 34 Grid Stack Panel Canvas Wrap Panel Dock Panel
35. Margin, Padding und Alignment 7. Mai 2008 Christian Moser Folie 35 <Button HorizontalAlignment="Left" VerticalAlignment="Top" Margin="8,0,8,8" > Test </Button>
36. Best Practices Positionieren sie Elemente mit Alignment, Padding und Margin Vermeiden sie fixe Grössen für Elemente Missbrauchen sie den Canvas Panel nicht für die Platzierung von UI Elementen (WinForms Style) 7. Mai 2008 Christian Moser Folie 36
37. Transformation Jedes Element kann in WPF transformiert werden LayoutTransform wirkt sich auf das Layout aus RenderTransform wirkt sich nur auf die Darstellung aus 7. Mai 2008 Christian Moser Folie 37 <Button> <Button.RenderTransform> <RotateTransform Angle="30" /> </Button.RenderTransform> </Button> <Button> <Button.LayoutTransform> <RotateTransform Angle="30" /> </Button.LayoutTransform> </Button>
38. Wrap-up Was ist der Unterschied zwischen WPF und WinForms layouting? Welche Panels gibt es und was sind ihre Stärken? Auf was muss beim Layouten von User Interfaces unter WPF geachted werde? Was ist der Unterschied zwischen Layout- und Rendertransform? 7. Mai 2008 Christian Moser Folie 38
40. Markup Extensions Markup Extensions sind eine Art XAML-Makros, welche einen Wert zur Laufzeit auflösen. Sie haben folgende Syntax: WPF bietet bereits folgende MarkupExtensions an: Beispiel: 7. Mai 2008 Christian Moser Folie 40 {Name Param=Value, Param=Value} {StaticResource} {x:Null}{DynamicResource} {x:Type}{Binding} {x:Array}{RelativeSource} {x:Static}{TemplateBinding} <TextBlock Text="{Binding Path=Vorname}" />
41. DataBinding synchronisiert die Werte zweier Properties miteinander Typischerweise wird dadurch ein Wert eines Datenobjektes mit einem UI Element verbunden Dies kann uni- oder bidirektional erfolgen Ein ValueConverter kann unpassende Datenformate konvertieren Source.NET Property TargetDependencyProperty Grundkonzept des Databindings 7. Mai 2008 Christian Moser Folie 41 INotifyPropertyChanged Binding Converter
42. Datenquellen für Bindings Andere WPF Elemente {Binding Path=Text, ElementName=textBox} Übergeordnete WPF Elemente {Binding Path=Text, RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=ListBox}} DataContext {Binding Path=Text} Explizite Objekte {Binding Path=Text Source={StaticResourcemyObject}} 7. Mai 2008 Christian Moser Folie 42
43. DataContext Jedes WPF Element hat ein DataContext Property. Dieses wird über den LogicalTree vererbt. Ermöglicht das Binding auf ein DatenObjekt Die default Source eines {Bindings} ist immer der DataContext. <Button Content="{Binding Name}" /> DataContext = customer1; 7. Mai 2008 Christian Moser Folie 43
44. UpdateTrigger und Binding Direction Der UpdateSourceTrigger bestimmt, wann das Binding aktualisiert werden soll:PropertyChanged LostFocusExplicit Der Mode bestimmt die Richtung, in die der Wert übertragen werden sollOneWayTwoWay OneWayToSource 7. Mai 2008 Christian Moser Folie 44
45. INotifyPropertyChanged Jedes Datenobjekt muss das INotifyPropertyChanged Interface implementieren, damit das WPF Binding dieÄnderungen mitbekommt. 7. Mai 2008 Christian Moser Folie 45 publicclassCustomer : INotifyPropertyChanged { privatestring _name; publicstring Name { get { return _name; } set { _name = value; NotifyPropertyChanged("Name"); } } publiceventPropertyChangedEventHandler PropertyChanged; privatevoidNotifyPropertyChanged( string name) { if( PropertyChanged != null ) PropertyChanged(this, newPropertyChangedEventArgs(name)); } }
46. Value Converter ValueConverter können das Datenformat bei einem Binding in beide Richtungen konvertieren <Button Content="{Binding Name, Converter={h:BoolToVisibilityConverter}}" /> publicclassBoolToVisibilityConverter : IValueConverter { #regionIValueConverter Members publicobject Convert(object value, TypetargetType, objectparameter, CultureInfo culture) { return (bool) value ? Visibility.Visible : Visibility.Collapsed; } publicobjectConvertBack(object value, TypetargetType, objectparameter, CultureInfo culture) { thrownewNotImplementedException(); } #endregion } 7. Mai 2008 Christian Moser Folie 46
47. Das Model-View-ViewModel Pattern Ein WPF-Pattern zum Anbinden von Daten an die View Entstehung: Das DataBinding von WPF ist wirklich brauchbar Jedes Element hat einen DataContext Man möchte oft mehrere Daten-Objekte in einer View anzeigen Das ViewModel aggregiert diese zu einem Objekt, das dann über den DataContext zugänglich ist Vorteile: Saubere Trennung von Präsentation und Logik UI Logik wird durch Unit-Tests testbar 7. Mai 2008 Christian Moser Folie 47 View Button TextBox DataContext DataBinding ViewModel
48. Commands in WPF Commands vereinfachen das Binden von Funktionen an das UI Ein Command kapselt folgende 3 Funktionen in das ICommand Interface: Execute(object param); CanExecute(object param); event CanExecuteChanged; Commands können flexibel an diverse UI Elemente gebunden werden (Button, Menu, KeyboardShortcut) IsEnabled des UI Elements wird automatisch gesteuert 7. Mai 2008 Christian Moser Folie 48
52. Universell und nützlich: Der RelayCommand Das RelayCommand ist eine generische Implementierung des Command Patterns publicclassRelayCommand: ICommand { publicAction<object> ExecuteDelegate { get; set; } publicPredicate<object> CanExecuteDelegate { get; set; } #regionICommand Members publicboolCanExecute(object parameter) { returnCanExecuteDelegate(parameter); } publiceventEventHandlerCanExecuteChanged; publicvoid Execute(object parameter) { ExecuteDelegate(parameter); } #endregion } 7. Mai 2008 Christian Moser Folie 52
53. Finden von DataBinding Problemen Im Debug Output werden Databinding Fehler ausgegeben Durch den Einsatz eines leeren ValueConverters in dem sie einen Breakpoint setzen können Durch das Binden auf ein einfacheres Objekt 7. Mai 2008 Christian Moser Folie 53
54. Wrap-up Wie funktioniert das DataBinding in WPF? Wie können unterschiedliche Datenformate gebunden werden? Was sind Commands? Wozu dient der RelayCommand? 7. Mai 2008 Christian Moser Folie 54
56. Styles Styles sind eine Liste von Werten für Properties, die auf ein WPF Element angewendet werden können Sie fassen gleiche Eigenschaften zusammen und machen das Design wartbar Ähnlich wie CSS bei HTML 7. Mai 2008 Christian Moser Folie 56 <Style x:Key="DefaultButtonStyle"TargetType="Button"> <Setter Property="Background" Value="Red" /> <Setter Property="FontSize" Value="12" /> </Style> <Button Style="{StaticResource DefaultButtonStyle}" />
57. Control Templates WPF Controls sind «lookless». Nur das Verhalten ist vorgegeben. Ein Default Template ist vorgegeben. Das Template kann komplett ersetzt werden 7. Mai 2008 Christian Moser Folie 57 <ControlTemplate x:Key="SpecialButton"TargetType="Button"> <Grid> <Ellipse Fill="{TemplateBinding Background}"> </Ellipse> <ContentPresenter /> </Grid> </ControlTemplate> <ButtonTemplate="{StaticResourceSpecialButton}" />
58. Data Templates DataTemplates ermöglichen es in Listen komplexe Daten anzuzeigen. 7. Mai 2008 Christian Moser Folie 58 <DataTemplate x:Key="EmployeeDataTemplate"><Grid><Grid.ColumnDefinitions><ColumnDefinition Width="60"/><ColumnDefinition Width="*"/></Grid.ColumnDefinitions><Border Margin="5"BorderBrush="Black"BorderThickness="1"><Image Source="{Binding Path=Image}"Stretch="Fill"Width="50"Height="50" /></Border><StackPanel Grid.Column="1"Margin="5"> ... </DataTemplate>
59. Triggers Triggers machen Styles und Templates aktiv Sie setzen bestimmte Werte, wenn ein Zustand eintritt Der Zustand kann durch Properties, Events oder Daten ausgelöst werden <Style TargetType="Button"> <Setter Property="Background" Value="Red" /> <Style.Triggers> <Trigger Property="IsMouseOver"> <Setter Property="Background" Value="Green" /> </Trigger> </Style.Triggers> </Style> 7. Mai 2008 Christian Moser Folie 59
60. Ressourcen Jedes WPF Element kann beliebig viele Ressourcen verwalten. Ressourcen werden über den Logical Tree vererbt. Farben, Bilder, Geometrien, Styles, Templates und Schriftgrössen sind typische Ressourcen. 7. Mai 2008 Christian Moser Folie 60 Application Applikationsweite Ressourcen Window Grid Label Button Lokale Ressourcen
61. Ressourcen > Beispiel Jede Ressource enthält durch das x:Key Attribut einen eindeutigen Schlüssel Auf Ressourcen kann mit {StaticResource} oder {DynamicResource} zugegriffen werden Ressourcen sollten nach folgendem Schema benannt werden: [Verwendungszweck][RessourceTyp] 7. Mai 2008 Christian Moser Folie 61 Definition: <Application.Resources> <SolidColorBrush x:Key="highlightBrush" Color="Red" /> </Application.Resources> Zugriff: <TextBlock Foreground="{StaticResourcehighlightBrush}"/>
62. Verwaltung von Ressourcen Ressourcen in ein separates Projekt auslagern Für jedes Control ein eigenes ResourceDictionary anlegen Die ResourceDictionaries zu einem Haupt-Dictionary zusammenmergen Das Haupt-Dictionary auf Application Level reinmergen. Die Ressourcen nach folgendem Schema benennen:[Verwendungszweck][ResourceTyp] 7. Mai 2008 Christian Moser Folie 62
63. Wrap-up Was sind Styles? Was sind ControlTemplates? Was sind DataTemplates? Was sind Triggers? Was sind Ressourcen? Wie werden Ressourcen optimal verwaltet? 7. Mai 2008 Christian Moser Folie 63
65. Integration von WPF in WinForms WPF Content kann einfach mit einem ElementHostControl in WinForms integriert werden 7. Mai 2008 Christian Moser Folie 65
66. Integration von WinForms in WPF Windows Forms Controls können mittels WindowsFormsHost in WPF integriert werden <Window x:Class="WinFormInWPF.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms"> <Grid> <WindowsFormsHost> <wf:ListBox x:Name="lstBox"/> </WindowsFormsHost </Grid> </Window> 7. Mai 2008 Christian Moser Folie 66
68. Model-View-ViewModel Pattern Empfohlenes Pattern für die Anbindung von Daten an das UI Entkoppelung zwischen Darstellung und Logik Reines DataBinding zum Verdrahten von Daten und Commands Flexibler Tausch von Controls Einfaches Testen mit normalen Unit Tests 7. Mai 2008 Christian Moser Folie 68
69. Model-View-ViewModel Pattern 7. Mai 2008 Christian Moser Folie 69 Das ViewModel fasst alle Daten und Befehle einer View zu einer «Fassade» zusammen Die Anbindung an die View erfolgt ausschliesslich über DataBinding DataContext = viewModel; View DataBinding ViewModel Daten Daten Daten
70. Lokalisierung 7. Mai 2008 Christian Moser Folie 70 {h:Translate ResourceKey1} {h:Translate ResourceKey2} TranslationManager string GetString( string resourceKey) event LanguageChanged; Text Ressourcen