CopaMVVM unter WPF. Simon Kranzer Roland Graf

Transkript

1 CopaMVVM unter WPF Simon Kranzer Roland Graf

2 Model-View-ViewModel-Pattern (MVVM) unter WPF View die Benutzeroberfläche WPF: XAML + Codebehind Datei ViewModel Klasse zur Kapselung des Model WPF: View bindet sich an dessen Properties Model Datenmodell WPF: Klassen enthalten die Nutzdaten

3 Model-View-ViewModel-Pattern (MVVM) unter WPF View kennt das ViewModel ViewModel kennt das Model, aber nicht das View Model kennt weder die View noch das ViewModel

4 Model-View-ViewModel-Pattern (MVVM) unter WPF Events Definition deklarativ in XAML Erstellung durch Designer Nimmt Benutzereingaben entgegen Einfache Eingabeüberprüfung durch Controls Weiterleitung der Eingaben an ViewModel durch Data Binding Enthält keinerlei UI Elemente Logik zur Behandlung der Benutzereingaben Erstellung durch Entwickler Rückmeldung an View durch Events oder mittels Delegatenaufruf Enthält nur die Daten Erstellung durch Entwickler

5 Commands implementieren Vier Schritte zur Implementierung eigener Commands 1. Command implementieren Klasse erstellen, die das Interface ICommand implementiert 2. ICommand Klasse instanzieren Instanz in statischen Variablen speichern 3. Command im View (XAML) verwenden 4. Command von Funktionalität entkoppeln

6 Das Interface ICommand für Klassen die Commands implementieren namespace System.Windows.Input public interface ICommand // Defines the method that determines whether the // command can execute in ist current state // Returns true if this command can be executed; // otherwise, false. bool CanExecute(object parameter); // Defines the method to be called when the command // is invoked. void Execute(object parameter); // Occurs when changes occur that affect whether // or not the command should execute. event EventHandler CanExecuteChanged;

7 Das Interface ICommandSource für Klassen die Commands auslösen namespace System.Windows.Input // Defines an object that knows how to invoke a command. public interface ICommandSource // Gets the command that will be executed when the // command source is invoked. ICommand Command get; // Represents a user defined data value that can be passed // to the command when it is executed. // Returns the command specific data. object CommandParameter get; // The object that the command is being executed on. IInputElement CommandTarget get;

8 1. Command implementieren mit Klasse die ICommands implementiert public class Exit : ICommand public bool CanExecute(object parameter) return true; public void Execute(object parameter) Application.Current.Shutdown(); public event EventHandler CanExecuteChanged;

9 2. Command instanzieren mit statischer Klasse die ICommands speichert public static class AppCommands private static ICommand _exit = new ExitCommand(); public static ICommand Exit get return _exit; private static ICommand _sort = new SortCommand(); public static ICommand Sort...

10 3. Command verwenden mit XAML im Property Command <Window x:class="demo.mainwindow" xmlns=" xmlns:x=" xmlns:local="clr-namespace:demo.mainwindow" <MenuItem Command="x:Static local:appcommands.exit" Header="Exit" /> <Button Command="x:Static local:appcommands.sort" Content="Sort" />

11 4. Command & Programmlogik entkoppeln Forderung: Command ist derzeit noch abhängig vom Target, sollte aber unabhängig vom aktuellen Eingabefokus sein Lösung: Wir feuern beim Execute einen RoutedEvent und jenes Control das sich angesprochen fühlt (z.b. aktuelles Window oder Control mit Eingabefokus) reagiert darauf.

12 Entkoppelung mit Routed Events Routing Strategien Tunnel - Event wird vom Wurzelelement durch den Element Tree nach unten bis zum auslösenden Element weitergeleitet. Events habe meist Präfix Preview Bubble Event blubbert von auslösendem Element durch den Element Tree in Richtung Wurzelelement Direct Event zeigt seine Wirkung nur auf dem Element, das den Event auslöst (auch Nor-Routing Strategie genannt).

13 Entkoppelung mit Routed Events Tunnel und Bubble

