Exemplarische Vorgehensweise: Erste Schritte mit WPF

  • Artikel

Diese exemplarische Vorgehensweise bietet eine 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.

Diese exemplarische Vorgehensweise führt Sie mithilfe der folgenden Schritte durch die Entwicklung einer einfachen WPF-Anwendung.

  • Definieren Sie XAML, um die Darstellung der user interface (UI) der Anwendung 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 hinzu und erstellen Sie das Layout, aus dem die UI der Anwendung zusammengesetzt werden soll.

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

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

Nach Abschluss der exemplarischen Vorgehensweise 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 dieser exemplarischen Vorgehensweise verwendet wird, steht sowohl für Microsoft Visual Basic als auch für C# unter Einführung in das Erstellen von Windows Presentation Foundation-Anwendungen zur Verfügung.

Erforderliche Komponenten

Zum Durchführen dieser exemplarischen Vorgehensweise benötigen Sie die folgenden Komponenten:

  • Visual Studio 2010

Weitere Informationen zum Installieren von Visual Studio finden Sie unter Installieren von Visual Studio.

Erstellen des Anwendungsprojekts

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

  1. Erstellen Sie ein neues WPF-Anwendungsprojekt in Visual Basic oder Visual C# mit dem Namen ExpenseIt. Weitere Informationen finden Sie unter Gewusst wie: Erstellen eines neuen WPF-Anwendungsprojekts.

    HinweisHinweis

    In dieser exemplarischen Vorgehensweise wird das in .NET Framework 4 verfügbare DataGrid-Steuerelement verwendet.Stellen Sie sicher, dass .NET Framework 4 als Zielversion für das Projekt festgelegt ist.Weitere Informationen finden Sie unter Gewusst wie: Ausrichten auf eine bestimmte .NET Framework-Version oder ein bestimmtes .NET Framework-Profil.

  2. Öffnen Sie Application.xaml (Visual Basic) oder App.xaml (C#).

    Diese XAML-Datei definiert eine WPF-Anwendung sowie Anwendungsressourcen. Mithilfe dieser Datei geben Sie auch die UI an, die beim Anwendungsstart automatisch angezeigt wird (in diesem Fall "MainWindow.xaml").

    XAML sollte in Visual Basic wie folgt aussehen:

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

    </Application.Resources>
</Application>

    Oder wie folgt in C#:

    <Application x:Class="ExpenseIt.App"
     xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
     StartupUri="MainWindow.xaml">
    <Application.Resources>

    </Application.Resources>
</Application>

  3. Öffnen Sie MainWindow.xaml.

    Diese XAML-Datei ist das Hauptfenster der Anwendung und zeigt erstellten Inhalt in Seiten an. Die Window-Klasse definiert die Eigenschaften eines Fensters wie Titel, Größe oder Symbol, und behandelt Ereignisse wie Schließen oder Ausblenden.

  4. Ändern Sie das Window-Element in ein NavigationWindow.

    Diese Anwendung navigiert je nach Benutzerinteraktion zu anderem Inhalt. Daher muss das Haupt-Window in ein NavigationWindow geändert werden. NavigationWindow erbt alle Eigenschaften von Window. Das NavigationWindow-Element in der XAML-Datei erstellt eine Instanz der NavigationWindow-Klasse. Weitere Informationen finden Sie unter Übersicht über die Navigation.

  5. Ändern Sie die folgenden Eigenschaften im NavigationWindow-Element:

    • Legen Sie die Title-Eigenschaft auf "ExpenseIt" fest.

    • Legen Sie die Width-Eigenschaft auf 500 Pixel fest.

    • Legen Sie die Height-Eigenschaft auf 350 Pixel fest.

    • Entfernen Sie die Grid-Elemente zwischen den NavigationWindow-Tags.

    XAML sollte in Visual Basic wie folgt aussehen:

    <NavigationWindow x:Class="MainWindow"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="ExpenseIt" Height="350" Width="500">

</NavigationWindow>

    Oder wie folgt in C#:

    <NavigationWindow x:Class="ExpenseIt.MainWindow"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="ExpenseIt" Height="350" Width="500">

</NavigationWindow>

  6. Öffnen Sie MainWindow.xaml.vb oder MainWindow.xaml.cs.

    Bei dieser Datei handelt es sich um eine CodeBehind-Datei, die Code enthält, um die in MainWindow.xaml deklarierten Ereignisse zu behandeln. Diese Datei enthält eine partielle Klasse für das in XAML definierte Fenster.

  7. Wenn Sie C# verwenden, ändern Sie die MainWindow-Klasse so, dass sie von NavigationWindow abgeleitet wird.

    In Visual Basic geschieht dies automatisch, wenn Sie das Fenster in XAML ändern.

    Der Code muss wie folgt aussehen.

    Class MainWindow

End Class

    using System;
using System.Collections.Generic;
using System.Linq;
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.Navigation;
using System.Windows.Shapes;

namespace ExpenseIt
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : NavigationWindow
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }
}

Hinzufügen von Dateien zur Anwendung

In diesem Abschnitt fügen Sie der Anwendung zwei Seiten und ein Bild hinzu.

  1. Fügen Sie dem Projekt eine neue Seite (WPF) mit dem Namen ExpenseItHome.xaml hinzu. Weitere Informationen finden Sie unter Gewusst wie: Hinzufügen von neuen Elementen zu einem WPF-Projekt.

    Diese Seite ist die erste Seite, die beim Anwendungsstart angezeigt wird. Sie zeigt eine Liste von Personen, aus denen ein Benutzer eine Person auswählen kann, um die zugehörige Spesenabrechnung anzuzeigen.

  2. Öffnen Sie ExpenseItHome.xaml.

  3. Legen Sie den Title auf "ExpenseIt - Home" fest.

    XAML sollte in Visual Basic wie folgt aussehen:

    <Page x:Class="ExpenseItHome"
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006" 
  xmlns:d="https://schemas.microsoft.com/expression/blend/2008" 
  mc:Ignorable="d" 
  d:DesignHeight="300" d:DesignWidth="300"
  Title="ExpenseIt - Home">
    <Grid>

    </Grid>
</Page>

    Oder wie folgt in C#:

    <Page x:Class="ExpenseIt.ExpenseItHome"
      xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="https://schemas.microsoft.com/expression/blend/2008" 
      mc:Ignorable="d" 
      d:DesignHeight="300" d:DesignWidth="300"
    Title="ExpenseIt - Home">

    <Grid>

    </Grid>
</Page>

  4. Öffnen Sie MainWindow.xaml.

  5. Legen Sie die Source-Eigenschaft im NavigationWindow auf "ExpenseItHome.xaml" fest.

    Damit wird ExpenseItHome.xaml als die erste Seite festgelegt, die beim Anwendungsstart geöffnet wird. XAML sollte in Visual Basic wie folgt aussehen:

    <NavigationWindow x:Class="MainWindow"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="ExpenseIt" Height="350" Width="500" Source="ExpenseItHome.xaml">

</NavigationWindow>

    Oder wie folgt in C#:

    <NavigationWindow x:Class="ExpenseIt.MainWindow"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="ExpenseIt" Height="350" Width="500" Source="ExpenseItHome.xaml">

</NavigationWindow>

  6. Fügen Sie dem Projekt eine neue Seite (WPF) mit dem Namen ExpenseReportPage.xaml hinzu.

    Diese Seite zeigt die Spesenabrechnung für die Person an, die auf ExpenseItHome.xaml ausgewählt wird.

  7. Öffnen Sie ExpenseReportPage.xaml.

  8. Legen Sie den Title auf "ExpenseIt - View Expense" fest.

    XAML sollte in Visual Basic wie folgt aussehen:

    <Page x:Class="ExpenseReportPage"
      xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="https://schemas.microsoft.com/expression/blend/2008" 
      mc:Ignorable="d" 
      d:DesignHeight="300" d:DesignWidth="300"
      Title="ExpenseIt - View Expense">
    <Grid>

    </Grid>
