SlideShare a Scribd company logo
1 of 76
Einführung in die WindowsPresentation Foundation 7. Mai 2008 Christian Moser Folie 1 Christian MoserSoftware Architect and UX Designer www.wpftutorial.net
Grundkonzepte von WPF 7. Mai 2008 Christian Moser Folie 2
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
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
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++
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
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>
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);
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")]
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>
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
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.
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
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));
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
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
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>
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
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
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
Applikationstypen 7. Mai 2008 Christian Moser Folie 21 Browserbasiert Seitenbasiert Formularbasiert
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
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
Entwicklungswerkzeuge 7. Mai 2008 Christian Moser Folie 24
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
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
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
Controls 7. Mai 2008 Christian Moser Folie 28
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
Mitgelieferte Controls 7. Mai 2008 Christian Moser Folie 30
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>
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
Layout 7. Mai 2008 Christian Moser Folie 33
Layout Panels 7. Mai 2008 Christian Moser Folie 34 Grid Stack Panel Canvas Wrap Panel Dock Panel
Margin, Padding und Alignment 7. Mai 2008 Christian Moser Folie 35 <Button HorizontalAlignment="Left"  VerticalAlignment="Top"  Margin="8,0,8,8" >     Test </Button>
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
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>
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
Data Binding 7. Mai 2008 Christian Moser Folie 39
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}" />
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
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
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
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
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));     } }
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
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
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
Möglichkeit 1 : Vordefinierte Commands von WPF verwenden ApplicationCommands	Close, Copy,Cut, Delete, Find, Help, New, Open, Paste, 		Print, PrintPreview, Properties, Redo, Replace, Save, SaveAs, 		SelectAll, Stop, Undo ComponentCommands	MoveDown, MoveLeft, MoveRight, MoveUp, ScrollByLine, ScrollPageDown, ScrollPageLeft, ScrollPageRight, ScrollPageUp, SelectToEnd, SelectToHome, SelectToPageDown, SelectToPageUp MediaCommandsChannelDown, ChannelUp, DecreaseVolume, FastForward, IncreaseVolume, MuteVolume, NextTrack, Pause, Play, PreviousTrack, Record, Rewind, Select, Stop NavigationCommandsBrowseBack, BrowseForward, BrowseHome, BrowseStop, 		Favorites, FirstPage, GoToPage, LastPage, NextPage, PreviousPage, Refresh, Search, Zoom EditingCommandsAlignCenter, AlignJustify, AlignLeft, AlignRight, CorrectSpellingError, DecreaseFontSize, DecreaseIndentation, EnterLineBreak, EnterParagraphBreak, IgnoreSpellingError, IncreaseFontSize, IncreaseIndentation, MoveDownByLine, MoveDownByPage, MoveDownByParagraph, MoveLeftByCharacter, MoveLeftByWord, MoveRightByCharacter, MoveRightByWord 7. Mai 2008 Christian Moser Folie 49
Möglichkeit 1 : Vordefinierte Commands von WPF verwenden > Beispiel 7. Mai 2008 Christian Moser Folie 50 <TextBox x:Name="textBox" Width="200" /> <Button Command="Cut"CommandTarget="{BindingElementName=textBox}"Content="Cut" /> <Button Command="Copy"CommandTarget="{BindingElementName=textBox}"Content="Copy" /> <Button Command="Paste"CommandTarget="{BindingElementName=textBox}"Content="Paste" />
Möglichkeit 2:Eigene Commands implementieren Selber das ICommand Interface implementieren 	<Button Content="Say Hello!" Command="{Binding HelloCommand}" /> 	publicpartialclassWindow1 : Window 	{ publicICommandHelloCommand { get; set; }   public Window1() { InitializeComponent(); DataContext = this;   HelloCommand = newDelegateCommand {ExecuteDelegate = SayHello}; }   privatevoidSayHello(object parameter) { MessageBox.Show("Hello WPF!"); } 	} 7. Mai 2008 Christian Moser Folie 51
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
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
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
Stylen der Benutzeroberfläche 7. Mai 2008 Christian Moser Folie 55
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}" />
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}" />
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>
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
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
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}"/>
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
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
Interoperabilität 7. Mai 2008 Christian Moser Folie 64
Integration von WPF in WinForms WPF Content kann einfach mit einem ElementHostControl in WinForms integriert werden 7. Mai 2008 Christian Moser Folie 65
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
Software Patterns für WPF Applikationen 7. Mai 2008 Christian Moser Folie 67
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
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
Lokalisierung 7. Mai 2008 Christian Moser Folie 70 {h:Translate ResourceKey1} {h:Translate ResourceKey2} TranslationManager   string GetString( string resourceKey)  event LanguageChanged; Text Ressourcen
Multitouch support in .NET 4.0 15.01.2010 Romano Roth Christian Moser Folie 71
Touch Enabled Technologies 15.01.2010 Romano Roth Christian Moser Folie 72 Native Touch Support Microsoft .NET 4.0 on Windows 7 Silverlight 3.0 Multitouch Application Multitouch Application .NET 4.0 .NET 3.5 Windows 7 Multitouch Driver Windows XP,Vista Touch Hardware Touch Hardware Native Multitouch support Additional Driver required
Manipulation Container 15.01.2010 Romano Roth Christian Moser Folie 73 IsManipulationEnabled=true IsManipulationEnabled=true Grid Handle ManipulationStarting Event ,[object Object],Manipulation Container Handle ManipulationDelta Event ,[object Object],Update RenderTranform Update RenderTranform
Manipulation Events 15.01.2010 Romano Roth Christian Moser Folie 74
Manipulation Events 15.01.2010 Romano Roth Christian Moser Folie 75
Weitere Informationen Internet:  www.wpftutorial.net 7. Mai 2008 Christian Moser Folie 76

