WPF Übersicht - homepages.thm.dehg6678/KF_WPF.pdf · WPF Container - Window - entspricht herkömmlicher WinForm-Technologie - Anwendung durch mehrere Fenster gekennzeichnet - Navigation:

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

__________________________________________________________________________________________________________________


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

__________________________________________________________________________________________________________________


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

__________________________________________________________________________________________________________________


WinForm oder WPF ?

- WPF extrem leistungsfähig

- Microsoft entwickelt WinForm nicht mehr weiter

WPF

Entwicklungstools

- Visual Studio

- Designertool: Expression Blend

WPF

__________________________________________________________________________________________________________________


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

__________________________________________________________________________________________________________________


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

__________________________________________________________________________________________________________________


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

__________________________________________________________________________________________________________________


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

__________________________________________________________________________________________________________________


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

__________________________________________________________________________________________________________________


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



button1.Click += new RoutedEventHandler(button1_Click);

WPF

__________________________________________________________________________________________________________________


Verschachtelte Elemente

Wie erfolgt die Eventverarbeitung bei verschachtelten

Elementen?

Bsp.:

Klick auf Label „Klick mich...“

Label in Button in Grid in Window

WPF

__________________________________________________________________________________________________________________


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

__________________________________________________________________________________________________________________


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

__________________________________________________________________________________________________________________


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

__________________________________________________________________________________________________________________


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

__________________________________________________________________________________________________________________


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

__________________________________________________________________________________________________________________


Steuerelemente-Hierarchie

Quelle: Visual C#2010

WPF

__________________________________________________________________________________________________________________


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

__________________________________________________________________________________________________________________


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

__________________________________________________________________________________________________________________


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 ?

http://de.wikipedia.org/wiki/Windows_Internet_Explorer

http://de.wikipedia.org/wiki/Mozilla_Firefox

http://de.wikipedia.org/wiki/Opera

http://de.wikipedia.org/wiki/Safari_%28Browser%29

WPF

__________________________________________________________________________________________________________________


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>



</Grid>

</UserControl>

WPF

__________________________________________________________________________________________________________________


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 - . . .

Documents

WPF Übersicht - homepages.thm.dehg6678/KF_WPF.pdf · WPF Container - Window - entspricht herkömmlicher WinForm-Technologie - Anwendung durch mehrere Fenster gekennzeichnet - Navigation: