WPF Events. Ereignisse und Ereignisbehandlung. Dr. Beatrice Amrhein

Transkript

1 WPF Events Ereignisse und Ereignisbehandlung Dr. Beatrice Amrhein

2 Überblick Einführung Die wichtigsten Ereignisse Der C# Code Behind Die Verbindung von WPF und C# Code Einige Beispiele 2

3 Einführung 3

4 Einführung Ein Ereignis tritt immer dann auf, wenn sich der Zustand der des GUI oder der Anwendung ändert. Ein Button wird angeklickt. Der Text einer TextBox wird verändert Die Grösse des Fensters wird verändert Die Maus wird bewegt... Button, TextBox, Window,. Der angemeldete Ereignis-Behandler (EventListener) reagiert auf das entsprechende Ereignis. 4

5 Die wichtigsten Ereignisse Ereignis-Quelle Registriertes Ereignis Button Click Text-Komponente GotFocus / LostFocus / TextChanged Das Anklicken eines Buttons bewirkt ein Click-Event. Eine fokussierbare Komponente (Button, Text-Komponente, Fenster, ) wird zum Beispiel durch Anklicken mit der Maus aktiviert (GotFocus). Durch Anklicken einer anderen Komponente oder durch Drücken der Tabulator-Taste wird der Fokus abgegeben, bzw. an eine andere Komponente weitergegeben (LostFocus). Der Inhalt einer Textkomponente ändert sich (TextChanged). 5

6 Die wichtigsten Ereignisse Ereignis-Quelle Registriertes Ereignis Window Activated / Deactivated Event / Closing / Closed / Alle Mouse-Events (MouseEnter / MouseLeave / MouseMove, ) Key-Events (KeyUp / KeyDown) Focus-Events (GotFocus / LostFocus) Ein Fenster wird durch das Öffnen aktiviert, durch das Schliessen (verkleinert zum Icon) deaktiviert (Activated-/Deactivated). Bevor ein Fenster geschlossen ist (Closed-Event) kann (zum Beispiel für das Speichern des atuellen Zustands) ein Closing Event aufgerufen werden. Auf allen Steuerelementen werden Maus-Ereignisse ausgelöst (hineinfahren, verlassen, ) Das Drücken und Loslassen der Tasten auf der Tastatur bewirkt jeweils ein KeyUp, bzw. ein KeyDown Event. 6

7 Ereignis-Bindung via Eigenschaften Editor 7

8 Click-Ereignis an einen Button verknüpfen MainWindow.xaml <Window x:class="ev1.mainwindow" xmlns=" xmlns:x=" Title="MainWindow" Height="250" Width="340" FontSize="20"> <WrapPanel Margin="20" Width="300"> <Button Content="Gelb" Name="B1" Margin="20" Width="100"/> <Button Content="Grün" Name="B2" Margin="20" Width="100"/> <Label Name="label1" Margin="20" Width="260"></Label> </WrapPanel> </Window> Den Fokus auf den Button «Gelb» setzen 8

9 Click-Ereignis an einen Button verknüpfen Im Eigenschaften-Fenster (Properties) auf die Ereignishandler wechseln Beim Click-Ereignis den Namen des Ereignis- Behandlers (z.b. B1_Click) eintippen und mit «Enter» abschliessen. Dadurch wird das entsprechende Event (Ereignis) an dem Button angemeldet (registriert). 9

10 Click-Ereignis: MainWindow.xaml.cs using System.Windows; namespace ev1 public partial class MainWindow : Window public MainWindow() InitializeComponent(); Visual Studio wechselt den Fokus automatisch auf den Editor in MainWindow.xaml.cs, wo der leere Ereignis-Behandler erzeugt wurde. private void B1_Click(object sender, RoutedEventArgs e) Ereignis-Behandler dürfen zwar beliebige Namen haben, sie müssen aber immer genau die vorgegebene Signatur haben. 10

