Przewodnik: Moja pierwsza aplikacja klasyczna WPFWalkthrough: My first WPF desktop application

W tym artykule przedstawiono sposób tworzenia prostej aplikacji Windows Presentation Foundation (WPF), który zawiera elementy, które są wspólne dla większości aplikacji WPF: Extensible Application Markup Language (XAML) znaczników, związane z kodem, definicji aplikacji, formanty, układ, powiązanie danych i stylów.This article shows you how to develop a simple Windows Presentation Foundation (WPF) 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.

Ten instruktaż obejmuje następujące kroki:This walkthrough includes the following steps:

  • Projektowanie wyglądu aplikacji interfejsu użytkownika (UI), należy użyć XAML.Use XAML to design the appearance of the application's user interface (UI).

  • Pisanie kodu w celu tworzenia zachowaniu aplikacji.Write code to build the application's behavior.

  • Tworzenie definicji aplikacji do zarządzania aplikacją.Create an application definition to manage the application.

  • Dodawanie formantów i Utwórz układ do tworzenia interfejsu użytkownika aplikacji.Add controls and create the layout to compose the application UI.

  • Tworzenie stylów dla spójny wygląd interfejsu użytkownika aplikacji.Create styles for a consistent appearance throughout an application's UI.

  • Interfejs użytkownika należy powiązać dane, aby wypełnić interfejsu użytkownika z danych, a także zapewnić danych i interfejsu użytkownika synchronizowane.Bind the UI to data to both populate the UI from data and keep the data and UI synchronized.

Przed zakończeniem tego przewodnika będziesz wbudowane autonomicznej aplikacji Windows, która pozwala użytkownikom na wyświetlanie raportów wydatków dla wybranych osób.By the end of the walkthrough, you'll have built a standalone Windows application that allows users to view expense reports for selected people. Aplikacja składa się z kilku stron WPF, które znajdują się w oknie myszą.The application is composed of several WPF pages that are hosted in a browser-style window.

Porada

Przykładowy kod, który jest używany do tworzenia tego przewodnika jest dostępna zarówno dla języka Visual Basic i C# w wprowadzenie do kompilowania aplikacji WPF.The sample code that is used to build this walkthrough is available for both Visual Basic and C# at Introduction to Building WPF Applications.

Wymagania wstępnePrerequisites

  • Program Visual Studio 2017 lub nowszegoVisual Studio 2017 or later

    Aby uzyskać więcej informacji na temat instalowania najnowszej wersji programu Visual Studio, zobacz Zainstaluj program Visual Studio.For more information about installing the latest version of Visual Studio, see Install Visual Studio.

Utwórz projekt aplikacjiCreate the application project

