Samouczek: tworzenie pierwszej aplikacji WPF w Visual Studio 2019 r.

W tym artykule pokazano, jak opracować aplikację klasy Windows Presentation Foundation (WPF), która zawiera elementy wspólne dla większości aplikacji WPF: znacznik Extensible Application Markup Language (XAML), code-behind, definicje aplikacji, kontrolki, układ, powiązanie danych i style. Aby opracować aplikację, użyjesz Visual Studio.

Ważne

Ten artykuł został napisany dla .NET Framework. Aby rozpocząć pracę z platformą .NET 5 lub .NET 6, zobacz Samouczek: tworzenie nowej aplikacji WPF (WPF .NET).

Ten samouczek zawiera informacje na temat wykonywania następujących czynności:

  • Utwórz projekt WPF.
  • Użyj języka XAML, aby zaprojektować wygląd interfejsu użytkownika aplikacji.
  • Napisz kod, aby skompilować zachowanie aplikacji.
  • Utwórz definicję aplikacji do zarządzania aplikacją.
  • Dodaj kontrolki i utwórz układ w celu utworzenia interfejsu użytkownika aplikacji.
  • Twórz style w celu zapewnienia spójnego wyglądu w interfejsie użytkownika aplikacji.
  • Powiąż interfejs użytkownika z danymi, aby wypełnić interfejs użytkownika z danych i zachować synchronizację danych i interfejsu użytkownika.

Po zakończeniu tego samouczka będziesz mieć autonomiczną aplikację do Windows, która umożliwia użytkownikom wyświetlanie raportów wydatków dla wybranych osób. Aplikacja składa się z kilku stron WPF hostowanych w oknie przeglądarki.

Porada

Przykładowy kod używany w tym samouczku jest dostępny dla języka Visual Basic i C# na stronie Tutorial WPF App Sample Code (Samouczek: przykładowy kod aplikacji WPF).

Język kodu przykładowego można przełączać między językami C# i Visual Basic przy użyciu selektora języka w górnej części tej strony.

Wymagania wstępne

  • Visual Studio 2019 r. z zainstalowanym obciążeniem Tworzenie aplikacji klasycznych dla programu .NET.

    Aby uzyskać więcej informacji na temat instalowania najnowszej wersji programu Visual Studio, zobacz Instalowanie Visual Studio.

Tworzenie projektu aplikacji

