Tutorial: Erstellen Ihrer ersten WPF-Anwendung in Visual Studio 2019Tutorial: Create your first WPF application in Visual Studio 2019

In diesem Artikel erfahren Sie, wie Sie eine WPF-Desktop Anwendung (Windows Presentation Foundation) entwickeln, die die Elemente enthält, die den meisten WPF-Anwendungen gemeinsam sind: Extensible Application Markup Language (XAML)-Markup, Code Behind, Anwendungs Definitionen, Steuerelemente, Layout, Datenbindung und Stile.This article shows you how to develop a Windows Presentation Foundation (WPF) desktop application that includes the elements that are common to most WPF applications: Extensible Application Markup Language (XAML) markup, code-behind, application definitions, controls, layout, data binding, and styles. Zum Entwickeln der Anwendung verwenden Sie Visual Studio.To develop the application, you'll use Visual Studio.

In diesem Tutorial lernen Sie, wie die folgenden Aufgaben ausgeführt werden:In this tutorial, you learn how to:

  • Erstellen Sie ein WPF-Projekt.Create a WPF project.
  • Verwenden Sie XAML, um die Darstellung der Benutzeroberfläche der Anwendung zu entwerfen.Use XAML to design the appearance of the application's user interface (UI).
  • Schreiben Sie Code, um das Verhalten der Anwendung zu erstellen.Write code to build the application's behavior.
  • Erstellen Sie eine Anwendungs Definition, um die Anwendung zu verwalten.Create an application definition to manage the application.
  • Fügen Sie Steuerelemente hinzu, und erstellen Sie das Layout zum Verfassen der Anwendungs Benutzeroberfläche.Add controls and create the layout to compose the application UI.
  • Erstellen Sie Stile für ein konsistentes Erscheinungsbild in der Benutzeroberfläche der Anwendung.Create styles for a consistent appearance throughout the application's UI.
  • Binden Sie die Benutzeroberfläche an Daten, um die Benutzeroberfläche von Daten aufzufüllen und die Daten und die Benutzeroberfläche zu synchronisieren.Bind the UI to data, both to populate the UI from data and to keep the data and UI synchronized.

Am Ende des Tutorials haben Sie eine eigenständige Windows-Anwendung erstellt, die es Benutzern ermöglicht, Ausgaben Berichte für ausgewählte Personen anzuzeigen.By the end of the tutorial, you'll have built a standalone Windows application that allows users to view expense reports for selected people. Die Anwendung besteht aus mehreren WPF-Seiten, die in einem Browserfenster gehostet werden.The application is composed of several WPF pages that are hosted in a browser-style window.

Tipp

Der Beispielcode, der in diesem Lernprogramm verwendet wird, ist sowohl für C# Visual Basic als auch unter Tutorial WPF-App-Beispielcodeverfügbar.The sample code that is used in this tutorial is available for both Visual Basic and C# at Tutorial WPF App Sample Code.

Sie können die Codesprache des Beispielcodes zwischen C# und Visual Basic umschalten, indem Sie die Sprachauswahl auf dieser Seite verwenden.You can toggle the code language of the sample code between C# and Visual Basic by using the language selector on top of this page.

Erforderliche VoraussetzungenPrerequisites

Erstellen des Anwendungs ProjektsCreate the application project