More Related Content

Viewers also liked

Viewers also liked (16)

TouchPhysics - Physik zum Anfassen
TouchPhysics - Physik zum AnfassenTouchPhysics - Physik zum Anfassen
TouchPhysics - Physik zum Anfassen
 
Active directorio
Active directorioActive directorio
Active directorio
 
Mitos y leyendas
Mitos y leyendasMitos y leyendas
Mitos y leyendas
 
Familia y pareja. Una perspectiva psicoanalitica del amor.
Familia y pareja. Una perspectiva psicoanalitica del amor.Familia y pareja. Una perspectiva psicoanalitica del amor.
Familia y pareja. Una perspectiva psicoanalitica del amor.
 
Empresa na aula
Empresa na aulaEmpresa na aula
Empresa na aula
 
Crear un blog
Crear un blogCrear un blog
Crear un blog
 
AG3 „Der Wald als Lernort für Bildung für nachhaltige Entwicklung“
AG3 „Der Wald als Lernort für Bildung für nachhaltige Entwicklung“AG3 „Der Wald als Lernort für Bildung für nachhaltige Entwicklung“
AG3 „Der Wald als Lernort für Bildung für nachhaltige Entwicklung“
 
Ideenfindung
IdeenfindungIdeenfindung
Ideenfindung
 
AG4 Lessingschule
AG4 LessingschuleAG4 Lessingschule
AG4 Lessingschule
 
Active directorio
Active directorioActive directorio
Active directorio
 
AG3_Schwimmender Lernort
AG3_Schwimmender LernortAG3_Schwimmender Lernort
AG3_Schwimmender Lernort
 
Inmunología
InmunologíaInmunología
Inmunología
 
Politicas de seguridad
Politicas de seguridadPoliticas de seguridad
Politicas de seguridad
 
Klimareport Bayern 2015
Klimareport Bayern 2015Klimareport Bayern 2015
Klimareport Bayern 2015
 
Ocde europa schleicher pisa
Ocde europa schleicher pisaOcde europa schleicher pisa
Ocde europa schleicher pisa
 
