Exemplarische Vorgehensweise: Meine erste WPF-DesktopanwendungWalkthrough: My first WPF desktop application

In diesem Artikel erfahren Sie, wie Sie eine Windows Presentation Foundation (WPF) desktop-Anwendung entwickeln, die die Elemente enthält, die für die meisten WPF-Anwendungen gelten: Extensible Application Markup Language (XAML) Markup, CodeBehind, Anwendungsdefinitionen, 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. Um die Anwendung zu entwickeln, verwenden Sie Visual Studio.To develop the application, you'll use Visual Studio.

Diese exemplarische Vorgehensweise umfasst die folgenden Schritte aus:This walkthrough includes the following steps:

  • Verwenden Sie XAML zum Entwerfen der Darstellung der Benutzeroberfläche (UI) der Anwendung.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 Anwendungsdefinition, um die Anwendung zu verwalten.Create an application definition to manage the application.

  • Fügen Sie Steuerelemente hinzu, und erstellen Sie das Layout der Benutzeroberfläche die Anwendung zu erstellen.Add controls and create the layout to compose the application UI.

  • Stile für ein konsistentes Erscheinungsbild in der Benutzeroberfläche der Anwendung zu erstellen.Create styles for a consistent appearance throughout the application's UI.

  • Binden Sie die Benutzeroberfläche mit Daten füllen Sie die Benutzeroberfläche von Daten und die Daten und die Benutzeroberfläche, die synchronisiert zu halten.Bind the UI to data, both to populate the UI from data and to keep the data and UI synchronized.

Am Ende dieser exemplarischen Vorgehensweise werden Sie eine eigenständigen Windows-Anwendung erstellt haben, die Benutzer spesenabrechnungen für bestimmte Personen anzeigen können.By the end of the walkthrough, you'll have built a standalone Windows application that allows users to view expense reports for selected people. Die Anwendung besteht aus der WPF-Seiten, die in einem Fenster im Browserstil gehostet werden.The application is composed of several WPF pages that are hosted in a browser-style window.

Tipp

Der Beispielcode, der verwendet wird, in dieser exemplarischen Vorgehensweise ist für Visual Basic verfügbar und C# am Exemplarische Vorgehensweise WPF-App-Beispielcodes.The sample code that is used to build this walkthrough is available for both Visual Basic and C# at Walkthrough WPF App Sample Code.

Sie können die Codesprache des Beispielcodes zwischen umschalten C# und Visual Basic mithilfe der < /> Dropdownliste oben rechts auf der in diesem Artikel.You can toggle the code language of the sample code between C# and Visual Basic by using the </> drop-down on the upper right side of this article.

VorraussetzungenPrerequisites

  • Visual Studio 2017 oder höher (in diesem Artikel wird Visual Studio-2019 verwendet)Visual Studio 2017 or later (this article uses Visual Studio 2019)

    Weitere Informationen zum Installieren der neuesten Version von Visual Studio finden Sie unter Installieren von Visual Studio.For more information about installing the latest version of Visual Studio, see Install Visual Studio.

Erstellen des AnwendungsprojektsCreate the application project

