19.4 WPF-Anwendungen

Das Visual Studio 2008 bietet Ihnen verschiedene Anwendungstypen an:

• Windows-Fenster mit der Basisklasse System.Windows.Forms.Form

• WPF-Anwendung

• ASP.NET: HTML-Seite mit Anbindung an .NET

• WPF-Browseranwendung

• WPF-Benutzersteuerelementbibliothek

• Benutzerdefinierte WPF-Steuerelemente

Die beiden letztgenannten beziehen sich auf das Entwickeln von WPF-Steuerelementen. Darauf werden wir nicht weiter eingehen. Die beiden ersten sind Anwendungen im herkömmlichen Sinne und können mit dem MS Installer (MSI) oder mit ClickOnce installiert werden. Mit beiden Installationsvarianten haben wir uns im Kapitel 8 beschäftigt. Als Browseranwendungen laufen die beiden mittleren nicht in einem eigenen Fenster und werden nicht installiert.

Da das Design von Anwendungen für das Webbrowser-Plugin Silverlight auch über XAML erfolgt, lassen sich die Konzepte der WPF-Anwendungen auf diese Art von Webbrowser-Anwendungen übertragen. Um das Silverlight-Plugin klein zu halten, stehen nicht alle visuellen Elemente und nicht alle Methoden zur Verfügung. Was jedoch vorhanden ist, kann in der gleichen Art und Weise verwendet werden.

19.4.1 Erstes Fenster

Schauen wir uns eine erste WPF-Anwendung an. In Visual Studio erstellen wir ein neues Projekt vom Typ WPF-Anwendung. Dazu wählen wir den Menüpunkt Neues Projekt ... im Datei-Menü. Im folgenden Dialog wählen wir WPF-Anwendung und geben ihr den Namen ErsteWpfAnwendung.

Abbildung 19.2 WPF-Projekt

Der Assistent und der visuelle Editor erzeugen eine Reihe von Dateien. Normalerweise wird nur Source Code der Dateien mit den Endungen .vb und .xaml auf der obersten Verzeichnisebene sowie Dateien im Verzeichnis My Project vom Benutzer verändert. Alle anderen Dateien entstehen automatisch, gegebenenfalls durch Projekteinstellungen. Auf die Dateien gehe ich in Abschnitt 19.5, »Dateien einer WPF-Anwendung«, ein.

Die Anordnung der Fenster ähnelt der bei einem Windows-Forms-Projekt. Nur der Codeeditor ist in zwei Bereiche unterteilt: Im oberen Bereich wird das Fenster angezeigt, der dazugehörige XAML-Code erscheint darunter (siehe Abbildung 19.3). Sie gestalten die Oberfläche des Fensters, indem Sie Steuerelemente aus der Toolbox in den Designer ziehen oder alternativ direkt den XAML-Code schreiben. Beide Fensterbereiche synchronisieren sich automatisch gegenseitig.

Abbildung 19.3 WPF-Editor

Die zentralen Dateien sind Application.xaml, die das Aussehen der Anwendung festlegt, und Application.xaml.vb, die die Funktionalität enthält, wie zum Beispiel die Funktionen der Menüeinträge. Wenden wir uns zuerst der XAML-Datei zu. Das Wurzelelement dieser XML-Datei ist Window. Dies spiegelt die Tatsache wieder, dass sich alle sichtbaren Elemente einer Anwendung innerhalb eines Fensters der Anwendung befinden müssen. Eine Anwendung darf mehrere Fenster haben. Der Inhalt dieses Fensters ist eine leere Tabelle, Grid genannt, die später die Elemente des Fensters aufnimmt, wie zum Beispiel Texte und Tasten (Buttons). Das Window-Element selbst hat noch ein paar Attribute, die es genauer spezifizieren. Da der Inhalt von Window dessen Eigenschaften erbt, müssen zum Beispiel die Namensräume xmlns nicht noch einmal in Grid spezifiziert werden. Das unten stehende Fenster hat eine Breite und Höhe von 300 Pixeln, und es steht Window1 in der Titelleiste.

' ...\WPF\ErsteWpfAnwendung\Window1.xaml