Temas selectos de bio
Temas selectos de bioTemas selectos de bio
Temas selectos de bio
 

Similar to Einführung in Windows Presentation Foundation

AndroMDA - Einführung in eine Open Source Model Driven Architecture Lösung
AndroMDA - Einführung in eine Open Source Model Driven Architecture LösungAndroMDA - Einführung in eine Open Source Model Driven Architecture Lösung
AndroMDA - Einführung in eine Open Source Model Driven Architecture LösungEduard Hildebrandt
 
Fachreferat: Visual Studio 2012, Windows 8 und .NET 4.5
Fachreferat: Visual Studio 2012, Windows 8 und .NET 4.5Fachreferat: Visual Studio 2012, Windows 8 und .NET 4.5
Fachreferat: Visual Studio 2012, Windows 8 und .NET 4.5Digicomp Academy AG
 
TYPO3 CMS 7.0 - Die Neuerungen - pluswerk
TYPO3 CMS 7.0 - Die Neuerungen - pluswerkTYPO3 CMS 7.0 - Die Neuerungen - pluswerk
TYPO3 CMS 7.0 - Die Neuerungen - pluswerkdie.agilen GmbH
 
Browserbasiertes computing, RIA
Browserbasiertes computing, RIABrowserbasiertes computing, RIA
Browserbasiertes computing, RIAThomas Christinck
 
Große Applikationen mit AngularJS
Große Applikationen mit AngularJSGroße Applikationen mit AngularJS
Große Applikationen mit AngularJSSebastian Springer
 
C/ C++ for Notes & Domino Developers
C/ C++ for Notes & Domino DevelopersC/ C++ for Notes & Domino Developers
C/ C++ for Notes & Domino DevelopersUlrich Krause
 
Medien Kombinat Meet Magento 05022009
Medien Kombinat Meet Magento 05022009Medien Kombinat Meet Magento 05022009
Medien Kombinat Meet Magento 05022009dasmedienkombinatde
 
Templates, Code & Tools
Templates, Code & ToolsTemplates, Code & Tools
Templates, Code & ToolsUlrich Krause
 
C / C++ Api for Beginners
C / C++ Api for BeginnersC / C++ Api for Beginners
C / C++ Api for BeginnersUlrich Krause
 
Einführung in die webOS Programmierung
Einführung in die webOS ProgrammierungEinführung in die webOS Programmierung
Einführung in die webOS ProgrammierungMarkus Leutwyler
 
Top 10 Internet Trends 2006
Top 10 Internet Trends 2006Top 10 Internet Trends 2006
Top 10 Internet Trends 2006Jürg Stuker
 
JavaScript: Von einfachen Scripten zu komplexen Anwendungen
JavaScript: Von einfachen Scripten zu komplexen AnwendungenJavaScript: Von einfachen Scripten zu komplexen Anwendungen
JavaScript: Von einfachen Scripten zu komplexen Anwendungenmolily
 
20120207 prs ib_js_libraries_v02
20120207 prs ib_js_libraries_v0220120207 prs ib_js_libraries_v02
20120207 prs ib_js_libraries_v02Chris Palatinus
 
Rapid Application Development mit Openobject
Rapid Application Development mit OpenobjectRapid Application Development mit Openobject
Rapid Application Development mit Openobjectopenbig
 

Similar to Einführung in Windows Presentation Foundation (20)

Was ist neu in .NET 4.5?
Was ist neu in .NET 4.5?Was ist neu in .NET 4.5?
Was ist neu in .NET 4.5?
 
AndroMDA - Einführung in eine Open Source Model Driven Architecture Lösung
AndroMDA - Einführung in eine Open Source Model Driven Architecture LösungAndroMDA - Einführung in eine Open Source Model Driven Architecture Lösung
AndroMDA - Einführung in eine Open Source Model Driven Architecture Lösung
 
