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