windows presentation foundation(wpf)amrhein/skripten/info2/03.wpfgrundlagen.pdf · 2016-03-07 ·...
TRANSCRIPT
![Page 1: Windows Presentation Foundation(WPF)amrhein/Skripten/Info2/03.WPFGrundlagen.pdf · 2016-03-07 · Die Architektur Die Windows PresentationFoundation(WPF) gliedert sich in das .NET](https://reader033.vdocuments.mx/reader033/viewer/2022041811/5e57e06685587909fa21b7db/html5/thumbnails/1.jpg)
Windows PresentationFoundation (WPF)
- Grundlagen - Steuerelemente
Dr. Beatrice Amrhein
![Page 2: Windows Presentation Foundation(WPF)amrhein/Skripten/Info2/03.WPFGrundlagen.pdf · 2016-03-07 · Die Architektur Die Windows PresentationFoundation(WPF) gliedert sich in das .NET](https://reader033.vdocuments.mx/reader033/viewer/2022041811/5e57e06685587909fa21b7db/html5/thumbnails/2.jpg)
Überblick
� Die Architektur
� WPF Projekt erstellen
� Steuerelemente einfügen
� Eigenschaften von Steuerelementen ändern
2Nach dem Handbuch der .NET 4.0-Programmierung, Rolf Wenger, 2012
![Page 3: Windows Presentation Foundation(WPF)amrhein/Skripten/Info2/03.WPFGrundlagen.pdf · 2016-03-07 · Die Architektur Die Windows PresentationFoundation(WPF) gliedert sich in das .NET](https://reader033.vdocuments.mx/reader033/viewer/2022041811/5e57e06685587909fa21b7db/html5/thumbnails/3.jpg)
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
![Page 4: Windows Presentation Foundation(WPF)amrhein/Skripten/Info2/03.WPFGrundlagen.pdf · 2016-03-07 · Die Architektur Die Windows PresentationFoundation(WPF) gliedert sich in das .NET](https://reader033.vdocuments.mx/reader033/viewer/2022041811/5e57e06685587909fa21b7db/html5/thumbnails/4.jpg)
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
![Page 5: Windows Presentation Foundation(WPF)amrhein/Skripten/Info2/03.WPFGrundlagen.pdf · 2016-03-07 · Die Architektur Die Windows PresentationFoundation(WPF) gliedert sich in das .NET](https://reader033.vdocuments.mx/reader033/viewer/2022041811/5e57e06685587909fa21b7db/html5/thumbnails/5.jpg)
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
![Page 6: Windows Presentation Foundation(WPF)amrhein/Skripten/Info2/03.WPFGrundlagen.pdf · 2016-03-07 · Die Architektur Die Windows PresentationFoundation(WPF) gliedert sich in das .NET](https://reader033.vdocuments.mx/reader033/viewer/2022041811/5e57e06685587909fa21b7db/html5/thumbnails/6.jpg)
Erstes WPF Projekt erstellen
6Nach dem Handbuch der .NET 4.0-Programmierung, Rolf Wenger, 2012
![Page 7: Windows Presentation Foundation(WPF)amrhein/Skripten/Info2/03.WPFGrundlagen.pdf · 2016-03-07 · Die Architektur Die Windows PresentationFoundation(WPF) gliedert sich in das .NET](https://reader033.vdocuments.mx/reader033/viewer/2022041811/5e57e06685587909fa21b7db/html5/thumbnails/7.jpg)
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
![Page 8: Windows Presentation Foundation(WPF)amrhein/Skripten/Info2/03.WPFGrundlagen.pdf · 2016-03-07 · Die Architektur Die Windows PresentationFoundation(WPF) gliedert sich in das .NET](https://reader033.vdocuments.mx/reader033/viewer/2022041811/5e57e06685587909fa21b7db/html5/thumbnails/8.jpg)
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
![Page 9: Windows Presentation Foundation(WPF)amrhein/Skripten/Info2/03.WPFGrundlagen.pdf · 2016-03-07 · Die Architektur Die Windows PresentationFoundation(WPF) gliedert sich in das .NET](https://reader033.vdocuments.mx/reader033/viewer/2022041811/5e57e06685587909fa21b7db/html5/thumbnails/9.jpg)
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
![Page 10: Windows Presentation Foundation(WPF)amrhein/Skripten/Info2/03.WPFGrundlagen.pdf · 2016-03-07 · Die Architektur Die Windows PresentationFoundation(WPF) gliedert sich in das .NET](https://reader033.vdocuments.mx/reader033/viewer/2022041811/5e57e06685587909fa21b7db/html5/thumbnails/10.jpg)
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
![Page 11: Windows Presentation Foundation(WPF)amrhein/Skripten/Info2/03.WPFGrundlagen.pdf · 2016-03-07 · Die Architektur Die Windows PresentationFoundation(WPF) gliedert sich in das .NET](https://reader033.vdocuments.mx/reader033/viewer/2022041811/5e57e06685587909fa21b7db/html5/thumbnails/11.jpg)
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
![Page 12: Windows Presentation Foundation(WPF)amrhein/Skripten/Info2/03.WPFGrundlagen.pdf · 2016-03-07 · Die Architektur Die Windows PresentationFoundation(WPF) gliedert sich in das .NET](https://reader033.vdocuments.mx/reader033/viewer/2022041811/5e57e06685587909fa21b7db/html5/thumbnails/12.jpg)
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
![Page 13: Windows Presentation Foundation(WPF)amrhein/Skripten/Info2/03.WPFGrundlagen.pdf · 2016-03-07 · Die Architektur Die Windows PresentationFoundation(WPF) gliedert sich in das .NET](https://reader033.vdocuments.mx/reader033/viewer/2022041811/5e57e06685587909fa21b7db/html5/thumbnails/13.jpg)
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
![Page 14: Windows Presentation Foundation(WPF)amrhein/Skripten/Info2/03.WPFGrundlagen.pdf · 2016-03-07 · Die Architektur Die Windows PresentationFoundation(WPF) gliedert sich in das .NET](https://reader033.vdocuments.mx/reader033/viewer/2022041811/5e57e06685587909fa21b7db/html5/thumbnails/14.jpg)
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
![Page 15: Windows Presentation Foundation(WPF)amrhein/Skripten/Info2/03.WPFGrundlagen.pdf · 2016-03-07 · Die Architektur Die Windows PresentationFoundation(WPF) gliedert sich in das .NET](https://reader033.vdocuments.mx/reader033/viewer/2022041811/5e57e06685587909fa21b7db/html5/thumbnails/15.jpg)
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)
![Page 16: Windows Presentation Foundation(WPF)amrhein/Skripten/Info2/03.WPFGrundlagen.pdf · 2016-03-07 · Die Architektur Die Windows PresentationFoundation(WPF) gliedert sich in das .NET](https://reader033.vdocuments.mx/reader033/viewer/2022041811/5e57e06685587909fa21b7db/html5/thumbnails/16.jpg)
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>
![Page 17: Windows Presentation Foundation(WPF)amrhein/Skripten/Info2/03.WPFGrundlagen.pdf · 2016-03-07 · Die Architektur Die Windows PresentationFoundation(WPF) gliedert sich in das .NET](https://reader033.vdocuments.mx/reader033/viewer/2022041811/5e57e06685587909fa21b7db/html5/thumbnails/17.jpg)
Einfügen einer TextBox
� Wir können nun auf analoge Weise eine TextBox in das Fenster einfügen
17
![Page 18: Windows Presentation Foundation(WPF)amrhein/Skripten/Info2/03.WPFGrundlagen.pdf · 2016-03-07 · Die Architektur Die Windows PresentationFoundation(WPF) gliedert sich in das .NET](https://reader033.vdocuments.mx/reader033/viewer/2022041811/5e57e06685587909fa21b7db/html5/thumbnails/18.jpg)
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)
![Page 19: Windows Presentation Foundation(WPF)amrhein/Skripten/Info2/03.WPFGrundlagen.pdf · 2016-03-07 · Die Architektur Die Windows PresentationFoundation(WPF) gliedert sich in das .NET](https://reader033.vdocuments.mx/reader033/viewer/2022041811/5e57e06685587909fa21b7db/html5/thumbnails/19.jpg)
Starten des Programms
� Nach dem Compilieren und Starten des Programms, kann der Benutzer
einen belieben Text in die TextBox eingeben.
19
![Page 20: Windows Presentation Foundation(WPF)amrhein/Skripten/Info2/03.WPFGrundlagen.pdf · 2016-03-07 · Die Architektur Die Windows PresentationFoundation(WPF) gliedert sich in das .NET](https://reader033.vdocuments.mx/reader033/viewer/2022041811/5e57e06685587909fa21b7db/html5/thumbnails/20.jpg)
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
![Page 21: Windows Presentation Foundation(WPF)amrhein/Skripten/Info2/03.WPFGrundlagen.pdf · 2016-03-07 · Die Architektur Die Windows PresentationFoundation(WPF) gliedert sich in das .NET](https://reader033.vdocuments.mx/reader033/viewer/2022041811/5e57e06685587909fa21b7db/html5/thumbnails/21.jpg)
Label Inhalt (Content) setzen
Durch Anklicken der schwarzen Box beim
Content erscheint ein Popup-Fenster.
Wir wählen darin die Zeile «Datenbindung
erstellen».
21
![Page 22: Windows Presentation Foundation(WPF)amrhein/Skripten/Info2/03.WPFGrundlagen.pdf · 2016-03-07 · Die Architektur Die Windows PresentationFoundation(WPF) gliedert sich in das .NET](https://reader033.vdocuments.mx/reader033/viewer/2022041811/5e57e06685587909fa21b7db/html5/thumbnails/22.jpg)
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
![Page 23: Windows Presentation Foundation(WPF)amrhein/Skripten/Info2/03.WPFGrundlagen.pdf · 2016-03-07 · Die Architektur Die Windows PresentationFoundation(WPF) gliedert sich in das .NET](https://reader033.vdocuments.mx/reader033/viewer/2022041811/5e57e06685587909fa21b7db/html5/thumbnails/23.jpg)
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
![Page 24: Windows Presentation Foundation(WPF)amrhein/Skripten/Info2/03.WPFGrundlagen.pdf · 2016-03-07 · Die Architektur Die Windows PresentationFoundation(WPF) gliedert sich in das .NET](https://reader033.vdocuments.mx/reader033/viewer/2022041811/5e57e06685587909fa21b7db/html5/thumbnails/24.jpg)
Label Inhalt (Content) setzen
Auf der rechten Seite unter «Pfad»
wählen wir nun den Eintrag
«Text: (String)» und schliessen mit OK
ab.
24
![Page 25: Windows Presentation Foundation(WPF)amrhein/Skripten/Info2/03.WPFGrundlagen.pdf · 2016-03-07 · Die Architektur Die Windows PresentationFoundation(WPF) gliedert sich in das .NET](https://reader033.vdocuments.mx/reader033/viewer/2022041811/5e57e06685587909fa21b7db/html5/thumbnails/25.jpg)
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