</Page>

    Oder wie folgt in C#:

    <Page x:Class="ExpenseIt.ExpenseReportPage"
      xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="https://schemas.microsoft.com/expression/blend/2008" 
      mc:Ignorable="d" 
      d:DesignHeight="300" d:DesignWidth="300"
    Title="ExpenseIt - View Expense">

    <Grid>

    </Grid>
</Page>

  9. Öffnen Sie ExpenseItHome.xaml.vb und ExpenseReportPage.xaml.vb oder ExpenseItHome.xaml.cs und ExpenseReportPage.xaml.cs.

    Wenn Sie eine neue Seitendatei erstellen, erstellt Visual Studio automatisch eine CodeBehind-Datei. Diese CodeBehind-Dateien behandeln die Logik zum Reagieren auf Benutzereingabe.

    Der Code muss wie folgt aussehen.

    Class ExpenseItHome

End Class

    using System;
using System.Collections.Generic;
using System.Linq;
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.Navigation;
using System.Windows.Shapes;

namespace ExpenseIt
{
    /// <summary>
    /// Interaction logic for ExpenseItHome.xaml
    /// </summary>
    public partial class ExpenseItHome : Page
    {
        public ExpenseItHome()
        {
            InitializeComponent();
        }
    }
}

    Class ExpenseReportPage

End Class

    using System;
using System.Collections.Generic;
using System.Linq;
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.Navigation;
using System.Windows.Shapes;

namespace ExpenseIt
{
    /// <summary>
    /// Interaction logic for ExpenseReportPage.xaml
    /// </summary>
    public partial class ExpenseReportPage : Page
    {
        public ExpenseReportPage()
        {
            InitializeComponent();
        }
    }
}

  10. Fügen Sie dem Projekt ein Bild mit dem Namen watermark.png hinzu. Entweder erstellen Sie ein eigenes Bild, oder Sie kopieren die Datei aus dem Beispielcode. Weitere Informationen finden Sie unter Gewusst wie: Hinzufügen von vorhandenen Elementen zu einem Projekt.

Erstellen und Ausführen der Anwendung

In diesem Abschnitt erstellen Sie die Anwendung und führen sie aus.

  1. Erstellen Sie die Anwendung, und führen Sie sie aus, indem Sie F5 drücken, oder wählen Sie Debugging starten im Menü Debuggen aus.

    Die folgende Abbildung zeigt die Anwendung mit den NavigationWindow-Schaltflächen.

    Bildschirmabbildung für ExpenseIt-Beispiel

  2. Schließen Sie die Anwendung, um zu Visual Studio zurückzukehren.

Erstellen des Layouts

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

Jedes dieser Layoutsteuerelemente 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.

HinweisHinweis

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

Im Abschnitt erstellen Sie eine einspaltige Tabelle mit drei Zeilen und einen 10-Pixel-Rand durch Hinzufügen von Spalten- und Zeilendefinitionen zu Grid in ExpenseItHome.xaml.

  1. Öffnen Sie ExpenseItHome.xaml.

  2. Legen Sie die Margin-Eigenschaft im Grid-Element auf "10,0,10,10" für den linken, oberen, rechten und unteren Rand fest.

  3. Fügen Sie folgenden XAML zwischen den Grid-Tags hinzu, um die Zeilen- und Spaltendefinitionen zu erstellen. 

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

    Die Height von zwei Zeilen wird auf Auto festgelegt, was bedeutet, dass die Größe der Zeilen auf dem Inhalt in den Zeilen basiert. Die Standard-Height ist die Star-Größenanpassung, was bedeutet, dass die Zeile eine gewichtete Proportion des verfügbaren Platzes ist. Wenn z. B. zwei Zeilen jeweils eine Höhe von "*" haben, hat jede eine Höhe von der Hälfte des verfügbaren Platzes.

    Das Grid sollte jetzt wie der folgende XAML-Code aussehen:

    <Grid Margin="10,0,10,10">
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition />
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
</Grid>

Hinzufügen von Steuerelementen