14 Command mit Routed Events mit Klasse die ICommands implementiert - Sender // Command Klasse als Event Sender public class Exit : ICommand public static readonly RoutedEvent ExecuteEvent = EventManager.RegisterRoutedEvent( Execute, Routingstrategie.Bubble, typeof(routedeventhandler), typeof(exit));... public void Execute(object parameter) RoutedEventArgs e = new RoutedEventArgs(ExecuteEvent, Keyboard.FocusedElement); Keyboard.FocusedElement.RaiseEvent(e);...

15 Command mit Routed Events mit Klasse die ICommands implementiert - Empfänger // MainWindow als Empfänger der Events public MainWindow() InitializeComponent(); this.addhandler( Exit.ExecuteEvent, new RoutedEventHandler(OnExitExecute)); private void OnExitExecute(object sender, RoutedEventArgs e) this.close();

16 Ablauf eines Command mit Routed Events am Beispiel des Buttons Exit Sender: Exit Klasse registriert RoutedEvent mit dem Namen Execute beim EventManager View (XAML): Button Exit wird Referenz auf Exit Objekt mit ICommand Interface zugewiesen Empfänger: Window Objekt registriert RoutedEventHandler 1. Benutzer klickt Button Exit an 2. Button Exit ruft Methode Execute über die Referenz der Schnittstelle ICommand aus Klasse Exit auf 3. Execute feuert ExecuteEvent 4. RoutedEvent blubbert von vom Tastatur-Fokus nach oben 5. Window Objekt empfängt Event und bearbeitet OnExitExecute

17 Command & Logik mit.net entkoppeln mit RoutedCommands RoutedCommands/RoutedUICommands RoutedEvent basierte Klassen mit konkreter Implementierung des Interfaces ICommand CommandManager Klasse kümmert sich um die Verwaltung der Commands und Referenzen CommandBinding Verbindet eine RoutedUICommand-Instanz mit einem/mehreren Event Handlern also mit Logik.

18 .NET-eigene Command Entkopplung Klassen RoutedCommand / RoutedUICommand RoutedCommand/RoutedUICommand Konkrete explizite Implementierung des Interfaces ICommand public class RoutedCommand: ICommand public bool CanExecute(object param, IInputElement target); public void Execute(object param, IInputElement target); public ICommand.CanExecute(object param); public ICommand.Execute(object param); public event EventHandler CanExecuteChanged;

19 .NET-eigene Command Entkopplung Der CommandManager Der CommandManager definiert vier RoutedEvents zur Nutzung durch die Klasse RoutedCommands und einen Eventhandler namespace System.Windows.Input public sealed class CommandManager public static readonly RoutedEvent CanExecuteEvent; public static readonly RoutedEvent PreviewCanExecuteEvent; public static readonly RoutedEvent ExecuteEvent; public static readonly RoutedEvent PreviewExecuteEvent; public static event Eventhandler RequerySuggested;...

20 .NET-eigene Command Entkopplung CommandManager & RoutedCommand / RoutedUICommand Was passiert nun im RoutedCommand bei Execute und CanExecute? CanExecute lösen das Tunneling Event PreviewCanExecute und dann das Bubbling Event CanExecute aus. Execute lösen das Tunneling Event PreviewExecute und dann das Bubbling Event Execute aus. Wozu ein RequerySuggested? Der CommandManager löst einen RequerySuggested Event immer dann aus, wenn ein Input-Event (Tastatur, Mausklick) stattfindet.

21 .NET-eigene Command Entkopplung CommandBinding CommandBinding Verbindet eine RoutedUICommand-Instanz mit einem oder mehreren Event Handlern - also mit Logik Definiert vier gleichnamige Events wie CommandManager Beispielbindung: CommandBinding cmdbind = new CommandBinding(); cbnd.command = ApplicationCommands.Paste; cbnd.executed += new ExecuteRoutedEventHandler(CmdExecuted); cbnd.canexecute += new ExecuteRoutedEventHandler(CmdCanExecute); Und wo wird diese Bindung vorgenommen?

22 .NET-eigene Command Entkopplung CommandBinding CommandBinding Bindung findet in Klassen UIElement, UIElement3D und ContentElement statt Klassen besitzen Property CommandBindings vom Typ CommandBindingCollection Klassen definieren intern vier statische EventHandler für die vier Events der CommandManager Klasse.

