Erste Schritte mit Windows Presentation Foundation

  • Artikel

Aktualisiert: November 2007

Dieses Lernprogramm bietet eine einfache Einführung in die Entwicklung einer Windows Presentation Foundation (WPF)-Anwendung, in der die Elemente enthalten sind, die von den meisten WPF-Anwendungen verwendet werden: Extensible Application Markup Language (XAML)-Markup, Code-Behind, Anwendungsdefinitionen, Steuerelemente, Layout, Datenbindung und Stile.

Dieses Thema enthält folgende Abschnitte.

  • Zusammenfassung
  • Vorbereitungsmaßnahmen
  • Erstellen der Anwendungscodedateien
  • Erstellen und Ausführen der Anwendung
  • Hinzufügen von Layout
  • Hinzufügen von Steuerelementen
  • Hinzufügen eines Bilds und eines Titels
  • Hinzufügen von Code zum Behandeln von Ereignissen
  • Erstellen der Benutzeroberfläche für ExpenseReportPage
  • Hinzufügen von Code zum Formatieren eines Steuerelements
  • Binden von Daten an ein Steuerelement
  • Verbinden von Daten mit Steuerelementen
  • Hinzufügen von Stilen zu Daten mit Datenvorlagen
  • Bewährte Methoden
  • Weitere Informationen
  • Verwandte Abschnitte

Zusammenfassung

Dieses Lernprogramm führt Sie mithilfe der folgenden Schritte durch die Entwicklung einer einfachen WPF-Anwendung.

  • Definieren Sie XAML-Markup, um die Darstellung der Anwendungs-Benutzeroberfläche (user interface, UI) zu entwerfen.

  • Schreiben Sie Code, um das Verhalten der Anwendung zu erstellen.

  • Erstellen Sie eine Anwendungsdefinition, um die Anwendung zu verwalten.

  • Fügen Sie Steuerelemente und Layout hinzu, aus denen die Anwendungs-Benutzeroberfläche zusammengesetzt werden soll.

  • Erstellen Sie Stile, um eine konsistente Darstellung in der gesamten Anwendungs-Benutzeroberfläche zu erstellen.

  • Binden Sie die Benutzeroberfläche an Daten, um die Benutzeroberfläche mit Daten zu füllen und die Daten und die Benutzeroberfläche synchron zu halten.

Nach Abschluss des Lernprogramms haben Sie eine eigenständige Windows-Anwendung erstellt, mit der Benutzer Spesenabrechnungen für bestimmte Personen anzeigen können. Die Anwendung besteht aus mehreren WPF-Seiten, die in einem Fenster im Browserstil gehostet werden.

Der Beispielcode, der in diesem Lernprogramm verwendet wird, steht sowohl für C# als auch für Microsoft Visual Basic .NET zur Verfügung. Siehe Einführung in das Erstellen von Windows Presentation Foundation-Anwendungen.

Vorbereitungsmaßnahmen

Zum Erstellen der Anwendung, die in diesem Lernprogramm entwickelt wird, müssen Microsoft .NET Framework und Windows Software Development Kit (SDK) installiert sein.

Bei erfolgter Installation können Sie die Anwendung über ein Befehlsfenster erstellen (obwohl Sie Integrierte Entwicklungsumgebung (Integrated Development Environment, IDE) falls gewünscht wie Microsoft Visual Studio verwenden können). Für eine Erstellung über das Eingabeaufforderungsfenster müssen Sie das Befehlsfenster verwenden, das mit dem Windows Software Development Kit (SDK) installiert wird. Sie finden es am folgenden Menüspeicherort:

  • Startmenü | Alle Programme | Microsoft Windows SDK | CMD-Shell

Alternativ können Sie die Windows-Eingabeaufforderung öffnen, indem Sie die folgenden Schritte ausführen:

  1. Klicken Sie im Startmenü auf Ausführen.

  2. Geben Sie Folgendes ein:

    C:\WINDOWS\system32\cmd.exe /E:ON /V:ON /T:0E /K "C:\Program Files\Microsoft SDKs\Windows\v6.0\Bin\SetEnv.Cmd"

  3. Klicken Sie auf OK.

Beachten Sie, dass SetEnv.cmd die Umgebung einrichtet, die Sie zum Erstellen von WPF-Anwendungen über die Eingabeaufforderung benötigen.

Erstellen der Anwendungscodedateien

In diesem Schritt erstellen Sie die Anwendungsstruktur, die eine Anwendungsdefinition, zwei Seiten und ein Bild enthält.

  1. Erstellen Sie eine neue XAML-Markupdatei mit dem Namen App.xaml. Diese Datei definiert eine WPF-Anwendung. Mit dieser Datei geben Sie auch die Benutzeroberfläche an, die automatisch beim Starten der Anwendung angezeigt wird. In diesem Fall handelt es sich um HomePage.xaml (wird im nächsten Schritt erstellt). Das XAML-Markup muss wie folgt aussehen:

    <Application 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  StartupUri="HomePage.xaml">
