Upload
tranthu
View
233
Download
1
Embed Size (px)
Citation preview
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?