Pierwszym krokiem jest do utworzenia infrastruktury aplikacji, który zawiera definicję aplikacji, dwie strony i obraz.The first step is to create the application infrastructure, which includes an application definition, two pages, and an image.

  1. Utwórz nowy projekt aplikacji WPF w języku Visual Basic lub Visual C# o nazwie ExpenseIt:Create a new WPF Application project in Visual Basic or Visual C# named ExpenseIt:

    1. Otwórz program Visual Studio i wybierz pliku > New > projektu.Open Visual Studio and select File > New > Project.

      Nowy projekt zostanie otwarte okno dialogowe.The New Project dialog opens.

    2. W obszarze zainstalowane kategorii, rozwiń węzeł Visual C# lub języka Visual Basic węzeł, a następnie wybierz pulpitu Windows.Under the Installed category, expand either the Visual C# or Visual Basic node, and then select Windows Desktop.

    3. Wybierz aplikacja WPF (.NET Framework) szablonu.Select the WPF App (.NET Framework) template. Wprowadź nazwę ExpenseIt , a następnie wybierz OK.Enter the name ExpenseIt and then select OK.

      Okno dialogowe nowego projektu za pomocą wybrano aplikacji WPF

      Visual Studio tworzy projekt i zostanie otwarty projektant domyślny okna aplikacji o nazwie MainWindow.xaml.Visual Studio creates the project and opens the designer for the default application window named MainWindow.xaml.

    Uwaga

    W tym instruktażu wykorzystano DataGrid formant, który jest dostępny w programie .NET Framework 4 i nowszych wersjach.This walkthrough uses the DataGrid control that is available in the .NET Framework 4 and later. Należy się upewnić, że projekt jest ukierunkowany na .NET Framework 4 lub nowszej.Be sure that your project targets the .NET Framework 4 or later. Aby uzyskać więcej informacji, zobacz jak: Docelowa wersja systemu .NET Framework.For more information, see How to: Target a Version of the .NET Framework.

  2. Otwórz Application.xaml (Visual Basic) lub App.xaml (C#).Open Application.xaml (Visual Basic) or App.xaml (C#).

    Ten plik XAML definiuje aplikacji WPF i wszystkich zasobów aplikacji.This XAML file defines a WPF application and any application resources. Ten plik również użyć do określenia interfejs użytkownika, który jest automatycznie wyświetlana podczas uruchamiania aplikacji; w tym przypadku MainWindow.xaml.You also use this file to specify the UI that automatically shows when the application starts; in this case, MainWindow.xaml.

    Usługi XAML powinien wyglądać następująco w języku Visual Basic:Your XAML should look like this 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>
    

    Lub tak jak poniżej w języku C#:Or like this 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. Otwórz MainWindow.xaml.Open MainWindow.xaml.

    Ten plik XAML okno główne aplikacji i wyświetla zawartość utworzona na stronach.This XAML file is the main window of your application and displays content created in pages. Window Klasy definiuje właściwości okna, takie jak jego tytuł, rozmiar lub ikonę i obsługuje zdarzenia, takie jak zamknąć lub ukrywanie.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. Zmiana Window elementu NavigationWindow, jak pokazano na poniższym XAML: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>
    

    Ta aplikacja powoduje przejście do innej zawartości, w zależności od danych wejściowych użytkownika.This app navigates to different content depending on the user input. Dlatego głównym Window musi zostać zmienione w celu NavigationWindow.This is why the main Window needs to be changed to a NavigationWindow. NavigationWindow dziedziczy wszystkie właściwości Window.inherits all the properties of Window. NavigationWindow Elementu w pliku XAML tworzy wystąpienie NavigationWindow klasy.The NavigationWindow element in the XAML file creates an instance of the NavigationWindow class. Aby uzyskać więcej informacji, zobacz Nawigacja — omówienie.For more information, see Navigation overview.

  5. Zmień następujące właściwości na NavigationWindow elementu:Change the following properties on the NavigationWindow element:

    Usługi XAML powinien wyglądać następująco w języku Visual Basic:Your XAML should look like this 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">
     
    </NavigationWindow>
    

    Lub tak jak poniżej w języku C#:Or like this 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">
        
    </NavigationWindow>
    
  6. Otwórz MainWindow.xaml.vb lub MainWindow.xaml.cs.Open MainWindow.xaml.vb or MainWindow.xaml.cs.

    Ten plik jest plik związany z kodem, który zawiera kod służący do obsługi zdarzeń zadeklarowanych w MainWindow.xaml.This file is a code-behind file that contains code to handle the events declared in MainWindow.xaml. Ten plik zawiera klasę częściową dla okna zdefiniowane w XAML.This file contains a partial class for the window defined in XAML.

  7. Jeśli używasz języka C#, zmień MainWindow pochodzi od klasy NavigationWindow.If you are using C#, change the MainWindow class to derive from NavigationWindow. (W języku Visual Basic to wykonywane automatycznie po zmianie okna XAML).(In Visual Basic, this happens automatically when you change the window in XAML.)

    Kod powinien wyglądać następująco:Your code should 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();
            }
        }
    }
    
    Class MainWindow
    
    End Class
    

    Porada

    Można przełączać język kodu przykładowego kodu między C# i Visual Basic w języka listy rozwijanej w prawej górnej części tego artykułu.You can toggle the code language of the sample code between C# and Visual Basic in the Language drop-down on the upper right side of this article.

