Freigeben über

Lernprogramm: Erstellen Ihrer ersten WPF-Anwendung in Visual Studio 2019

In diesem Artikel erfahren Sie, wie Sie eine Windows Presentation Foundation (WPF)-Desktopanwendung entwickeln, die die Elemente enthält, die für die meisten WPF-Anwendungen gemeinsam sind: Xaml-Markup (Extensible Application Markup Language), CodeBehind, Anwendungsdefinitionen, Steuerelemente, Layout, Datenbindung und Formatvorlagen. Zum Entwickeln der Anwendung verwenden Sie Visual Studio.

Von Bedeutung

Dieser Artikel wurde für .NET Framework geschrieben. Informationen zu den ersten Schritten mit .NET finden Sie im Lernprogramm: Erstellen einer neuen WPF-App (WPF .NET).To get started with .NET, see Tutorial: Create a new WPF app (WPF .NET).

In diesem Tutorial lernen Sie Folgendes:

  • Erstellen Sie ein WPF-Projekt.
  • Verwenden Sie XAML, um die Darstellung der Benutzeroberfläche der Anwendung zu entwerfen.
  • Schreiben Sie Code, um das Verhalten der Anwendung zu erstellen.
  • Erstellen Sie eine Anwendungsdefinition zum Verwalten der Anwendung.
  • Fügen Sie Steuerelemente hinzu, und erstellen Sie das Layout, um die Benutzeroberfläche der Anwendung zu erstellen.
  • Erstellen Sie Formatvorlagen für ein einheitliches Erscheinungsbild auf der Gesamten Benutzeroberfläche der Anwendung.
  • Binden Sie die Benutzeroberfläche an Daten, um die Benutzeroberfläche aus Daten zu füllen und die Daten und die Benutzeroberfläche zu synchronisieren.

Am Ende des Lernprogramms haben Sie eine eigenständige Windows-Anwendung erstellt, mit der Benutzer Spesenabrechnungen für ausgewählte Personen anzeigen können. Die Anwendung besteht aus mehreren WPF-Seiten, die in einem Browserformatfenster gehostet werden.

Tipp

Der beispielcode, der in diesem Lernprogramm verwendet wird, ist sowohl für Visual Basic als auch für C# im Lernprogramm für WPF-App-Beispielcode verfügbar.

Sie können die Codesprache des Beispielcodes zwischen C# und Visual Basic umschalten, indem Sie die Sprachauswahl oben auf dieser Seite verwenden.

Voraussetzungen

Erstellen des Anwendungsprojekts

Der erste Schritt besteht darin, die Anwendungsinfrastruktur zu erstellen, die eine Anwendungsdefinition, zwei Seiten und ein Image enthält.

  1. Erstellen Eines neuen WPF-Anwendungsprojekts in Visual Basic oder Visual C# mit dem Namen ExpenseIt:

    1. Öffnen Sie Visual Studio, und wählen Sie unter dem Menü "Erste Schritte" die Option "Neues Projekt erstellen" aus.

      Das Dialogfeld Neues Projekt erstellen wird geöffnet.

    2. Wählen Sie im Dropdownmenü "Sprache " entweder C# oder Visual Basic aus.

    3. Wählen Sie die WPF-App-Vorlage (.NET Framework) und dann "Weiter" aus.

      Dialogfeld

      Das Dialogfeld " Neues Projekt konfigurieren " wird geöffnet.

    4. Geben Sie den Projektnamen ExpenseIt ein, und wählen Sie dann "Erstellen" aus.

      Konfigurieren eines neuen Projektdialogfelds

      Visual Studio erstellt das Projekt und öffnet den Designer für das Standardanwendungsfenster " MainWindow.xaml".

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

    Diese XAML-Datei definiert eine WPF-Anwendung und alle Anwendungsressourcen. Sie verwenden diese Datei auch, um die Benutzeroberfläche anzugeben, in diesem Fall "MainWindow.xaml", die automatisch angezeigt wird, wenn die Anwendung gestartet wird.

    Ihr XAML sollte in Visual Basic wie folgt aussehen:

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

    Und wie folgt in C#:

    <Application x:Class="ExpenseIt.App"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://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 Ihrer Anwendung und zeigt Inhalte an, die auf Seiten erstellt wurden. Die Window Klasse definiert die Eigenschaften eines Fensters, z. B. den Titel, die Größe oder das Symbol, und behandelt Ereignisse, z. B. schließen oder ausblenden.

  4. Ändern Sie das Window Element in ein NavigationWindow, wie im folgenden XAML-Code dargestellt:

    <NavigationWindow x:Class="ExpenseIt.MainWindow"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     ...