11 Click-Ereignis an einen Button verknüpfen using System.Windows; namespace ev1 public partial class MainWindow : Window public MainWindow() InitializeComponent(); private void B1_Click(object sender, RoutedEventArgs e) label1.content = "Hallo"; label1.background = Brushes.Yellow; Den Inhalt (die Logik) der Ereignis-Behandlung muss von Hand eingegeben (programmiert) werden. 11

12 Click-Ereignis an einen Button verknüpfen Für den zweiten Button (B2) kann analog vorgegangen werden. Für das Click-Ereignis des Button B2 den Namen des Ereignis-Behandlers (z.b. B2_Click) eintippen und mit «Enter» abschliessen. 12

13 Click-Ereignisse: MainWindow.xaml.cs namespace ev1 public partial class MainWindow : Window public MainWindow() InitializeComponent(); private void B1_Click(object sender, RoutedEventArgs e) label1.content = "Hallo"; label1.background = Brushes.Yellow; private void B2_Click(object sender, RoutedEventArgs e) Auch für B2_Click wird eine leere Hülle erzeugt, welche dann «von Hand» ausprogrammiert werden muss 13

14 Click-Ereignisse: MainWindow.xaml.cs namespace ev1 public partial class MainWindow : Window public MainWindow() InitializeComponent(); private void B1_Click(object sender, RoutedEventArgs e) label1.content = "Hallo"; label1.background = Brushes.Yellow; private void B2_Click(object sender, RoutedEventArgs e) label1.content = "Tschüss"; label1.background = Brushes.GreenYellow; 14

15 Click-Ereignis: MainWindow.xaml <Window x:class="ev1.mainwindow" xmlns=" xmlns:x=" Title="MainWindow" Height="200" Width="340" FontSize="20"> <WrapPanel Margin="20" Width="300"> <Button Content="Gelb" Name="B1" Margin="20" Width="100" Click="B1_Click"/> <Button Content="Grün" Name="B2" Margin="20" Width="100" Click="B2_Click"/> <Label Name="label1" Margin="20" Width="260"></Label> </WrapPanel> </Window> Im XAML Code wurden automatisch die entsprechenden Ereignis- Behandler registriert. 15

16 Maus-Ereignis an ein Label verknüpfen Auch an ein Label kann ein Ereignis (z.b. ein Maus-Ereignis) verknüpft werden. MainWindow.xaml <Window x:class="ev1.mainwindow" xmlns=" xmlns:x=" Title="MainWindow" Height="250" Width="340" FontSize="20"> <WrapPanel Margin="20" Width="300"> <Button Content="Gelb" Name="B1" Margin="20" Width="100" Click="B1_Click"/> <Button Content="Grün" Name="B2" Margin="20" Width="100" Click="B2_Click"/> <Label Name="label1" Margin="20" Width="260"></Label> </WrapPanel> </Window> Den Fokus auf das leere Label «label1» setzen 16

17 Maus-Ereignis an ein Label verknüpfen Aus der Liste der möglichen Ereignisse «MouseEnter» auswählen und z.b. LabelMausEnterals Name des Ereignis-Behandlers wählen und mit «Enter» abschliessen. Dies erzeugt im File MainWindow.xaml.cs den folgenden Ereignis-Behandler private void LabelMausEnter(object sender, MouseEventArgs e) 17

18 Maus-Ereignis: MainWindow.xaml.cs namespace ev1 public partial class MainWindow : Window public MainWindow() InitializeComponent(); private void B1_Click(object sender, RoutedEventArgs e)... private void B2_Click(object sender, RoutedEventArgs e)... private void LabelMausEnter(object sender, MouseEventArgs e) label1.background = Brushes.White; Den Ereignis-Code im Ereignis- Behandler ergänzen 18