Dodaj pliki do aplikacjiAdd files to the application

W tej sekcji należy dodać dwie strony i obrazu do aplikacji.In this section, you'll add two pages and an image to the application.

  1. Dodaj nową stronę WPF do projektu i nadaj mu nazwę ExpenseItHome.xaml:Add a new WPF page to the project, and name it ExpenseItHome.xaml:

    1. W Eksploratora rozwiązań, kliknij prawym przyciskiem myszy ExpenseIt węzeł projektu i wybierz polecenie Dodaj > strony.In Solution Explorer, right-click on the ExpenseIt project node and choose Add > Page.

    2. W Dodaj nowy element okno dialogowe, strony (WPF) już zaznaczony jest szablon.In the Add New Item dialog, the Page (WPF) template is already selected. Wprowadź nazwę ExpenseItHome, a następnie wybierz pozycję Dodaj.Enter the name ExpenseItHome, and then select Add.

    Ta strona jest pierwsza strona, która jest wyświetlana, gdy aplikacja zostanie uruchomiona.This page is the first page that's displayed when the application is launched. Widoczna będzie lista osób, które można wybierać, aby wyświetlić raport wydatków dla.It will show a list of people to select from, to show an expense report for.

  2. Otwórz ExpenseItHome.xaml.Open ExpenseItHome.xaml.

  3. Ustaw Title do "ExpenseIt - Home".Set the Title to "ExpenseIt - Home".

    Usługi XAML powinien wyglądać następująco w języku Visual Basic:Your XAML should look like this in 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>
    

    Bądź w języku C#:Or this in 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>
    
  4. Otwórz MainWindow.xaml.Open MainWindow.xaml.

  5. Ustaw Source właściwość NavigationWindow do "ExpenseItHome.xaml".Set the Source property on the NavigationWindow to "ExpenseItHome.xaml".

    To ustawienie ExpenseItHome.xaml jako pierwsza strona otwarty podczas uruchamiania aplikacji.This sets ExpenseItHome.xaml to be the first page opened when the application starts. Usługi XAML powinien wyglądać następująco w języku Visual Basic:Your XAML should look like this 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>
    

    Bądź w języku C#:Or this 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>
    

    Porada

    Można również ustawić źródła właściwość różne kategorii właściwości okna.You can also set the Source property in the Miscellaneous category of the Properties window.

    Source — właściwość w oknie właściwości

  6. Dodaj inną nową stronę WPF do projektu i nadaj mu nazwę ExpenseReportPage.xaml::Add another new WPF page to the project, and name it ExpenseReportPage.xaml::

    1. W Eksploratora rozwiązań, kliknij prawym przyciskiem myszy ExpenseIt węzeł projektu i wybierz polecenie Dodaj > strony.In Solution Explorer, right-click on the ExpenseIt project node and choose Add > Page.

    2. W Dodaj nowy element okno dialogowe, strony (WPF) już zaznaczony jest szablon.In the Add New Item dialog, the Page (WPF) template is already selected. Wprowadź nazwę ExpenseReportPage, a następnie wybierz pozycję Dodaj.Enter the name ExpenseReportPage, and then select Add.

    Tej strony wyświetli raportu wydatków dla osób, które wybrano na ExpenseItHome strony.This page will show the expense report for the person that is selected on the ExpenseItHome page.

  7. Otwórz ExpenseReportPage.xaml.Open ExpenseReportPage.xaml.

  8. Ustaw Title do "ExpenseIt - View Expense".Set the Title to "ExpenseIt - View Expense".

    Usługi XAML powinien wyglądać następująco w języku Visual Basic:Your XAML should look like this 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>
    

    Bądź w języku C#:Or this 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>
    
  9. Otwórz ExpenseItHome.xaml.vb i ExpenseReportPage.xaml.vb, lub ExpenseItHome.xaml.cs i ExpenseReportPage.xaml.cs.Open ExpenseItHome.xaml.vb and ExpenseReportPage.xaml.vb, or ExpenseItHome.xaml.cs and ExpenseReportPage.xaml.cs.

    Podczas tworzenia nowego pliku strony Visual Studio automatycznie tworzy związanym z kodem pliku.When you create a new Page file, Visual Studio automatically creates a code-behind file. Te pliki związane z kodem obsługi logiki w odpowiedzi na dane wejściowe użytkownika.These code-behind files handle the logic for responding to user input.

    Kod powinien wyglądać następująco dla ExpenseItHome:Your code should look like this 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
    

    I tak dla ExpenseReportPage:And like this 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
    
  10. Dodawanie obrazu o nazwie watermark.png do projektu.Add an image named watermark.png to the project. Tworzenie własnego obrazu, skopiuj plik z przykładowego kodu lub jego tutaj.You can create your own image, copy the file from the sample code, or get it here.

    1. Kliknij prawym przyciskiem myszy węzeł projektu i wybierz Dodaj > istniejący element, lub naciśnij Shift+Alt + A.Right-click on the project node and select Add > Existing Item, or press Shift+Alt+A.

    2. W Dodaj istniejący element okno dialogowe, przejdź do pliku obrazu, który chcesz użyć, a następnie wybierz Dodaj.In the Add Existing Item dialog, browse to the image file you want to use, and then select Add.

