Udostępnij za pośrednictwem

Samouczek: tworzenie pierwszej aplikacji WPF w programie Visual Studio 2019

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

Ważne

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

W tym poradniku nauczysz się, jak:

  • Utwórz projekt WPF.
  • Użyj języka XAML, aby zaprojektować wygląd interfejsu użytkownika aplikacji.
  • Napisz kod w celu skompilowania zachowania aplikacji.
  • Utwórz definicję aplikacji do zarządzania aplikacją.
  • Dodaj kontrolki i utwórz układ, aby utworzyć interfejs użytkownika aplikacji.
  • Tworzenie stylów dla spójnego wyglądu w interfejsie użytkownika aplikacji.
  • Powiąż interfejs użytkownika z danymi, zarówno w celu wypełnienia interfejsu użytkownika z danych, jak i zachowania synchronizacji danych i interfejsu użytkownika.

Na koniec samouczka utworzysz autonomiczną aplikację systemu 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, które są hostowane w oknie w stylu przeglądarki.

Wskazówka

Przykładowy kod używany w tym samouczku jest dostępny zarówno dla języka Visual Basic, jak i języka C# na stronie Tutorial WPF App Sample Code.

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

Wymagania wstępne

  • programu Visual Studio 2019 z zainstalowanym obciążeniem tworzenia aplikacji klasycznych platformy .NET.

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

Tworzenie projektu aplikacji

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

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

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

      Otworzy się okno dialogowe Tworzenie nowego projektu.

    2. Na liście rozwijanej język wybierz opcję C# lub Visual Basic.

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

      okno dialogowe Tworzenie nowego projektu

      Otwiera się okno dialogowe Konfigurowanie Nowego Projektu.

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

      okno dialogowe konfiguracji nowego projektu

      Program Visual Studio tworzy projekt oraz otwiera edytor dla domyślnego okna aplikacji o nazwie MainWindow.xaml.

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

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

    Kod XAML powinien wyglądać podobnie do poniższego 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 Window definiuje właściwości okna, takie jak tytuł, rozmiar lub ikona, i obsługuje zdarzenia, takie jak zamykanie lub ukrywanie.

  4. Zmień element Window na NavigationWindow, jak pokazano w poniższym kodzie 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 właśnie należy zmienić główny Window na NavigationWindow. NavigationWindow dziedziczy wszystkie właściwości Window. Element NavigationWindow w pliku XAML tworzy wystąpienie klasy NavigationWindow. Aby uzyskać więcej informacji, zobacz omówienie nawigacji .

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

  6. Zmień następujące właściwości w kodzie XAML dla 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 dla języka 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 zaplecza, który zawiera kod obsługujący zdarzenia zadeklarowane w MainWindow.xaml. Ten plik zawiera klasę częściową dla okna zdefiniowanego w języku XAML.

  8. Jeśli używasz języka C#, zmień klasę MainWindow na pochodną NavigationWindow. (W Visual Basic dzieje się to automatycznie po zmianie okna w języku XAML). Kod języka C# powinien teraz wyglądać następująco:

    
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 eksploratorze rozwiązań kliknij prawym przyciskiem myszy węzeł projektu ExpenseIt i wybierz pozycję Dodaj stronę>.

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

    Ta strona jest pierwszą stroną wyświetlaną podczas uruchamiania aplikacji. Zostanie wyświetlona lista osób do wyboru, aby wyświetlić raport wydatków.

  2. Otwórz ExpenseItHome.xaml.

  3. Ustaw Title na "ExpenseIt - Home".

  4. Ustaw DesignHeight na 350 pikseli, a DesignWidth na 500 pikseli.

    Kod XAML jest teraz wyświetlany w następujący sposób dla języka 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 NavigationWindow i ustaw ją na "ExpenseItHome.xaml".

    Ustawia ExpenseItHome.xaml na pierwszą stronę otwartą po uruchomieniu 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>

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

    Wskazówka

    Możesz również ustawić właściwość Source w kategorii Miscellaneous w oknie właściwości.

    właściwość źródło w oknie właściwości

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

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

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

    Na tej stronie zostanie wyświetlony raport wydatków dla osoby wybranej na stronie ExpenseItHome.

  8. Otwórz ExpenseReportPage.xaml.

  9. Ustaw Title na "ExpenseIt - View Expense".

  10. Ustaw DesignHeight na 350 pikseli, a DesignWidth na 500 pikseli.

    ExpenseReportPage.xaml teraz wygląda następująco w 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 ExpenseItHome.xaml.vb i ExpenseReportPage.xaml.vblub ExpenseItHome.xaml.cs i ExpenseReportPage.xaml.cs.

    Podczas tworzenia nowego pliku Page, program Visual Studio automatycznie tworzy jego plik code-behind . Te pliki związane z kodem obsługują logikę reagowania na dane wejściowe użytkownika.

    Kod powinien wyglądać podobnie do poniższego dla 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

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

    1. Kliknij prawym przyciskiem myszy węzeł projektu i wybierz pozycję Dodaj>Istniejący elementlub naciśnij Shift+Alt+A.

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

    3. Wybierz plik obrazu w Eksploratorze rozwiązań , a następnie w oknie Właściwości ustaw Akcję kompilacji na opcję Zasób .