In diesem Abschnitt wird die UI der Homepage aktualisiert, um eine Liste der Personen anzuzeigen, aus denen Benutzer eine Person auswählen können, um die zugehörige Spesenabrechnung anzuzeigen. Steuerelemente sind Benutzeroberflächenobjekte, die Benutzern die Interaktion mit der Anwendung ermöglichen. Weitere Informationen finden Sie unter Steuerelemente.

Um diese UI zu erstellen, werden ExpenseItHome.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)

Jedes Steuerelement wird in einer Zeile von Grid platziert, indem die angefügte Grid.Row-Eigenschaft festgelegt wird. Weitere Informationen zu angefügten Eigenschaften finden Sie unter Übersicht über angefügte Eigenschaften.

  1. Öffnen Sie ExpenseItHome.xaml.

  2. Fügen Sie folgenden XAML zwischen den Grid-Tags hinzu.

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

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

Die folgende Abbildung zeigt die Steuerelemente, die von XAML in diesem Abschnitt erstellt werden.

Bildschirmabbildung für ExpenseIt-Beispiel

Hinzufügen eines Bilds und eines Titels

In diesem Abschnitt wird die UI der Homepage mit einem Bild und einem Seitentitel aktualisiert.

  1. Öffnen Sie ExpenseItHome.xaml.

  2. Fügen Sie ColumnDefinitions eine weitere Spalte mit einer festen Width von 230 Pixel hinzu.

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

  3. Fügen Sie RowDefinitions eine weitere Zeile hinzu.

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

  4. Verschieben Sie die Steuerelemente in die zweite Spalte, indem Sie Grid.Column auf 1 festlegen. Verschieben Sie jedes Steuerelement eine Zeile nach unten, indem Sie Grid.Row um 1 erhöhen.

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

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

  5. Legen Sie den Background von Grid auf die Bilddatei watermark.png fest.

    <Grid.Background>
    <ImageBrush ImageSource="watermark.png"/>
</Grid.Background>

  6. Fügen Sie vor Border eine Label mit dem Inhalt "View Expense Report" als Titel der Seite hinzu.

    <Label Grid.Column="1" VerticalAlignment="Center" FontFamily="Trebuchet MS" 
        FontWeight="Bold" FontSize="18" Foreground="#0066cc">
    View Expense Report
</Label>

  7. Erstellen Sie die Anwendung, und führen Sie sie aus.

In der folgenden Abbildung sind die Ergebnisse dieses Abschnitts dargestellt.

Bildschirmabbildung für ExpenseIt-Beispiel