</Application>

  2. Erstellen Sie eine neue XAML-Markupdatei mit dem Namen HomePage.xaml, die beim Starten der Anwendung als erste Seite angezeigt wird. HomePage.xaml zeigt eine Liste von Personen, aus denen ein Benutzer eine Person auswählen kann, um die zugehörige Spesenabrechnung anzuzeigen. Fügen Sie ein Page-Element mit der folgenden Konfiguration zu HomePage.xaml hinzu:

    • Die Titelleiste des Browsers lautet "ExpenseIt".

    • Die Breite des Browsers beträgt 550 geräteunabhängige Pixel.

    • Die Höhe des Browsers beträgt 350 geräteunabhängige Pixel.

    • Der Titel der Seite lautet "ExpenseIt - Home".

    Das XAML-Markup muss wie folgt aussehen:

    <Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="ExpenseIt.HomePage"
  WindowTitle="ExpenseIt"
  Title="ExpenseIt - Home" 
  WindowWidth="550" WindowHeight="380">
</Page>

  3. Erstellen Sie eine neue Codedatei mit dem Namen HomePage.xaml.cs. Bei dieser Datei handelt es sich um eine Code-Behind-Datei, die Code enthält, um die in HomePage.xaml deklarierten Ereignisse zu behandeln. Der Code muss wie folgt aussehen:

    using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
namespace ExpenseIt
{
    public partial class HomePage : Page
    {
        public HomePage()
        {
            InitializeComponent();
        }
    }
}

  4. Erstellen Sie eine neue XAML-Markupdatei mit dem Namen ExpenseReportPage.xaml. Fügen Sie ein Page-Element hinzu, und legen Sie "ExpenseIt - View Expense Report" als Seitentitel fest. Diese Seite zeigt die Spesenabrechnung für die Person an, die auf HomePage.xaml ausgewählt wird. Das XAML-Markup muss wie folgt aussehen:

    <Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="ExpenseIt.ExpenseReportPage"
  Title="ExpenseIt - View Expense Report">
</Page>

  5. Erstellen Sie eine neue Datei mit dem Namen ExpenseReportPage.xaml.cs. Diese Datei ist eine Code-Behind-Datei, die die Daten der Spesenabrechnung an die in ExpenseReportPage.xaml definierte Benutzeroberfläche bindet. Der Code muss wie folgt aussehen:

    using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
namespace ExpenseIt
{
    public partial class ExpenseReportPage : Page
    {
        public ExpenseReportPage()
        {
            InitializeComponent();
        }
    }
}

  6. Fügen Sie ein Bild mit dem Namen watermark.png dem Ordner mit den fünf Codedateien hinzu, die Sie in vorangehenden Schritten erstellt haben. Entweder erstellen Sie ein eigenes Bild, oder Sie kopieren die Datei mit diesem Namen aus dem Beispielcode.

Erstellen und Ausführen der Anwendung

In diesem Schritt erstellen Sie mit MSBuild die Anwendung, die Sie im vorherigen Abschnitt definiert haben.

  1. Erstellen Sie eine neue Datei mit dem Namen ExpenseIt.csproj. Diese Datei stellt die MSBuild-Datei dar, eine spezielle XML-Datei, in der die Buildkonfiguration für Ihre Anwendung sowie Folgendes enthalten ist:

    • Die globalen Buildvariablen für das kompilierte Projekt, einschließlich des Namens der erstellten Assembly, des Typs der zu erstellenden Assembly und des Ordners, dem die erstellte Assembly hinzugefügt wird.

    • Verweise auf die Codedateien.

    • Verweise auf die Microsoft .NET Framework-Assemblys, die die Typen enthalten, die von der Anwendung verwendet werden.

    Der Inhalt der Builddatei muss wie folgt aussehen:

    <?xml version="1.0" encoding="utf-8"?>
<Project xmlns="https://schemas.microsoft.com/developer/msbuild/2003">
    <PropertyGroup>
        <AssemblyName>ExpenseIt</AssemblyName>
        <TargetType>winexe</TargetType>
        <OutputPath>bin\$(Configuration)\</OutputPath>
    </PropertyGroup>
    <ItemGroup>
        <Reference Include="System"/>
        <Reference Include="System.Xml"/>
        <Reference Include="System.Data"/>
        <Reference Include="WindowsBase"/>
        <Reference Include="PresentationCore"/>
        <Reference Include="PresentationFramework"/>
    </ItemGroup>
    <ItemGroup>
        <ApplicationDefinition Include="App.xaml"/>
        <Page Include="HomePage.xaml"/>
        <Compile Include="HomePage.xaml.cs" />
        <Page Include="ExpenseReportPage.xaml"/>
        <Compile Include="ExpenseReportPage.xaml.cs" />
        <Resource Include="watermark.png"/>
    </ItemGroup>
    <Import Project="$(MSBuildBinPath)\Microsoft.CSharp.targets"/>
    <Import Project="$(MSBuildBinPath)\Microsoft.WinFX.targets"/>
</Project>

  2. Öffnen Sie ein Befehlsfenster für den gleichen Ordner wie für Projektdatei und Anwendungscodedateien.

  3. Führen Sie an der Eingabeaufforderung den folgenden Befehl aus:

    MSBuild ExpenseIt.csproj

    Führen Sie für Microsoft Visual Basic .NET stattdessen den folgenden Befehl aus:

    MSBuild ExpenseIt.vbproj

    Um die Anwendung mit Visual Studio zu kompilieren und auszuführen, öffnen Sie die Projektdatei in Visual Studio, und drücken Sie F5.

