Martin Kühn 08.03 - Draphony Games wpf.pdf · Theorie hinter WPF •WPF ist ein Framework zur...

WINDOWS PRESENTATION FOUNDATION (WPF)

Martin Kühn

08.03.2012

Übersicht

• Theorie hinter WPF

• Grundlagen von XAML

• Dependency Properties

• Templates

• Vortragsdauer: ca. 30 Minuten

THEORIE HINTER WPF

Theorie hinter WPF

• WPF ist ein Framework zur Beschreibung von GUI-Formularen und Grafiken

• Ähnlich wie das Qt-Framework oder GTK+

Beispiel-Formular in einer WPF-Anwendung:

Theorie hinter WPF

• Formulare lassen sich in der auf XML basierenden Sprache XAML beschreiben

Theorie hinter WPF

• Basiskonzept: Trennung von Präsentationsebene und Programmierebene

• XAML-Datei beschreibt Formulardaten

• XAML-Datei hat Code-Behind (z.B. in C#) der den Programmiercode enthält Formularbeschreibung

Code-Behind

Theorie hinter WPF

• WPF ist ein mächtiges und umfangreiches Werkzeug zur Erstellung von GUIs für Desktop- und Webanwendungen

• Teil des .NET-Frameworks seit Version 3.0

• Verwendbar mit Visual Studio 2010 und Microsoft Expression Blend

Theorie hinter WPF

Wie erstelle ich eine WPF-Anwendung?

GRUNDLAGEN VON XAML

Grundlagen von XAML

• XAML = Extensible Application Markup Language

• Beschreibungssprache für Formulare

• Case-sensitive

• XML-basierend

Grundlagen von XAML

• Jede WPF-Anwendung besteht aus einer App.xaml die den Einstiegspunkt des Programmes darstellt (ähnlich der Main-Methode in Java)

• In ihr lassen sich anwendungsweit Ressourcen (Icons, Grafiken, Farben, etc.) festlegen

Grundlagen von XAML

• Jedes Formular (also jedes Fenster und jeder Dialog) wird in einer eigenen XAML-Datei definiert

Grundlagen von XAML Syntax und Sprachaufbau von XAML:

• Tags beschreiben u.a. die GUI-Elemente. Sie werden mit <…> eingeleitet und mit </…> geschlossen. Zwischen den Tags lässt sich meist der Inhalt von Elementen definieren:

<Button>OK</Button>

• Im Anfangstag lassen sich die Properties der Steuerelemente festlegen:

<Button Width=„200“ Height=„50“>Hallo</Button>

• Ist bei manchen Elementen der Inhalt nur über eine Zahl oder einen String definiert, lässt er sich meistens auch über die Content, Text o.Ä. Eigenschaft festlegen. Das Tag kann dann selbstschließend mit <… /> sein. Das folgende Beispiel ist äquivalent zum oberen:

<Button Content=„Hallo“ Width=„200“ Height=„50“ />

Alle Properties von Steuerelementen können auch im Visual Studio-Eigenschaftenfenster geändert werden:

Grundlagen von XAML

Rumpf einer XAML-Datei

Window-Tag definiert ein Fenster

Standard XAML-Namensräume (xmlns = XML namespace)

Fenstertitel

Minimale und tatsächliche Größe des Fensters

Das Fenster soll beim Starten in der Mitte des Bildschirms platziert werden

Ein Grid ist ein Container in dem Steuerelemente platziert werden können

Grundlagen von XAML Übersicht der wichtigsten Steuerelemente

Button <Button Content="OK“ /> TextBox <TextBox Text=“Hallo“ />

TextBlock / Label <TextBlock Text=“Please…“ />

CheckBox <CheckBox Text=“Heute…“

IsChecked=“True” />

RadioButton <RadioButton Content=“Rinderhaxe”

IsChecked=“True”

GroupName=“1” />

<RadioButton Content=“Schweine…”

GroupName=“1” />

ListBox <ListBox>

<ListBoxItem Content=“Bier” />

<ListBoxItem Content=“Korn” />

<ListBoxItem Content=“Absinth” />

</ListBox>

Grundlagen von XAML Übersicht der wichtigsten Container Container steuern die Anordnung der Steuerelemente

StackPanel Grid DockPanel

Grundlagen von XAML

Margin-Eigenschaft von Steuerelementen

• Eigenschaft die jedes Steuerelement hat

• Sie beschreibt die Entfernung zwischen Element und seinem übergeordnetem Element oder Nachbarelementen

• Nützlich um Lücken zwischen die Steuerelemente einzufügen

Grundlagen von XAML

Programmierbeispiel:

Einfache Anwendung, die bei Klick auf einen

Button eine MessageBox ausgibt

DEPENDENCY PROPERTIES

Dependency Properties

• Mit Dependency Properties können Properties von Steuerelementen an andere Properties gebunden werden

• Man kann z.B. eine TextBox mit einem String verbinden oder eine CheckBox mit einem Boolean

• Enorme Arbeitserleichterung

Beispiel: Binde die IsEnabled Eigenschaft eines Textfeldes an den Zustand einer Checkbox:

Dependency Properties

Beispielprogramm

Dependency Properties

Definieren in der Code-Behind Datei eine Property und eine DependencyProperty:

Name der Property

Datentyp der Property

Datentyp des Owners

Dependency Properties

Der DataContext des Window muss auf sich selbst gesetzt werden, damit bekannt ist worauf sich die folgenden Property-Angaben beziehen.

Dependency Properties

Verbinden im XAML-Code die beiden Steuerelemente:

Name der Property

Bindungsrichtung

Update-Trigger

Dependency Properties

Bindungsrichtungen: • OneWay: Daten werden aus der Property in das Steuerelement gelesen

• OneWayToSource: Daten aus dem Steuerelement werden in das Property geschrieben

• TwoWay: Daten werden aus dem Property in das Steuerelement gelesen, aber Änderungen im Steuerelement werden auch in die Property geschrieben

Quelle (Property: EnableTextBox)

Ziel (Property: TextBox.IsEnabled)

Quelle (Property: EnableTextBox)

Ziel (Property: CheckBox.IsChecked)

Quelle Ziel

Dependency Properties

Update-Trigger:

• PropertyChanged: Die Bindungen zu einer Property werden bei deren Änderung aktualisiert.

(z.B. beim Tippen des Textes in einer TextBox)

• LostFocus: Die Bindung zu einer Property wird aktualisiert, wenn das Steuerelement den Fokus verliert

(z.B. wenn eine TextBox abgewählt wird)

Dependency Properties

Beispielprogramm

TEMPLATES

Templates

• Manchmal möchte man den Steuerelementen ein individuelles Aussehen verpassen

• Oder man möchte ganz neue Steuerelemente erstellen

• Templates ermöglichen Anpassung bis ins kleinste Detail

• Microsoft Expression Blend sehr nützlich für die Bearbeitung von Templates

Templates

Wir wollen im folgenden als Beispiel einen eigenen Button „templaten“, d.h. ihm einen individuellen Look verpassen:

Templates • Templates sind in WPF Ressourcen

• Werden in der Window.Resources-Umgebung in einem ResourceDictionary gespeichert

Templates

• Legen zunächst eine Farbe für die Umrandung des Buttons fest

• Farben werden in WPF als SolidColorBrush (ebenfalls Ressourcen) gespeichert

• Die Farbe (hier blau) wird als Hexwert in die Color-Eigenschaft geschrieben

Templates

• Hintergrund soll ein Farbverlauf von weiß nach blau sein

• Farbverläufe können in WPF als LinearGradientBrush definiert werden

• Anfangs- und Endfarbe werden mittels GradientStop definiert

Templates

• Button soll seine Optik beim Überfahren mit der Maus (Hover) verändern

• Button soll seine Optik beim Klick verändern

• Definieren auch hierfür jeweils Farbverläufe

Templates • Setzen nun aus den Farben und Farbverläufen unser ControlTemplate für

den Button zusammen (zunächst nur den Standard-Look)

• Border definiert eine Fläche mit einer Kontur (BorderBrush) und einem Hintergrund (Background)

• Mittels StaticResource lassen sich die vordefinierten Ressourcen abrufen

• Das ContentControl definiert das Text-Label im Button

Templates

• Legen zu guter Letzt im Template unsere vordefinierten Hintergründe

beim Überfahren und Klicken mit der Maus fest

• Mittels Trigger lässt sich der Zustand eines Steuerelementes überwachen und ein Ereignis auslösen

• Mittels Setter lassen sich im XAML-Code Properties eines Steuerelementes neue Werte zuweisen

Templates

Beispielprogramm

ABSCHLUSS

Fazit • WPF ist ein mächtiges Tool zur Erstellung von GUIs

• XAML zur Beschreibung von Formularen

• Dependency Properties und Templating verfügbar

Was nützt uns das bei der Spieleprogrammierung?

• Ermöglicht es uns individuelle Menüs und Einstellungsdialoge zu erstellen

• Hilfreich für die Entwicklung von Tools wie eigene Programmierumgebungen oder z.B. Level-Editoren

Ressourcen

• Wikipedia (DE/EN)

• http://www.stackoverflow.com

• http://www.gowinfx.de/WPF%20Tutorial/kap1.html

• http://openbook.galileocomputing.de/visual_csharp_2010/visual_csharp_2010_17_001.htm

• Tutorials zu den einzelnen Steuerelementen sehr leicht bei Google zu finden: „wpf “ + Steuerelementname

DANKE FÜRS ZUHÖREN!

FRAGEN?