Der erste Schritt ist die Erstellung von Infrastruktur der Anwendung, die eine Anwendungsdefinition, 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 oder Visual c# mit dem Namen ExpenseIt:Create a new WPF Application project in Visual Basic or Visual C# named ExpenseIt:

    1. Öffnen Sie Visual Studio, und wählen Sie Erstellen eines neuen Projekts unter der Einstieg Menü.Open Visual Studio and select Create a new project under the Get started menu.

      Die Erstellen eines neuen Projekts Dialogfeld wird geöffnet.The Create a new project dialog opens.

    2. In der Sprache Dropdownliste, wählen Sie entweder C# oder Visual Basic.In the Language dropdown, select either C# or Visual Basic.

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

      Erstellen Sie ein Dialogfeld "Neues Projekt"

      Die konfigurieren Sie das neue Projekt Dialogfeld wird geöffnet.The Configure your new project dialog opens.

    4. Geben Sie den Namen des Projekts ExpenseIt und wählen Sie dann erstellen.Enter the project name ExpenseIt and then select Create.

      Konfigurieren Sie ein Dialogfeld "Neues Projekt"

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

  2. Open "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 Anwendungsressourcen.This XAML file defines a WPF application and any application resources. Sie verwenden diese Datei auch in diesem Fall an der Benutzeroberfläche "MainWindow.xaml", das automatisch wird angezeigt, wenn 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.

    Ihre XAML 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 der folgende in C#: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. Open "MainWindow.xaml".Open MainWindow.xaml.

    Dieser XAML-Datei ist das Hauptfenster der Anwendung und zeigt erstellten Inhalt auf Seiten.This XAML file is the main window of your application and displays content created in pages. Die Window Klasse definiert die Eigenschaften eines Fensters wie Titel, Größe oder Symbol, und behandelt Ereignisse wie 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 der Window Element eine NavigationWindow, wie in den folgenden XAML 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 zu anderem Inhalt, abhängig von der Benutzereingabe.This app navigates to different content depending on the user input. Deshalb ist die Main Window muss geändert werden, um eine NavigationWindow.This is why the main Window needs to be changed to a NavigationWindow. NavigationWindow erbt alle Eigenschaften des Window.NavigationWindow inherits all the properties of Window. Die 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 in der XAML-Code für die NavigationWindow Element:Change the following properties in the XAML code for the NavigationWindow element:

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

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

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

    Ihre XAML sieht wie folgt für Visual Basic: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 folgt für C#: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. Open "MainWindow.Xaml.vb" oder "MainWindow.Xaml.cs".Open MainWindow.xaml.vb or MainWindow.xaml.cs.

    Diese Datei ist eine Code-Behind-Datei Code zum Behandeln der Ereignisse, die im deklarierten mit "MainWindow.xaml".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. Bei Verwendung von C#, ändern Sie die MainWindow Klasse abgeleitet NavigationWindow.If you're using C#, change the MainWindow class to derive from NavigationWindow. (In Visual Basic geschieht dies automatisch, wenn Sie das Fenster in XAML ändern.) Ihre C# Code sollte jetzt 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, und nennen Sie sie ExpenseItHome.xaml:Add a new page to the project, and name it ExpenseItHome.xaml:

    1. In Projektmappen-Explorer, mit der rechten Maustaste auf die ExpenseIt Projektknoten und wählen hinzufügen > Seite.In Solution Explorer, right-click on the ExpenseIt project node and choose Add > Page.

    2. In der neues Element hinzufügen im Dialogfeld die Seite (WPF) Vorlage bereits ausgewählt ist.In the Add New Item dialog, the Page (WPF) template is already selected. Geben Sie den Namen ExpenseItHome, und wählen Sie dann 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 zeigt eine Liste der Personen an, wählen aus, um eine Spesenabrechnung anzuzeigen.It will show a list of people to select from, to show an expense report for.

  2. Open ExpenseItHome.xaml.Open ExpenseItHome.xaml.

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

  4. Legen Sie die DesignHeight und DesignWidth Elementwerte auf 300 Pixel.Set the DesignHeight and DesignWidth element values to 300 pixels.

    Die XAML sieht nun folgendermaßen für Visual Basic: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="300" d:DesignWidth="300"
      Title="ExpenseIt - Home">
        <Grid>
            
        </Grid>
    </Page>
    

    Und wie folgt für C#: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="300" d:DesignWidth="300"
        Title="ExpenseIt - Home">
    
        <Grid>
            
        </Grid>
    </Page>
    
  5. Open "MainWindow.xaml".Open MainWindow.xaml.

  6. Hinzufügen einer Source Eigenschaft, um die NavigationWindow Element, und legen Sie sie auf "ExpenseItHome.xaml".Add a Source property to the NavigationWindow element and set it to "ExpenseItHome.xaml".

    Hiermit ExpenseItHome.xaml werden von der ersten Seite geöffnet werden soll, wenn die Anwendung gestartet wird.This sets ExpenseItHome.xaml to be the first page opened when the application starts.

    Beispiel für 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 Festlegen der Quelle -Eigenschaft in der Sonstiges Kategorie der Eigenschaften Fenster.You can also set the Source property in the Miscellaneous category of the Properties window.

    Source-Eigenschaft im Fenster "Eigenschaften"

  7. Hinzufügen einer anderen neuen WPF-Seite auf das Projekt, und nennen Sie sie "ExpenseReportPage.xaml"::Add another new WPF page to the project, and name it ExpenseReportPage.xaml::

    1. In Projektmappen-Explorer, mit der rechten Maustaste auf die ExpenseIt Projektknoten und wählen hinzufügen > Seite.In Solution Explorer, right-click on the ExpenseIt project node and choose Add > Page.

    2. In der neues Element hinzufügen wählen Sie im Dialogfeld die Seite (WPF) Vorlage.In the Add New Item dialog, select the Page (WPF) template. Geben Sie den Namen ExpenseReportPage, und wählen Sie dann hinzufügen.Enter the name ExpenseReportPage, and then select Add.

    Auf dieser Seite zeigt die Spesenabrechnung für die Person, die für ausgewählt, wird die ExpenseItHome Seite.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 die Title auf "ExpenseIt - View Expense".Set the Title to "ExpenseIt - View Expense".

  10. Legen Sie die DesignHeight und DesignWidth Elementwerte auf 300 Pixel.Set the DesignHeight and DesignWidth element values to 300 pixels.

    "ExpenseReportPage.xaml" jetzt sieht wie in Visual Basic die folgenden: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="300" d:DesignWidth="300"
          Title="ExpenseIt - View Expense">
        <Grid>
            
        </Grid>
    </Page>
    

    Und wie der folgende in C#: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="300" d:DesignWidth="300"
        Title="ExpenseIt - View Expense">
    
        <Grid>
            
        </Grid>
    </Page>
    
  11. Open "ExpenseItHome.Xaml.vb" und ExpenseReportPage.xaml.vb, oder "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 Seitendatei erstellen, erstellt Visual Studio automatisch die CodeBehind 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 aussehen wie folgt für ExpenseItHome: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 folgt 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 ein Bild mit dem Namen watermark.png zum Projekt.Add an image named watermark.png to the project. Sie können Ihr eigenes Image erstellen, kopieren Sie die Datei aus dem Beispielcode oder erhalten sie hier.You can create your own image, copy the file from the sample code, or get it here.

    1. Mit der rechten Maustaste auf den Projektknoten, und wählen Sie hinzufügen > vorhandenes Element, oder drücken Sie UMSCHALT+Alt + Ein.Right-click on the project node and select Add > Existing Item, or press Shift+Alt+A.

    2. In der vorhandenes Element hinzufügen Dialogfeld legen Sie den Dateifilter entweder alle Dateien oder Bilddateien, navigieren Sie zu dem Image-Datei, die Sie verwenden möchten, und wählen Sie dann hinzufügen .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 die Anwendung auszuführen, drücken Sie die F5 oder wählen Sie Debuggen starten aus der Debuggen Menü.To build and run the application, press F5 or select Start Debugging from the Debug menu.

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

    Die Anwendung nach dem Erstellen und ausführen.

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