19 Maus-Ereignis: MainWindow.xaml <Window x:class="ev1.mainwindow" xmlns=" xmlns:x=" Title="MainWindow" Height="250" Width="340" FontSize="20"> <WrapPanel Margin="20" Width="300"> <Button Content="Gelb" Name="B1" Margin="20" Width="100" Click="B1_Click"/> <Button Content="Grün" Name="B2" Margin="20" Width="100" Click="B2_Click"/> <Label Name="label1" Margin="20" Width="260" MouseEnter="LabelMausEnter"/> </WrapPanel> </Window> Vom Eigenschaften-Editor erzeugte Verknüpfung. Der Effekt: Sobald die Maus über das Label fährt, wird die Hintergrundfarbe wieder auf weiss gesetzt. 19

20 Ereignisse an Eigenschaften- Änderungen verknüpfen 20

21 Daten-Änderungen überwachen Ein Label soll jeweils den aktuellen Wert eines Zählers anzeigen. Jedesmal wenn der Wert des Zählers sich ändert, muss das Label den Wert neu lesen und darstellen. Der Button soll bei jedem Klick den Wert des Zählers um 1 erhöhen Der Zähler soll eine überwachte Eigenschaft (Property) sein und bei jeder Änderung den neuen Wert dem Label wieder bekannt geben. 21

22 Daten-Änderungen überwachen: MainWindow.xaml.cs <Window x:class="ev4.mainwindow" xmlns=" xmlns:x=" Title="MainWindow" Height="150" Width="250" FontSize="20"> <StackPanel Orientation="Vertical" > <Button Margin="15" Click="ButtonClick"> Erhöhe den Wert </Button> <Label HorizontalAlignment="Center"> <Binding Path="Zaehler"/> </Label> </StackPanel> </Window> In einem vertikalen StackPanelButton und Label einfügen. Im Button den Click-Event Ereignis- Behandler, im Label das Data-Binding definieren. 22

23 Daten-Änderungen überwachen: MainWindow.xaml.cs using System.Windows; namespace ev4 public partial class MainWindow : Window Daten daten; public MainWindow() InitializeComponent(); daten = new Daten(); DataContext = daten; Daten Objekt erzeugen und als DataContext festlegen private void ButtonClick(object sender, RoutedEventArgs e) daten.erhoehe(); ButtonClickMethode programmieren. 23

24 Daten-Änderungen überwachen: Daten Klasse using System.ComponentModel; using System.Windows.Media; namespace ev4 class Daten : INotifyPropertyChanged public event PropertyChangedEventHandler PropertyChanged; Damit die Klasse Datenüberwachte Eigenschaften (Properties) haben kann, muss sie das Interface INotifyPropertyChanged implementieren. Das Interface bietet ein event vom Typ PropertyChangedEventHandler, welches PropertyChangedheisst. Dieses ist bereits in C# implementiert und kann hier benutzt werden. 24

25 Daten-Änderungen überwachen: Daten Klasse Die Ereignis-Methode PropertyChanged bewirkt, dass jede Daten- Änderung der Property mit Namen propertynamean das GUI bekannt gegeben wird. PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); 25

26 Property Zaehler überwachen: Daten Klasse private int zaehler = 0; public int Zaehler get return zaehler; set zaehler = value; PropertyChanged(this, new PropertyChangedEventArgs("Zaehler")); Durch den Aufruf von PropertyChanged in der set- Methode wird Zaehler eine überwachte Property. Jede Wert-Änderung von Zaehlerwird sofort an das GUI bekannt gegeben. 26

27 Die vollständige Daten Klasse class Daten : INotifyPropertyChanged public event PropertyChangedEventHandler PropertyChanged; private int zaehler = 0; public int Zaehler get return zaehler; set zaehler = value; PropertyChanged(this, new PropertyChangedEventArgs("Zaehler")); public void Erhoehe() Zaehler = Zaehler+1; Die Methode Erhoehe wird von der EreignisMethode ButtonClickaufgerufen und erhöht jeweils den Wert von Zaehler um 1. Dadurch wird die set-methode von Zaehleraufgerufen, welche ein PropertyChanged event erzeugt, welches die Änderungs- Meldung an das GUI ausliefert. 27