Tipp

Visual Studio 2005 generiert automatisch eine Projektdatei. Da in diesem Lernprogramm nicht davon ausgegangen wird, dass Visual Studio installiert ist, wird der Prozess zum Erstellen einer Projektdatei ausführlich beschrieben. Weitere Informationen über die Erstellung von CSPROJ-Dateien finden Sie unter Erstellen einer WPF-Anwendung (WPF). Wenn Sie dieses Lernprogramm mit Visual Studio ausführen, überschreiben Sie den Inhalt der generierten CSPROJ-Datei mit dem vorhergehenden MSBuild-Text.

  1. Öffnen Sie den Ordner, der die erstellte ausführbare Anwendungsdatei enthält: expenseit.exe. Wenn die Datei über die Eingabeaufforderung erstellt wurde, befindet sich expenseit.exe im folgenden Ordner:

    Folder Containing Application Code Files\bin\

    Wenn die Datei mit Visual Studio erstellt wurde, befindet sich expenseit.exe stattdessen im folgenden Ordner:

    Folder Containing Application Code Files\bin\debug\

  2. Führen Sie expenseit.exe an der Eingabeaufforderung aus: Die folgende Abbildung zeigt die ausgeführte Anwendung.

    Bildschirmabbildung für ExpenseIt-Beispiel

Hinzufügen von Layout

Das Layout bietet die Möglichkeit, Benutzeroberfläche-Elemente auf geordnete Weise zu platzieren. Außerdem verwaltet es Größe und Position dieser Elemente, wenn die Größe einer Benutzeroberfläche geändert wird. In der Regel fügen Sie der Benutzeroberfläche das Layout mit einem der folgenden Layoutsteuerelemente hinzu:

Jedes dieser Steuerelemente unterstützt einen speziellen Layouttyp für seine untergeordneten Elemente. Die Größe von ExpenseIt-Seiten kann geändert werden. Jede Seite verfügt über Elemente, die horizontal und vertikal neben anderen Elementen angeordnet sind. Daher stellt Grid das ideale Layoutelement für die Anwendung dar.

Tipp

Weitere Informationen zu Panel-Elementen finden Sie unter Übersicht über Panel-Elemente.

Das folgende XAML-Markup erstellt eine einspaltige Tabelle mit drei Zeilen und einem 10-Pixel-Rand, indem HomePage.xaml Grid hinzugefügt wird:

  1. Öffnen Sie HomePage.xaml.

  2. Fügen Sie die folgende XAML zwischen den Page-Tags hinzu.

    <Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="ExpenseIt.HomePage"
  WindowTitle="ExpenseIt"
  Title="ExpenseIt - Home" 
  WindowWidth="550" WindowHeight="380">
    <Grid Margin="10">
      <Grid.ColumnDefinitions>
        <ColumnDefinition />
      </Grid.ColumnDefinitions>
      <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition />
        <RowDefinition Height="Auto" />
      </Grid.RowDefinitions>
    </Grid>
</Page>

Hinzufügen von Steuerelementen

In diesem Schritt wird die Benutzeroberfläche der Homepage aktualisiert, um eine Liste der Personen anzuzeigen, aus denen Benutzer eine Person auswählen können, um die zugehörige Spesenabrechnung anzuzeigen. Um diese Benutzeroberfläche zu erstellen, werden HomePage.xaml die folgenden Elemente hinzugefügt:

  • ListBox (für die Liste von Personen)

  • Label (für den Listenheader)

  • Button (zum Klicken, um die Spesenabrechnung für die Person anzuzeigen, die in der Liste ausgewählt ist)

Führen Sie die folgenden Schritte aus, um HomePage.xaml zu aktualisieren:

  1. Überschreiben Sie den Inhalt der Datei HomePage.xaml mit der folgenden XAML.

    <Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="ExpenseIt.HomePage"
  WindowTitle="ExpenseIt"
  Title="ExpenseIt - Home" 
  WindowWidth="550" WindowHeight="380">

  <Grid Margin="10">

    <Grid.ColumnDefinitions>
      <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition />
      <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <!-- People list -->
    <Border Grid.Column="0" Grid.Row="0" Height="35" Padding="5" Background="#4E87D4">
      <Label VerticalAlignment="Center" Foreground="White">Names</Label>
    </Border>
    <ListBox Name="peopleListBox" Grid.Column="0" Grid.Row="1">
      <ListBoxItem>Mike</ListBoxItem>
      <ListBoxItem>Lisa</ListBoxItem>
      <ListBoxItem>John</ListBoxItem>
      <ListBoxItem>Mary</ListBoxItem>
    </ListBox>

    <!-- View report button -->
    <Button Grid.Column="0" Grid.Row="2" Margin="0,10,0,0" Width="125"
      Height="25" HorizontalAlignment="Right">View</Button>

  </Grid>

</Page>

  2. Kompilieren Sie die Anwendung, und führen Sie sie aus.

Das folgende Bild zeigt die Steuerelemente, die in diesem Schritt vom Code erstellt werden.

Bildschirmabbildung für ExpenseIt-Beispiel

Hinzufügen eines Bilds und eines Titels