Pierwszym krokiem jest utworzenie infrastruktury aplikacji, która zawiera definicję aplikacji, dwie strony i obraz.

  1. Utwórz nowy projekt aplikacji WPF w języku Visual Basic lub Visual C# o nazwie ExpenseIt :

    1. Otwórz Visual Studio i wybierz pozycję Utwórz nowy projekt w menu Wprowadzenie.

      Zostanie otwarte okno dialogowe Tworzenie nowego projektu.

    2. Na liście rozwijanej Język wybierz pozycję C# lub Visual Basic.

    3. Wybierz szablon Aplikacja WPF (.NET Framework), a następnie wybierz pozycję Dalej.

      Okno dialogowe Tworzenie nowego projektu

      Zostanie otwarte okno dialogowe Konfigurowanie nowego projektu.

    4. Wprowadź nazwę projektu, ExpenseIt a następnie wybierz pozycję Utwórz.

      Okno dialogowe Konfigurowanie nowego projektu

      Visual Studio projekt i otwiera projektanta domyślnego okna aplikacji o nazwie MainWindow.xaml.

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

    Ten plik XAML definiuje aplikację WPF i wszystkie zasoby aplikacji. Ten plik umożliwia również określenie interfejsu użytkownika, w tym przypadku MainWindow.xaml, który jest automatycznie wyświetlany podczas uruchamiania aplikacji.

    Kod XAML powinien wyglądać następująco w 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>
    

    Podobnie jak w języku 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.

    Ten plik XAML jest głównym oknem aplikacji i wyświetla zawartość utworzoną na stronach. Klasa definiuje właściwości okna, takie jak tytuł, rozmiar lub ikona, i obsługuje zdarzenia, takie jak Window zamykanie lub ukrywanie.

  4. Zmień element Window na NavigationWindow , jak pokazano w poniższym języku 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 przechodzi do innej zawartości w zależności od danych wejściowych użytkownika. Dlatego główny element Window należy zmienić na NavigationWindow . NavigationWindow dziedziczy wszystkie właściwości obiektu Window . Element NavigationWindow w pliku XAML tworzy wystąpienie klasy NavigationWindow . Aby uzyskać więcej informacji, zobacz Przegląd nawigacji.

  5. Usuń elementy Grid między NavigationWindow tagami.

  6. Zmień następujące właściwości w kodzie XAML elementu NavigationWindow :

    • Ustaw właściwość Title na " ExpenseIt ".

    • Ustaw właściwość Height na 350 pikseli.

    • Ustaw właściwość Width na 500 pikseli.

    Kod XAML powinien wyglądać podobnie do następującego 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>
    

    Podobnie jak w przypadku języka 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. Otwórz mainWindow.xaml.vb lub MainWindow.xaml.cs.

    Ten plik jest plikiem code-behind, który zawiera kod do obsługi zdarzeń zadeklarowanych w pliku MainWindow.xaml. Ten plik zawiera częściową klasę dla okna zdefiniowanego w języku XAML.

  8. Jeśli używasz języka C#, zmień klasę tak, MainWindow aby pochodziła od NavigationWindow klasy . (W Visual Basic dzieje się to automatycznie po zmianie okna w języku XAML). Kod w języku C# powinien teraz wyglądać tak:

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

Dodawanie plików do aplikacji

W tej sekcji dodasz dwie strony i obraz do aplikacji.

  1. Dodaj nową stronę do projektu i nadaj jej nazwę ExpenseItHome.xaml :

    1. W Eksplorator rozwiązań kliknij prawym przyciskiem myszy węzeł projektu i ExpenseIt wybierz polecenie Dodaj > stronę.

    2. W oknie dialogowym Dodawanie nowego elementu szablon Strona (WPF) jest już wybrany. Wprowadź nazwę ExpenseItHome , a następnie wybierz pozycję Dodaj.

    Ta strona jest pierwszą stroną wyświetlaną podczas jej uruchomiono. Zostanie wyświetlona lista osób do wyboru, dla których ma być pokazywany raport wydatków.

  2. Otwórz usługę ExpenseItHome.xaml.

  3. Ustaw wartość Title " ExpenseIt - Home ".

  4. Ustaw wartość DesignHeight na 350 pikseli, a na DesignWidth wartość 500 pikseli.

    Kod XAML jest teraz wyświetlany w następujący sposób dla Visual Basic:

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

    Podobnie jak w przypadku języka C#:

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

  6. Dodaj właściwość Source do elementu i ustaw ją na " NavigationWindow ExpenseItHome.xaml ".

    Ustawia to ExpenseItHome.xaml jako pierwszą stronę otwieraną podczas uruchamiania aplikacji.

    Przykładowy kod XAML w 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>
    

    A w języku 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

    Właściwość Source można również ustawić w kategorii Różne okna Właściwości.

    Właściwość źródłową w okno Właściwości

  7. Dodaj kolejną nową stronę WPF do projektu i nadaj jej nazwę ExpenseReportPage.xaml::

    1. W Eksplorator rozwiązań kliknij prawym przyciskiem myszy węzeł projektu i ExpenseIt wybierz polecenie Dodaj > stronę.

    2. W oknie dialogowym Dodawanie nowego elementu wybierz szablon Strona (WPF). Wprowadź nazwę ExpenseReportPage, a następnie wybierz pozycję Dodaj.

    Na tej stronie będzie pokazywany raport wydatków dla osoby wybranej na ExpenseItHome stronie.

  8. Otwórz stronę ExpenseReportPage.xaml.

  9. Ustaw wartość Title " ExpenseIt - View Expense ".

  10. Ustaw wartość DesignHeight na 350 pikseli, a na DesignWidth wartość 500 pikseli.

    ExpenseReportPage.xaml wygląda teraz następująco w pliku Visual Basic:

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

    Podobnie jak w języku C#:

    <Page x:Class="ExpenseIt.ExpenseReportPage"
          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
          xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
          mc:Ignorable="d" 
          d:DesignHeight="350" d:DesignWidth="500"
        Title="ExpenseIt - View Expense">
    
        <Grid>
            
        </Grid>
    </Page>
    
  11. Otwórz narzędzia ExpenseItHome.xaml.vb i ExpenseReportPage.xaml.vb lub ExpenseItHome.xaml.cs i ExpenseReportPage.xaml.cs.

    Podczas tworzenia nowego pliku strony program Visual Studio automatycznie tworzy jego plik code-behind. Te pliki kodu obsługują logikę w celu reagowania na dane wejściowe użytkownika.

    Kod powinien wyglądać podobnie do poniższego ExpenseItHome dla :

    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
    

    Podobnie jak w przypadku strony 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. Dodaj obraz o nazwiewatermark.png do projektu. Możesz utworzyć własny obraz, skopiować plik z przykładowego kodu lub pobrać go z repozytorium microsoft/WPF-Samples GitHub repozytorium.

    1. Kliknij prawym przyciskiem myszy węzeł projektu i wybierz polecenie Dodaj > istniejący element lub naciśnij klawisz Shift + Alt + A.

    2. W oknie dialogowym Dodawanie istniejącego elementu ustaw filtr plików na Wszystkie pliki lub Pliki obrazów, przejdź do pliku obrazu, którego chcesz użyć, a następnie wybierz pozycję Dodaj.