</NavigationWindow>

    Diese App navigiert je nach Benutzereingabe zu unterschiedlichen Inhalten. Deshalb 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 in der Navigationsübersicht.

  5. Entfernen Sie die Grid Elemente zwischen den NavigationWindow Tags.

  6. Ändern Sie die folgenden Eigenschaften im XAML-Code für das NavigationWindow Element:

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

    • Legen Sie die Height Eigenschaft auf 350 Pixel fest.

    • Legen Sie die Width Eigenschaft auf 500 Pixel fest.

    Ihr XAML sollte wie folgt für Visual Basic aussehen:

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

    Und so sieht es für C# aus:

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

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

    Diese Datei ist 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.

  8. Wenn Sie C# verwenden, ändern Sie die MainWindow Klasse so, dass sie von NavigationWindowabgeleitet wird. (In Visual Basic erfolgt dies automatisch, wenn Sie das Fenster in XAML ändern.) Ihr C#-Code sollte nun wie folgt aussehen:

    
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 hinzu, und nennen Sie sie ExpenseItHome.xaml:

    1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den ExpenseIt Projektknoten, und wählen Sie "Seite hinzufügen"> aus.

    2. Im Dialogfeld "Neues Element hinzufügen " ist die Vorlage "Seite" (WPF) bereits ausgewählt. Geben Sie den Namen ExpenseItHomeein, und wählen Sie dann "Hinzufügen" aus.

    Diese Seite ist die erste Seite, die beim Starten der Anwendung angezeigt wird. Es wird eine Liste von Personen angezeigt, aus der sie auswählen können, um eine Spesenabrechnung anzuzeigen.

  2. Öffnen Sie ExpenseItHome.xaml.

  3. Setzen Sie Title auf "ExpenseIt - Home".

  4. Legen Sie die DesignHeight Auflösung auf 350 Pixel und auf DesignWidth 500 Pixel fest.

    Der XAML-Code wird nun wie folgt für Visual Basic angezeigt:

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

    Und so sieht es für C# aus:

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

    <Grid>
        
    </Grid>
</Page>

  5. Öffnen Sie "MainWindow.xaml".

  6. Fügen Sie dem Source Element eine NavigationWindow Eigenschaft hinzu, und legen Sie sie auf "ExpenseItHome.xaml" fest.

    Dies legt ExpenseItHome.xaml als die erste Seite fest, die geöffnet wird, wenn die Anwendung startet.

    Beispiel-XAML in Visual Basic:

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

    Und in C#:

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

    Tipp

    Sie können die Source-Eigenschaft auch in der Kategorie " Sonstiges " des Eigenschaftenfensters festlegen.

    Quelleigenschaft im Eigenschaftenfenster

  7. Fügen Sie dem Projekt eine weitere neue WPF-Seite hinzu, und nennen Sie sie ExpenseReportPage.xaml::

    1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den ExpenseIt Projektknoten, und wählen Sie "Seite hinzufügen"> aus.

    2. Wählen Sie im Dialogfeld " Neues Element hinzufügen " die Vorlage "Seite (WPF)" aus. Geben Sie den Namen "ExpenseReportPage" ein, und wählen Sie dann "Hinzufügen" aus.

    Auf dieser Seite wird die Spesenabrechnung für die Person angezeigt, die auf der ExpenseItHome Seite ausgewählt ist.

  8. Öffnen Sie ExpenseReportPage.xaml.

  9. Setzen Sie Title auf "ExpenseIt - View Expense".

  10. Legen Sie die DesignHeight Auflösung auf 350 Pixel und auf DesignWidth 500 Pixel fest.

    ExpenseReportPage.xaml sieht nun wie folgt in Visual Basic aus:

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

    Und wie folgt in C#:

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

    <Grid>
        
    </Grid>