Kompilowanie i uruchamianie aplikacjiBuild and run the application

  1. Aby skompilować i uruchomić aplikację, naciśnij klawisz F5 lub wybierz Rozpocznij debugowanie z debugowania menu.To build and run the application, press F5 or select Start Debugging from the Debug menu.

    Na poniższej ilustracji przedstawiono aplikację za pomocą NavigationWindow przyciski:The following illustration shows the application with the NavigationWindow buttons:

    Zrzut ekranu przykładu programu ExpenseIt

  2. Zamknij aplikację, aby powrócić do programu Visual Studio.Close the application to return to Visual Studio.

Utwórz układCreate the layout

Układ zapewnia uporządkowany sposób umieszczania elementów interfejsu użytkownika i zarządza także rozmiar i położenie tych elementów przy zmianie rozmiaru interfejsu użytkownika.Layout provides an ordered way to place UI elements, and also manages the size and position of those elements when a UI is resized. Układ jest zwykle tworzysz przy użyciu jednego z następujących formantów układu:You typically create a layout with one of the following layout controls:

Każda z tych kontrolek układ obsługuje specjalny rodzaj układu dla jego elementów podrzędnych.Each of these layout controls supports a special type of layout for its child elements. ExpenseIt można zmienić rozmiar strony, a każda strona ma elementy, które są ułożone poziomo i pionowo wraz z innymi elementami.pages can be resized, and each page has elements that are arranged horizontally and vertically alongside other elements. W związku z tym Grid jest elementem układu idealne dla aplikacji.Consequently, the Grid is the ideal layout element for the application.

Porada

Aby uzyskać więcej informacji na temat Panel elementów, zobacz Przegląd panele.For more information about Panel elements, see Panels overview. Aby uzyskać więcej informacji na temat układu, zobacz układ.For more information about layout, see Layout.

W sekcji utworzysz tabelą z jedną kolumną z trzema wierszami i margines 10 pikseli, dodając definicje kolumn i wierszy Grid w ExpenseItHome.xaml.In the 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. Otwórz ExpenseItHome.xaml.Open ExpenseItHome.xaml.

  2. Ustaw Margin właściwość Grid elementu "10,0,10,10", która odnosi się do lewej, górnej, prawej strony i dolnego marginesu: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">
    

    Porada

    Można również ustawić margines wartości w właściwości okna, w obszarze układ kategorii:You can also set the Margin values in the Properties window, under the Layout category:

    Wartości marginesów w oknie właściwości

  3. Dodaj następujące XAML między Grid znaczników do utworzenia definicji wierszy i kolumn: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>
    

    Height Dwóch wierszy jest równa Auto, co oznacza, że wiersze mają rozmiar na podstawie zawartości w wierszach.The Height of two rows is set to Auto, which means that the rows are sized based on the content in the rows. Wartość domyślna Height jest Star zmiany rozmiaru, co oznacza, że wiersze o nierównej wysokości ważona część dostępnego miejsca.The default Height is Star sizing, which means that the row height is a weighted proportion of the available space. Na przykład jeśli masz dwa wiersze Height elementu "*", każdy z nich ma wysokości połowę dostępnego miejsca.For example if two rows each have a Height of "*", they each have a height that is half of the available space.

    Twoje Grid powinno teraz wyglądać podobnie do poniższej XAML:Your Grid should now look like 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>
    