Erstellen Sie das layoutCreate the layout

Layout bietet die Möglichkeit, Elemente der Benutzeroberfläche zu platzieren und verwaltet auch die Größe und Position dieser Elemente beim Ändern der Größe einer Benutzeroberflächenautomatisierungs.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 explizit untergeordnete Elemente positionieren können mithilfe von Koordinaten, die relativ zur Canvas 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 Rasterbereich, 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, die horizontal oder vertikal ausgerichtet werden kann.StackPanel - Arranges child elements into a single line that can be oriented horizontally or vertically.
  • VirtualizingStackPanel -Ordnet die und virtualisiert Inhalt in einer einzelnen Zeile, die horizontal oder vertikal ausgerichtet ist.VirtualizingStackPanel - Arranges and virtualizes content on a single line that is oriented either horizontally or vertically.
  • WrapPanel -Positionen untergeordnete Elemente nacheinander von links nach rechts und umbricht den Inhalt in die nächste Zeile am Rand des enthaltenden Felds.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 Sortierung erfolgt sequenziell 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 Typ von Layout für die untergeordneten Elemente.Each of these layout controls supports a particular type of layout for its child elements. ExpenseIt Seiten geändert werden können, und jede Seite verfügt über Elemente, die horizontal und vertikal neben anderen Elementen angeordnet sind.ExpenseIt pages can be resized, and each page has elements that are arranged horizontally and vertically alongside other elements. In diesem Beispiel die Grid als Layoutelement für die Anwendung verwendet wird.In this example, the Grid is used as layout element for the application.