</Page>

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

    Wenn Sie eine neue Page-Datei erstellen, erstellt Visual Studio automatisch die CodeBehind-Datei . Diese CodeBehind-Dateien behandeln die Logik für die Reaktion auf Benutzereingaben.

    Ihr Code sollte wie folgt aussehen:ExpenseItHome

    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 ExpenseItHome

End Class

    Und wie folgt für ExpenseReportPage:

    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();
        }
    }
}

    Class ExpenseReportPage

End Class

  12. Fügen Sie dem Projekt ein Bild mit dem Namen watermark.png hinzu. Sie können Ein eigenes Bild erstellen, die Datei aus dem Beispielcode kopieren oder aus dem GitHub-Repository von Microsoft/WPF-Samples abrufen.

    1. Klicken Sie mit der rechten Maustasteauf den Projektknoten, und wählen >Vorhandenes Element hinzufügen" aus, oder drücken Sie ++ ALT A.

    2. Legen Sie im Dialogfeld " Vorhandenes Element hinzufügen " den Dateifilter auf " Alle Dateien " oder " Bilddateien" fest, navigieren Sie zu der gewünschten Bilddatei, und wählen Sie dann "Hinzufügen" aus.

    3. Wählen Sie die Bilddatei im Projektmappen-Explorer aus, und legen Sie dann im EigenschaftenfensterBuildaktion auf Ressource fest.

Erstellen und Ausführen der Anwendung

  1. Um die Anwendung zu erstellen und auszuführen, drücken Sie F5, oder wählen Sie im Menü "Debuggen" die Option "Debuggen starten" aus.

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

    Anwendung, nachdem Sie sie erstellt und ausgeführt haben.

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

Erstellen des Layouts

Das Layout bietet eine geordnete Möglichkeit zum Platzieren von UI-Elementen und verwaltet auch die Größe und Position dieser Elemente, wenn die Größe einer Benutzeroberfläche geändert wird. Normalerweise erstellen Sie ein Layout mit einem der folgenden Layoutsteuerelemente:

  • Canvas – Definiert einen Bereich, in dem untergeordnete Elemente explizit positioniert werden können, indem Sie Koordinaten verwenden, die relativ zum Canvasbereich sind.
  • DockPanel – Definiert einen Bereich, in dem Sie Kindelemente horizontal oder vertikal relativ zueinander anordnen können.
  • Grid – Definiert einen flexiblen Rasterbereich, der aus Spalten und Zeilen besteht.
  • StackPanel - Ordnet untergeordnete Elemente in einer einzelnen Linie an, die horizontal oder vertikal ausgerichtet werden kann.
  • VirtualizingStackPanel – Ordnet Inhalte in einer einzelnen Zeile an, die horizontal oder vertikal ausgerichtet ist, und virtualisiert sie.
  • WrapPanel - Positioniert untergeordnete Elemente in sequenzieller Position von links nach rechts, um den Inhalt an der nächsten Zeile am Rand des enthaltenden Felds zu unterbrechen. Nachfolgende Sortierung erfolgt sequenziell von oben nach unten oder von rechts nach links, je nach Wert der Orientation-Eigenschaft.

Jedes dieser Layoutsteuerelemente unterstützt einen bestimmten Layouttyp für die untergeordneten Elemente. ExpenseIt Seiten können in der Größe verändert werden, und jede Seite verfügt über Elemente, die horizontal und vertikal neben anderen Elementen angeordnet sind. In diesem Beispiel wird das Grid Als Layoutelement für die Anwendung verwendet.

Tipp

Weitere Informationen zu Panel Elementen finden Sie in der Übersicht über Panels. Weitere Informationen zum Layout finden Sie unter Layout.