Dodawanie formantówAdd controls

W tej sekcji zostaną zaktualizowane interfejsu użytkownika, aby wyświetlić listę osób, które użytkownik może wybrać z, aby wyświetlić raport wydatków dla strony głównej.In this section, you'll update the home page UI to show a list of people that a user can select from to show the expense report for. Formanty są obiektów interfejsu użytkownika, które umożliwiają użytkownikom na interakcję z aplikacją.Controls are UI objects that allow users to interact with your application. Aby uzyskać więcej informacji, zobacz formantów.For more information, see Controls.

Aby utworzyć tego interfejsu użytkownika, należy dodać następujące elementy do ExpenseItHome.xaml:To create this UI, you'll add the following elements to ExpenseItHome.xaml:

  • ListBox (Aby uzyskać listę osób).(for the list of people).
  • Label (w przypadku nagłówek listy).(for the list header).
  • Button (aby kliknij, aby wyświetlić raport wydatków dla osoby, która jest zaznaczony na liście).(to click to view the expense report for the person that is selected in the list).

Każda kontrolka znajduje się w wierszu Grid , ustawiając Grid.Row dołączona właściwość.Each control is placed in a row of the Grid by setting the Grid.Row attached property. Aby uzyskać więcej informacji na temat właściwości dołączone zobacz Przegląd właściwości dołączonych.For more information about attached properties, see Attached Properties Overview.

  1. Otwórz ExpenseItHome.xaml.Open ExpenseItHome.xaml.

  2. Dodaj następujące XAML gdzieś między Grid tagi: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>
    

    Porada

    Można również utworzyć formanty przeciągając je z przybornika okna na oknie projektu, a następnie ustawiając ich właściwości właściwości okna.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.

  3. Skompiluj i uruchom aplikację.Build and run the application.

Na poniższej ilustracji zawiera kontrolki, które zostały utworzone:The following illustration shows the controls you just created:

Zrzut ekranu przykładu programu ExpenseIt

Dodaj obraz i tytułAdd an image and a title

W tej sekcji zostaną zaktualizowane interfejsie użytkownika strony głównej przy użyciu obrazu i tytuł strony.In this section, you'll update the home page UI with an image and a page title.

  1. Otwórz ExpenseItHome.xaml.Open ExpenseItHome.xaml.

  2. Dodaj kolejną kolumnę do ColumnDefinitions o stałym Width 230 pikseli:Add another column to the ColumnDefinitions with a fixed Width of 230 pixels:

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="230" />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    
  3. Dodaj kolejny wiersz do RowDefinitions, łącznie cztery wiersze:Add another row to the RowDefinitions, for a total of four rows:

    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition Height="Auto"/>
        <RowDefinition />
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    
  4. Przenieś kontrolki do drugiej kolumny, ustawiając Grid.Column właściwości na wartość 1 w każdym z trzech kontrolek (obramowanie, ListBox i przycisk).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).

  5. Przenieś każdy formant w dół wiersz, przez zwiększenie jego Grid.Row wartość o 1.Move each control down a row, by incrementing its Grid.Row value by 1.

    XAML dla trzech kontrolek wygląda teraz następująco:The XAML for the three controls now looks like this:

      <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>
    
  6. Ustaw Background z Grid jako watermark.png plik obrazu, dodając następujące XAML gdzieś między <Grid> i </Grid> tagi:Set the Background of the Grid to be the watermark.png image file, by adding the following XAML somewhere between the <Grid> and </Grid> tags:

    <Grid.Background>
        <ImageBrush ImageSource="watermark.png"/>
    </Grid.Background>
    
  7. Przed Border elementu Dodawanie Label z zawartością "Wyświetl raport wydatków".Before the Border element, add a Label with the content "View Expense Report". Jest to tytuł strony.This 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>
    
  8. Skompiluj i uruchom aplikację.Build and run the application.