In diesem Schritt wird die Benutzeroberfläche der Homepage mit einem entsprechenden Bild und einem Seitentitel aktualisiert:

  1. Öffnen Sie HomePage.xaml.

  2. Überschreiben Sie den Inhalt der Datei HomePage.xaml mit der folgenden XAML.

    <Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="ExpenseIt.HomePage"
  WindowTitle="ExpenseIt"
  Title="ExpenseIt - Home" 
  WindowWidth="550" WindowHeight="380">

  <Grid>

    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="230" />
      <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition />
    </Grid.RowDefinitions>

    <DockPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0">
      <Canvas DockPanel.Dock="Left" Width="230" Height="100">
        <Image Source="watermark.png" />
      </Canvas>
      <Label VerticalAlignment="Center" FontFamily="Trebuchet MS" 
        FontWeight="Bold" FontSize="18" Foreground="#0066cc">
        View Expense Report
      </Label>
    </DockPanel>

    <Grid Margin="10" Grid.Column="1" Grid.Row="1">

      <Grid.ColumnDefinitions>
        <ColumnDefinition />
      </Grid.ColumnDefinitions>
      <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition />
        <RowDefinition Height="Auto" />
      </Grid.RowDefinitions>

      <!-- People list -->
      <Border Grid.Column="0" Grid.Row="0" Height="35" Padding="5" Background="#4E87D4">
        <Label VerticalAlignment="Center" Foreground="White">Names</Label>
      </Border>
      <ListBox Name="peopleListBox" Grid.Column="0" Grid.Row="1">
        <ListBoxItem>Mike</ListBoxItem>
        <ListBoxItem>Lisa</ListBoxItem>
        <ListBoxItem>John</ListBoxItem>
        <ListBoxItem>Mary</ListBoxItem>
      </ListBox>

      <!-- View report button -->
      <Button Grid.Column="0" Grid.Row="2" Margin="0,10,0,0" Width="125" 
        Height="25" HorizontalAlignment="Right">View</Button>

    </Grid>

  </Grid>
</Page>

    Diese XAML aktualisiert das Grid folgendermaßen:

    • Erstellen eines neuen Rasters mit zwei Zeilen.

    • Hinzufügen eines DockPanel-Elements mit Canvas, Image und Label zur ersten Zeile. Das DockPanel-Element überspannt die zwei Spalten der ersten Zeile, die in Verbindung mit dem Canvas-Element, das an der linken Seite angedockt wird, ermöglicht, dass das Label-Element das Image-Element überlappt.

    • Verwenden des Source-Attributs des Image-Elements, um das Quellbild anzugeben: watermark.png.

    • Hinzufügen des folgenden Titeltexts zum Label-Element: "View Expense Report".

    • Verwenden der Attribute des Canvas-Elements und des Label-Elements, um ihre Darstellung und Größe zu konfigurieren.

    • Verschieben des Rasters, das ursprünglich in HomePage.xaml enthalten war, in die zweite Spalte der zweiten Zeile des neuen Rasters.

  3. Kompilieren Sie die Anwendung, und führen Sie sie aus.

Die folgende Abbildung zeigt das Ergebnis dieses Schritts.

Bildschirmabbildung für ExpenseIt-Beispiel

Hinzufügen von Code zum Behandeln von Ereignissen

  1. Öffnen Sie HomePage.xaml.

  2. Überschreiben Sie das im vorherigen Schritt definierte Button-Element mit dem folgenden Code.

    ...
<!-- View report button -->
<Button Grid.Column="0" Grid.Row="2" Width="125" Height="25" 
  Margin="0,10,0,0" HorizontalAlignment="Right" 
  Click="viewButton_Click">View</Button>
...

    Tipp

    Der Name des Button-Ereignisses, das behandelt werden muss, lautet Click. Der Name des entwicklerdefinierten Ereignishandlers lautet viewButton_Click. Der Ereignishandler ist mit dem Click-Ereignis für das Button-Steuerelement registriert.

  3. Öffnen Sie die Datei HomePage.xaml.cs, die Sie im Schritt Erstellen der Anwendungscodedateien des Lernprogramms erstellt haben.

  4. Überschreiben Sie den Inhalt der Datei mit dem folgenden Code. Dadurch wird Code zum Behandeln des Click-Ereignisses hinzugefügt, der bewirkt, dass zur Datei ExpenseReportPage.xaml navigiert wird.

    using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
namespace ExpenseIt
{
    public partial class HomePage : Page
    {
        public HomePage()
        {
            InitializeComponent();
        }
        private void viewButton_Click(object sender, RoutedEventArgs args)
        {
            // View Expense Report
            ExpenseReportPage expenseReportPage = new ExpenseReportPage();
            this.NavigationService.Navigate(expenseReportPage);
        }
    }
}

Erstellen der Benutzeroberfläche für ExpenseReportPage