In diesem Abschnitt erstellen Sie eine einspaltige Tabelle mit drei Zeilen und einem Rand von 10 Pixeln, indem Sie Spalten- und Zeilendefinitionen zu Grid in ExpenseItHome.xaml hinzufügen.

  1. ExpenseItHome.xamlLegen Sie in der Margin Eigenschaft für das Grid Element den Wert "10,0,10,10" fest, der den linken, oberen, rechten und unteren Rändern entspricht:

    <Grid Margin="10,0,10,10">

    Tipp

    Sie können die Randwerte auch im Eigenschaftenfenster unter der Kategorie "Layout " festlegen:

    Randwerte im Eigenschaftenfenster

  2. Fügen Sie den folgenden XAML-Code 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 ist auf Autofestgelegt, was bedeutet, dass die Zeilen basierend auf dem Inhalt in den Zeilen angepasst werden. Die Standardgröße Height ist Star-Größenanpassung, was bedeutet, dass die Zeilenhöhe ein gewichteter Anteil des verfügbaren Platzes ist. Wenn beispielsweise zwei Zeilen jeweils ein Height "*" aufweisen, verfügen sie jeweils über eine Höhe, die die Hälfte des verfügbaren Platzes ist.

    Ihr Grid sollte jetzt den folgenden XAML-Code enthalten:

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

Steuerelemente hinzufügen

In diesem Abschnitt aktualisieren Sie die Startseiten-UI so, dass eine Liste von Personen angezeigt wird, in der Sie eine Person auswählen, um deren Spesenabrechnung anzuzeigen. Steuerelemente sind UI-Objekte, mit denen Benutzer mit Ihrer Anwendung interagieren können. Weitere Informationen finden Sie unter Steuerelemente.

Um diese Benutzeroberfläche zu erstellen, fügen Sie die folgenden Elemente hinzu:ExpenseItHome.xaml

  • A ListBox (für die Personenliste).
  • A Label (für den Listenkopf).
  • A Button (zum Klicken, um die Spesenabrechnung für die Person anzuzeigen, die in der Liste ausgewählt ist).

Jedes Steuerelement wird durch Festlegen der angefügten Eigenschaft in einer Zeile des Grid platziert. Weitere Informationen zu angefügten Eigenschaften finden Sie unter "Übersicht über angefügte Eigenschaften".

  1. In ExpenseItHome.xaml fügen Sie den folgenden XAML-Code irgendwo 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,10" Width="125" Height="25" HorizontalAlignment="Right">View</Button>

    Tipp

    Sie können die Steuerelemente auch erstellen, indem Sie sie aus dem Toolboxfenster auf das Entwurfsfenster ziehen und dann ihre Eigenschaften im Eigenschaftenfenster festlegen.

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

    Die folgende Abbildung zeigt die von Ihnen erstellten Steuerelemente:

Screenshot des Beispiels

Hinzufügen eines Bilds und eines Titels

In diesem Abschnitt aktualisieren Sie die Startseiten-UI mit einem Bild und einem Seitentitel.

  1. Fügen ExpenseItHome.xamlSie der ColumnDefinitions Spalte eine weitere Spalte mit einer festen Größe Width von 230 Pixeln hinzu:

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

  2. Fügen Sie dem RowDefinitions eine weitere Zeile hinzu, sodass es insgesamt vier Zeilen sind.

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

  3. Verschieben Sie die Steuerelemente in die zweite Spalte, indem Sie die Grid.Column Eigenschaft in jedem der drei Steuerelemente (Border, ListBox und Button) auf 1 festlegen.

  4. Verschieben Sie jedes Steuerelement in einer Zeile nach unten, indem Sie den Grid.Row Wert für jedes der drei Steuerelemente (Border, ListBox und Button) und für das Border-Element um 1 erhöhen.

    Der XAML-Code für die drei Steuerelemente sieht nun wie folgt aus:

      <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 die Background-Eigenschaft auf die watermark.png Bilddatei fest, indem Sie den folgenden XAML-Code an einer beliebigen Stelle zwischen den <Grid> Tags </Grid> hinzufügen:

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

  6. Fügen Sie vor dem Border-Element einen Label mit dem Inhalt "Spesenabrechnung anzeigen" hinzu. Diese Bezeichnung ist der Titel der Seite.

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

Die folgende Abbildung zeigt die Ergebnisse der gerade hinzugefügten Elemente:

Screenshot des Beispiels