Fachreferat: Visual Studio 2012, Windows 8 und .NET 4.5
Fachreferat: Visual Studio 2012, Windows 8 und .NET 4.5Fachreferat: Visual Studio 2012, Windows 8 und .NET 4.5
Fachreferat: Visual Studio 2012, Windows 8 und .NET 4.5
 
Net@night asp.net mvc
Net@night asp.net mvcNet@night asp.net mvc
Net@night asp.net mvc
 
TYPO3 CMS 7.0 - Die Neuerungen - pluswerk
TYPO3 CMS 7.0 - Die Neuerungen - pluswerkTYPO3 CMS 7.0 - Die Neuerungen - pluswerk
TYPO3 CMS 7.0 - Die Neuerungen - pluswerk
 
HTML5 Update (am Internet-Briefing)
HTML5 Update (am Internet-Briefing)HTML5 Update (am Internet-Briefing)
HTML5 Update (am Internet-Briefing)
 
Browserbasiertes computing, RIA
Browserbasiertes computing, RIABrowserbasiertes computing, RIA
Browserbasiertes computing, RIA
 
GWT – Google Web Toolkit in der Praxis
GWT – Google Web Toolkit in der PraxisGWT – Google Web Toolkit in der Praxis
GWT – Google Web Toolkit in der Praxis
 
Große Applikationen mit AngularJS
Große Applikationen mit AngularJSGroße Applikationen mit AngularJS
Große Applikationen mit AngularJS
 
C/ C++ for Notes & Domino Developers
C/ C++ for Notes & Domino DevelopersC/ C++ for Notes & Domino Developers
C/ C++ for Notes & Domino Developers
 
MVVM mit WPF
MVVM mit WPFMVVM mit WPF
MVVM mit WPF
 
Medien Kombinat Meet Magento 05022009
Medien Kombinat Meet Magento 05022009Medien Kombinat Meet Magento 05022009
Medien Kombinat Meet Magento 05022009
 
Templates, Code & Tools
Templates, Code & ToolsTemplates, Code & Tools
Templates, Code & Tools
 
C / C++ Api for Beginners
C / C++ Api for BeginnersC / C++ Api for Beginners
C / C++ Api for Beginners
 
Einführung in die webOS Programmierung
Einführung in die webOS ProgrammierungEinführung in die webOS Programmierung
Einführung in die webOS Programmierung
 
JavaScript Architektur
JavaScript ArchitekturJavaScript Architektur
JavaScript Architektur
 
Top 10 Internet Trends 2006
Top 10 Internet Trends 2006Top 10 Internet Trends 2006
Top 10 Internet Trends 2006
 
JavaScript: Von einfachen Scripten zu komplexen Anwendungen
JavaScript: Von einfachen Scripten zu komplexen AnwendungenJavaScript: Von einfachen Scripten zu komplexen Anwendungen
JavaScript: Von einfachen Scripten zu komplexen Anwendungen
 
20120207 prs ib_js_libraries_v02
20120207 prs ib_js_libraries_v0220120207 prs ib_js_libraries_v02
20120207 prs ib_js_libraries_v02
 
Rapid Application Development mit Openobject
Rapid Application Development mit OpenobjectRapid Application Development mit Openobject
Rapid Application Development mit Openobject
 