ExpenseReportPage.xaml zeigt die Spesenabrechnung für die Person an, die auf HomePage.xaml ausgewählt wurde. Die folgenden Updates fügen Steuerelemente und Layout hinzu, um die grundlegende Benutzeroberfläche für ExpenseReportPage.xaml zu erstellen. Sie fügen den verschiedenen Benutzeroberfläche-Elementen auch Hintergrund und Füllfarben hinzu.

  1. Öffnen Sie die Datei ExpenseReportPage.xaml, und fügen Sie den folgenden Code hinzu.

    <Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="ExpenseIt.ExpenseReportPage"
  Title="ExpenseIt - View Expense Report">

  <Grid>

    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="230" />
      <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition />
    </Grid.RowDefinitions>

    <DockPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0">
      <Canvas DockPanel.Dock="Left" Width="230" Height="100">
        <Image Source="watermark.png" />
      </Canvas>
      <Label VerticalAlignment="Center" FontFamily="Trebuchet MS" 
        FontWeight="Bold" FontSize="18" Foreground="#0066cc">
        Expense Report For:
      </Label>
    </DockPanel>

    <Grid Margin="10" Grid.Column="1" Grid.Row="1">

      <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
      </Grid.ColumnDefinitions>
      <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition />
      </Grid.RowDefinitions>

      <!-- Name -->
      <StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" Orientation="Horizontal">
        <Label Margin="0,0,0,5" FontWeight="Bold">Name:</Label>
        <Label Margin="0,0,0,5" FontWeight="Bold"></Label>
      </StackPanel>

      <!-- Department -->
      <StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" 
        Orientation="Horizontal">
        <Label Margin="0,0,0,5" FontWeight="Bold">Department:</Label>
        <Label Margin="0,0,0,5" FontWeight="Bold"></Label>
      </StackPanel>

      <Grid Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="3">

        <Grid.ColumnDefinitions>
          <ColumnDefinition />
          <ColumnDefinition Width="10" />
          <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
          <RowDefinition Height="Auto" />
          <RowDefinition />
        </Grid.RowDefinitions>

        <!-- Expense type list -->
        <Border Grid.Column="0" Grid.Row="0" Height="35" Padding="5" Background="#4E87D4">
          <Label VerticalAlignment="Center" Foreground="White">Expense Type</Label>
        </Border>
        <ListBox Grid.Column="0" Grid.Row="1" />

        <!-- Amount list -->
        <Border Grid.Column="2" Grid.Row="0" Height="35" Padding="5" Background="#4E87D4">
          <Label VerticalAlignment="Center" Foreground="White">Amount</Label>
        </Border>
        <ListBox Grid.Column="2" Grid.Row="1" />

      </Grid>
    </Grid>
  </Grid>
</Page>

  2. Kompilieren Sie die Anwendung, und führen Sie sie aus.

Das folgende Bild zeigt die zu ExpenseReportPage.xaml hinzugefügten Benutzeroberfläche-Elemente.

Bildschirmabbildung für ExpenseIt-Beispiel

Hinzufügen von Code zum Formatieren eines Steuerelements

Die Darstellung verschiedener Elemente ist häufig für alle Elemente desselben Typs in einer Benutzeroberfläche identisch. Benutzeroberfläche verwendet Stile, damit Darstellungen in mehreren Elementen wieder verwendet werden können. Die Wiederverwendbarkeit von Stilen vereinfacht die XAML-Markuperstellung und die Verwaltung. Dieser Schritt ersetzt die Attribute pro Element, die in den vorherigen Schritten mit Stilen definiert wurden:

  1. Öffnen Sie die Datei App.xaml, die Sie im Schritt Erstellen der Anwendungscodedateien des Lernprogramms erstellt haben.

  2. Überschreiben Sie den Inhalt der Datei mit dem folgenden XAML-Markup:

    <Application 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  StartupUri="HomePage.xaml">

  <Application.Resources>

    <!-- Background image style -->
    <Style x:Key="backgroundImageStyle">
      <Setter Property="Image.Source" Value="watermark.png"/>
    </Style>

    <!-- Header text style -->
    <Style x:Key="headerTextStyle">
      <Setter Property="Label.VerticalAlignment" Value="Center"></Setter>
      <Setter Property="Label.FontFamily" Value="Trebuchet MS"></Setter>
      <Setter Property="Label.FontWeight" Value="Bold"></Setter>
      <Setter Property="Label.FontSize" Value="18"></Setter>
      <Setter Property="Label.Foreground" Value="#0066cc"></Setter>
    </Style>

    <!-- Label style -->
    <Style x:Key="labelStyle" TargetType="{x:Type Label}">
      <Setter Property="VerticalAlignment" Value="Top" />
      <Setter Property="HorizontalAlignment" Value="Left" />
      <Setter Property="FontWeight" Value="Bold" />
      <Setter Property="Margin" Value="0,0,0,5" />
    </Style>

    <!-- List header style -->
    <Style x:Key="listHeaderStyle" TargetType="{x:Type Border}">
      <Setter Property="Height" Value="35" />
      <Setter Property="Padding" Value="5" />
      <Setter Property="Background" Value="#4E87D4" />
    </Style>

    <!-- List header text style -->
    <Style x:Key="listHeaderTextStyle" TargetType="{x:Type Label}">
      <Setter Property="Foreground" Value="White" />
      <Setter Property="VerticalAlignment" Value="Center" />
      <Setter Property="HorizontalAlignment" Value="Left" />
    </Style>

    <!-- Button style -->
    <Style x:Key="buttonStyle" TargetType="{x:Type Button}">
      <Setter Property="Width" Value="125" />
      <Setter Property="Height" Value="25" />
      <Setter Property="Margin" Value="0,10,0,0" />
      <Setter Property="HorizontalAlignment" Value="Right" />
    </Style>

  </Application.Resources>

