Post on 23-Aug-2018
WPF
__________________________________________________________________________________________________________________
Komponenten & Frameworks Seite 1
Übersicht
- W indows P resentation F oundation
- Werkzeug zur Entwicklung grafischer Benutzeroberflächen
- deklarative Definition erfolgt mit der Beschreibungs-
Sprache: XAML
- XAML
- Extensible Application Markup Language
- XML (Dialekt) Beschreibungsprache für Oberflächen
- Oberflächendesigner arbeitet mit XAML
- Ziel: Trennung Design und Implementierung
Getrenntes Arbeiten von Designer und Entwickler
- spezielle Designtools (MS Expression Blend)
- Compiler erzeugt aus XAML-Code automatisch Instanzen von
Klassen (Bsp.: Klasse Button)
WPF
__________________________________________________________________________________________________________________
Komponenten & Frameworks Seite 2
Design: XAML-Datei
Implementierung: Csharp-Datei (Funktionalität)
<Window x:Class="WPF1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="WPF1" Height="300" Width="300">
<Grid>
<TextBox Height="34" Margin="65,34,83,0" Name="textBox1"
VerticalAlignment="Top" ></TextBox>
<Button Margin="65,122,81,113" Name="button1"
Click="button1_Click">Rechne</Button>
</Grid>
</Window>
public partial class Window1 : System.Windows.Window
{public Window1(){ InitializeComponent();
button1.Click += new RoutedEventHandler(button1_Click);}
public void button1_Click(object sender, RoutedEventArgs e)
{textBox1.Text = "Click";}}
WPF
__________________________________________________________________________________________________________________
Komponenten & Frameworks Seite 3
Merkmale
- Benutzeroberfläche wird deklarativ definiert
Code separat (ähnelt: ASP Code-Behind-Modell)
- Oberfläche verwendbar in
- normaler Windowsanwendung (Fenster)
- Browser
- unterstützt 2D- und 3D-Grafiken
- Ausgabe ist vektorbasiert (=> skalierbar)
- vielfältige grafische Unterstützung (Video, Bilder,
Audio) und sehr gute Datenanbindungsmöglichkeiten
WPF
__________________________________________________________________________________________________________________
Komponenten & Frameworks Seite 4
WinForm oder WPF ?
- WPF extrem leistungsfähig
- Microsoft entwickelt WinForm nicht mehr weiter
WPF
Entwicklungstools
- Visual Studio
- Designertool: Expression Blend
WPF
__________________________________________________________________________________________________________________
Komponenten & Frameworks Seite 5
Anwendungstypen
- WPF-Anwendung
entsprechen Windows-Anwendungen,
stellen eigenes Fenster bereit
- WPF-Browseranwendung
stellen kein eigenes Fenster bereit
laufen im Browser
- WPF-Benutzersteuerelementebibliothek
neues Steuerelement aus bestehenden zusammensetzen
- Benutzerdefinierte Steuerelementebiliothek
eigene Steuerelemente entwicklen
WPF
__________________________________________________________________________________________________________________
Komponenten & Frameworks Seite 6
WPF-Anwendung
- entspricht Windows-Anwendung
- Visual Studio erstellt die Dateien:
App.xaml
Verweis auf Startfenster und Ressourcen
App.xaml.cs
enthält die Applikations-Klasse App (veröffentlicht
Eigenschaften und löst Ereignisse aus)
MainWindow.xaml
beschreibt Oberfläche und
stellt Bezug zu Programmcode her
MainWindow.xaml.cs
enthält Programmcode zur Oberfläche (Code-Behind)
WPF
__________________________________________________________________________________________________________________
Komponenten & Frameworks Seite 7
Kompilation einer WPF-Anwendung
Applikationsklasse Hauptfenster
App.xaml App.xaml.cs Window1.xaml Window1.xaml.cs
App.g.cs Window1.g.cs Window1.baml
.g.resources (Konfiguration)
EXE
WPF
__________________________________________________________________________________________________________________
Komponenten & Frameworks Seite 8
XAML
- eXtensible Application Markup Language
- deklarative Programmiersprache
- Basis: XML
- jede XAML-Datei besitzt ein Wurzelelement
- WPF-Anwendung: Window
- Browser-Anwendung: Page
- innerhalb des Wurzelementes erfolgt Beschreibung
i. d. R. werden Container (Grid,StackPanel,...)
verwendet. Elemente können verschachtelt werden.
WPF
__________________________________________________________________________________________________________________
Komponenten & Frameworks Seite 9
XAML-Elemente
- entsprechen WPF-Klassen
- Bsp.: Button
- Deklaration per XAML
- Codierung per Programm (nicht als XAML)
AddChild führt die Zuordnung zum übergeordneten
Container aus
Button btn = new Button();
Btn.Content = “button1”;
this.AddChild(btn);
<Button Margin="65,122,81,113" Name="button1">Rechne</Button>
WPF
__________________________________________________________________________________________________________________
Komponenten & Frameworks Seite 10
Ereignisse - Die Verarbeitung von Benutzerinteraktionen erfolgt über
Ereignisse
- Basis: Observer-Pattern, Delegaten
- Bsp.: Button-Click
in XAML
als Programmcode
- WPF-Elemente können verschachtelt werden
<Button Margin="65,122,81,113" Name="button1"
Click="button1_Click">Rechne</Button>
button1.Click += new RoutedEventHandler(button1_Click);
WPF
__________________________________________________________________________________________________________________
Komponenten & Frameworks Seite 11
Verschachtelte Elemente
Wie erfolgt die Eventverarbeitung bei verschachtelten
Elementen?
Bsp.:
Klick auf Label „Klick mich...“
Label in Button in Grid in Window
WPF
__________________________________________________________________________________________________________________
Komponenten & Frameworks Seite 12
Ereignistypen
- Direkte Events
Werden nur von den Elementen verarbeitet bei denen sie
aufgetreten sind.
- Tunneling-Events
weiterreichen von der Wurzel an untergeordnete Elemente
- Bubbling-Events
weiterreichen an übergeordnete Elemente
entspricht der Bearbeitung von Standardevents
WPF
__________________________________________________________________________________________________________________
Komponenten & Frameworks Seite 13
Beispiel: Mouse-Events - GotMouseCapture (Bubble)
- MouseEnter(Direct)
- MouseLeave (Direct)
- PreviewMouseLeftButtonDown(Tunnel)
MouseLeftButtonDown(Bubble)
- [Preview]MouseMove(Tunnel,Bubble)
- . . .
Verarbeitung
1. Verarbeitung der Tunneling-Events 2. Verarbeitung der Bubbling-Events
Ereignisse abbrechen: e.Handled = true;
WPF
__________________________________________________________________________________________________________________
Komponenten & Frameworks Seite 14
WPF Container - Window
- entspricht herkömmlicher WinForm-Technologie
- Anwendung durch mehrere Fenster gekennzeichnet
- Navigation: öffnen und schliessen von Fenstern
- Klasse Window: Container für Steuerelemente
- NavigationWindow
- entspricht Konzept von Internet-Browsern
- Inhalte werden auf mehrere Seiten verteilt
- Navigation: Vor und Zurück
- Klasse NavigationWindow
- von Window abgeleitet
- Inhalte durch Page-Objekte beschrieben
- System.Windows.Controls.Page kapselt Inhaltsseite,
zu der navigiert werden kann
WPF
__________________________________________________________________________________________________________________
Komponenten & Frameworks Seite 15
Layout-Container Anordnung und Darstellung der Elemente wird durch Layout-
Container geregelt
- i. d. R. relative Positionen
- nur Canvas arbeitet mit absoluten Positionen
- Layout-Container können verschachtelt werden
Layout-Container-Typen
- Canvas
- StackPanel
- WrapPanel
- DockPanel
- Uniform Grid
- Grid
WPF
__________________________________________________________________________________________________________________
Komponenten & Frameworks Seite 16
WPF-Steuerelemente
- besitzen tiefe Vererbungshierarchie (siehe unten)
- Content Eigenschaft
- in Basisklasse ContentControl
- Kann genau ein Element vom Typ Object enthalten:
- Text oder
- beliebiges anderes Steuerelement (Verschachtelung)
=> vielfältige Gestaltungsmöglichkeiten
WPF
__________________________________________________________________________________________________________________
Komponenten & Frameworks Seite 17
Steuerelemente-Hierarchie
Quelle: Visual C#2010
WPF
__________________________________________________________________________________________________________________
Komponenten & Frameworks Seite 18
Datenbindung - Synchronisation zwischen DatenQuelle und Steuerelement
- alle abhängigen Eigenschaften sind datenbindungsfähig
- Datenquellen
- Eigenschaften anderer Komponenten
- XML-Datei
- Collection
- Datenbank
- Klassen
- Binding
Beschreibt Datenbindung zwischen Quelle und Komponente
- DataContext
stellt Daten bereit (Bindeglied: Quelle – Komponente)
WPF
__________________________________________________________________________________________________________________
Komponenten & Frameworks Seite 19
Beispiel: Synchronisation Textbox
- ElementName gibt Namen der Datenquelle an
- Path beschreibt die Eigenschaft der Datenquelle
<TextBox Height="34" Margin="65,34,83,0" Name="textBox1"
VerticalAlignment="Top">
</TextBox>
<TextBox Height="23" HorizontalAlignment="Left"
Margin="65,82,0,0" Name="textBox2"
VerticalAlignment="Top" Width="132">
<Binding ElementName="textBox1" Path="Text" />
</TextBox>
WPF
__________________________________________________________________________________________________________________
Komponenten & Frameworks Seite 20
Silverlight - ermöglicht Ausführung von Rich-Internet-Applications im
Browser
- plattformunabhängiges WebFramework
- verwendet XAML (siehe unten)
- Betriebssysteme: Windows und Macintosh
- unterstützte Browser:
Internet Explorer, Mozilla Firefox, Opera und Safari
- Plugin erforderlich (ca. 4 MB, 60% Verbreitungsgrad)
- Silverlight Code wird auf dem Client ausgeführt - Linux-Variante: Moonlight - Alternative zu ASP.NET - Konkurrenzprodukt: Adobe Flash Zukunft HTML5 ?
WPF
__________________________________________________________________________________________________________________
Komponenten & Frameworks Seite 21
XAML Code
<UserControl x:Class="SilverlightApplication1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/pres
entation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2
008"xmlns:mc="http://schemas.openxmlformats.org/markup-
compatibility/2006" mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<Grid x:Name="LayoutRoot" Background="White">
<TextBox Height="34" Margin="65,34,83,0"
Name="textBox1" VerticalAlignment="Top"></TextBox>
<Button Margin="65,122,81,113" Name="button1"
Click="button1_Click">Rechne</Button>
</Grid>
</UserControl>
WPF
__________________________________________________________________________________________________________________
Komponenten & Frameworks Seite 22
WPF – Silverlight - Silverlight verwendet XAML zur Deklaration der Oberfläche - WPF XAML ist nicht identisch Silverlight XAML - aber: im wesentlichen übereinstimmend - Unterschiede - Databindung erfolgt unterschiedlich WPF-Bsp.: <Binding ElementName="textBox1" Path="Text" /> - Routed Events werden unterschiedlich modelliert - Silverlight hat keinen Print-Support - . . .