Hinzufügen von Code zum Behandeln von Ereignissen

  1. Fügen Sie dem ExpenseItHome.xaml Element einen Click Ereignishandler in Button hinzu. Weitere Informationen finden Sie unter How to: Create a simple event handler.

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

  2. Öffnen ExpenseItHome.xaml.vb oder ExpenseItHome.xaml.cs.

  3. Fügen Sie der ExpenseItHome Klasse den folgenden Code hinzu, um einen Klickereignishandler für Schaltflächen hinzuzufügen. Der Ereignishandler öffnet die ExpenseReportPage-Seite .

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

    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

Erstellen der Benutzeroberfläche für ExpenseReportPage

ExpenseReportPage.xaml zeigt die Spesenabrechnung für die Person an, die auf der ExpenseItHome Seite ausgewählt ist. In diesem Abschnitt erstellen Sie die Benutzeroberfläche für ExpenseReportPage. Außerdem fügen Sie den verschiedenen UI-Elementen Hintergrund- und Füllfarben hinzu.

  1. Öffnen Sie ExpenseReportPage.xaml.

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

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

    Diese Benutzeroberfläche ähnelt ExpenseItHome.xaml, mit dem Unterschied, dass die Berichtsdaten in einem DataGrid angezeigt werden.

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

  4. Wählen Sie die Schaltfläche "Ansicht" aus.

    Die Seite "Spesenabrechnung" wird angezeigt. Beachten Sie außerdem, dass die Zurücknavigationsschaltfläche aktiviert ist.

Die folgende Abbildung zeigt die UI-Elemente, die "ExpenseReportPage.xaml" hinzugefügt wurden.

Screenshot des Beispiels

Stilsteuerungen

Das Erscheinungsbild verschiedener Elemente ist häufig für alle Elemente desselben Typs in einer Benutzeroberfläche identisch. Die Benutzeroberfläche verwendet Stile , um Darstellungen für mehrere Elemente wiederverwendbar zu machen. Die Wiederverwendbarkeit von Formatvorlagen trägt zur Vereinfachung der XAML-Erstellung und -Verwaltung bei. In diesem Abschnitt werden die Attribute pro Element, die in vorherigen Schritten definiert wurden, durch Formatvorlagen ersetzt.

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

  2. Fügen Sie den 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>

    Dieser XAML-Code fügt die folgenden Stile hinzu:

    • headerTextStyle: Zum Formatieren des Seitentitels Label.

    • labelStyle: So formatieren Sie die Label Steuerelemente.

    • columnHeaderStyle: So formatieren Sie die DataGridColumnHeader.

    • listHeaderStyle: So formatieren Sie die Listenkopfsteuerelemente Border .

    • listHeaderTextStyle: So formatieren Sie die Listenkopfzeile Label.

    • buttonStyle: Das Button auf ExpenseItHome.xaml formatieren.

    Beachten Sie, dass die Stile Ressourcen und untergeordnete Elemente des Application.Resources-Eigenschaftselements sind. An diesem Ort werden die Stile auf alle Elemente einer Anwendung angewendet. Ein Beispiel für die Verwendung von Ressourcen in einer .NET-App finden Sie unter Verwenden von Anwendungsressourcen.

  3. In ExpenseItHome.xaml alles zwischen den Grid-Elementen durch den folgenden XAML-Code ersetzen.

       <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 das Aussehen jedes Steuerelements definieren, werden entfernt und durch das Anwenden der Formatvorlagen ersetzt. Dies wird beispielsweise headerTextStyle auf die "Spesenabrechnung anzeigen" Labelangewendet.

  4. Öffnen Sie ExpenseReportPage.xaml.

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

    Dieser XAML-Code fügt Formatvorlagen zu den Elementen Label und Border hinzu.

  6. Erstellen Sie die Anwendung, und führen Sie sie aus. Die Fensterdarstellung ist identisch mit zuvor.

    Screenshot des ExpenseIt-Beispiels mit der gleichen Darstellung wie im letzten Abschnitt.

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