Poniższa ilustracja przedstawia wyniki co właśnie został dodany:The following illustration shows the results of what you just added:

Zrzut ekranu przykładu programu ExpenseIt

Dodaj kod do obsługi zdarzeńAdd code to handle events

  1. Otwórz ExpenseItHome.xaml.Open ExpenseItHome.xaml.

  2. Dodaj Click procedurę obsługi zdarzeń do Button elementu.Add a Click event handler to the Button element. Aby uzyskać więcej informacji, zobacz jak: Utwórz procedurę obsługi zdarzenia prostego.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>
    
  3. Otwórz ExpenseItHome.xaml.vb lub ExpenseItHome.xaml.cs.Open ExpenseItHome.xaml.vb or ExpenseItHome.xaml.cs.

  4. Dodaj następujący kod do ExpenseItHome klasy, aby dodać przycisk, program obsługi zdarzeń kliknięcia.Add the following code to the ExpenseItHome class to add a button click event handler. Zostanie otwarty program obsługi zdarzeń ExpenseReportPage strony.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
    

Tworzenie interfejsu użytkownika dla ExpenseReportPageCreate the UI for ExpenseReportPage

ExpenseReportPage.xaml wyświetla raport wydatków dla osób, które wybrano na ExpenseItHome strony.ExpenseReportPage.xaml displays the expense report for the person that's selected on the ExpenseItHome page. W tej sekcji utworzysz interfejs użytkownika dla ExpenseReportPage.In this section, you'll create the UI for ExpenseReportPage. Dodasz również tła i wypełnij kolorów do różnych elementów interfejsu użytkownika.You'll also add background and fill colors to the various UI elements.

  1. Otwórz ExpenseReportPage.xaml.Open ExpenseReportPage.xaml.

  2. Dodaj następujące XAML między Grid tagi: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>
    

    Ten interfejs jest podobny do ExpenseItHome.xaml, z wyjątkiem dane raportu są wyświetlane w DataGrid.This UI is similar to ExpenseItHome.xaml, except the report data is displayed in a DataGrid.

  3. Skompiluj i uruchom aplikację.Build and run the application.

    Uwaga

    Jeśli wystąpi błąd, który DataGrid nie został znaleziony lub nie istnieje, upewnij się, że projekt jest przeznaczony dla .NET Framework 4 lub nowszej.If you get an error that the DataGrid was not found or does not exist, make sure that your project targets the .NET Framework 4 or later. Aby uzyskać więcej informacji, zobacz jak: Docelowa wersja systemu .NET Framework.For more information, see How to: Target a Version of the .NET Framework.

  4. Wybierz widoku przycisku.Select the View button.

    Zostanie wyświetlona strona raportu wydatków.The expense report page appears. Zwróć również uwagę, że zostanie włączony przycisk przeglądania do tyłu.Also notice that the back navigation button is enabled.

Na poniższej ilustracji przedstawiono elementy interfejsu użytkownika dodano do ExpenseReportPage.xaml.The following illustration shows the UI elements added to ExpenseReportPage.xaml.

Zrzut ekranu przykładu programu ExpenseIt

Kontrolki styluStyle controls