Kompilowanie i uruchamianie aplikacji

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

    Poniższa ilustracja przedstawia aplikację z przyciskami NavigationWindow:

    aplikacja po skompilowaniu i uruchomieniu jej.

  2. Zamknij aplikację, aby powrócić do programu 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 układ jest tworzony przy użyciu jednego z następujących kontrolek układu:

  • Canvas — definiuje obszar, w którym można jawnie umiejscowić elementy podrzędne, korzystając z współrzędnych odniesionych do obszaru Kanwy.
  • DockPanel — definiuje obszar, w którym można rozmieścić elementy podrzędne w poziomie lub w pionie względem siebie.
  • Grid — definiuje elastyczny obszar siatki składający się z kolumn i wierszy.
  • StackPanel — rozmieszcza elementy podrzędne w jedną linię, która może być zorientowana w poziomie lub w pionie.
  • VirtualizingStackPanel — rozmieszcza i wirtualizuje zawartość w jednym wierszu, który jest zorientowany w poziomie lub w pionie.
  • WrapPanel — umieszcza elementy podrzędne w pozycji sekwencyjnej od lewej do prawej, zawijając zawartość do następnego wiersza na brzegu ramki zawierającej. Kolejność kolejności 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żdy z tych kontrolek układu obsługuje określony typ układu dla elementów podrzędnych. ExpenseIt można zmienić rozmiar stron, a każda strona zawiera elementy rozmieszczone w poziomie i w pionie obok innych elementów. W tym przykładzie Grid jest używany jako element układu aplikacji.

Wskazówka

Aby uzyskać więcej informacji na temat elementów Panel, zobacz Omówienie paneli. Aby uzyskać więcej informacji na temat układu, zobacz Layout.

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

  1. W ExpenseItHome.xamlustaw właściwość Margin elementu Grid na wartość "10,0,10,10", która odpowiada lewym, górnym, prawym i dolnym marginesom:

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

    Wskazówka

    Możesz również ustawić wartości marginesu w oknie właściwości w kategorii układ :

    Wartości marginesu w oknie Właściwości

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

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

    Height dwóch wierszy jest ustawione na Auto, co oznacza, że ich rozmiar zależy od zawartości. Domyślną opcją dla Height jest ustalanie rozmiaru Star, co oznacza, że wysokość wiersza stanowi ważoną proporcję dostępnej przestrzeni. Na przykład, jeśli dwa wiersze mają Height "*", każdy z nich ma wysokość równą połowie dostępnej przestrzeni.

    Twój Grid powinien 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órych 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, dodasz następujące elementy do ExpenseItHome.xaml:

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

Każda kontrolka jest umieszczana w wierszu Grid przez ustawienie właściwości dołączonej Grid.Row. Aby uzyskać więcej informacji na temat dołączonych właściwości, zobacz Dołączone właściwości — omówienie.

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

    
<!-- People list -->
<Border Grid.Column="0" Grid.Row="0" Height="35" Padding="5" Background="#4E87D4">
    <Label VerticalAlignment="Center" Foreground="White">Names</Label>
</Border>
<ListBox Name="peopleListBox" Grid.Column="0" Grid.Row="1">
    <ListBoxItem>Mike</ListBoxItem>
    <ListBoxItem>Lisa</ListBoxItem>
    <ListBoxItem>John</ListBoxItem>
    <ListBoxItem>Mary</ListBoxItem>
</ListBox>

<!-- View report button -->
<Button Grid.Column="0" Grid.Row="2" Margin="0,10,0,10" Width="125" Height="25" HorizontalAlignment="Right">View</Button>

    Wskazówka

    Możesz również utworzyć kontrolki, przeciągając je z okna przybornika na okno projektu, a następnie ustawiając ich właściwości w oknie właściwości.

  2. Skompiluj i uruchom aplikację.

    Poniższa ilustracja przedstawia utworzone kontrolki:

przykładowy zrzut ekranu ExpenseIt przedstawiający 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.xamldodaj kolejną kolumnę do ColumnDefinitions ze stałym Width 230 pikseli:

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

  2. Dodaj kolejny wiersz do RowDefinitions, 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ść Grid.Column na 1 w każdej z trzech kontrolek (Border, ListBox i Button).

  4. Przenieś każdą kontrolkę w dół, zwiększając jej Grid.Row wartość o 1 dla każdej z trzech kontrolek (Obramowanie, ListBox i Przycisk) oraz dla elementu Obramowanie.

    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ść tła na plik obrazu watermark.png, dodając następujący kod XAML w dowolnym miejscu między tagami <Grid> i </Grid>.

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

  6. Przed elementem Border dodaj Label z 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 dodanego elementu:

przykładowy zrzut ekranu ExpenseIt przedstawiający nowe tło obrazu i tytuł strony

Dodawanie kodu do obsługi zdarzeń

  1. W ExpenseItHome.xamldodaj program obsługi zdarzeń Click do elementu Button. Aby uzyskać więcej informacji, zobacz Instrukcje: tworzenie prostego programu obsługi 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ć procedurę obsługi 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 elementu ExpenseReportPage

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

  1. Otwórz ExpenseReportPage.xaml.

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

     <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 wyjątkiem tego, ż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 ExpenseReportPage.xaml.

Przykładowy zrzut ekranu ExpenseIt pokazujący właśnie utworzony interfejs użytkownika 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 , aby umożliwić ponowne wykorzystanie wyglądu w różnych elementach. Ponowne zastosowanie stylów pomaga uprościć tworzenie kodu XAML i zarządzanie nim. Ta sekcja zastępuje atrybuty poszczególnych elementów, które zostały zdefiniowane w poprzednich krokach stylami.

  1. Otwórz application.xaml lub App.xaml.

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

    
<!-- 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: Sformatowanie kontrolek Label.

    • columnHeaderStyle: sformatować DataGridColumnHeader.

    • listHeaderStyle: Aby sformatować kontrolki Border na nagłówku listy.

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

    • buttonStyle: sformatować Button w ExpenseItHome.xaml.

    Zwróć uwagę, że style to zasoby i elementy podrzędne elementu właściwości Application.Resources. W tej lokalizacji style są stosowane do wszystkich elementów w aplikacji. Aby zapoznać się z przykładem używania zasobów w aplikacji platformy .NET, zobacz Use Application Resources.

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

  4. Otwórz ExpenseReportPage.xaml.

  5. Zastąp wszystko pomiędzy elementami Grid 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 elementów Label i Border.

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

    przykładowy zrzut ekranu ExpenseIt z tym samym wyglądem co w ostatniej sekcji.

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

Wiązanie danych z kontrolką

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

  1. W ExpenseItHome.xamlpo otwarciu elementu Grid dodaj następujący kod XAML, aby utworzyć XmlDataProvider zawierający dane dla każdej 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 zasób Grid. Zwykle te dane są ładowane jako plik, ale dla uproszczenia dane są dodawane w tekście.

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

    <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 Omówienie tworzenia szablonów danych.

  3. Zastąp istniejącą ListBox 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 XAML wiąże właściwość ItemsSource elementu ListBox ze źródłem danych i stosuje szablon danych jako ItemTemplate.

Łączenie danych z kontrolkami

Następnie dodasz kod, aby pobrać nazwę wybraną na stronie ExpenseItHome i przekazać go do konstruktora ExpenseReportPage. ExpenseReportPage ustawia swój kontekst danych z przekazanym elementem, do którego są powiązane kontrolki zdefiniowane w ExpenseReportPage.xaml.

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

  2. Dodaj konstruktor przyjmujący obiekt, aby można było przekazać dane dotyczące 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 obsługi zdarzeń Click, 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

Stylizuj dane 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 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 otwarciu elementu Grid 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 elementem DataGridTemplateColumn w elemencie DataGrid i zastosuj do nich szablony. Ponadto określ atrybut ItemsSource z jego wartością w elemencie DataGrid.

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

W tym przykładzie przedstawiono określoną funkcję WPF i nie stosuje się wszystkich najlepszych rozwiązań dotyczących zabezpieczeń, lokalizacji i ułatwień dostępu. Aby uzyskać kompleksowy zakres najlepszych rozwiązań dotyczących programowania aplikacji WPF i platformy .NET, zobacz następujące tematy:

Dalsze kroki

W tym przewodniku przedstawiono kilka technik tworzenia interfejsu użytkownika przy użyciu programu Windows Presentation Foundation (WPF). Teraz musisz mieć podstawową wiedzę na temat bloków konstrukcyjnych aplikacji platformy .NET powiązanej z danymi. 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 także