• Windows Presentation Foundation - Teil 1: Einführung

    Windows Presentation Foundation Teil 1: Einführung

    1. Einführung

    Die Windows Presentation Foundation (WPF, ehemals als Avalon bekannt) ist ein von Microsoft entwickeltes Presentation Framework, welches die Möglichkeiten von GDI, GDI+, HTML etc. in sich vereint und so die Darstellung von Anwendungen erheblich erleichtert. Ein wichtiger Aspekt hierbei ist, dass durch die Einführung der WPF es möglich ist, die Aufgaben des Entwicklers, von denen des Grafik-Spezialisten (Interface-Designer, Usability-Engineer) zu trennen. Dies bedeutet für die Praxis, dass sich der Entwickler auf die Funktionalität konzentrieren kann, während der Grafiker für das Erscheinungsbild der Anwendung verantwortlich zeichnet.

    Bevor jedoch weitere Details beschrieben werden, möchte ich auf die Installation eingehen, damit die Beispielanwendungen nachempfunden werden können.

    2. Installation

    Nachfolgend wird kurz die Installation der einzelnen Produkte beschrieben, sowie die Ausgangssituation mit deren Konfiguration alles problemlos funktionieren sollte. Zu beachten ist jedoch, dass zum aktuellen Zeitpunkt, die meisten Produkte noch in Beta-Versionen vorliegen. Daher sollte kein Produktiv-System verwendet werden. Es könnte durchaus vorkommen, dass es an anderen Stellen des Systems zu Problemen kommt.

    Die Ausgangssituation ist eine installierte Visual Studio 2005 Version und das .NET Framework 2.0 – beides in der finalen Version.

    Um nun Anwendungen mittels der WPF zu entwickeln, muss zuerst das Windows SDK [1] installiert werden. Danach sind die .NET Framework 3.0 Runtime Components [2] zu installieren, gefolgt von den Visual Studio 2005 Extensions for Windows Workflow Foundation [3]. Letzteres ist zwar nicht unbedingt notwendig, wird jedoch von Microsoft empfohlen. Eine gesamte Übersicht der Downloads ist unter [4] zu finden. Die gesamte Installation kann etwas Zeit beanspruchen, es sei also davor gewarnt, dass es etwas länger dauern kann.

    3. Erste Anwendung

    Nach einer erfolgreichen Installation erstellen wir nun unsere erste WPF-Anwendung. Dazu ist das Visual Studio 2005 zu öffnen und ein neues Projekt zu erstellen. Neu ist nun, dass sich im New Project Dialog ein neuer Eintrag Windows (WinFX) befindet. Darunter sind die einzelnen WinFX Möglichkeiten aufgelistet. An dieser Stelle ist der WinFX Windows Application Eintrag auszuwählen (siehe Abbildung 1).


    Abbildung 1

    Nach der erfolgreichen Erstellung des Projektes werden die einzelnen Unterschiede zu einer herkömmlichen Windows Forms Anwendung bereits sichtbar. Nicht nur, dass das dargestellte Formular eine etwas andere Oberfläche besitzt. Der wahre Unterschied liegt in den Referenzen, wie in Abbildung 2 zu sehen ist.


    Abbildung 2

    Hier sind die drei wichtigsten Referenzen zu nennen: PresentationCore, PresentationFramework und WindowsBase. Dabei handelt es sich um WPF bzw. WinFX Assemblies, die die notwendige Funktionalität für die hier gezeigten Beispiele (und natürlich weitere Funktionalitäten) zur Verfügung stellen.

    Weiters sehen wir im Formulardesigner nun insgesamt drei Möglichkeiten der Ansicht, wie in Abbildung 3 zu sehen.


    Abbildung 3

    Im Design-Modus kann, wie bei Windows Forms Anwendungen gewohnt, die Oberfläche durch einfaches Daraufziehen von Steuerelementen erstellt werden. Der Bereich Xaml zeigt den dahinterliegenden XAML Code, der in unserer Beispielanwendung noch folgendermaßen aussieht:

    Code xml:
    1
    2
    3
    4
    
    <Window x:Class="WinFXTest.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="WinFXTest" Height="300" Width="300" > 
      <Grid>
      </Grid>
    </Window>

    An dieser Stelle nun eine kleine Erklärung, was den XAML eigentlich ist und wofür dies benötigt wird.

    XAML ist eine auf XML basierende Sprache für das Erstellen und Initialisieren von .NET Objekten. Unter WPF wird es als Serialisierungs-Format für Objekte aus dem WPF Stack verwendet.

    Im obigen Beispiel ist gut der Aufbau zu erkennen. Das Window-Tag beschreibt ein WPF-Formular. Darunter liegend finden sich alle Steuerelemente, die sich auf diesem Formular befinden. Zu beachten sind weiters die beiden eingebundenen Namespaces (xmlns-Attribute). Der erste Namespace ist notwendig für WPF, der zweite für XAML selbst. Die weiteren Attribute des Window-Root-Tags beschreiben den Titel des Fensters, als auch die Breite und die Höhe. Wie zu sehen ist, befindet sich standardmäßig eine Tabelle auf dem Fenster.

    Wechseln wir nun in die Source-Ansicht, ist der dahinter liegende Sourcecode (Code-Behind) zu sehen:

    Code csharp:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    
    using System; 
    using System.Collections.Generic; 
    using System.Text; 
    using System.Windows; 
    using System.Windows.Controls; 
    using System.Windows.Data; 
    using System.Windows.Documents; 
    using System.Windows.Input; 
    using System.Windows.Media; 
    using System.Windows.Media.Imaging; 
    using System.Windows.Shapes; 
     
    namespace WinFXTest 
    { 
      public partial class Window1 : Window 
      { 
        public Window1() 
        { 
          InitializeComponent(); 
        } 
      } 
    }

    Da unser Beispiel derzeit noch keine Funktionalität aufweist, werden wir nun daran gehen, diese zu implementieren. Für dieses Tutorial – weitere werden noch folgen – wird dies lediglich ein kleiner Button sein, der durch Betätigung eine MessageBox ausgeben wird.

    Das Einfügen des Buttons kann nun wahlweise mit dem Designer geschehen, oder direkt via XAML. Der dadurch entstehende XAML Code, welcher das Aussehen der Anwendung und die verwendeten Steuerelemente beschreibt, sieht dadurch folgendermaßen aus:

    Code xml:
    1
    2
    3
    4
    5
    6
    7
    
    <Window x:Class="WinFXTest.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="WinFXTest" Height="110" Width="278" > 
      <Grid> 
        <Button Height="34" Margin="22,21,21,0" Name="btnMessageBox" VerticalAlignment="Top">Hit me!
        </Button> 
      </Grid> 
    </Window>

    Wie zu sehen ist, wurde ein Button-Tag eingefügt, welches mit den einzelnen Eigenschaften befüllt wurde. Für die Beschriftung ist kein Attribut vorgesehen. Grafisch ist das derzeitige Ergebnis in Abbildung 4 zu sehen.


    Abbildung 4

    In weiterer Folge sollte nun der Button auf einen Klick reagieren und eine MessageBox zum Vorschein bringen. Dafür fügen wird im Button-Tag des XAML-Codes ein entsprechendes Click-Attribut ein:

    Code xml:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    
    <Window 
      x:Class="WinFXTest.Window1" 
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
      Title="WinFXTest" 
      Height="110" 
      Width="278" >
      <Grid>
        <Button 
          Height="34" 
          Margin="22,21,21,0" 
          Name="btnMessageBox" 
          VerticalAlignment="Top" 
          Click="btnMessageBox_Click">Hit me!
        </Button>
      </Grid>
    </Window>

    Dieses beschreibt nun, welcher Handler im Code-Behind-File aufgerufen werden soll.

    Code csharp:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    
    using System; 
    using System.Collections.Generic; 
    using System.Text; 
    using System.Windows; 
    using System.Windows.Controls; 
    using System.Windows.Data; 
    using System.Windows.Documents; 
    using System.Windows.Input; 
    using System.Windows.Media; 
    using System.Windows.Media.Imaging; 
    using System.Windows.Shapes; 
     
    namespace WinFXTest
    { 
      public partial class Window1 : Window 
      { 
        public Window1() 
        { 
          InitializeComponent(); 
        } 
        
        void btnMessageBox_Click(object sender, RoutedEventArgs e) 
        { 
          MessageBox.Show("You did it!"); 
        } 
      }
    }

    Im obigen Code ist nun dieser Handler implementiert und zeigt uns auch die entsprechende MessageBox an.

    4. Zusammenfassung

    Dieses Tutorial hat anhand eines sehr einfachen Beispiels gezeigt, was hinter der Windows Presentation Foundation steckt und wofür diese gedacht ist. Der werte Leser sollte nun in der Lage sein, ein entsprechendes Testsystem aufzusetzen, sowie eine Testanwendung zu erstellen.

    Im nächsten Teil dieser Tutorials-Reihe wird auf Hintergründe näher eingegangen, um eine verbessertes Verständnis für diese Technik zu bieten.

    Wünsche, Anregungen und Beschwerden können jederzeit an csharp@gmx.at gerichtet werden.

    5. Der Autor

    Norbert Eder arbeitet hauptberuflich als Software Architect und ist auch in diversen Communities anzutreffen. Weiters beschäftigt er sich mit neuen Technologien und versucht sein Wissen durch Tutorials, als auch Artikel in Fachzeitschriften weiterzugeben.


    Weiterführende Informationen sind in meinem Blog unter http://blog.norberteder.com zu finden.