Binden von Daten an ein Steuerelement

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

  1. Fügen Sie nach dem öffnenden ExpenseItHome.xaml-Element im Grid den folgenden XAML-Code hinzu, um ein XmlDataProvider zu erstellen, das die Daten für jede Person enthält.

    <Grid.Resources>
    <!-- Expense Report Data -->
    <XmlDataProvider x:Key="ExpenseDataSource" XPath="Expenses">
        <x:XData>
            <Expenses xmlns="">
                <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>

    Die Daten werden als Grid Ressource erstellt. Normalerweise würden diese Daten als Datei geladen, aber aus Gründen der Einfachheit werden die Daten inline hinzugefügt.

  2. <Grid.Resources> Fügen Sie im Element das folgende <xref:System.Windows.DataTemplate> Element hinzu, das definiert, wie die Daten im ListBoxElement nach dem <XmlDataProvider> Element angezeigt werden:

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

    Weitere Informationen zu Datenvorlagen finden Sie unter Übersicht über Datenvorlagen.

  3. Ersetzen Sie das vorhandene Element ListBox durch den 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 wendet die Datenvorlage als ItemTemplate an.

Verbinden von Daten mit Steuerelementen

Als Nächstes fügen Sie Code hinzu, um den auf der ExpenseItHome Seite ausgewählten Namen abzurufen und an den Konstruktor von ExpenseReportPage zu übergeben. ExpenseReportPage legt den Datenkontext mit dem übergebenen Element fest, an das die in ExpenseReportPage.xaml definierten Steuerelemente gebunden sind.

  1. Öffnen Sie ExpenseReportPage.xaml.vb oder ExpenseReportPage.xaml.cs.

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

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

    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

  3. Öffnen 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 void Button_Click(object sender, RoutedEventArgs e)
{
    // View Expense Report
    ExpenseReportPage expenseReportPage = new ExpenseReportPage(this.peopleListBox.SelectedItem);
    this.NavigationService.Navigate(expenseReportPage);
}

    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

Formatieren von Daten mit Datenvorlagen

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

  1. Öffnen Sie ExpenseReportPage.xaml.

  2. Binden Sie den Inhalt der Elemente "Name" und "Department" Label an die entsprechende Datenquelleneigenschaft. Weitere Informationen zur Datenbindung finden Sie in der Übersicht über die 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. Ersetzen Sie die DataGridTextColumn-Elemente durch DataGridTemplateColumn-Elemente unter dem DataGrid-Element, und wenden Sie die Vorlagen darauf an. Geben Sie außerdem das ItemsSource Attribut mit dem Wert im DataGrid Element an.

    <!-- Expense type and Amount table -->
<DataGrid ItemsSource="{Binding XPath=Expense}" ColumnHeaderStyle="{StaticResource columnHeaderStyle}" AutoGenerateColumns="False" RowHeaderWidth="0" >
   
    <DataGrid.Columns>
        <DataGridTemplateColumn Header="ExpenseType" CellTemplate="{StaticResource typeItemTemplate}" />
        <DataGridTemplateColumn Header="Amount" CellTemplate="{StaticResource amountItemTemplate}" />
    </DataGrid.Columns>
    
</DataGrid>

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

  6. Wählen Sie eine Person und dann die Schaltfläche "Ansicht " aus.

Die folgende Abbildung zeigt beide Seiten der Anwendung ExpenseIt mit verwendeten Steuerelementen, Layouts, Formatvorlagen, Datenbindungen und Datentemplates.

Beide Seiten der App mit der Namensliste und einer Spesenabrechnung.

Hinweis

In diesem Beispiel wird ein bestimmtes Feature von WPF veranschaulicht und nicht alle bewährten Methoden für Sicherheit, Lokalisierung und Barrierefreiheit befolgt. Eine umfassende Abdeckung von WPF und bewährten Methoden für die .NET-App-Entwicklung finden Sie in den folgenden Themen:

Nächste Schritte

In dieser exemplarischen Vorgehensweise haben Sie eine Reihe von Techniken zum Erstellen einer Benutzeroberfläche mit Windows Presentation Foundation (WPF) kennengelernt. Sie sollten jetzt ein grundlegendes Verständnis der Bausteine einer datengebundenen .NET-App haben. Weitere Informationen zu den WPF-Architektur- und Programmiermodellen finden Sie in den folgenden Themen:

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

Siehe auch