Tipp

Weitere Informationen zu Panel Elemente finden Sie unter Übersicht über Panel.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 einen 10-Pixel-Rand durch Hinzufügen von Spalten- und Zeilendefinitionen zu den Grid in ExpenseItHome.xaml.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. In ExpenseItHome.xaml legen die Margin Eigenschaft für die Grid Element auf "10,0,10,10", auf der linken, oberen, rechten und unteren Ränder 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 Festlegen der Rand Werte in der Eigenschaften Fenster unter dem Layout Kategorie:You can also set the Margin values in the Properties window, under the Layout category:

    Randwerte in Fenster "Eigenschaften"

  2. Fügen Sie das folgende XAML zwischen den Grid Tags aus, 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 zwei Zeilen wird festgelegt Auto, was bedeutet, dass die Größe der Zeilen basierend auf dem Inhalt in den Zeilen.The Height of two rows is set to Auto, which means that the rows are sized based on the content in the rows. Der Standardwert Height ist Star größenanpassung, was bedeutet, dass die Zeilenhöhe eine gewichtete Proportion des verfügbaren Platzes 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 eine Height von "*", sie verfügen jeweils über eine Höhe von der Hälfte des verfügbaren Platzes ist.For example if two rows each have a Height of "*", they each have a height that is half of the available space.

    Ihre Grid sollte nun dem folgenden XAML 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>
    

Hinzufügen von SteuerelementenAdd controls