Kompilowanie i uruchamianie aplikacji

  1. Aby skompilować i uruchomić aplikację, naciśnij klawisz F5 lub wybierz pozycję Rozpocznij debugowanie z menu Debugowanie.

    Na poniższej ilustracji przedstawiono aplikację z NavigationWindow przyciskami:

    Aplikacja po skompilowaniu i uruchomieniu.

  2. Zamknij aplikację, aby wrócić do Visual Studio.

Tworzenie układu

Układ zapewnia uporządkowany sposób umieszczania elementów interfejsu użytkownika, a także zarządza rozmiarem i położeniem tych elementów po zmianie rozmiaru interfejsu użytkownika. Zazwyczaj tworzy się układ z jedną z następujących kontrolek układu:

  • Canvas - Definiuje obszar, w którym można jawnie umieścić elementy podrzędne przy użyciu współrzędnych, które są względne względem obszaru kanwy.
  • DockPanel - Definiuje obszar, w którym można rozmieszczać elementy podrzędne w poziomie lub w pionie względem siebie.
  • Grid - Definiuje elastyczny obszar siatki, który składa się z kolumn i wierszy.
  • StackPanel - Rozmieszcza elementy podrzędne w jeden wiersz, który może być zorientowany w poziomie lub w pionie.
  • VirtualizingStackPanel - Rozmieszcza i wirtualizację zawartości w jednym wierszu, który jest zorientowany w poziomie lub w pionie.
  • WrapPanel - Umieszcza elementy podrzędne w sekwencyjnej pozycji od lewej do prawej, przerywając zawartość do następnego wiersza na krawędzi pola zawierającego. Kolejne porządkowanie odbywa się sekwencyjnie od góry do dołu lub od prawej do lewej, w zależności od wartości właściwości Orientacja.

Każda z tych kontrolek układu obsługuje określony typ układu dla elementów podrzędnych. ExpenseIt Rozmiar stron można zmieniać, a każda strona zawiera elementy, które są ułożone w poziomie i w pionie obok innych elementów. W tym przykładzie Grid element jest używany jako element układu dla aplikacji.

Porada