<Window x:Class="Window1" 
    xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation 
    xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml 
    Title="Window1" Height="300" Width="300"> 
    <Grid> 
    </Grid> 
</Window>

Nach dem Start der Anwendung (Menü Debuggen • Debugging starten oder mit dem grünen Rechtspfeil der Toolleiste oder wird ein neues leeres Fenster geöffnet. Es hat keinen Inhalt, aber eine Titelleiste mit Tasten zur Minimierung, Maximierung und zum Schließen des Fensters. Das Fenster lässt sich auch in der Größe verändern. Nach dem Schließen stellt man fest, dass einige zusätzliche Dateien erzeugt worden sind. In den Verzeichnissen bin, My Project und obj stehen .manifest-Dateien im XML-Format mit Informationen zum Einstiegspunkt der Anwendung, zur Sicherheit und zu Abhängigkeiten. Installationsinformationen stehen in .application-Dateien in den Verzeichnissen bin und obj. Schließlich finden sich noch .pdb- und .exe-Binärdateien in den Verzeichnissen bin und obj.

19.4.2 Button

Der nächste Schritt ist es, das Fenster mit Leben zu füllen. Dazu stecken wir einen Button in das Grid-Element der Datei Window1.xaml. Damit das Drücken des Buttons sich auch bemerkbar macht, fügen wir zum Button noch ein Click-Attribut hinzu. Es deklariert, dass es eine Funktion gibt, die beim Drücken des Buttons ausgeführt werden soll. Der Patient Button äußert also eine Befindlichkeitsstörung Click, um die sich ein Therapeut kümmert. Langweiliger ausgedrückt löst ein Click-Ereignis (Event) eine Ereignisbehandlungsroutine (Eventhandler) aus.

Diese Funktion sollte in der Visual Basic-Datei Window1.xaml.vb kodiert werden, damit eine Korrespondenz zur XAML-Datei gewahrt bleibt. Das erste Argument des Ereignishandlers ist das Objekt, das das Ereignis auslöst. Das letzte Argument kann weitere Informationen zum Ereignis enthalten, zum Beispiel zur Position des Mauszeigers. Beim Klick auf einen Button sind keine weiteren Informationen nötig. Die Methode kann automatisch erzeugt werden, und zwar durch einen Doppelklick auf den Button im Designer oberhalb des XAML-Codes. Im Funktionsrumpf rufen wir eine Methode auf, die sich als Dialog auf dem Bildschirm bemerkbar macht, um eine Rückmeldung zu haben, dass der Button angeklickt wurde. Die beiden Dateien lauten also wie folgt:

' ...\WPF\ErsteWpfAnwendung\Window2.xaml

<Window x:Class="Window2" 
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
   Title="Window1" Height="300" Width="300" 
> 
  <Grid> 
    <Button Click="Therapeut">Drück mich!</Button> 
  </Grid> 
</Window>

' ...\WPF\ErsteWpfAnwendung\Window2.xaml.vb

Class Window2 
  Private Sub Therapeut(sender As Object, e As System.Windows.RoutedEventArgs) 
    MessageBox.Show("Jetzt geht es besser!") 
  End Sub 
End Class

Wie kommt es nun, dass der Button das ganze Fenster ausfüllt? Er selbst hat erst einmal keine Ahnung, wie groß er ist. Also fragt er seine Eltern, wie groß er ist. Und wie im realen Leben dürfen Elternelemente faul sein und sagen: »Weiß nicht, frag doch mal die Großeltern.« Dies wird so lange fortgesetzt, bis der Button weiß, wie groß er ist. Dieses Konzept wird visuelle Vererbung (englisch Visual Inheritance) genannt. In der letzten Anwendung wurde der Button beim Fenster fündig und hat seine Größe übernommen. Im nächsten Beispiel wird dem Button eine explizite Größe gegeben.

' ...\WPF\ErsteWpfAnwendung\Window3.xaml

<Window x:Class="Window3" 
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
  Title="Window1" Height="300" Width="300" 
> 
  <Grid> 
    <Button Click="Therapeut" Width="75" Height="25">Drück mich!</Button> 
  </Grid> 
</Window>

' ...\WPF\ErsteWpfAnwendung\Window3.xaml.vb

Class Window3 
  Private Sub Therapeut(sender As Object, e As System.Windows.RoutedEventArgs) 
    MessageBox.Show("Jetzt geht es besser!") 
  End Sub 
End Class

19.4.3 Browseranwendung

Auf der Basis von XAML können auch Anwendungen für das Webbrowser-Plugin Silverlight geschrieben werden. Es kann von der Seite http://www.microsoft.com/silverlight heruntergeladen werden. Diese Anwendungen haben einige Besonderheiten:

• Die Anwendung existiert nur im Hauptspeicher und nicht auf der Festplatte.

• Das Wurzelelement ist UserControl statt Window.

• Die Anwendung ist beschränkt (Sandbox):
• keine Popupfenster außer den Dialogen für Dateien und Meldungen
• keine Dateizugriffe
• kein unverwalteter Code
• Hybridanwendungen, die unter Windows und im Browser laufen, sind möglich.

Zur Entwicklung mit Visual Studio müssen Sie erst den Zusatz Silverlight Tools for Visual Studio von http://silverlight.net/GetStarted herunterladen und installieren. Danach können Sie ein neues Projekt des richtigen Typs erzeugen.

Abbildung 19.4 Silverlight-Projekt

Im folgenden Dialog können Sie wählen, wie die HTML-Seite des Projekts aussieht:

• neue Website: ASP.NET-basiert

• einzelne HTML-Seite

Um sich nicht um die Erstellung einer Webseite kümmern zu müssen, wählen wir wie in Abbildung 19.5 gezeigt die zweite Möglichkeit.

Abbildung 19.5 Silverlight-Webseite

Dem Design in der Projektdatei Page.xaml fügen wir noch einen Button hinzu:

' ...\WPF\ErsteSilverlightAnwendung\Page.xaml

<UserControl x:Class="ErsteSilverlightAnwendung.Page" 
  xmlns="http://schemas.microsoft.com/client/2007" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
  Width="400" Height="300"> 
  <Grid x:Name="LayoutRoot" Background="White"> 
    <Button Click="Therapeut" Width="75" Height="25" Content="Drück mich!"/> 
  </Grid> 
</UserControl>

Analog zur normalen WPF-Anwendung wird in Page.xaml.vb der Code für den Ereignishandler des Buttons hinterlegt. Der MessageBox-Dialog steht in Webanwendungen nicht zur Verfügung und muss durch einen entsprechenden Dialog ersetzt werden.

' ...\WPF\ErsteSilverlightAnwendung\Page.xaml.vb

Option Strict On 
Partial Public Class Page : Inherits UserControl 
  Public Sub New() 
    InitializeComponent() 
  End Sub

  Private Sub Therapeut(ByVal sender As System.Object, _ 
                        ByVal e As System.Windows.RoutedEventArgs) 
    System.Windows.Browser.HtmlPage.Window.Alert("Jetzt geht es besser!") 
  End Sub 
End Class

Nach dem Start der Anwendung (Menü Debuggen • Debugging starten oder mit dem grünen Rechtspfeil der Toolleiste oder wird der Standardwebbrowser mit der Seite geöffnet. Beim ersten Mal erscheint noch ein Dialog, in dem die Anpassung der Konfiguration zum Debuggen angeboten wird, die wir hier akzeptieren. Der Button reagiert beim Druck genauso wie in der normalen WPF-Anwendung.

Vorausgesetzt, der Webbrowser hat das Silverlight-Plugin installiert, reicht es, die Datei ErsteSilverlightAnwendungTestPage.html und den Ordner ClientBin aus dem Verzeichnis Erste-SilverlightAnwendung_Web zu kopieren und die HTML-Datei im Webbrowser zu öffnen (auf meinem Macintosh musste ich das Firefox-Plugin zweimal installieren).

Ihre Meinung

Wie hat Ihnen das Openbook gefallen? Wir freuen uns immer über Ihre Rückmeldung. Schreiben Sie uns gerne Ihr Feedback als E-Mail an kommunikation@rheinwerk-verlag.de.