23 .NET-eigene Command Entkopplung CommandBinding CommandBinding??????????????

24 Wir erstellen eine MVVM Applikation Projekt anlegen WPF Projekt MVVMDemo anlegen Im Projekt Verzeichnisse erstellen für Model ViewModel View Command Common

25 MVVM Pattern unter WPF/Silverlight MVVM Pattern für WPF basiert auf Data Bindings Commands anstatt eine auf RoutedCommands basierende hat sich auf Delegates basierende Implementierung durchgesetzt Begründung: Logik und Command sollte in der ViewModel Klasse sein und RoutedCommands gibt es nur bei UIElements und nicht in der ViewModel-Instanz

26 Wir erstellen eine MVVM Applikation Model und ViewModel Klassen anlegen Im Verzeichnis Model erstellen wir die Klassen public class Person mit den Properties FirstName, LastName, public class PersonCollection : Collection<Person> Im Verzeichnis ViewModel erstellen wir die Klassen public class ViewModelBase public class MainViewModel : ViewModelBase

27 Wir erstellen eine MVVM Applikation View deklarativ in XAML definieren MainWindow XAML Datei entsprechend anpassen

28 Wir erstellen eine MVVM Applikation Klasse MainViewModel Klasse MainViewModel kapselt das Model mit den Daten 1. Property PersonCollection einfügen public PersonCollection Persons get; private set; 2. und mit Daten befüllen bietet Interfaces ICommand für das View 3. Property PersonCollection einfügen ICommand PreviousCommand get; private set; ICommand NextCommand get; private set;

29 Wir erstellen eine MVVM Applikation Klasse ActionCommand Klasse ActionCommand kapselt für ein Command-Objekt notwendigen Informationen stellt die Verbindung zwischen der Command- Eigenschaft eines Steuerelements und einer auszuführenden Methode im ViewModel her Allgemeine Forderung an die Klasse Implementiert Icommand Verwaltet Referenz auf Execute- und CanExecuteHandler

30 Wir erstellen eine MVVM Applikation Klasse ActionCommand Klasse ActionCommand Allgemeine Forderung an die Klasse Verwaltet Delegaten für Execute- und CanExecuteHandler Einfache Angabe der beiden Delegaten über Konstruktor Implementiert ICommand Ruft in den beiden Methoden jeweils die Delegaten auf Fügt den CanExecuteChanged EventHandler dem RequerySuggested des CommandManagers hinzu

31 Wir erstellen eine MVVM Applikation Klasse ActionCommand - Source - 1- Klasse mit Felder und Konstruktor: public class ActionCommand : ICommand private readonly Action<object> _executehandler; private readonly Func<object, bool> _canexecutehandler; public ActionCommand( Action<object> execute, Func<object, bool> canexecute) if (execute == null) throw new ArgumentNullException("Execute cannot be null"); _executehandler = execute; _canexecutehandler = canexecute;

32 Wir erstellen eine MVVM Applikation Klasse ActionCommand Source -2- Hinzufügen der beiden Methoden Execute und CanExecute: public class ActionCommand : ICommand... public void Execute(object parameter) _executehandler(parameter); public bool CanExecute(object parameter) if (_canexecutehandler == null) return true; return _canexecutehandler(parameter);

33 Wir erstellen eine MVVM Applikation Klasse ActionCommand Source -3- Hinzufügen zweier benutzerderfinierter Event Accessoren: public class ActionCommand : ICommand... public event EventHandler CanExecuteChanged add CommandManager.RequerySuggested += value; remove CommandManager.RequerySuggested -= value;

34 Wir erstellen eine MVVM Applikation Bindung an einfache.net Properties Dependency Properties können auf andere Elemente verweisen Verfügen über einen Benachrichtigungsmechanismus, der eine Änderung des Properties anzeigt besitzen eine Defaultwert bieten eine Vererbung über den Visual Tree Verfügen über eine integrierte Validierung und sind die Grundlage für Data Binding