Aby uzyskać więcej informacji na Panel temat elementów, zobacz Panele — omówienie. Aby uzyskać więcej informacji na temat układu, zobacz Układ.

W tej sekcji utworzysz jedno kolumnową tabelę z trzema wierszami i marginesem 10 pikseli, dodając definicje kolumn i wierszy do tabeli w Grid tabeli ExpenseItHome.xaml .

  1. W elemencie ustaw właściwość elementu na ExpenseItHome.xaml Margin wartość Grid "10,0,10,10", co odpowiada marginesom do lewej, górnej, prawej i dolnej:

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

    Porada

    Możesz również ustawić wartości Margines w oknie Właściwości w kategorii Układ:

    Wartości marginesów w okno Właściwości

  2. Dodaj następujący kod XAML między Grid tagami, aby utworzyć definicje wierszy i kolumn:

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

    Dla dwóch wierszy ustawiono wartość , co oznacza, że rozmiar wierszy jest oparty na Height Auto zawartości wierszy. Wartość domyślna to rozmiar, co oznacza, że wysokość wiersza jest ważoną proporcją Height Star dostępnego miejsca. Jeśli na przykład dwa wiersze mają liczbę "*", każdy z nich ma wysokość, która jest Height połową dostępnego miejsca.

    Powinna Grid teraz zawierać następujący kod 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 kontrolek

W tej sekcji zaktualizujesz interfejs użytkownika strony głównej, aby wyświetlić listę osób, w której wybierzesz jedną osobę, aby wyświetlić raport wydatków. Kontrolki to obiekty interfejsu użytkownika, które umożliwiają użytkownikom interakcję z aplikacją. Aby uzyskać więcej informacji, zobacz Controls.

Aby utworzyć ten interfejs użytkownika, należy dodać następujące elementy do ExpenseItHome.xaml :

  • A ListBox (lista osób).
  • A Label (dla nagłówka listy).
  • A Button (aby kliknąć, aby wyświetlić raport wydatków dla osoby wybranej na liście).

Każda kontrolka jest umieszczana w wierszu obiektu Grid przez ustawienie Grid.Row dołączonej właściwości. Aby uzyskać więcej informacji na temat dołączonych właściwości, zobacz Attached Properties Overview (Przegląd właściwości dołączonych).

  1. W ExpenseItHome.xaml pliku dodaj następujący kod XAML między Grid tagami:

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

  2. Skompiluj i uruchom aplikację.

    Na poniższej ilustracji przedstawiono utworzone kontrolki:

Zrzut ekranu przykładu ExpenseIt z wyświetloną listą nazw

Dodawanie obrazu i tytułu

W tej sekcji zaktualizujesz interfejs użytkownika strony głównej przy użyciu obrazu i tytułu strony.

  1. W ExpenseItHome.xaml programie dodaj kolejną kolumnę do tabeli ColumnDefinitions o stałej wartości Width 230 pikseli:

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="230" />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    
  2. Dodaj kolejny wiersz do RowDefinitions tabeli , aby uzyskać łącznie cztery wiersze:

    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition Height="Auto"/>
        <RowDefinition />
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    
  3. Przenieś kontrolki do drugiej kolumny, ustawiając właściwość na 1 w każdej z trzech kontrolek Grid.Column (Border, ListBox i Button).

  4. Przenieś każdą kontrolkę w dół o 1 dla każdej z trzech kontrolek (Border, ListBox i Button) oraz dla elementu Grid.Row Border.

    Kod XAML dla trzech kontrolek wygląda teraz następująco:

      <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. Ustaw właściwość Background nawatermark.png obrazu, dodając następujący kod XAML w dowolnym miejscu między <Grid> tagami i </Grid> :

    <Grid.Background>
        <ImageBrush ImageSource="watermark.png"/>
    </Grid.Background>
    
  6. Przed Border elementem dodaj element o Label zawartości "Wyświetl raport wydatków". Ta etykieta jest tytułem strony.

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