28 Der vollständige Ablauf Button Click 1 2 MainWindow.xaml <Button Click="ButtonClick">... MainWindow.xaml.cs 3 MainWindow.xaml <Label> <Binding Path="Zaehler"/> </Label> public int Zaehler get return zaehler; set zaehler = value; 7 6 private void ButtonClick(object sender, RoutedEventArgs e) daten.erhoehe(); 5 4 Daten.cs public void Erhoehe() Zaehler = Zaehler+1; PropertyChanged(this, new PropertyChangedEventArgs("Zaehler")); 28

29 Mehrere Eigenschaften einer Klasse überwachen 29

30 Weitere überwachte Eigenschaft: LabelFarbe private Brush labelfarbe; public Brush LabelFarbe get return labelfarbe; set labelfarbe = value; PropertyChanged(this, new PropertyChangedEventArgs("LabelFarbe")); Die Daten Klasse wird um eine weitere überwachte Eigenschaft (hier LabelFarbe) erweitert. Auch diese ruft bei jeder Änderung die Ereignis- Methode PropertyChanged auf. 30

31 Erweiterte ErhoeheMethode public void Erhoehe() Zaehler = Zaehler+1; if(zaehler > 5) LabelFarbe = Brushes.Yellow; if (Zaehler > 10) LabelFarbe = Brushes.YellowGreen; if (Zaehler > 15) LabelFarbe = Brushes.Green; Wir ändern in der Erhöhe Methode (abhängig vom Wert von Zaehler) den Wert der überwachten Eigenschaft LabelFarbe. 31

32 Verbinden der Hintergrundfarbe des Labels <Window x:class="ev5.mainwindow" xmlns=" xmlns:x=" Title="MainWindow" Height="150" Width="250" FontSize="20"> <StackPanel Orientation="Vertical" > <Button Margin="15" Click="ButtonClick"> Erhöhe den Wert </Button> <Label HorizontalAlignment="Center" Background="Binding LabelFarbe"> <Binding Path="Zaehler"/> </Label> </StackPanel> </Window> Die Hintergrundfarbe des Labels wird an die Eigenschaft LabelFarbe der Klasse Daten gebunden. 32

33 Der Ereignis-Ablauf für Hintergrund Farbe des Labels Button Click 1 2 MainWindow.xaml <Button Click="ButtonClick">... MainWindow.xaml.cs 3 MainWindow.xaml 7 <Label Background="Binding LabelFarbe> <Binding Path="Zaehler"/> </Label> private void ButtonClick(object sender, RoutedEventArgs e) daten.erhoehe(); Daten.cs 6 public void Erhoehe()... LabelFarbe = Brushes.Green; set 5 labelfarbe = value; PropertyChanged(this, new PropertyChangedEventArgs("LabelFarbe")); 4 33

34 TimerEvents Stoppuhr 34

35 Stoppuhr: MainWindow.xaml <Window x:class="ev4.mainwindow" xmlns=" xmlns:x=" Title="MainWindow" Height="150" Width="300" FontSize="18"> <DockPanel> <UniformGrid Rows="1" DockPanel.Dock="Bottom" Margin="20,5"> <Button Content="Start" Click="StartEvent"/> <Button Content="Stop" Click="StopEvent"/> <Button Content="Reset" Click="ResetEvent"/> </UniformGrid> <UniformGrid Rows="1" Margin="20,20,20,5"> <Label HorizontalAlignment="Center">Sekunden</Label> <Label HorizontalAlignment="Center"> <Binding Path="Time"/> </Label> </UniformGrid> </DockPanel> </Window> Die drei Buttons erhalten je ein Click Event. Das Label wird an die Property Time gebunden. 35