</Application>

    Dieses XAML-Markup fügt die folgenden Stile hinzu:

    • headerTextStyle: Zum Formatieren des Seitentitels Label

    • labelStyle: Zum Formatieren der Label-Bezeichnungen

    • listHeaderStyle: Zum Formatieren der Border-Steuerelemente für Listenheader

    • listHeaderTextStyle: Zum Formatieren der Label-Steuerelemente für Listenheader

    • buttonStyle: Zum Formatieren der Schaltfläche auf HomePage.xaml

    Beachten Sie, dass es sich bei den Stilen um Ressourcen handelt, die untergeordnete Elemente des Application.Resources-Eigenschaftenelements sind. An diesem Speicherort werden die Stile auf alle Elemente in einer Anwendung angewendet. Ein Beispiel zum Verwenden von Ressourcen in einer .NET Framework-Anwendung finden Sie unter Gewusst wie: Verwenden von Anwendungsressourcen.

  3. Öffnen Sie HomePage.xaml.

  4. Überschreiben Sie den Inhalt der Datei mit folgendem Code. In diesem Schritt werden die darstellungsspezifischen Attribute jedes Elements durch einen entsprechenden Stil ersetzt.

    <Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="ExpenseIt.HomePage"
  WindowTitle="ExpenseIt"
  Title="ExpenseIt - Home" 
  WindowWidth="550" WindowHeight="380">

  <Grid>

    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="230" />
      <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition />
    </Grid.RowDefinitions>

    <DockPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0">
      <Canvas DockPanel.Dock="Left" Width="230" Height="100">
        <Image Style="{StaticResource backgroundImageStyle}" />
      </Canvas>
      <Label Style="{StaticResource headerTextStyle}">View Expense Report</Label>
    </DockPanel>

    <Grid Margin="10" Grid.Column="1" Grid.Row="1">

      <Grid.ColumnDefinitions>
        <ColumnDefinition />
      </Grid.ColumnDefinitions>
      <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition />
        <RowDefinition Height="Auto" />
      </Grid.RowDefinitions>

      <!-- People list -->
      <Border Grid.Column="0" Grid.Row="0" Style="{StaticResource listHeaderStyle}">
        <Label Style="{StaticResource listHeaderTextStyle}">Names</Label>
      </Border>
      <ListBox Name="peopleListBox" Grid.Column="0" Grid.Row="1">
        <ListBoxItem>Mike</ListBoxItem>
        <ListBoxItem>Lisa</ListBoxItem>
        <ListBoxItem>John</ListBoxItem>
        <ListBoxItem>Mary</ListBoxItem>
      </ListBox>

      <!-- View report button -->
      <Button Grid.Column="0" Grid.Row="2" Style="{StaticResource buttonStyle}" 
        Click="viewButton_Click">View
      </Button>

    </Grid>

  </Grid>

</Page>

  5. Öffnen Sie ExpenseReportPage.xaml.

  6. Überschreiben Sie den Inhalt der Datei mit folgendem Code.

    <Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="ExpenseIt.ExpenseReportPage"
  Title="ExpenseIt - View Expense Report">

  <Grid>

    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="230" />
      <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition />
    </Grid.RowDefinitions>

    <DockPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0">
      <Canvas DockPanel.Dock="Left" Width="230" Height="100">
        <Image Style="{StaticResource backgroundImageStyle}" />
      </Canvas>
      <Label Style="{StaticResource headerTextStyle}">Expense Report For:</Label>
    </DockPanel>

    <Grid Margin="10" Grid.Column="1" Grid.Row="1">

      <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
      </Grid.ColumnDefinitions>
      <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition />
      </Grid.RowDefinitions>

      <!-- Name -->
      <StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" Orientation="Horizontal">
        <Label Style="{StaticResource labelStyle}">Name:</Label>
        <Label Style="{StaticResource labelStyle}"></Label>
      </StackPanel>

      <!-- Department -->
      <StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" Orientation="Horizontal">
        <Label Style="{StaticResource labelStyle}">Department:</Label>
        <Label Style="{StaticResource labelStyle}"></Label>
      </StackPanel>

      <Grid Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="3">

        <Grid.ColumnDefinitions>
          <ColumnDefinition />
          <ColumnDefinition Width="10" />
          <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
          <RowDefinition Height="Auto" />
          <RowDefinition />
        </Grid.RowDefinitions>

        <!-- Expense type list -->
        <Border Grid.Column="0" Grid.Row="0" Style="{StaticResource listHeaderStyle}">
          <Label Style="{StaticResource listHeaderTextStyle}">Expense Type</Label>
        </Border>
        <ListBox Grid.Column="0" Grid.Row="1" />

        <!-- Amount list -->
        <Border Grid.Column="2" Grid.Row="0" Style="{StaticResource listHeaderStyle}">
          <Label Style="{StaticResource listHeaderTextStyle}">Amount</Label>
        </Border>
        <ListBox Grid.Column="2" Grid.Row="1" />

      </Grid>

    </Grid>

  </Grid>