Einführung in Windows Presentation Foundation

  • 1. Einführung in die WindowsPresentation Foundation 7. Mai 2008 Christian Moser Folie 1 Christian MoserSoftware Architect and UX Designer www.wpftutorial.net
  • 2. Grundkonzepte von WPF 7. Mai 2008 Christian Moser Folie 2
  • 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
  • 24. Entwicklungswerkzeuge 7. Mai 2008 Christian Moser Folie 24
  • 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
  • 28. Controls 7. Mai 2008 Christian Moser Folie 28
  • 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
  • 30. Mitgelieferte Controls 7. Mai 2008 Christian Moser Folie 30
  • 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
  • 33. Layout 7. Mai 2008 Christian Moser Folie 33
  • 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
  • 39. Data Binding 7. Mai 2008 Christian Moser Folie 39
  • 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
  • 49. Möglichkeit 1 : Vordefinierte Commands von WPF verwenden ApplicationCommands Close, Copy,Cut, Delete, Find, Help, New, Open, Paste, Print, PrintPreview, Properties, Redo, Replace, Save, SaveAs, SelectAll, Stop, Undo ComponentCommands MoveDown, MoveLeft, MoveRight, MoveUp, ScrollByLine, ScrollPageDown, ScrollPageLeft, ScrollPageRight, ScrollPageUp, SelectToEnd, SelectToHome, SelectToPageDown, SelectToPageUp MediaCommandsChannelDown, ChannelUp, DecreaseVolume, FastForward, IncreaseVolume, MuteVolume, NextTrack, Pause, Play, PreviousTrack, Record, Rewind, Select, Stop NavigationCommandsBrowseBack, BrowseForward, BrowseHome, BrowseStop, Favorites, FirstPage, GoToPage, LastPage, NextPage, PreviousPage, Refresh, Search, Zoom EditingCommandsAlignCenter, AlignJustify, AlignLeft, AlignRight, CorrectSpellingError, DecreaseFontSize, DecreaseIndentation, EnterLineBreak, EnterParagraphBreak, IgnoreSpellingError, IncreaseFontSize, IncreaseIndentation, MoveDownByLine, MoveDownByPage, MoveDownByParagraph, MoveLeftByCharacter, MoveLeftByWord, MoveRightByCharacter, MoveRightByWord 7. Mai 2008 Christian Moser Folie 49
  • 50. Möglichkeit 1 : Vordefinierte Commands von WPF verwenden > Beispiel 7. Mai 2008 Christian Moser Folie 50 <TextBox x:Name="textBox" Width="200" /> <Button Command="Cut"CommandTarget="{BindingElementName=textBox}"Content="Cut" /> <Button Command="Copy"CommandTarget="{BindingElementName=textBox}"Content="Copy" /> <Button Command="Paste"CommandTarget="{BindingElementName=textBox}"Content="Paste" />
  • 51. Möglichkeit 2:Eigene Commands implementieren Selber das ICommand Interface implementieren <Button Content="Say Hello!" Command="{Binding HelloCommand}" /> publicpartialclassWindow1 : Window { publicICommandHelloCommand { get; set; }   public Window1() { InitializeComponent(); DataContext = this;   HelloCommand = newDelegateCommand {ExecuteDelegate = SayHello}; }   privatevoidSayHello(object parameter) { MessageBox.Show("Hello WPF!"); } } 7. Mai 2008 Christian Moser Folie 51
  • 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
  • 55. Stylen der Benutzeroberfläche 7. Mai 2008 Christian Moser Folie 55
  • 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
  • 64. Interoperabilität 7. Mai 2008 Christian Moser Folie 64
  • 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
  • 67. Software Patterns für WPF Applikationen 7. Mai 2008 Christian Moser Folie 67
  • 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
  • 71. Multitouch support in .NET 4.0 15.01.2010 Romano Roth Christian Moser Folie 71
  • 72. Touch Enabled Technologies 15.01.2010 Romano Roth Christian Moser Folie 72 Native Touch Support Microsoft .NET 4.0 on Windows 7 Silverlight 3.0 Multitouch Application Multitouch Application .NET 4.0 .NET 3.5 Windows 7 Multitouch Driver Windows XP,Vista Touch Hardware Touch Hardware Native Multitouch support Additional Driver required
  • 73.
  • 74. Manipulation Events 15.01.2010 Romano Roth Christian Moser Folie 74
  • 75. Manipulation Events 15.01.2010 Romano Roth Christian Moser Folie 75
  • 76. Weitere Informationen Internet: www.wpftutorial.net 7. Mai 2008 Christian Moser Folie 76