36 Stoppuhr: MainWindow.xaml.cs using System.Windows; namespace ev4 public partial class MainWindow : Window Stoppuhr stoppuhr; public MainWindow() InitializeComponent(); stoppuhr = new Stoppuhr(); DataContext = stoppuhr; Stoppuhr erzeugen und als DataContext (Daten- Quelle) setzen. 36

37 Stoppuhr: MainWindow.xaml.cs private void StartEvent(object sender, RoutedEventArgs e) stoppuhr.start(); private void StopEvent(object sender, RoutedEventArgs e) stoppuhr.stop(); Die Ereignis-Methoden für die Buttons (Start, Stop und Reset) private void ResetEvent(object sender, RoutedEventArgs e) stoppuhr.reset(); 1 2 <Button Content="Start" Click="StartEvent"/> MainWindow.xaml private void StartEvent(object sender, RoutedEventArgs e)... 3 MainWindow.xaml.cs 4 public void Start()... StoppUhr.cs 37

38 Die Klasse Stoppuhr using System; using System.ComponentModel; using System.Windows.Threading; namespace ev4 public class Stoppuhr : INotifyPropertyChanged public event PropertyChangedEventHandler PropertyChanged; Die Klasse Stoppuhr soll überwachte Eigenschaften (Properties) haben. Sie muss darum INotifyPropertyChanged implementieren. private DispatcherTimer dispatchertimer; private int intervall = 250; Für das Messen der aktuellen Zeit benötigen wir einen Timervom Typ DispacherTimer(C# Klasse). In der Variablen intervallwird gespeichert, wie viele Millisekunden zwischen zwei Timer-Events verstreichen sollen. 38

39 Die Klasse Stoppuhr public Stoppuhr() dispatchertimer = new DispatcherTimer(); dispatchertimer.interval = new TimeSpan(0, 0, 0, 0, intervall); dispatchertimer.tick += new EventHandler(TimerEvent); private double anzahlticks; public double AnzahlTicks get return anzahlticks; set anzahlticks = value; Der Konstruktor erzeugt ein Dispatcher- TimerObjekt. Das Timer-Intervall wird auf die vordefinierte Anzahl Millisekunden gesetzt. Das Ereignis (Delegate) der Klasse DispacherTimerheisst Tick. An dieses muss unser EventHandlerangemeldet werden. AnzahlTicks speichert die Anzahl Timer- Events, welche seit dem Starten der Stoppuhr eingetroffen sind. 39

40 Die Klasse Stoppuhr private String time; public String Time get return time; set time = value; AenderungMelden("Time"); Time ist eine überwachte Property. Sie speichert, wieviel Zeit seit dem Starten der Stoppuhr verstrichen ist. private void AenderungMelden(String propertyname) if (PropertyChanged!= null) PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); Die Methode AenderungMelden meldet die Datenänderung, mit Hilfe eines PropertyChange Events. 40

41 Die Klasse Stoppuhr: Das TimerEvent private void TimerEvent(object sender, EventArgs e) AnzahlTicks++; int min = (int)anzahlticks * intervall / 60000; double sec = AnzahlTicks * intervall / min * 60; Time = String.Format(" 0m 1:F2s", min, sec); Die Methode TimerEventerhöht die AnzahlTicks und berechnet daraus die verstrichene Zeit in Minuten und Sekunden. Time ist dann der formatierte Ausgabe-String. 41

42 Die Klasse Stoppuhr: Start/Stop/Reset public void Start() dispatchertimer.start(); public void Stop() dispatchertimer.stop(); Die Methoden Start und Stop sind für das Steuern des Timers zuständig. public void Reset() AnzahlTicks = 0; Time = "0s 0.00m"; Die Methode Resetsetzt die Zeit (Anzahl Ticks) auf 0 zurück. Start() Stoppuhr Start() DispacherTimer Nach 250 msec TimerEvent() Stoppuhr AnzahlTicks++; Time =... AenderungMelden() PropertyChanged 42