</Page>

  7. Kompilieren Sie die Anwendung, und führen Sie sie aus. Nachdem Sie in diesem Schritt das XAML-Markup hinzugefügt haben, sieht die Anwendung genauso aus wie vor der Aktualisierung mit Stilen.

Binden von Daten an ein Steuerelement

In diesem Schritt werden die XML-Daten erstellt, die an verschiedene Steuerelemente gebunden werden:

  1. Öffnen Sie HomePage.xaml.

  2. Überschreiben Sie den Inhalt der Datei mit dem folgenden XAML-Markup.

    <Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="ExpenseIt.HomePage"
  WindowTitle="ExpenseIt"
  Title="ExpenseIt - Home" 
  WindowWidth="550" WindowHeight="380">

  <Grid>

    <Grid.Resources>

      <!-- Expense Report Data -->
      <XmlDataProvider x:Key="ExpenseDataSource" XPath="Expenses">
        <x:XData>
          <Expenses >
            <Person Name="Mike" Department="Legal">
              <Expense ExpenseType="Lunch" ExpenseAmount="50" />
              <Expense ExpenseType="Transportation" ExpenseAmount="50" />
            </Person>
            <Person Name="Lisa" Department="Marketing">
              <Expense ExpenseType="Document printing"
                  ExpenseAmount="50"/>
              <Expense ExpenseType="Gift" ExpenseAmount="125" />
            </Person>
            <Person Name="John" Department="Engineering">
              <Expense ExpenseType="Magazine subscription" 
                 ExpenseAmount="50"/>
              <Expense ExpenseType="New machine" ExpenseAmount="600" />
              <Expense ExpenseType="Software" ExpenseAmount="500" />
            </Person>
            <Person Name="Mary" Department="Finance">
              <Expense ExpenseType="Dinner" ExpenseAmount="100" />
            </Person>
          </Expenses>
        </x:XData>
      </XmlDataProvider>

      <!-- Name item template -->
      <DataTemplate x:Key="nameItemTemplate">
        <Label Content="{Binding XPath=@Name}"/>
      </DataTemplate>

    </Grid.Resources>

    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="230" />
      <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition />
    </Grid.RowDefinitions>

    <DockPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0">
      <Canvas DockPanel.Dock="Left" Width="230" Height="100">
        <Image Style="{StaticResource backgroundImageStyle}" />
      </Canvas>
      <Label Style="{StaticResource headerTextStyle}">View Expense Report</Label>
    </DockPanel>

    <Grid Margin="10" Grid.Column="1" Grid.Row="1">

      <Grid.ColumnDefinitions>
        <ColumnDefinition />
      </Grid.ColumnDefinitions>
      <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition />
        <RowDefinition Height="Auto" />
      </Grid.RowDefinitions>

      <!-- People list -->
      <Border Grid.Column="0" Grid.Row="0" Style="{StaticResource listHeaderStyle}">
        <Label Style="{StaticResource listHeaderTextStyle}">Names</Label>
      </Border>
      <ListBox Name="peopleListBox" Grid.Column="0" Grid.Row="1" 
        ItemsSource="{Binding Source={StaticResource ExpenseDataSource}, XPath=Person}" 
        ItemTemplate="{StaticResource nameItemTemplate}" />

      <!-- View report button -->
      <Button Grid.Column="0" Grid.Row="2" Style="{StaticResource buttonStyle}" 
        Click="viewButton_Click">View</Button>

    </Grid>

  </Grid>

</Page>

    Beachten Sie, dass die Daten als Grid-Ressource erstellt werden.

Verbinden von Daten mit Steuerelementen

In diesem Schritt schreiben Sie Code, der das aktuelle Element, das in der Liste der Personen auf der HomePage ausgewählt wurde, abruft und den zugehörigen Verweis an den Konstruktor der ExpenseReportPage während der Instanziierung übergibt. ExpenseReportPage legt den Datenkontext mithilfe des übergebenen Elements fest, und die in ExpenseReportPage.xaml definierten Steuerelemente werden daran gebunden.

  1. Öffnen Sie HomePage.xaml.cs.

  2. Überschreiben Sie den Inhalt der Datei mit folgendem Code.

    using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
namespace ExpenseIt
{
    public partial class HomePage : Page
    {
        public HomePage()
        {
            InitializeComponent();
        }

        private void viewButton_Click(object sender, RoutedEventArgs args)
        {
            // Create a new expense report page and pass it the selected person
            // by using the non-default constructor.
            ExpenseReportPage expenseReportPage = 
                new ExpenseReportPage(this.peopleListBox.SelectedItem);

            // Navigate to the expense report page,
            this.NavigationService.Navigate(expenseReportPage);
        }
    }
}

  3. Öffnen Sie ExpenseReportPage.cs.

  4. Überschreiben Sie den Inhalt der Datei mit folgendem Code.

    using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
namespace ExpenseIt
{
    public partial class ExpenseReportPage : Page
    {
        public ExpenseReportPage(object data)
        {
            InitializeComponent();

            // Bind to expense report data.
            this.DataContext = data;
        }
    }
}

Hinzufügen von Stilen zu Daten mit Datenvorlagen