Wygląd elementów różnych często jest taka sama dla wszystkich elementów tego samego typu w interfejsie użytkownika.The appearance of various elements is often the same for all elements of the same type in a UI. Korzysta z interfejsu użytkownika style się wygląd wielokrotnego użytku dla wielu elementów.UI uses styles to make appearances reusable across multiple elements. Możliwość ponownego wykorzystania stylów pomaga uprościć tworzenie XAML i zarządzanie nimi.The reusability of styles helps to simplify XAML creation and management. W tej sekcji zastępuje atrybuty-elementowej, które zostały zdefiniowane w poprzednich krokach przy użyciu stylów.This section replaces the per-element attributes that were defined in previous steps with styles.

  1. Otwórz Application.xaml lub App.xaml.Open Application.xaml or App.xaml.

  2. Dodaj następujące XAML między Application.Resources tagi: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>
    

    Ta XAML dodaje następujące style:This XAML adds the following styles:

    • headerTextStyle: Aby sformatować tytuł strony Label.: To format the page title Label.

    • labelStyle: Aby sformatować Label kontrolki.: To format the Label controls.

    • columnHeaderStyle: Aby sformatować DataGridColumnHeader.: To format the DataGridColumnHeader.

    • listHeaderStyle: Aby sformatować nagłówek listy Border kontrolki.: To format the list header Border controls.

    • listHeaderTextStyle: Aby sformatować nagłówek listy Label.: To format the list header Label.

    • buttonStyle: Aby sformatować Button na ExpenseItHome.xaml.: To format the Button on ExpenseItHome.xaml.

    Zauważ, że style są zasobami i elementy podrzędne Application.Resources elementu właściwości.Notice that the styles are resources and children of the Application.Resources property element. W tej lokalizacji stylów są stosowane do wszystkich elementów w aplikacji.In this location, the styles are applied to all the elements in an application. Na przykład korzystania z zasobów w aplikacji .NET Framework, zobacz wykorzystania zasobów aplikacji.For an example of using resources in a .NET Framework application, see Use Application Resources.

  3. Otwórz ExpenseItHome.xaml.Open ExpenseItHome.xaml.

  4. Zamień wszystko pomiędzy Grid elementów za pomocą następujących 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>
    

    Właściwości, takie jak VerticalAlignment i FontFamily definiują wygląd każdego formantu usunięty i zastąpiony, stosując style.The properties such as VerticalAlignment and FontFamily that define the look of each control are removed and replaced by applying the styles. Na przykład headerTextStyle jest stosowany do "Wyświetl raport wydatków" Label.For example, the headerTextStyle is applied to the "View Expense Report" Label.

  5. Otwórz ExpenseReportPage.xaml.Open ExpenseReportPage.xaml.

  6. Zamień wszystko pomiędzy Grid elementów za pomocą następujących 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>
    

    Spowoduje to dodanie stylów Label i Border elementów.This adds styles to the Label and Border elements.

Powiązanie danych kontrolkiBind data to a control

W tej sekcji utworzysz dane XML, który jest powiązany z różnych formantów.In this section, you'll create the XML data that is bound to various controls.

  1. Otwórz ExpenseItHome.xaml.Open ExpenseItHome.xaml.

  2. Po otwarciu Grid elementu, Dodaj następujące XAML do tworzenia XmlDataProvider dla każdej osoby, która zawiera dane: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>
    

    Dane są tworzone jako Grid zasobów.The data is created as a Grid resource. Zwykle to będą ładowane jako plik, ale dla uproszczenia dane są dodawane na tekście.Normally this would be loaded as a file, but for simplicity the data is added inline.

  3. W ramach <Grid.Resources> elementu, Dodaj następujący kod DataTemplate, który definiuje sposób wyświetlania danych w ListBox:Within the <Grid.Resources> element, add the following DataTemplate, which defines how to display the data in the ListBox:

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

    Aby uzyskać więcej informacji na temat szablonów danych zobacz Przegląd szablonowanie danych.For more information about data templates, see Data templating overview.

  4. Zastąp istniejące ListBox za pomocą następujących 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>
    

    Wiąże się to XAML ItemsSource właściwość ListBox ze źródłem danych i stosuje szablon danych jako ItemTemplate.This XAML binds the ItemsSource property of the ListBox to the data source and applies the data template as the ItemTemplate.