In diesem Abschnitt Aktualisieren Sie die Homepage Benutzeroberfläche, um eine Liste der Personen, anzuzeigen, wählen Sie, in dem eine Person, die die Spesenabrechnung angezeigt.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 die folgenden Elemente zu ExpenseItHome.xaml:To create this UI, you'll add the following elements to ExpenseItHome.xaml:

  • Ein ListBox (für die Liste der Personen).A ListBox (for the list of people).
  • Ein Label (für den Listenheader).A Label (for the list header).
  • Ein Button (zum klicken, um die Spesenabrechnung 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 platziert die Grid durch Festlegen der Grid.Row angefügte Eigenschaft.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. In ExpenseItHome.xaml, fügen Sie den folgenden XAML an einer beliebigen Stelle zwischen den Grid Tags: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, ziehen sie aus der Toolbox Fenster in das Entwurfsfenster, und klicken Sie dann ihre Einstellungen der Eigenschaften Fenster.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:

Bildschirmabbildung für ExpenseIt-beispielscreenshot zeigt eine Liste von Namen

Fügen Sie ein Image und einen Titel hinzuAdd an image and a title

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

  1. In ExpenseItHome.xaml, fügen Sie eine andere Spalte als die ColumnDefinitions mit einer festen Width von 230 Pixel: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. Hinzufügen zu einer anderen Zeile der RowDefinitions, also 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, durch Festlegen der Grid.Column -Eigenschaft auf 1 in jedem der drei Steuerelemente (Rahmen, ListBox und Schaltfläche ").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 eine Zeile nach unten durch Erhöhen der Grid.Row Wert 1 für jedes der drei Steuerelemente (Rahmen, ListBox und Schaltfläche ") und Border-Elements.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.

    Der XAML für die drei Steuerelemente sieht nun folgendermaßen 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, um die watermark.png Image-Datei, indem Sie den folgenden XAML an einer beliebigen Stelle zwischen Hinzufügen der <Grid> und </Grid> Tags: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. Vor der Border -Element, Hinzufügen einer Label mit dem Inhalt "View Expense Report".Before the Border element, add a Label with the content "View Expense Report". Diese Bezeichnung wird 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 von was Sie gerade hinzugefügt haben:The following illustration shows the results of what you just added:

Bildschirmabbildung für ExpenseIt-beispielscreenshot zeigt die neue Image Hintergrund und den Seitentitel

Fügen Sie Code zum Verarbeiten von EreignissenAdd code to handle events

  1. In ExpenseItHome.xaml, Hinzufügen einer Click -Ereignishandler der Button Element.In ExpenseItHome.xaml, add a Click event handler to the Button element. Weitere Informationen finden Sie unter Vorgehensweise: Erstellen eines einfachen ereignishandlers.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. Open ExpenseItHome.xaml.vb oder ExpenseItHome.xaml.cs.Open ExpenseItHome.xaml.vb or ExpenseItHome.xaml.cs.

  3. Fügen Sie den folgenden Code der ExpenseItHome Klasse, um eine Schaltfläche hinzufügen-click-Ereignishandler.Add the following code to the ExpenseItHome class to add a button click event handler. Der Ereignishandler öffnet die ExpenseReportPage Seite.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 die Spesenabrechnung für die Person, die für ausgewählt, wird die ExpenseItHome Seite.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 Hintergrund und Füllfarben zwischen den verschiedenen UI-Elementen.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 das folgende XAML zwischen den Grid Tags: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, außer dass die Daten des Berichts, in angezeigt werden einem DataGrid.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 Ansicht Schaltfläche.Select the View button.

    Die Spesenabrechnungsseite wird angezeigt.The expense report page appears. Beachten Sie außerdem, dass die Navigationsschaltfläche "zurück" aktiviert ist.Also notice that the back navigation button is enabled.

Die folgende Abbildung zeigt die Elemente der Benutzeroberfläche hinzugefügt "ExpenseReportPage.xaml".The following illustration shows the UI elements added to ExpenseReportPage.xaml.

Bildschirmabbildung für ExpenseIt-Beispiel-Screenshot Anzeigen der Benutzeroberfläche, die gerade erstellt haben, für die ExpenseReportPage.

Formatieren von SteuerelementenStyle controls

Die Darstellung verschiedener Elemente ist häufig für alle Elemente des gleichen Typs in einer Benutzeroberfläche identisch.The appearance of various elements is often the same for all elements of the same type in a UI. Benutzeroberfläche verwendet Stile Darstellungen in mehreren Elementen wieder verwendbaren vornehmen.UI uses styles to make appearances reusable across multiple elements. Die wiederverwendbarkeit von Stilen können Sie die um XAML-Erstellung und Verwaltung zu vereinfachen.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. Open "Application.xaml" oder "App.xaml".Open Application.xaml or App.xaml.

  2. Fügen Sie das folgende XAML zwischen den Application.Resources Tags: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 Label.headerTextStyle: To format the page title Label.

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

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

    • listHeaderStyle: Zum Formatieren der Kopfzeile Border Steuerelemente.listHeaderStyle: To format the list header Border controls.

    • listHeaderTextStyle: Zum Formatieren der Kopfzeile Label.listHeaderTextStyle: To format the list header Label.

    • buttonStyle: Zum Formatieren der Button auf ExpenseItHome.xaml.buttonStyle: To format the Button on ExpenseItHome.xaml.

    Beachten Sie, dass die Ressourcen und die untergeordneten Elemente werden der Application.Resources Property-Element.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 Anwendungsressourcen.For an example of using resources in a .NET app, see Use Application Resources.

  3. In ExpenseItHome.xaml, ersetzen Sie alles zwischen dem Grid Elemente mit den folgenden XAML: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. Z. B. die headerTextStyle gilt für die "View Expense Report" Label.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 dem Grid Elemente mit den folgenden 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 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>
    

    Dieses XAML Stile hinzugefügt. die Label und Border Elemente.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 Darstellung des Fensters ist der gleiche wie zuvor.The window appearance is the same as previously.

    Bildschirmabbildung für ExpenseIt-Beispiel-Screenshot mit die gleiche Darstellung wie im letzten Abschnitt.

  7. Schließen Sie die Anwendung 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 ist.In this section, you'll create the XML data that is bound to various controls.

  1. In ExpenseItHome.xaml, nach dem öffnenden Grid -Element, fügen Sie den folgenden XAML zum Erstellen einer XmlDataProvider , 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 erstellt eine Grid Ressource.The data is created as a Grid resource. Normalerweise würde diese Daten als Datei geladen, aber die Daten werden aus Gründen der Einfachheit Inline hinzugefügt.Normally this data would be loaded as a file, but for simplicity the data is added inline.

  2. In der <Grid.Resources> -Element, fügen Sie die folgenden <xref:System.Windows.DataTemplate> -Element, das definiert, wie Sie die Anzeige der Daten in die ListBox, nachdem die <XmlDataProvider> Element: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 mit den folgenden XAML: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 der ListBox an die Datenquelle und wendet die Datenvorlage als die ItemTemplate.This XAML binds the ItemsSource property of the ListBox to the data source and applies the data template as the ItemTemplate.

Verbinden Sie Daten an SteuerelementeConnect data to controls

Anschließend fügen Sie Code zum Abrufen des Namens, der ausgewählt wird die ExpenseItHome Seite, und übergeben Sie es an den Konstruktor der 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 den Datenkontext mithilfe des übergebenen Elements, die die Steuerelemente definierten in "ExpenseReportPage.xaml" Binden an.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. Open ExpenseItHome.xaml.vb oder ExpenseItHome.xaml.cs.Open ExpenseItHome.xaml.vb or ExpenseItHome.xaml.cs.

  4. Ändern der Click -Ereignishandler aufrufen, den neuen Konstruktor, der die Spesenabrechnungsdaten der ausgewählten Person übergeben.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
    

Style-Daten mit DatenvorlagenStyle data with data templates

In diesem Abschnitt Aktualisieren Sie die Benutzeroberfläche für jedes Element in den datengebundenen 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 "Name" und "Department" Label Elemente an die entsprechende Datenquelleneigenschaft.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. Nach dem öffnenden Grid -Element, fügen Sie die folgenden Datenvorlagen, die definieren, wie die Spesenabrechnungsdaten angezeigt werden: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 mit DataGridTemplateColumn unter der DataGrid Element und die Vorlagen auf sie angewendet.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 ein, und wählen Sie dann die Ansicht Schaltfläche.Select a person and then select the View button.

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

Beide Seiten der app die Liste der Namen und eine Spesenabrechnung angezeigt.

Hinweis

In diesem Beispiel wird veranschaulicht, eine bestimmte Funktion von WPF und nicht alle bewährte Methoden für Aspekte wie Sicherheit, Lokalisierung und Eingabehilfen.This sample demonstrates a specific feature of WPF and doesn't follow all best practices for things like security, localization, and accessibility. Von WPF und die bewährten Methoden für .NET-app-Entwicklung und umfassend behandelt finden Sie unter 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 gelernt, eine Reihe von Techniken zum Erstellen einer Benutzeroberfläche mit Windows Presentation Foundation (WPF).In this walkthrough you learned a number of techniques for creating a UI using Windows Presentation Foundation (WPF). Sie verfügen nun über einen grundlegenden Überblick über die Bausteine einer datengebundenen .NET-App.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