Upload
others
View
8
Download
0
Embed Size (px)
Citation preview
Windows PresentationFoundation (WPF)
- Grundlagen - Steuerelemente
Dr. Beatrice Amrhein
Überblick
� Die Architektur
� WPF Projekt erstellen
� Steuerelemente einfügen
� Eigenschaften von Steuerelementen ändern
2Nach dem Handbuch der .NET 4.0-Programmierung, Rolf Wenger, 2012
Die Architektur
� Die Windows Presentation Foundation (WPF) gliedert sich in
das .NET Framework ein
� Alle C# Klassen und Methoden sind also verwendbar
3
Quelle der Abbildung: MSDN
Nach dem Handbuch der .NET 4.0-Programmierung, Rolf Wenger, 2012
Die Teile der WPF
Verbindung zur
Graphik
Schnittstelle
Schnittstelle zur den
C# Properties und
Events
Bibliothek zum
Erstellen von GUI
Komponenten
Positionierung der WPF in .NET
4
Technologien
BCL
CLR
• Die CLR ist für die Ausführung der Programme verantwortlich
.NET-Anwendung
.NET-Framework
API
Betriebssystem
Hardware
WPF WCFKommunikation
…
DynamicLanguage Runtime
Base Class Library
Common
Language Runtime
Nach dem Handbuch der .NET 4.0-Programmierung, Rolf Wenger, 2012
� Die WPF ist eingebettet in das .Net Framework
Erstes WPF Projekt erstellen
� Im Projekt-Assistenten wählen wir den Typ
� Visual C# �WPF-Anwendung
5Nach dem Handbuch der .NET 4.0-Programmierung, Rolf Wenger, 2012
Erstes WPF Projekt erstellen
6Nach dem Handbuch der .NET 4.0-Programmierung, Rolf Wenger, 2012
Die entstandenen Dateien
� Neben den bereits bekannten Dateien
entstehen bei einem WPF-Projekt die
neuen Dateien App.xaml, App.xaml.cs,
MainWindow.xaml und
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
Das Ganze im Überblick
8
App.xamlApp.xam
l.cs
App.g.cs
Klasse App
MainWindow.xaml
MainWindow.xaml.cs
MainWindow.baml
MainWindow.g.i.cs
ErsterWPF_Test.exe
Klasse MainWindow
Assistent
Generatoren
& Compiler
Resultat
Code
Ressource
Code
Nach dem Handbuch der .NET 4.0-Programmierung, Rolf Wenger, 2012
Inhalte der .xaml Dateien
� Durch Doppel-Click auf den Namen der Datei erhalten wir den Inhalt
davon angezeigt: App.xaml definiert 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="http://schemas.microsof. . . "
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
StartupUri="MainWindow.xaml">
<Application.Resources>
</Application.Resources>
</Application>
9
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"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
</Grid>
</Window>
10
… hier ist der Inhalt des Fensters definiert
Syntax der .xaml Dateien
Die XAML Dateien sind in einer erweiterten XML-Sprache definiert. Für diese
gilt:
� Elemente werden mit einem Start-Tag < .. > geöffnet und mit einem End-
Tag < .. /> geschlossen
� Leere Elemente haben bloss ein Start-Tag < .. />
<Window Eigeschaften des Window . . >
<Grid>
<Label Content="Label" weitere Eigenschaften des Labels . . />
<Button Content="Button" weitere Eigenschaften des Buttons . . />
<TextBox Text="TextBox" weitere Eigeschaften der TextBox . . />
</Grid>
</Window>
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).
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.
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.
14
Setzen von Eigenschaften (Properties)
� Mit Hilfe des Eigenschaften-Fensters (Properties) können Sie die Details
für das Label festlegen:
15
Inhalt:
Hallo Welt
Schriftgrösse
20pxSchriftart
Bold (Fett)
Setzen von Eigenschaften (Properties)
� Danach sieht das Fenster so aus
16
Label-Inhalt:
Hallo Welt
Schriftart
20px, bold
Ausserdem wird dadurch der xaml-Code automatisch angepasst:<Window x:Class="ErsterWPF_Test.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Label Content="Hallo Welt!" HorizontalAlignment="Left" Margin="151,101,0,0"
FontSize="20" FontWeight="Bold"/>
</Grid>
</Window>
Einfügen einer TextBox
� Wir können nun auf analoge Weise eine TextBox in das Fenster einfügen
17
Setzen der TextBox Eigenschaften
� Mit Hilfe des Eigenschaften-Fensters (Properties) können Sie die Details
für die TextBox festlegen
18
Text-Inhalt:
Leer
Schriftgrösse
20pxSchriftart
Bold (Fett)
Starten des Programms
� Nach dem Compilieren und Starten des Programms, kann der Benutzer
einen belieben Text in die TextBox eingeben.
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.20
Label Inhalt (Content) setzen
Durch Anklicken der schwarzen Box beim
Content erscheint ein Popup-Fenster.
Wir wählen darin die Zeile «Datenbindung
erstellen».
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».
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.
23
Label Inhalt (Content) setzen
Auf der rechten Seite unter «Pfad»
wählen wir nun den Eintrag
«Text: (String)» und schliessen mit OK
ab.
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.
25