Łączenie danych z kontrolkamiConnect data to controls

Następnie dodasz kod, aby pobrać nazwy, która została wybrana na ExpenseItHome strony, a następnie przekazać go do konstruktora obiektu 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 ustawia kontekst danych przy użyciu przekazanych elementu, który jest zdefiniowany kontrolek w ExpenseReportPage.xaml powiązać.ExpenseReportPage sets its data context with the passed item, which is what the controls defined in ExpenseReportPage.xaml bind to.

  1. Otwórz ExpenseReportPage.xaml.vb lub ExpenseReportPage.xaml.cs.Open ExpenseReportPage.xaml.vb or ExpenseReportPage.xaml.cs.

  2. Dodaj konstruktora przyjmującego obiekt, dzięki czemu można przekazać dane raportu wydatków wybrane osoby.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. Otwórz ExpenseItHome.xaml.vb lub ExpenseItHome.xaml.cs.Open ExpenseItHome.xaml.vb or ExpenseItHome.xaml.cs.

  4. Zmiana Click program obsługi zdarzeń, aby wywołać nowego konstruktora, przekazując dane raportu wydatków wybrane osoby.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
    

Styl danych za pomocą szablonów danychStyle data with data templates

W tej sekcji zostaną zaktualizowane w interfejsie użytkownika dla każdego elementu na listach powiązanych z danymi przy użyciu szablonów danych.In this section, you'll update the UI for each item in the data-bound lists by using data templates.

  1. Otwórz ExpenseReportPage.xaml.Open ExpenseReportPage.xaml.

  2. Powiąż z zawartością "Name" i "Dział" Label elementy do odpowiednich danych źródła właściwości.Bind the content of the "Name" and "Department" Label elements to the appropriate data source property. Aby uzyskać więcej informacji na temat tworzenia powiązań danych, zobacz Przegląd wiązanie danych.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. Po otwarciu Grid elementu, Dodaj następujące szablony danych, które określają sposób wyświetlania danych raportu wydatków: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. Zastąp DataGridTextColumn elementów za pomocą DataGridTemplateColumn w obszarze DataGrid elementu i stosować szablony do nich.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. Skompiluj i uruchom aplikację.Build and run the application.

  6. Wybierz osobę, a następnie wybierz pozycję widoku przycisku.Select a person and then select the View button.

Na poniższej ilustracji przedstawiono obie strony ExpenseIt aplikacji za pomocą formantów, układ, style, powiązań danych i zastosowanych szablonów danych:The following illustration shows both pages of the ExpenseIt application with controls, layout, styles, data binding, and data templates applied:

Zrzuty ekranu przykładowej programu ExpenseIt

Uwaga

Ten przykład demonstruje określonych funkcji, WPF i nie należy wykonać wszystkie najlepsze rozwiązania w zakresie elementów, takich jak bezpieczeństwo, lokalizacja i ułatwienia dostępu.This sample demonstrates a specific feature of WPF and doesn't follow all best practices for things like security, localization, and accessibility. Aby uzyskać kompleksowe informacje na temat WPF i najlepszych rozwiązań projektowania aplikacji .NET Framework Zobacz następujące tematy:For comprehensive coverage of WPF and the .NET Framework application development best practices, see the following topics:

Następne krokiNext steps

W tym instruktażu przedstawiono kilka technik tworzenia interfejsu użytkownika przy użyciu Windows Presentation Foundation (WPF).In this walkthrough you learned a number of techniques for creating a UI using Windows Presentation Foundation (WPF). Powinna już podstawową wiedzę na temat bloki konstrukcyjne aplikacji powiązanych z danymi, .NET Framework.You should now have a basic understanding of the building blocks of a data-bound, .NET Framework application. Aby uzyskać więcej informacji o modelach programowania i architektura WPF zobacz następujące tematy:For more information about the WPF architecture and programming models, see the following topics:

Aby uzyskać więcej informacji na temat tworzenia aplikacji zobacz następujące tematy:For more information about creating applications, see the following topics:

Zobacz takżeSee also