Na poniższej ilustracji przedstawiono wyniki właśnie dodanych danych:

Zrzut ekranu przykładu ExpenseIt przedstawiający nowe tło obrazu i tytuł strony

Dodawanie kodu do obsługi zdarzeń

  1. W ExpenseItHome.xaml elemencie Click dodaj program obsługi zdarzeń do elementu Button . Aby uzyskać więcej informacji, zobacz How to: Create a simple event handler (Jak utworzyć prostą obsługę zdarzeń).

      <!-- 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. Otwórz ExpenseItHome.xaml.vb lub ExpenseItHome.xaml.cs .

  3. Dodaj następujący kod do klasy ExpenseItHome , aby dodać obsługę zdarzeń kliknięcia przycisku. Procedura obsługi zdarzeń otwiera stronę ExpenseReportPage.

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

ExpenseReportPage.xaml wyświetla raport wydatków dla osoby wybranej na ExpenseItHome stronie. W tej sekcji utworzysz interfejs użytkownika dla strony ExpenseReportPage. Dodasz również kolory tła i wypełnienia do różnych elementów interfejsu użytkownika.

  1. Otwórz stronę ExpenseReportPage.xaml.

  2. Dodaj następujący kod XAML między Grid tagami:

     <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 użytkownika jest podobny do ExpenseItHome.xaml , z tą różnicą, że dane raportu są wyświetlane w . DataGrid

  3. Skompiluj i uruchom aplikację.

  4. Wybierz przycisk Wyświetl.

    Zostanie wyświetlona strona raportu wydatków. Zwróć również uwagę, że przycisk nawigacji wstecz jest włączony.

Na poniższej ilustracji przedstawiono elementy interfejsu użytkownika dodane do pliku ExpenseReportPage.xaml.

Zrzut ekranu przykładu ExpenseIt przedstawiający interfejs użytkownika właśnie utworzony dla strony ExpenseReportPage.

Kontrolki stylu

Wygląd różnych elementów jest często taki sam dla wszystkich elementów tego samego typu w interfejsie użytkownika. Interfejs użytkownika używa stylów do wielokrotnego użytku w wielu elementach. Ponowne użycie stylów pomaga uprościć tworzenie kodu XAML i zarządzanie nimi. Ta sekcja zastępuje atrybuty dla elementu, które zostały zdefiniowane w poprzednich krokach style.

  1. Otwórz program Application.xaml lub App.xaml.

  2. Dodaj następujący kod XAML między Application.Resources tagami:

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

    Ten kod XAML dodaje następujące style:

    • headerTextStyle: aby sformatować tytuł strony Label .

    • labelStyle: aby sformatować Label kontrolki.

    • columnHeaderStyle: aby sformatować DataGridColumnHeader .

    • listHeaderStyle: aby sformatować kontrolki nagłówka Border listy.

    • listHeaderTextStyle: aby sformatować nagłówek listy Label .

    • buttonStyle: aby sformatować Button w pliku ExpenseItHome.xaml .

    Zwróć uwagę, że style są zasobami i elementami kluczowymi Application.Resources elementu właściwości. W tej lokalizacji style są stosowane do wszystkich elementów w aplikacji. Aby uzyskać przykład użycia zasobów w aplikacji .NET, zobacz Use Application Resources (Korzystanie z zasobów aplikacji).

  3. W ExpenseItHome.xaml pliku zastąp wszystko między Grid elementami następującym kodem 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 i definiujące wygląd każdej kontrolki, są usuwane i VerticalAlignment FontFamily zastępowane przez zastosowanie stylów. Na przykład jest headerTextStyle stosowany do "Wyświetl raport wydatków". Label

  4. Otwórz stronę ExpenseReportPage.xaml.

  5. Zastąp wszystko między Grid elementami następującym kodem 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>
    

    Ten kod XAML dodaje style do Label elementów Border i .

  6. Skompiluj i uruchom aplikację. Wygląd okna jest taki sam jak poprzednio.

    Zrzut ekranu przykładu ExpenseIt z takim samym wyglądem jak w ostatniej sekcji.

  7. Zamknij aplikację, aby wrócić do Visual Studio.