Schreiben von Code zum Behandeln von Ereignissen

  1. Öffnen Sie ExpenseItHome.xaml.

  2. Fügen Sie einen Click-Ereignishandler zum Button-Element hinzu. Weitere Informationen finden Sie unter Gewusst wie: Erstellen eines einfachen Ereignishandlers.

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

  3. Öffnen Sie ExpenseItHome.xaml.vb oder ExpenseItHome.xaml.cs.

  4. Fügen Sie folgenden Code zum Click-Ereignishandler hinzu, der bewirkt, dass im Fenster zur Datei ExpenseReportPage.xaml navigiert wird.

            Private Sub Button_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
            ' View Expense Report
            Dim expenseReportPage As New ExpenseReportPage()
            Me.NavigationService.Navigate(expenseReportPage)

        End Sub

    private void Button_Click(object sender, RoutedEventArgs e)
{
    // 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 ExpenseItHome.xaml ausgewählt wurde. In diesem Abschnitt werden Steuerelemente hinzugefügt und die UI für ExpenseReportPage.xaml erstellt. Außerdem werden den verschiedenen UI-Elementen Hintergrund und Füllfarben hinzugefügt.

  1. Öffnen Sie ExpenseReportPage.xaml.

  2. Fügen Sie folgenden XAML-Code zwischen den Grid-Tags hinzu.

    Dieses Benutzeroberfläche ähnelt der für "ExpenseItHome.xaml" erstellten Benutzeroberfläche, die Berichtsdaten werden hier jedoch in einem DataGrid angezeigt.

    <Grid.Background>
    <ImageBrush ImageSource="watermark.png" />
</Grid.Background>
<Grid.ColumnDefinitions>
    <ColumnDefinition Width="230" />
    <ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition />
</Grid.RowDefinitions>


<Label Grid.Column="1" VerticalAlignment="Center" FontFamily="Trebuchet MS" 
FontWeight="Bold" FontSize="18" Foreground="#0066cc">
    Expense Report For:
</Label>
<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="2" VerticalAlignment="Top" 
          HorizontalAlignment="Left">
        <!-- Expense type and Amount table -->
        <DataGrid  AutoGenerateColumns="False" RowHeaderWidth="0" >
            <DataGrid.ColumnHeaderStyle>
                <Style TargetType="{x:Type DataGridColumnHeader}">
                    <Setter Property="Height" Value="35" />
                    <Setter Property="Padding" Value="5" />
                    <Setter Property="Background" Value="#4E87D4" />
                    <Setter Property="Foreground" Value="White" />
                </Style>
            </DataGrid.ColumnHeaderStyle>
            <DataGrid.Columns>
                <DataGridTextColumn Header="ExpenseType" />
                <DataGridTextColumn Header="Amount"  />
            </DataGrid.Columns>
        </DataGrid>
    </Grid>
</Grid>

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

    HinweisHinweis

    Falls ein Fehler angezeigt wird, dass das DataGrid nicht gefunden wurde oder nicht vorhanden ist, überprüfen Sie, ob .NET Framework 4 als Zielversion für das Projekt festgelegt ist.Weitere Informationen finden Sie unter Gewusst wie: Ausrichten auf eine bestimmte .NET Framework-Version oder ein bestimmtes .NET Framework-Profil.

  4. Klicken Sie auf die Schaltfläche Ansicht.

    Die Seite mit der Spesenabrechnung wird angezeigt.

Die folgende Abbildung zeigt die zu ExpenseReportPage.xaml hinzugefügten UI-Elemente. Beachten Sie, dass die Schaltflächen für die Navigation zurück aktiviert wird.

Bildschirmabbildung für ExpenseIt-Beispiel

Formatieren von Steuerelementen

Die Darstellung verschiedener Elemente ist häufig für alle Elemente desselben Typs in einer UI identisch. UI verwendet Stile, damit Darstellungen in mehreren Elementen wieder verwendet werden können. Die Wiederverwendbarkeit von Stilen vereinfacht die XAML-Erstellung und -Verwaltung. Weitere Informationen zu Stilen finden Sie unter Erstellen von Formaten und Vorlagen. Dieser Abschnitt ersetzt die Attribute pro Element, die in den vorherigen Schritten mit Stilen definiert wurden.

  1. Öffnen Sie Application.xaml oder App.xaml.

  2. Fügen Sie folgenden XAML-Code zwischen den Application.Resources-Tags hinzu:

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

<!-- DataGrid header style -->
<Style x:Key="columnHeaderStyle" TargetType="{x:Type DataGridColumnHeader}">
    <Setter Property="Height" Value="35" />
    <Setter Property="Padding" Value="5" />
    <Setter Property="Background" Value="#4E87D4" />
    <Setter Property="Foreground" Value="White" />
</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>

    XAML fügt die folgenden Stile hinzu:

    • headerTextStyle: Zum Formatieren des Seitentitels Label

    • labelStyle: Zum Formatieren der Label-Steuerelemente.

    • columnHeaderStyle: Zum Formatieren der DataGridColumnHeader

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

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

    • buttonStyle: Zum Formatieren der Button auf ExpenseItHome.xaml.

    Beachten Sie, dass es sich bei den Stilen um Ressourcen und untergeordnete Elemente des Application.Resources-Eigenschaftenelements handelt. 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 ExpenseItHome.xaml.

  4. Ersetzen Sie alles zwischen den Grid-Elementen durch den folgenden XAML-Code.

    <Grid.Background>
    <ImageBrush ImageSource="watermark.png"  />
</Grid.Background>

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

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

<!-- People list -->

<Label Grid.Column="1" Style="{StaticResource headerTextStyle}" >
    View Expense Report
</Label>

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

<!-- View report button -->
<Button Grid.Column="1" Grid.Row="3" Click="Button_Click" Style="{StaticResource buttonStyle}">View</Button>

    Die Eigenschaften wie VerticalAlignment und FontFamily, die die Darstellung jedes Steuerelements definieren, werden entfernt und durch Anwenden der Stile ersetzt. Der headerTextStyle wird z. B. auf die Label "View Expense Report" angewendet.

  5. Öffnen Sie ExpenseReportPage.xaml.

  6. Ersetzen Sie alles zwischen den Grid-Elementen durch den folgenden XAML-Code.

    <Grid.Background>
    <ImageBrush ImageSource="watermark.png" />
</Grid.Background>
<Grid.ColumnDefinitions>
    <ColumnDefinition Width="230" />
    <ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition />
</Grid.RowDefinitions>


<Label Grid.Column="1" Style="{StaticResource headerTextStyle}">
    Expense Report For:
</Label>
<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="2" VerticalAlignment="Top" 
          HorizontalAlignment="Left">
        <!-- Expense type and Amount table -->
        <DataGrid ColumnHeaderStyle="{StaticResource columnHeaderStyle}" 
                  AutoGenerateColumns="False" RowHeaderWidth="0" >
            <DataGrid.Columns>
                <DataGridTextColumn Header="ExpenseType" />
                <DataGridTextColumn Header="Amount"  />
            </DataGrid.Columns>
        </DataGrid>
    </Grid>
</Grid>

    Damit werden den Elementen Label und Border Stile hinzugefügt.

  7. Erstellen Sie die Anwendung, und führen Sie sie aus.

    Nachdem Sie in diesem Abschnitt XAML hinzugefügt haben, sieht die Anwendung genauso aus wie vor der Aktualisierung mit Stilen.

Binden von Daten an ein Steuerelement

In diesem Abschnitt erstellen Sie die XML-Daten, die an verschiedene Steuerelemente gebunden werden.

  1. Öffnen Sie ExpenseItHome.xaml.

  2. Fügen Sie nach dem öffnenden Grid-Element den folgenden XAML-Code hinzu, um einen XmlDataProvider zu erstellen, der die Daten für jede Person enthält.

    Die Daten werden als Grid-Ressource erstellt. Normalerweise würde diese als Datei geladen, der Einfachheit halber werden die Daten jedoch inline hinzugefügt.

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


...


</Grid.Resources>

  3. Fügen Sie in der Grid-Ressource die folgende DataTemplate hinzu, die definiert, wie die Daten im ListBox angezeigt werden. Weitere Informationen zu Datenvorlagen finden Sie unter Übersicht über Datenvorlagen.

    <Grid.Resources>


...


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


...


</Grid.Resources>

  4. Ersetzen Sie das vorhandene ListBox durch folgenden XAML-Code.

    <ListBox Name="peopleListBox" Grid.Column="1" Grid.Row="2" 
         ItemsSource="{Binding Source={StaticResource ExpenseDataSource}, XPath=Person}"
         ItemTemplate="{StaticResource nameItemTemplate}">
</ListBox>

    Dieser XAML-Code bindet die ItemsSource-Eigenschaft von ListBox an die Datenquelle und übernimmt die Datenvorlage als ItemTemplate.

Verbinden von Daten mit Steuerelementen

In diesem Abschnitt schreiben Sie Code, der das aktuelle Element, das in der Liste der Personen auf der Seite ExpenseItHome.xaml 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 ExpenseReportPage.xaml.vb oder ExpenseReportPage.xaml.cs.

  2. Fügen Sie einen Konstruktor hinzu, der ein Objekt akzeptiert, damit Sie die Spesenabrechnungsdaten der ausgewählten Person übergeben können.

        Partial Public Class ExpenseReportPage
        Inherits Page
        Public Sub New()
            InitializeComponent()
        End Sub

        ' Custom constructor to pass expense report data
        Public Sub New(ByVal data As Object)
            Me.New()
            ' Bind to expense report data.
            Me.DataContext = data
        End Sub

    End Class

    public partial class ExpenseReportPage : Page
{
    public ExpenseReportPage()
    {
        InitializeComponent();
    }

    // Custom constructor to pass expense report data
    public ExpenseReportPage(object data):this()
    {
        // Bind to expense report data.
        this.DataContext = data;
    }

}

  3. Öffnen Sie ExpenseItHome.xaml.vb oder ExpenseItHome.xaml.cs.

  4. Ändern Sie den Click-Ereignishandler, um den neuen Konstruktor aufzurufen, der die Spesenabrechnungsdaten der ausgewählten Person übergibt.

            Private Sub Button_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
            ' View Expense Report
            Dim expenseReportPage As New ExpenseReportPage(Me.peopleListBox.SelectedItem)
            Me.NavigationService.Navigate(expenseReportPage)

        End Sub

    private void Button_Click(object sender, RoutedEventArgs e)
{
    // View Expense Report
    ExpenseReportPage expenseReportPage = new ExpenseReportPage(this.peopleListBox.SelectedItem);
    this.NavigationService.Navigate(expenseReportPage);

}

Formatieren von Daten mit Datenvorlagen

In diesem Abschnitt aktualisieren Sie mithilfe von Datenvorlagen die UI für jedes Element in den datengebundenen Listen.

  1. Öffnen Sie ExpenseReportPage.xaml.

  2. Binden Sie den Inhalt der Label-Elemente "Name" und "Department" an die entsprechende Datenquelleneigenschaft. Weitere Informationen zur Datenbindung finden Sie unter Übersicht über Datenbindung.

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

  3. Fügen Sie nach dem öffnenden Grid-Element die folgenden Datenvorlagen hinzu, die definieren, wie die Spesenabrechnungsdaten angezeigt werden.

    <!--Templates to display expense report data-->
<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>

  4. Wenden Sie die Vorlagen auf die DataGrid-Spalten an, in denen die Spesenabrechnungsdaten angezeigt werden.

    <!-- Expense type and Amount table -->
<DataGrid ItemsSource="{Binding XPath=Expense}" ColumnHeaderStyle="{StaticResource columnHeaderStyle}" AutoGenerateColumns="False" RowHeaderWidth="0" >

    <DataGrid.Columns>
        <DataGridTextColumn Header="ExpenseType" Binding="{Binding XPath=@ExpenseType}"  />
        <DataGridTextColumn Header="Amount" Binding="{Binding XPath=@ExpenseAmount}" />
    </DataGrid.Columns>

</DataGrid>

  5. Erstellen Sie die Anwendung, und führen Sie sie aus.

  6. Wählen Sie eine Person aus, und klicken Sie auf die Schaltfläche Ansicht.

Die folgende Abbildung zeigt die beiden Seiten der ExpenseIt-Anwendung mit angewendeten Steuerelementen, Stilen, Datenbindungen, Datenvorlagen und Layout.

Bildschirmabbildungen für ExpenseIt-Beispiel

Bewährte Methoden

In diesem Beispiel soll nur eine bestimmte Funktion von WPF veranschaulicht werden, daher werden die bewährten Methoden für die Anwendungsentwicklung nicht befolgt. Ausführliche Informationen über bewährte Methoden bei der Anwendungsentwicklung für WPF und .NET Framework finden Sie unter folgenden Themen:

Weitere Informationen

Ihnen stehen jetzt eine Reihe von Techniken zur Verfügung, die Sie beim Erstellen einer UI 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.

Weitere Informationen zur WPF-Architektur und Programmiermodellen finden Sie unter den folgenden Themen:

Weitere Informationen zum Erstellen von Anwendungen finden Sie unter den folgenden Themen:

Siehe auch

Konzepte

Übersicht über Panel-Elemente

Übersicht über Datenvorlagen

Erstellen einer WPF-Anwendung (WPF)

Weitere Ressourcen

Stile und Vorlagen

Änderungsprotokoll

Datum

Versionsgeschichte

Grund

Dezember 2010

Hinweise zum Festlegen von .NET Framework 4 als Zielversion wurden hinzugefügt.

Informationsergänzung.