35 Wir erstellen eine MVVM Applikation Bindung an einfache.net Properties Data Binding ermöglicht es, eine Dependency Property an den Wert einer anderen Property zu binden Bei der Bindung an.net Properties muss dieses über einen Benachrichtigungsmechanismus verfügen, der Data Binding Änderungen anzeigt und die Daten entsprechend synchronisiert werden. erreicht man dies durch Implementierung des Interface public interface INotifyPropertyChanged event PropertyChangedEventHandler PropertyChanged;

36 Wir erstellen eine MVVM Applikation Implementierung des interface INotifyPropertyChanged Erstellen der Basisklasse ViewModelBase public class ViewModelBase : INotifyPropertyChanged public event PropertyChangedEventHandler PropertyChanged; protected void OnPropertChanged(string propertyname) if (PropertyChanged!= null) PropertyChanged(this, new PropertyChangedEventArgs(propertyName));

37 Wir erstellen eine MVVM Applikation Benachrichtigung mittels NotifyPropertyChanged Änderungsbenachrichtigung einer Property mittels NotifyPropertyChanged public string MyProperty get return this.mypropertyvalue; set if (value!= this.mypropertyvalue) this.mypropertyvalue = value; OnPropertyChanged( MyProperty );

38 Wir erstellen eine MVVM Applikation Implementierung des interface INotifyPropertyChanged WPF enthält generische Collection-Klasse mit dem Namen ObservableCollection<T>, die die beiden Interfaces INotifyPropertyChanged und INotifyCollectionChanged implementiert. Änderung des Models PersonCollection using System.Collections.ObjectModel; public class PersonCollection : ObservableCollection<Person>

39 Wir erstellen eine MVVM Applikation Binden der View an ObservableCollection <Window x:class="mvvmdemo2.mainwindow"... xmlns:vm="clr-namespace:mvvmdemo.viewmodel" <Window.Resources> <vm:mainviewmodel x:key="mainviewmodel"/> </Window.Resources> <Grid DataContext="StaticResource mainviewmodel"... >... <TextBox Text="Binding Persons/FirstName"... />... </Grid> </Window>

40 Wir erstellen eine MVVM Applikation Die CollectionViews der WPF Klasse CollectionView implementiert Interface ICollectionView: public interface ICollectionView: IEnumerable, INotifyCollectionChanged bool MoveCurrentToFirst(); bool MoveCurrentToNext(); bool MoveCurrentToPrevious(); Object CurrentItem get; int CurrentPosition( get; bool MoveCurrentToPosition(int pos);... stellt auch den Zeiger und Index auf das aktuell selektierte Objekt einer Collection bereit.

41 Wir erstellen eine MVVM Applikation Verwendung der CollectionView im MainViewModel public class MainViewModel : ViewModelBase private ICollectionView _personcollview; public MainViewModel()... LoadData(); _personcollview = CollectionViewSource.GetDefaultView(Persons); _personcollview.movecurrenttofirst();...

42 Wir erstellen eine MVVM Applikation Verwendung der CollectionView im MainViewModel public MainViewModel()... NextCommand = new ActionCommand(OnNextExecuted, OnNextCanExecute); PreviousCommand = new ActionCommand(OnPreviousExecuted, OnPreviousCanExecute); void OnNextExecuted(object parameter) _personcollview.movecurrenttonext(); bool OnNextCanExecute(object parameter)... return _personcollview.currentposition < Persons.Count - 1;

43 Wir testen unsere MVVM Applikation Nun sollte unsere Applikation funktionieren Testen Sie die Applikation setzen Sie Breakpoints versuchen Sie die Funktionsweise zu erklären Erweitern Sie Ihre Applikation mit beliebigen Features!

44 Wir erweitern die MVVM Applikation

45 Wir erweitern die MVVM Applikation Bindung von DependencyProperty an.net Properties Wenn die CollectionView eine Änderung meldet Wir benutzen die OnPropertyChanged der ViewModelBase

46 MVVM Implementierungs-Beispiele Artikel + Code Smith, Josh : WPF-Anwendungen mit dem Model-View-ViewModel- Entwurfsmuster Code: Huber, T.C. : Schöne Aussichten - Das Model-View-ViewModel-Pattern für WPF-Anwendungen, DotNet-Magazin, Ausgabe 10/ odelarticle.pdf Code: _ModelViewViewModelArticle_Code.zip