Wiązanie danych z kontrolką

W tej sekcji utworzysz dane XML powiązane z różnymi kontrolkami.

  1. W ExpenseItHome.xaml pliku po elemencie otwierającym dodaj następujący kod XAML, aby utworzyć element zawierający Grid dane dla każdej XmlDataProvider osoby:

    <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 zasób. Zwykle te dane byłyby ładowane jako plik, ale dla uproszczenia dane są dodawane w tekście.

  2. W elemencie dodaj następujący element, który definiuje sposób wyświetlania danych w elemencie <Grid.Resources> <xref:System.Windows.DataTemplate> po ListBox <XmlDataProvider> elemencie :

    <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 Data templating overview(Omówienie tworzenia szablonów danych).

  3. Zastąp istniejący ListBox kod następującym kodem XAML:

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

    Ten kod XAML wiąże właściwość obiektu ze źródłem danych i ItemsSource stosuje szablon danych jako ListBox ItemTemplate .

Połączenie danych do kontrolek

Następnie dodasz kod w celu pobrania nazwy wybranej na stronie i przekazania jej do konstruktora ExpenseItHome expenseReportPage. Element ExpenseReportPage ustawia kontekst danych z przekazanym elementem, z którym są związane kontrolki zdefiniowane w pliku ExpenseReportPage.xaml.

  1. Otwórz stronę ExpenseReportPage.xaml.vb lub ExpenseReportPage.xaml.cs.

  2. Dodaj konstruktor, który przyjmuje obiekt , aby można było przekazać dane raportu wydatków wybranej osoby.

    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 .

  4. Zmień program Click obsługi zdarzeń, aby wywołać nowy konstruktor przekazujący dane raportu wydatków wybranej osoby.

    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 danych za pomocą szablonów danych

W tej sekcji zaktualizujesz interfejs użytkownika dla każdego elementu na listach powiązanych z danymi przy użyciu szablonów danych.

  1. Otwórz stronę ExpenseReportPage.xaml.

  2. Powiąż zawartość elementów "Name" i "Department" Label z odpowiednią właściwością źródła danych. Aby uzyskać więcej informacji na temat powiązania danych, zobacz Omówienie powiązania danych.

    <!-- 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 elemencie Grid otwierającym dodaj następujące szablony danych, które definiują sposób wyświetlania danych raportu wydatków:

    <!--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 elementy DataGridTextColumn DataGridTemplateColumn elementem pod DataGrid elementem i zastosuj do nich szablony.

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

  6. Wybierz osobę, a następnie wybierz przycisk Wyświetl.

Na poniższej ilustracji przedstawiono obie strony aplikacji ExpenseIt z zastosowanymi kontrolkami, układem, stylami, powiązaniem danych i szablonami danych:

Obie strony aplikacji z listą nazw i raportem wydatków.

Uwaga

W tym przykładzie pokazano konkretną funkcję platformy WPF i nie są zgodne ze wszystkimi najlepszymi rozwiązaniami, takich jak zabezpieczenia, lokalizacja i ułatwienia dostępu. Aby uzyskać kompleksowe informacje o najlepszych rozwiązaniach dotyczących tworzenia aplikacji WPF i .NET, zobacz następujące tematy:

Następne kroki

W tym przewodniku poznaliśmy szereg technik tworzenia interfejsu użytkownika przy użyciu platformy Windows Presentation Foundation (WPF). Teraz musisz mieć podstawową wiedzę na temat bloków konstrukcyjnych powiązanej z danymi aplikacji .NET. Aby uzyskać więcej informacji na temat architektury I modeli programowania WPF, zobacz następujące tematy:

Aby uzyskać więcej informacji na temat tworzenia aplikacji, zobacz następujące tematy:

Zobacz też