Der erste Schritt besteht darin, die Anwendungs Infrastruktur zu erstellen, die eine Anwendungs Definition, zwei Seiten und ein Bild enthält.The first step is to create the application infrastructure, which includes an application definition, two pages, and an image.

  1. Erstellen Sie ein neues WPF-Anwendungsprojekt in Visual Basic C# oder visuellen ExpenseIt mit dem Namen:Create a new WPF Application project in Visual Basic or Visual C# named ExpenseIt:

    1. Öffnen Sie Visual Studio, und wählen Sie im Menü " Get Started " die Option Neues Projekt erstellen aus.Open Visual Studio and select Create a new project under the Get started menu.

      Das Dialogfeld Neues Projekt erstellen wird geöffnet.The Create a new project dialog opens.

    2. Wählen Sie in der Dropdown Liste Sprache C# entweder oder Visual Basicaus.In the Language dropdown, select either C# or Visual Basic.

    3. Wählen Sie die Vorlage WPF-App (.NET Framework) aus, und klicken Sie dann auf weiter.Select the WPF App (.NET Framework) template and then select Next.

      Dialogfeld "Neues Projekt erstellen"

      Das Dialogfeld Neues Projekt konfigurieren wird geöffnet.The Configure your new project dialog opens.

    4. Geben Sie den Projektnamen ExpenseIt ein, und wählen Sie dann Erstellenaus.Enter the project name ExpenseIt and then select Create.

      Dialogfeld "Neues Projekt konfigurieren"

      Visual Studio erstellt das Projekt und öffnet den Designer für das Standard Anwendungsfenster namens MainWindow. XAML.Visual Studio creates the project and opens the designer for the default application window named MainWindow.xaml.

  2. Öffnen Sie " Application. XAML (Visual Basic)" oder " app. XAML (C#)".Open Application.xaml (Visual Basic) or App.xaml (C#).

    Diese XAML-Datei definiert eine WPF-Anwendung und alle Anwendungs Ressourcen.This XAML file defines a WPF application and any application resources. Außerdem verwenden Sie diese Datei, um die Benutzeroberfläche anzugeben, in diesem Fall " MainWindow. XAML", die automatisch anzeigt, wann die Anwendung gestartet wird.You also use this file to specify the UI, in this case MainWindow.xaml, that automatically shows when the application starts.

    Der XAML-Code sollte in Visual Basic wie folgt aussehen:Your XAML should look like the following in Visual Basic:

    <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 im C#folgenden Beispiel:And like the following 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".Open MainWindow.xaml.

    Diese XAML-Datei ist das Hauptfenster der Anwendung und zeigt in Seiten erstellte Inhalte an.This XAML file is the main window of your application and displays content created in pages. Die Window-Klasse definiert die Eigenschaften eines Fensters, z. b. Titel, Größe oder Symbol, und behandelt Ereignisse, z. b. das Schließen oder ausblenden.The Window class defines the properties of a window, such as its title, size, or icon, and handles events, such as closing or hiding.

  4. Ändern Sie das Window-Element in ein NavigationWindow, wie im folgenden XAML-Code dargestellt:Change the Window element to a NavigationWindow, as shown in the following XAML:

    <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 abhängig von der Benutzereingabe zu einem anderen Inhalt.This app navigates to different content depending on the user input. Aus diesem Grund muss der Haupt Window in eine NavigationWindowgeändert werden.This is why the main Window needs to be changed to a NavigationWindow. NavigationWindow erbt alle Eigenschaften von Window.NavigationWindow inherits all the properties of Window. Das NavigationWindow-Element in der XAML-Datei erstellt eine Instanz der NavigationWindow-Klasse.The NavigationWindow element in the XAML file creates an instance of the NavigationWindow class. Weitere Informationen finden Sie unter Übersicht über die Navigation.For more information, see Navigation overview.

  5. Entfernen Sie die Grid Elemente zwischen den NavigationWindow-Tags.Remove the Grid elements from between the NavigationWindow tags.

  6. Ändern Sie die folgenden Eigenschaften im XAML-Code für das NavigationWindow-Element:Change the following properties in the XAML code for the NavigationWindow element:

    • Legen Sie die Title-Eigenschaft auf "ExpenseIt" fest.Set the Title property to "ExpenseIt".

    • Legen Sie die Height-Eigenschaft auf 350 Pixel fest.Set the Height property to 350 pixels.

    • Legen Sie die Width-Eigenschaft auf 500 Pixel fest.Set the Width property to 500 pixels.

    Der XAML-Code sollte für Visual Basic wie folgt aussehen:Your XAML should look like the following for 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">
     
    </NavigationWindow>
    

    Und wie im folgenden Beispiel C#für:And like the following for 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">
        
    </NavigationWindow>
    
  7. Öffnen Sie " MainWindow. XAML. vb " oder " MainWindow.XAML.cs".Open MainWindow.xaml.vb or MainWindow.xaml.cs.

    Bei dieser Datei handelt es sich um eine Code Behind-Datei, die Code zum Behandeln der in " MainWindow. XAML" deklarierten Ereignisse enthält.This file is a code-behind file that contains code to handle the events declared in MainWindow.xaml. Diese Datei enthält eine partielle Klasse für das in XAML definierte Fenster.This file contains a partial class for the window defined in XAML.

  8. Wenn Sie verwenden C#, ändern Sie die MainWindow-Klasse so, dass Sie von NavigationWindowabgeleitet wird.If you're using C#, change the MainWindow class to derive from NavigationWindow. (In Visual Basic erfolgt dies automatisch, wenn Sie das Fenster in XAML ändern.) Der C# Code sollte nun wie folgt aussehen:(In Visual Basic, this happens automatically when you change the window in XAML.) Your C# code should now look like this:

    
    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 AnwendungAdd files to the application

In diesem Abschnitt fügen Sie der Anwendung zwei Seiten und ein Bild hinzu.In this section, you'll add two pages and an image to the application.

  1. Fügen Sie dem Projekt eine neue Seite hinzu, und benennen Sie Sie ExpenseItHome.xaml :Add a new page to the project, and name it ExpenseItHome.xaml:

    1. Klicken Sie in Projektmappen-Explorermit der rechten Maustaste auf den Projekt Knoten ExpenseIt , und wählen Sie > Seite Hinzufügen aus.In Solution Explorer, right-click on the ExpenseIt project node and choose Add > Page.

    2. Im Dialogfeld Neues Element hinzufügen ist die Seite (WPF -Vorlage) bereits ausgewählt.In the Add New Item dialog, the Page (WPF) template is already selected. Geben Sie den Namen ExpenseItHome ein, und klicken Sie dann auf Hinzufügen.Enter the name ExpenseItHome, and then select Add.

    Diese Seite ist die erste Seite, die angezeigt wird, wenn die Anwendung gestartet wird.This page is the first page that's displayed when the application is launched. Es wird eine Liste der Personen angezeigt, aus denen Sie auswählen können, um einen Spesen Abrechnungs Bericht anzuzeigen.It will show a list of people to select from, to show an expense report for.

  2. Öffnen Sie ExpenseItHome.xaml .Open ExpenseItHome.xaml.

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

  4. Legen Sie den DesignHeight auf 350 Pixel und die DesignWidth auf 500 Pixel fest.Set the DesignHeight to 350 pixels and the DesignWidth to 500 pixels.

    Der XAML-Code wird nun wie folgt für Visual Basic angezeigt:The XAML now appears as follows for Visual Basic:

    <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 wie im folgenden Beispiel C#für:And like the following for C#:

    <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".Open MainWindow.xaml.

  6. Fügen Sie dem NavigationWindow-Element eine Source-Eigenschaft hinzu, und legen Sie Sie auf "ExpenseItHome.xaml" fest.Add a Source property to the NavigationWindow element and set it to "ExpenseItHome.xaml".

    Dadurch wird ExpenseItHome.xaml als erste Seite festgelegt, die beim Start der Anwendung geöffnet wird.This sets ExpenseItHome.xaml to be the first page opened when the application starts.

    Beispiel-XAML in Visual Basic:Example 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#:And 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 auch die Eigenschaft Quelle in der Kategorie Verschiedenes im Fenster Eigenschaften festlegen.You can also set the Source property in the Miscellaneous category of the Properties window.

    Quell Eigenschaft in Eigenschaftenfenster

  7. Fügen Sie dem Projekt eine weitere neue WPF-Seite hinzu, und nennen Sie Sie ExpenseReportPage. XAML::Add another new WPF page to the project, and name it ExpenseReportPage.xaml::

    1. Klicken Sie in Projektmappen-Explorermit der rechten Maustaste auf den Projekt Knoten ExpenseIt , und wählen Sie > Seite Hinzufügen aus.In Solution Explorer, right-click on the ExpenseIt project node and choose Add > Page.

    2. Wählen Sie im Dialogfeld Neues Element hinzufügen die Vorlage Page (WPF) aus.In the Add New Item dialog, select the Page (WPF) template. Geben Sie den Namen ExpenseReportPageein, und klicken Sie dann auf Hinzufügen.Enter the name ExpenseReportPage, and then select Add.

    Auf dieser Seite wird der Ausgaben Bericht für die Person angezeigt, die auf der Seite ExpenseItHome ausgewählt ist.This page will show the expense report for the person that is selected on the ExpenseItHome page.

  8. Öffnen Sie ExpenseReportPage.xaml.Open ExpenseReportPage.xaml.

  9. Legen Sie den Title auf "ExpenseIt - View Expense" fest.Set the Title to "ExpenseIt - View Expense".

  10. Legen Sie den DesignHeight auf 350 Pixel und die DesignWidth auf 500 Pixel fest.Set the DesignHeight to 350 pixels and the DesignWidth to 500 pixels.

    ExpenseReportPage. XAML sieht nun in Visual Basic wie folgt aus:ExpenseReportPage.xaml now looks like the following in Visual Basic:

    <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 im C#folgenden Beispiel:And like the following 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. vboder ExpenseItHome.XAML.cs und ExpenseReportPage.XAML.cs.Open ExpenseItHome.xaml.vb and ExpenseReportPage.xaml.vb, or ExpenseItHome.xaml.cs and ExpenseReportPage.xaml.cs.

    Wenn Sie eine neue Auslagerungs Datei erstellen, erstellt Visual Studio automatisch die zugehörige Code Behind- Datei.When you create a new Page file, Visual Studio automatically creates its code-behind file. Diese CodeBehind-Dateien behandeln die Logik zum Reagieren auf Benutzereingabe.These code-behind files handle the logic for responding to user input.

    Der Code sollte für ExpenseItHome wie folgt aussehen:Your code should look like the following for 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 im folgenden für ExpenseReportPage:And like the following for 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.Add an image named watermark.png to the project. Sie können ein eigenes Image erstellen, die Datei aus dem Beispielcode kopieren oder aus dem GitHub -Repository Microsoft/WPF-Samples herunterladen.You can create your own image, copy the file from the sample code, or get it from the microsoft/WPF-Samples GitHub repository.

    1. Klicken Sie mit der rechten Maustaste auf den Projekt Knoten, und wählen Sie > Vorhandenes Element Hinzufügen , oder drücken Sie UMSCHALT+alt+A.Right-click on the project node and select Add > Existing Item, or press Shift+Alt+A.

    2. Legen Sie im Dialogfeld Vorhandenes Element hinzufügen für den Dateifilter entweder alle Dateien oder Bilddateienfest, navigieren Sie zu der Bilddatei, die Sie verwenden möchten, und wählen Sie dann Hinzufügenaus.In the Add Existing Item dialog, set the file filter to either All Files or Image Files, browse to the image file you want to use, and then select Add.

Erstellen eines Builds und Ausführen der AnwendungBuild and run the application

  1. Zum Erstellen und Ausführen der Anwendung drücken Sie F5 , oder wählen Sie im Menü Debuggen die Option Debuggen startenTo build and run the application, press F5 or select Start Debugging from the Debug menu.

    Die folgende Abbildung zeigt die Anwendung mit den NavigationWindow-Schaltflächen:The following illustration shows the application with the NavigationWindow buttons:

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

  2. Schließen Sie die Anwendung, um zu Visual Studio zurückzukehren.Close the application to return to Visual Studio.

Layout erstellenCreate the layout

Layout bietet eine geordnete Methode zum Platzieren von Benutzeroberflächen Elementen und verwaltet auch die Größe und Position dieser Elemente, wenn die Größe einer Benutzeroberfläche geändert wird.Layout provides an ordered way to place UI elements, and also manages the size and position of those elements when a UI is resized. In der Regel erstellen Sie Layout mit einem der folgenden Layoutsteuerelemente:You typically create a layout with one of the following layout controls:

  • Canvas: definiert einen Bereich, in dem Sie untergeordnete Elemente explizit mithilfe von Koordinaten positionieren können, die relativ zum Canvas-Bereich sind.Canvas - Defines an area within which you can explicitly position child elements by using coordinates that are relative to the Canvas area.
  • DockPanel: definiert einen Bereich, in dem Sie untergeordnete Elemente entweder horizontal oder vertikal relativ zueinander anordnen können.DockPanel - Defines an area where you can arrange child elements either horizontally or vertically, relative to each other.
  • Grid: definiert einen flexiblen Raster Bereich, der aus Spalten und Zeilen besteht.Grid - Defines a flexible grid area that consists of columns and rows.
  • StackPanel ordnet untergeordnete Elemente in einer einzelnen Zeile an, die horizontal oder vertikal ausgerichtet werden kann.StackPanel - Arranges child elements into a single line that can be oriented horizontally or vertically.
  • VirtualizingStackPanel ordnet Inhalte in einer einzelnen Zeile an, die horizontal oder vertikal ausgerichtet ist, und virtualisiert Sie.VirtualizingStackPanel - Arranges and virtualizes content on a single line that is oriented either horizontally or vertically.
  • WrapPanel positioniert untergeordnete Elemente in sequenzieller Position von links nach rechts, wobei der Inhalt in die nächste Zeile am Rand des enthaltenden Felds unterteilt wird.WrapPanel - Positions child elements in sequential position from left to right, breaking content to the next line at the edge of the containing box. Die nachfolgende Reihenfolge erfolgt nacheinander von oben nach unten oder von rechts nach links, abhängig vom Wert der Orientation-Eigenschaft.Subsequent ordering happens sequentially from top to bottom or from right to left, depending on the value of the Orientation property.

Jedes dieser Layoutsteuerelemente unterstützt einen bestimmten Layouttyp für seine untergeordneten Elemente.Each of these layout controls supports a particular type of layout for its child elements. die Größe ExpenseIt Seiten kann geändert werden, und jede Seite verfügt über Elemente, die horizontal und vertikal zusammen mit anderen Elementen angeordnet werden.ExpenseIt pages can be resized, and each page has elements that are arranged horizontally and vertically alongside other elements. In diesem Beispiel wird der Grid als Layout-Element für die Anwendung verwendet.In this example, the Grid is used as layout element for the application.

Tipp

Weitere Informationen zu Panel Elementen finden Sie unter Übersicht über Panels.For more information about Panel elements, see Panels overview. Weitere Informationen zum Layout finden Sie unter Layout.For more information about layout, see Layout.

In diesem Abschnitt erstellen Sie eine einspaltige Tabelle mit drei Zeilen und einem 10-Pixel-Rand, indem Sie der Grid in ExpenseItHome.xaml Spalten-und Zeilen Definitionen hinzufügen.In this section, you create a single-column table with three rows and a 10-pixel margin by adding column and row definitions to the Grid in ExpenseItHome.xaml.

  1. Legen Sie in ExpenseItHome.xaml die Margin-Eigenschaft des Elements Grid auf "10, 0, 10, 10" fest, was den linken, oberen, rechten und unteren Rändern entspricht:In ExpenseItHome.xaml, set the Margin property on the Grid element to "10,0,10,10", which corresponds to left, top, right and bottom margins:

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

    Tipp

    Sie können auch die Rand Werte im Eigenschaften Fenster unter der Kategorie Layout festlegen:You can also set the Margin values in the Properties window, under the Layout category:

    Margin-Werte in Eigenschaftenfenster

  2. Fügen Sie den folgenden XAML-Code zwischen den Grid Tags hinzu, um die Zeilen-und Spaltendefinitionen zu erstellen:Add the following XAML between the Grid tags to create the row and column definitions:

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

    Die Height von zwei Zeilen wird auf Autofestgelegt, was bedeutet, dass die Zeilen basierend auf dem Inhalt in den Zeilen skaliert werden.The Height of two rows is set to Auto, which means that the rows are sized based on the content in the rows. Der Standard Height ist Star Größe, was bedeutet, dass die Zeilenhöhe ein gewichteter Anteil des verfügbaren Speicherplatzes ist.The default Height is Star sizing, which means that the row height is a weighted proportion of the available space. Wenn z. b. zwei Zeilen jeweils die Height "*" aufweisen, haben Sie jeweils eine Höhe, die der Hälfte des verfügbaren Speicherplatzes entspricht.For example if two rows each have a Height of "*", they each have a height that is half of the available space.

    Die Grid sollte nun den folgenden XAML-Code enthalten:Your Grid should now contain the following XAML:

    <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ügenAdd controls

In diesem Abschnitt aktualisieren Sie die Benutzeroberfläche der Startseite, um eine Liste der Personen anzuzeigen, in der Sie eine Person auswählen, um Ihren Abrechnungs Bericht anzuzeigen.In this section, you'll update the home page UI to show a list of people, where you select one person to display their expense report. Steuerelemente sind Benutzeroberflächenobjekte, die Benutzern die Interaktion mit der Anwendung ermöglichen.Controls are UI objects that allow users to interact with your application. Weitere Informationen finden Sie unter Steuerelemente.For more information, see Controls.

Um diese Benutzeroberfläche zu erstellen, fügen Sie ExpenseItHome.xaml die folgenden Elemente hinzu:To create this UI, you'll add the following elements to ExpenseItHome.xaml:

  • Eine ListBox (für die Liste der Personen).A ListBox (for the list of people).
  • Eine Label (für den Listen Header).A Label (for the list header).
  • Eine Button (Klicken Sie auf diese Option, um den Ausgaben Bericht für die Person anzuzeigen, die in der Liste ausgewählt ist).A Button (to click to view the expense report for the person that is selected in the list).

Jedes Steuerelement wird in einer Zeile des Grid platziert, indem die Grid.Row angefügte Eigenschaft festgelegt wird.Each control is placed in a row of the Grid by setting the Grid.Row attached property. Weitere Informationen zu angefügten Eigenschaften finden Sie unter Übersicht über angefügte Eigenschaften.For more information about attached properties, see Attached Properties Overview.

  1. Fügen Sie in ExpenseItHome.xaml den folgenden XAML-Code irgendwo zwischen den Grid-Tags hinzu:In ExpenseItHome.xaml, add the following XAML somewhere between the Grid tags:

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

    Tipp

    Sie können die Steuerelemente auch erstellen, indem Sie Sie aus dem Fenster Toolbox in das Entwurfs Fenster ziehen und dann ihre Eigenschaften im Eigenschaften Fenster festlegen.You can also create the controls by dragging them from the Toolbox window onto the design window, and then setting their properties in the Properties window.

  2. Erstellen Sie die Anwendung, und führen Sie sie aus.Build and run the application.

    Die folgende Abbildung zeigt die Steuerelemente, die Sie erstellt haben:The following illustration shows the controls you created:

ExpenseIt-Beispiel Bildschirm Abbildung mit einer Liste von Namen

Hinzufügen eines Bilds und TitelsAdd an image and a title

In diesem Abschnitt aktualisieren Sie die Benutzeroberfläche der Startseite mit einem Bild und einem Seitentitel.In this section, you'll update the home page UI with an image and a page title.

  1. Fügen Sie der ColumnDefinitions in ExpenseItHome.xaml eine weitere Spalte mit einem fester Width von 230 Pixeln hinzu:In ExpenseItHome.xaml, add another column to the ColumnDefinitions with a fixed Width of 230 pixels:

    
        <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 Margin="10,0,10,10">
           
            <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>
                
                <!-- Name item template -->
                <DataTemplate x:Key="nameItemTemplate">
                    <Label Content="{Binding XPath=@Name}"/>
                </DataTemplate>
                
            </Grid.Resources>
          
            <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" 
                     ItemsSource="{Binding Source={StaticResource ExpenseDataSource}, XPath=Person}"
                     ItemTemplate="{StaticResource nameItemTemplate}">
            </ListBox>
         
            <!-- View report button -->
            <Button Grid.Column="1" Grid.Row="3" Click="Button_Click" Style="{StaticResource buttonStyle}">View</Button>
       
    
        </Grid>
    
    </Page>
     
    
  2. Fügen Sie der RowDefinitionseine weitere Zeile hinzu, für insgesamt vier Zeilen:Add another row to the RowDefinitions, for a total of four rows:

    
        <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 Margin="10,0,10,10">
           
            <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>
                
                <!-- Name item template -->
                <DataTemplate x:Key="nameItemTemplate">
                    <Label Content="{Binding XPath=@Name}"/>
                </DataTemplate>
                
            </Grid.Resources>
          
            <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" 
                     ItemsSource="{Binding Source={StaticResource ExpenseDataSource}, XPath=Person}"
                     ItemTemplate="{StaticResource nameItemTemplate}">
            </ListBox>
         
            <!-- View report button -->
            <Button Grid.Column="1" Grid.Row="3" Click="Button_Click" Style="{StaticResource buttonStyle}">View</Button>
       
    
        </Grid>
    
    </Page>
     
    
  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.Move the controls to the second column by setting the Grid.Column property to 1 in each of the three controls (Border, ListBox, and Button).

  4. Verschieben Sie jedes Steuerelement um eine 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.Move each control down a row by incrementing its Grid.Row value by 1 for each of the three controls (Border, ListBox, and Button) and for the Border element.

    Die XAML-Datei für die drei Steuerelemente sieht nun wie folgt aus:The XAML for the three controls now looks like the following:

      <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 Panel.Background-Eigenschaft auf die Bilddatei " Watermark. png " fest, indem Sie den folgenden XAML-Code zwischen den <Grid>-und </Grid>-Tags hinzufügen:Set the Panel.Background property to the watermark.png image file, by adding the following XAML anywhere between the <Grid> and </Grid> tags:

    <Grid.Background>
        <ImageBrush ImageSource="watermark.png"/>
    </Grid.Background>
    
  6. Fügen Sie vor dem Border-Element eine Label mit dem Inhalt "Ansichts Ausgaben Bericht" hinzu.Before the Border element, add a Label with the content "View Expense Report". Diese Bezeichnung ist der Titel der Seite.This label is the title of the page.

    <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.Build and run the application.

Die folgende Abbildung zeigt die Ergebnisse, die Sie soeben hinzugefügt haben:The following illustration shows the results of what you just added:

ExpenseIt-Beispiel Bildschirm Abbildung des neuen Bild Hintergrunds und Seitentitels

Hinzufügen von Code zum Behandeln von EreignissenAdd code to handle events

  1. Fügen Sie in ExpenseItHome.xaml einen Click-Ereignishandler zum Button-Element hinzu.In ExpenseItHome.xaml, add a Click event handler to the Button element. Weitere Informationen finden Sie unter Gewusst wie: Erstellen eines einfachen Ereignis Handlers.For more information, see 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 Sie ExpenseItHome.xaml.vb oder ExpenseItHome.xaml.cs .Open ExpenseItHome.xaml.vb or ExpenseItHome.xaml.cs.

  3. Fügen Sie der ExpenseItHome-Klasse den folgenden Code hinzu, um einen Schaltflächen-Click-Ereignishandler hinzuzufügen.Add the following code to the ExpenseItHome class to add a button click event handler. Der Ereignishandler öffnet die Seite ExpenseReportPage .The event handler opens the ExpenseReportPage page.

    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 ExpenseReportPageCreate the UI for ExpenseReportPage

ExpenseReportPage. XAML zeigt den Ausgaben Bericht für die Person an, die auf der Seite ExpenseItHome ausgewählt ist.ExpenseReportPage.xaml displays the expense report for the person that's selected on the ExpenseItHome page. In diesem Abschnitt erstellen Sie die Benutzeroberfläche für ExpenseReportPage.In this section, you'll create the UI for ExpenseReportPage. Außerdem fügen Sie den verschiedenen Benutzeroberflächen Elementen Hintergrund-und Füll Farben hinzu.You'll also add background and fill colors to the various UI elements.

  1. Öffnen Sie ExpenseReportPage.xaml.Open ExpenseReportPage.xaml.

  2. Fügen Sie den folgenden XAML-Code zwischen den Grid-Tags hinzu:Add the following XAML between the Grid tags:

     <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 einer DataGridangezeigt werden.This UI is similar to ExpenseItHome.xaml, except the report data is displayed in a DataGrid.

  3. Erstellen Sie die Anwendung, und führen Sie sie aus.Build and run the application.

  4. Wählen Sie die Schaltfläche Ansicht aus.Select the View button.

    Die Spesenabrechnungsseite wird angezeigt.The expense report page appears. Beachten Sie auch, dass die Navigations Schaltfläche zurück aktiviert ist.Also notice that the back navigation button is enabled.

Die folgende Abbildung zeigt die Benutzeroberflächen Elemente, die zu ExpenseReportPage. XAMLhinzugefügt werden.The following illustration shows the UI elements added to ExpenseReportPage.xaml.

Der ExpenseIt-Beispiel-Screenshot mit der Benutzeroberfläche, die soeben für die ExpenseReportPage erstellt wurde.

Stil SteuerelementeStyle controls

Die Darstellung verschiedener Elemente ist für alle Elemente desselben Typs in einer Benutzeroberfläche häufig identisch.The appearance of various elements is often the same for all elements of the same type in a UI. Die Benutzeroberfläche verwendet Stile , um die übergreifende Wiederverwendung über mehrere Elemente hinwegUI uses styles to make appearances reusable across multiple elements. Die Wiederverwendbarkeit von Stilen vereinfacht die Erstellung und Verwaltung von XAML.The reusability of styles helps to simplify XAML creation and management. Dieser Abschnitt ersetzt die Attribute pro Element, die in den vorherigen Schritten mit Stilen definiert wurden.This section replaces the per-element attributes that were defined in previous steps with styles.

  1. Öffnen Sie " Application. XAML " oder " app. XAML".Open Application.xaml or App.xaml.

  2. Fügen Sie den folgenden XAML-Code zwischen den Application.Resources-Tags hinzu:Add the following XAML between the Application.Resources tags:

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

    Durch diese XAML werden folgende Stile hinzugefügt:This XAML adds the following styles:

    • headerTextStyle: Zum Formatieren des Seitentitels für Label.headerTextStyle: To format the page title Label.

    • labelStyle: Zum Formatieren der Label -Steuerelemente.labelStyle: To format the Label controls.

    • columnHeaderStyle: Zum Formatieren von DataGridColumnHeader.columnHeaderStyle: To format the DataGridColumnHeader.

    • listHeaderStyle: Zum Formatieren der Border -Kopfzeilensteuerelemente.listHeaderStyle: To format the list header Border controls.

    • listHeaderTextStyle:, um den Listen Header Labelzu formatieren.listHeaderTextStyle: To format the list header Label.

    • buttonStyle:, um die Button auf ExpenseItHome.xamlzu formatieren.buttonStyle: To format the Button on ExpenseItHome.xaml.

    Beachten Sie, dass die Stile Ressourcen und untergeordnete Elemente des Application.Resources Property-Elements sind.Notice that the styles are resources and children of the Application.Resources property element. An diesem Speicherort werden die Stile auf alle Elemente in einer Anwendung angewendet.In this location, the styles are applied to all the elements in an application. Ein Beispiel für die Verwendung von Ressourcen in einer .net-App finden Sie unter Verwenden von Anwendungs Ressourcen.For an example of using resources in a .NET app, see Use Application Resources.

  3. Ersetzen Sie in ExpenseItHome.xaml alles zwischen den Grid Elementen durch den folgenden XAML-Code:In ExpenseItHome.xaml, replace everything between the Grid elements with the following XAML:

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

    Eigenschaften wie VerticalAlignment und FontFamily , die die Darstellung der einzelnen Steuerelemente definieren, werden entfernt und ersetzt, indem die Stile angewendet werden.The properties such as VerticalAlignment and FontFamily that define the look of each control are removed and replaced by applying the styles. Beispielsweise wird der headerTextStyle auf den Label"Kostenbericht anzeigen" angewendet.For example, the headerTextStyle is applied to the "View Expense Report" Label.

  4. Öffnen Sie ExpenseReportPage.xaml.Open ExpenseReportPage.xaml.

  5. Ersetzen Sie alles zwischen den Grid Elementen durch den folgenden XAML-Code:Replace everything between the Grid elements with the following XAML:

      <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 dem Label-Element und dem Border-Element Stile hinzu.This XAML adds styles to the Label and Border elements.

  6. Erstellen Sie die Anwendung, und führen Sie sie aus.Build and run the application. Die Fenster Darstellung ist das gleiche wie zuvor.The window appearance is the same as previously.

    Der ExpenseIt-Beispiel Bildschirm mit derselben Darstellung wie im letzten Abschnitt.

  7. Schließen Sie die Anwendung, um zu Visual Studio zurückzukehren.Close the application to return to Visual Studio.

Binden von Daten an ein SteuerelementBind data to a control

In diesem Abschnitt erstellen Sie die XML-Daten, die an verschiedene Steuerelemente gebunden sind.In this section, you'll create the XML data that is bound to various controls.

  1. Fügen Sie in ExpenseItHome.xaml nach dem öffnenden Grid-Element den folgenden XAML-Code hinzu, um eine XmlDataProvider zu erstellen, die die Daten für jede Person enthält:In ExpenseItHome.xaml, after the opening Grid element, add the following XAML to create an XmlDataProvider that contains the data for each person:

    <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.The data is created as a Grid resource. Normalerweise werden diese Daten als Datei geladen, aber aus Gründen der Einfachheit werden die Daten Inline hinzugefügt.Normally this data would be loaded as a file, but for simplicity the data is added inline.

  2. Fügen Sie im <Grid.Resources>-Element das folgende <xref:System.Windows.DataTemplate>-Element hinzu, das definiert, wie die Daten im ListBoxnach dem <XmlDataProvider>-Element angezeigt werden:Within the <Grid.Resources> element, add the following <xref:System.Windows.DataTemplate> element, which defines how to display the data in the ListBox, after the <XmlDataProvider> element:

    <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.For more information about data templates, see Data templating overview.

  3. Ersetzen Sie die vorhandene ListBox durch den folgenden XAML-Code:Replace the existing ListBox with the following XAML:

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

    Dieses XAML bindet die ItemsSource-Eigenschaft des ListBox an die Datenquelle und wendet die Daten Vorlage als ItemTemplatean.This XAML binds the ItemsSource property of the ListBox to the data source and applies the data template as the ItemTemplate.

Verbinden von Daten mit SteuerelementenConnect data to controls

Als Nächstes fügen Sie Code hinzu, um den Namen abzurufen, der auf der Seite ExpenseItHome ausgewählt ist, und übergeben ihn an den Konstruktor von ExpenseReportPage.Next, you'll add code to retrieve the name that's selected on the ExpenseItHome page and pass it to the constructor of ExpenseReportPage. ExpenseReportPage legt seinen Datenkontext mit dem bestandenen Element fest. Dies ist das, an das die Steuerelemente, die in ExpenseReportPage. XAML definiert sind, an gebunden werden.ExpenseReportPage sets its data context with the passed item, which is what the controls defined in ExpenseReportPage.xaml bind to.

  1. Öffnen Sie ExpenseReportPage.xaml.vb oder ExpenseReportPage.xaml.cs.Open ExpenseReportPage.xaml.vb or 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.Add a constructor that takes an object so you can pass the expense report data of the selected person.

    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 Sie ExpenseItHome.xaml.vb oder ExpenseItHome.xaml.cs .Open ExpenseItHome.xaml.vb or ExpenseItHome.xaml.cs.

  4. Ändern Sie den Click-Ereignishandler, um den neuen Konstruktor aufzurufen, der die Spesen Abrechnungsdaten der ausgewählten Person übergibt.Change the Click event handler to call the new constructor passing the expense report data of the selected person.

    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 DatenvorlagenStyle data with data templates

In diesem Abschnitt aktualisieren Sie die Benutzeroberfläche für jedes Element in den Daten gebundenen Listen mithilfe von Datenvorlagen.In this section, you'll update the UI for each item in the data-bound lists by using data templates.

  1. Öffnen Sie ExpenseReportPage.xaml.Open ExpenseReportPage.xaml.

  2. Binden Sie den Inhalt der Label Elemente "Name" und "Department" an die entsprechende Datenquellen Eigenschaft.Bind the content of the "Name" and "Department" Label elements to the appropriate data source property. Weitere Informationen zur Datenbindung finden Sie unter Übersicht über die Datenbindung.For more information about data binding, see Data binding overview.

    <!-- 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 Spesen Abrechnungsdaten angezeigt werden sollen:After the opening Grid element, add the following data templates, which define how to display the expense report data:

    <!--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 unter dem DataGrid-Element, und wenden Sie die Vorlagen auf diese an.Replace the DataGridTextColumn elements with DataGridTemplateColumn under the DataGrid element and apply the templates to them.

    <!-- 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.Build and run the application.

  6. Wählen Sie eine Person aus, und wählen Sie dann die Schaltfläche Ansicht .Select a person and then select the View button.

Die folgende Abbildung zeigt die beiden Seiten der ExpenseIt Anwendung mit den angewendeten Steuerelementen, Layout, Stilen, Datenbindung und Datenvorlagen:The following illustration shows both pages of the ExpenseIt application with controls, layout, styles, data binding, and data templates applied:

Beide Seiten der APP zeigen die Liste der Namen und einen Spesen Bericht an.

Hinweis

Dieses Beispiel veranschaulicht eine bestimmte Funktion von WPF und folgt nicht allen bewährten Methoden für Dinge wie Sicherheit, Lokalisierung und Barrierefreiheit.This sample demonstrates a specific feature of WPF and doesn't follow all best practices for things like security, localization, and accessibility. Eine umfassende Abdeckung von WPF und bewährten Methoden für die Entwicklung von .net-apps finden Sie in den folgenden Themen:For comprehensive coverage of WPF and the .NET app development best practices, see the following topics:

Nächste SchritteNext steps

In dieser exemplarischen Vorgehensweise haben Sie eine Reihe von Techniken zum Erstellen einer Benutzeroberfläche mithilfe von Windows Presentation Foundation (WPF) kennengelernt.In this walkthrough you learned a number of techniques for creating a UI using Windows Presentation Foundation (WPF). Sie sollten jetzt grundlegende Kenntnisse der Bausteine einer Daten gebundenen .net-APP haben.You should now have a basic understanding of the building blocks of a data-bound .NET app. Weitere Informationen über die WPF-Architektur und -Programmiermodelle finden Sie in den folgenden Themen:For more information about the WPF architecture and programming models, see the following topics:

Weitere Informationen zum Erstellen von Anwendungen finden Sie in den folgenden Themen:For more information about creating applications, see the following topics:

Siehe auchSee also