In diesem Schritt aktualisieren Sie mithilfe von Datenvorlagen die Benutzeroberfläche für jedes Element in den datengebundenen Listen:

  1. Öffnen Sie ExpenseReportPage.xaml.

  2. Überschreiben Sie den Inhalt der Datei mit folgendem Code.

    <Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="ExpenseIt.ExpenseReportPage"
  Title="ExpenseIt - View Expense Report">

  <Grid>

    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="230" />
      <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition />
    </Grid.RowDefinitions>

    <DockPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0">
      <Canvas DockPanel.Dock="Left" Width="230" Height="100">
        <Image Style="{StaticResource backgroundImageStyle}" />
      </Canvas>
      <Label Style="{StaticResource headerTextStyle}">Expense Report For:</Label>
    </DockPanel>

    <Grid Margin="10" Grid.Column="1" Grid.Row="1">

      <Grid.Resources>
        <!-- Reason item template -->
        <DataTemplate x:Key="typeItemTemplate">
          <Label Content="{Binding XPath=@ExpenseType}"/>
        </DataTemplate>
        <!-- Amount item template -->
        <DataTemplate x:Key="amountItemTemplate">
          <Label Content="{Binding XPath=@ExpenseAmount}"/>
        </DataTemplate>
      </Grid.Resources>

      <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
      </Grid.ColumnDefinitions>
      <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition />
      </Grid.RowDefinitions>

      <!-- Name -->
      <StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" Orientation="Horizontal">
        <Label Style="{StaticResource labelStyle}">Name:</Label>
        <Label Content="{Binding XPath=@Name}" Style="{StaticResource labelStyle}"/>
      </StackPanel>

      <!-- Department -->
      <StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" Orientation="Horizontal">
        <Label Style="{StaticResource labelStyle}">Department:</Label>
        <Label Content="{Binding XPath=@Department}" Style="{StaticResource labelStyle}"/>
      </StackPanel>
      <Grid Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="3">

        <Grid.ColumnDefinitions>
          <ColumnDefinition />
          <ColumnDefinition Width="10" />
          <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
          <RowDefinition Height="Auto" />
          <RowDefinition />
        </Grid.RowDefinitions>

        <!-- Expense type list -->
        <Border Grid.Column="0" Grid.Row="0" Style="{StaticResource listHeaderStyle}">
          <Label Style="{StaticResource listHeaderTextStyle}">Expense Type</Label>
        </Border>
        <ListBox Grid.Column="0" Grid.Row="1" ItemsSource="{Binding XPath=Expense}" 
          ItemTemplate="{StaticResource typeItemTemplate}" />

        <!-- Amount list -->
        <Border Grid.Column="2" Grid.Row="0" Style="{StaticResource listHeaderStyle}">
          <Label Style="{StaticResource listHeaderTextStyle}">Amount</Label>
        </Border>
        <ListBox Grid.Column="2" Grid.Row="1" ItemsSource="{Binding XPath=Expense}" 
          ItemTemplate="{StaticResource amountItemTemplate}" />

      </Grid>

    </Grid>

  </Grid>

</Page>

  3. Kompilieren Sie die Anwendung, und führen Sie sie aus.

Beachten Sie, dass die Datenvorlagen als Grid-Ressourcen definiert werden.

Die folgenden zwei Abbildungen zeigen die beiden Seiten der ExpenseIt-Anwendung mit angewandten Steuerelementen, Stilen, Datenbindungen, Datenvorlagen und angewandtem Layout:

Bildschirmabbildungen für ExpenseIt-Beispiel

Bewährte Methoden

In diesem Beispiel soll nur ein bestimmtes Feature von Windows Presentation Foundation veranschaulicht werden, daher werden die bewährten Methoden für die Anwendungsentwicklung nicht befolgt. Ausführliche Informationen über bewährte Methoden für die Anwendungsentwicklung bei Windows Presentation Foundation (WPF) und Microsoft .NET Framework finden Sie unter folgenden Themen:

Eingabehilfen – Bewährte Methoden für Eingabehilfen

Sicherheit – Windows Presentation Foundation-Sicherheit

Lokalisierung – Übersicht über WPF-Globalisierung und -Lokalisierung

Optimieren der WPF-Anwendungsleistung

Weitere Informationen

Ihnen stehen jetzt eine Reihe von Techniken zur Verfügung, die Sie beim Erstellen einer Benutzeroberfläche mit Windows Presentation Foundation (WPF) verwenden können. Sie sollten jetzt fundierte Kenntnisse über die grundlegenden Bausteine einer datengebundenen .NET Framework-Anwendung haben. Dieses Thema kann natürlich keinen Anspruch auf Vollständigkeit erheben, aber sicherlich haben Sie jetzt ein Gespür für einige der Möglichkeiten, die Sie noch zusätzlich zu den in diesem Thema veranschaulichten Techniken entdecken können.

Ausführliche Informationen zu Bereichen finden Sie unter Übersicht über Panel-Elemente. Ausführliche Informationen zu Datenvorlagen finden Sie unter Übersicht über Datenvorlagen.

Siehe auch

Konzepte

Das Layoutsystem

Übersicht über Panel-Elemente

Übersicht über Datenbindung

Übersicht über Datenvorlagen

Erstellen einer WPF-Anwendung (WPF)