Windows Presentation Foundation (WPF) -Grundlagen -Steuerelemente. Dr. Beatrice Amrhein

Transkript

1 Windows Presentation Foundation (WPF) -Grundlagen -Steuerelemente Dr. Beatrice Amrhein

2 Überblick Die Architektur WPF Projekt erstellen Steuerelemente einfügen Eigenschaften von Steuerelementen ändern Nach dem Handbuch der.net 4.0-Programmierung, Rolf Wenger,

3 Die Architektur Die Windows PresentationFoundation(WPF) gliedert sich in das.net Framework ein Alle C# Klassen und Methoden sind also verwendbar Bibliothek zum Erstellen von GUI Komponenten Schnittstelle zur den C# Properties und Events Die Teile der WPF Verbindung zur Graphik Schnittstelle Quelle der Abbildung: MSDN 3 Nach dem Handbuch der.net 4.0-Programmierung, Rolf Wenger, 2012

4 Positionierung der WPF in.net Die WPF ist eingebettet in das.net Framework.NET- Anwendung.NET-Framework WPF WCF Kommunikation Technologien API Betriebssystem Hardware Base Class Library Common Language Runtime Dynamic Language Runtime BCL CLR Die CLR ist für die Ausführung der Programme verantwortlich 4 Nach dem Handbuch der.net 4.0-Programmierung, Rolf Wenger, 2012

5 Erstes WPF Projekt erstellen Im Projekt-Assistenten wählen wir den Typ Visual C# WPF-Anwendung Nach dem Handbuch der.net 4.0-Programmierung, Rolf Wenger,

6 Erstes WPF Projekt erstellen Nach dem Handbuch der.net 4.0-Programmierung, Rolf Wenger,

7 Die entstandenen Dateien Neben den bereits bekannten Dateien entstehen bei einem WPF-Projekt die neuen Dateien App.xaml, App.xaml.cs, MainWindow.xamlund MainWindow.xaml.cs. Die beiden Dateien App.*enthalten den Code für den Start der Anwendung Die beiden Dateien MainWindow.* enthalten die Inhalte für den Aufbau des Hauptfensters der Anwendung. 7 Nach dem Handbuch der.net 4.0-Programmierung, Rolf Wenger, 2012

8 Das Ganze im Überblick Assistent App.xaml App.xam l.cs MainWindow. xaml MainWindow. xaml.cs App.g.cs MainWindow. baml MainWindow. g.i.cs Generatoren & Compiler Klasse App Ressource Klasse MainWindow Code Code Resultat ErsterWPF_Test.exe 8 Nach dem Handbuch der.net 4.0-Programmierung, Rolf Wenger, 2012

9 Inhalte der.xaml Dateien Durch Doppel-Click auf den Namen der Datei erhalten wir den Inhalt davon angezeigt: App.xamldefiniert den Namen der Applikation (hier ErsterWPF_Test), das Start-Fenster (MainWindow.xaml) sowie die benutzten Resourcen(hier leer). App.xaml <Application x:class="ersterwpf_test.app" xmlns=" " xmlns:x=" StartupUri="MainWindow.xaml"> <Application.Resources> </Application.Resources> </Application> 9

10 Inhalte der.xaml Dateien Die MainWindow.xaml Datei enthält den Inhalt und Aufbau des Haupt- Fensters. Es definiert die Grösse des Fensters (350x525 Einheiten), sowie den (hier noch leeren) Inhalt und Aufbau des Fensters. <Window x:class="ersterwpf_test.mainwindow" <Grid> </Grid> </Window> xmlns=" xmlns:x=" Title="MainWindow" Height="350" Width="525"> hier ist der Inhalt des Fensters definiert 10

11 Die automatisch erzeugte Main-Methode Das Hauptprogramm mit der Main-Methode versteckt sich in der Datei App.xaml.cs Diese wird automatisch generiert und sollte darum nicht verändert werden. /// <summary> /// Application Entry Point. /// </summary> public static void Main() { } ErsterWPF_Test.App app = new ErsterWPF_Test.App(); app.initializecomponent(); app.run(); Sie hat die Aufgabe, das Hauptfenster zu generieren (Initialize- Component) und dann die Applikation zu starten (Run). 11

12 Die Toolbox In das leere Fenster kann nun mit Hilfe des Werkzeugkasten (Toolbox) ein Label eingefügt werden. Der Werkzeugkasten befindet sich (zugeklappt) am linken Rand. 12

13 Der Werkzeugkasten Der aufgeklappte Werkzeugkasten zeigt nun die Auswahl der Steuerelemente an. Um ein Label in das Hauptfenster einzufügen, ziehen Sie dieses mit der Maus auf das Hauptfenster. 13

14 Setzen von Eigenschaften (Properties) Mit Hilfe des Eigenschaften-Fensters (Properties) können Sie die Details für das Label festlegen: Inhalt: Hallo Welt Schriftart Bold(Fett) Schriftgrösse 20px 14

15 Setzen von Eigenschaften (Properties) Danach sieht das Fenster so aus Label-Inhalt: Hallo Welt Schriftart 20px, bold Ausserdem wird dadurch der xaml-code automatisch angepasst: <Window x:class="ersterwpf_test.mainwindow" <Grid> </Grid> </Window> xmlns=" xmlns:x=" Title="MainWindow" Height="350" Width="525"> <Label Content="Hallo Welt!" HorizontalAlignment="Left" Margin="151,101,0,0" FontSize="20" FontWeight="Bold"/> 15

16 Einfügen einer TextBox Wir können nun auf analoge Weise eine TextBox in das Fenster einfügen 16

17 Setzen der TextBox Eigenschaften Mit Hilfe des Eigenschaften-Fensters (Properties) können Sie die Details für die TextBox festlegen Text-Inhalt: Leer Schriftart Bold(Fett) Schriftgrösse 20px 17

18 Starten des Programms Nach dem Compilierenund Starten des Programms, kann der Benutzer einen belieben Text in die TextBox eingeben. 18

19 Label Inhalt (Content) setzen Der Inhalt des Labels kann vom Inhalt der TextBox abhängig gemacht werden. Dafür wählen wir das Label und im Eigenschaftsfenster die Zeile «Content». Beim Anklicken der schwarzen Box ganz rechts von Content erscheint ein Popup- Fenster. 19

20 Label Inhalt (Content) setzen Durch Anklicken der schwarzen Box beim Content erscheint ein Popup-Fenster. Wir wählen darin die Zeile «Datenbindung erstellen». 20

21 Label Inhalt (Content) setzen Beim Anwählen der Zeile «Datenbindung erstellen» erscheint das folgende Fenster. Wir wählen darin bei der Auswahl «Bindungstyp» statt der Datenquelle die Zeile «ElementName». 21

22 Label Inhalt (Content) setzen Unter der Zeile «ElementName» erscheint als weitere Auswahl das Label (Hallo Welt) sowie die textbox. Diese wählen wir aus. 22

23 Label Inhalt (Content) setzen Auf der rechten Seite unter «Pfad» wählen wir nun den Eintrag «Text: (String)» und schliessen mit OK ab. 23

24 Label Inhalt (Content) setzen Nach dem Start der Applikation können wir in die TextBox einen Text eintippen. Dieser erscheint dann sogleich im Label. 24