Kurz: Vytvoření první aplikace WPF v sadě Visual Studio 2019

  • Článek

Tento článek ukazuje, jak vyvíjet desktopovou aplikaci WPF (Windows Presentation Foundation), která obsahuje prvky, které jsou společné pro většinu aplikací WPF: značky XAML (Extensible Application Markup Language), kód za kódem, definice aplikací, ovládací prvky, rozložení, datové vazby a styly. K vývoji aplikace použijete Visual Studio.

Důležité

Tento článek byl napsán pro rozhraní .NET Framework. Pokud chcete začít s .NET 7, přečtěte si kurz: Vytvoření nové aplikace WPF (WPF .NET).

V tomto kurzu se naučíte:

  • Vytvořte projekt WPF.
  • Použití XAML k návrhu vzhledu uživatelského rozhraní aplikace (UI).
  • Napište kód pro sestavení chování aplikace.
  • Vytvořte definici aplikace pro správu aplikace.
  • Přidejte ovládací prvky a vytvořte rozložení pro vytvoření uživatelského rozhraní aplikace.
  • Vytvářejte styly pro konzistentní vzhled v uživatelském rozhraní aplikace.
  • Vytvořte vazbu uživatelského rozhraní k datům, a to jak k naplnění uživatelského rozhraní z dat, tak k zachování synchronizace dat a uživatelského rozhraní.

Na konci kurzu budete mít vytvořenou samostatnou aplikaci pro Windows, která uživatelům umožňuje zobrazit sestavy výdajů pro vybrané lidi. Aplikace se skládá z několika stránek WPF hostovaných v okně stylu prohlížeče.

Tip

Ukázkový kód, který se používá v tomto kurzu, je k dispozici pro Visual Basic i C# na webu Tutorial WPF App Sample Code.

Jazyk kódu ukázkového kódu můžete přepínat mezi jazykem C# a Visual Basic pomocí selektoru jazyka v horní části této stránky.

Předpoklady

Vytvoření projektu aplikace

Prvním krokem je vytvoření aplikační infrastruktury, která zahrnuje definici aplikace, dvě stránky a obrázek.

  1. Vytvořte nový projekt aplikace WPF v jazyce Visual Basic nebo Visual C# s názvem ExpenseIt:

    1. Otevřete Visual Studio a v nabídce Začínáme vyberte Vytvořit nový projekt.

      Otevře se dialogové okno Vytvořit nový projekt .

    2. V rozevíracím seznamu Jazyk vyberte jazyk C# nebo Visual Basic.

    3. Vyberte šablonu aplikace WPF (.NET Framework) a pak vyberte Další.

      Create a new project dialog

      Otevře se dialogové okno Konfigurovat nový projekt .

    4. Zadejte název ExpenseIt projektu a pak vyberte Vytvořit.

      Configure a new project dialog

      Visual Studio vytvoří projekt a otevře návrháře pro výchozí okno aplikace s názvem MainWindow.xaml.

  2. Otevřete Application.xaml (Visual Basic) nebo App.xaml (C#).

    Tento soubor XAML definuje aplikaci WPF a všechny prostředky aplikace. Tento soubor také použijete k určení uživatelského rozhraní, v tomto případě MainWindow.xaml, který se automaticky zobrazí při spuštění aplikace.

    Xaml by měl v jazyce Visual Basic vypadat nějak takto:

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

    A podobně jako v jazyce 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. Otevřete MainWindow.xaml.

    Tento soubor XAML je hlavním oknem aplikace a zobrazuje obsah vytvořený na stránkách. Třída Window definuje vlastnosti okna, jako je název, velikost nebo ikona, a zpracovává události, jako je zavření nebo skrytí.

  4. Window Změňte element na hodnotu NavigationWindow, jak je znázorněno v následujícím kódu 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>

    Tato aplikace přejde na jiný obsah v závislosti na vstupu uživatele. To je důvod, proč je třeba změnit hlavní Window na NavigationWindow. NavigationWindowdědí všechny vlastnosti .Window Element NavigationWindow v souboru XAML vytvoří instanci NavigationWindow třídy. Další informace najdete v tématu Přehled navigace.

  5. Grid Odeberte prvky mezi značkamiNavigationWindow.

  6. V kódu XAML pro NavigationWindow element změňte následující vlastnosti:

    • Title Nastavte vlastnost na "ExpenseIt".

    • Height Nastavte vlastnost na 350 pixelů.

    • Width Nastavte vlastnost na 500 pixelů.

    Jazyk XAML by měl vypadat jako v jazyce 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>

    A podobně jako v jazyce 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. Otevřete Soubor MainWindow.xaml.vb nebo MainWindow.xaml.cs.

    Tento soubor je soubor za kódem, který obsahuje kód pro zpracování událostí deklarovaných v MainWindow.xaml. Tento soubor obsahuje částečnou třídu pro okno definované v xaml.

  8. Pokud používáte jazyk C#, změňte MainWindow třídu tak, aby byla odvozena od NavigationWindow. (V jazyce Visual Basic k tomu dojde automaticky při změně okna v XAML.) Váš kód jazyka C# by teď měl vypadat takto:

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

Přidání souborů do aplikace

V této části přidáte dvě stránky a obrázek do aplikace.

  1. Přidejte do projektu novou stránku a pojmenujte ji ExpenseItHome.xaml:

    1. V Průzkumník řešení klikněte pravým tlačítkem myši na ExpenseIt uzel projektu a zvolte Přidat>stránku.

    2. V dialogovém okně Přidat novou položku je již vybrána šablona Page (WPF). Zadejte název ExpenseItHomea pak vyberte Přidat.

    Tato stránka je první stránkou, která se zobrazí při spuštění aplikace. Zobrazí se seznam lidí, ze které si můžou vybrat, aby se zobrazila sestava výdajů.

  2. Otevře záznam typu ExpenseItHome.xaml.

  3. Title Nastavte hodnotu "ExpenseIt - Home".

  4. DesignHeight Nastavte na 350 pixelů a DesignWidth na 500 pixelů.

    Xaml se teď pro Visual Basic zobrazí takto:

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

    A podobně jako v jazyce 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. Otevřete MainWindow.xaml.

  6. Přidejte do elementu SourceNavigationWindow vlastnost a nastavte ji na "ExpenseItHome.xaml".

    Tato sada se nastaví ExpenseItHome.xaml jako první stránka otevřená při spuštění aplikace.

    Příklad XAML v jazyce 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 v jazyce 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>

    Tip

    Vlastnost Zdroj můžete také nastavit v kategorii Různé okna Vlastnosti.

    Source property in Properties window

  7. Přidejte do projektu další novou stránku WPF a pojmenujte ji ExpenseReportPage.xaml::

    1. V Průzkumník řešení klikněte pravým tlačítkem myši na ExpenseIt uzel projektu a zvolte Přidat>stránku.

    2. V dialogovém okně Přidat novou položku vyberte šablonu Page (WPF). Zadejte název ExpenseReportPage a pak vyberte Přidat.

    Na této stránce se zobrazí sestava výdajů pro osobu vybranou na ExpenseItHome stránce.

  8. Otevřete ExpenseReportPage.xaml.

  9. Title Nastavte hodnotu "ExpenseIt - View Expense".

  10. DesignHeight Nastavte na 350 pixelů a DesignWidth na 500 pixelů.

    ExpenseReportPage.xaml teď vypadá v jazyce Visual Basic takto:

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

    A podobně jako v jazyce 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. Otevřete ExpenseItHome.xaml.vb a ExpenseReportPage.xaml.vb nebo ExpenseItHome.xaml.cs a ExpenseReportPage.xaml.cs.

    Při vytváření nového stránkového souboru sada Visual Studio automaticky vytvoří soubor kódu za kódem. Tyto soubory kódu zpracovávají logiku pro reakci na vstup uživatele.

    Váš kód by měl vypadat takto 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

    A podobně jako v případě 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. Přidejte do projektu obrázek s názvem watermark.png . Můžete vytvořit vlastní image, zkopírovat soubor z ukázkového kódu nebo ho získat z úložiště Microsoft/WPF-Samples na GitHubu.

    1. Klikněte pravým tlačítkem myši na uzel projektu a vyberte Přidat>existující položku nebo stiskněte shift+ Alt+A.

    2. V dialogovém okně Přidat existující položku nastavte filtr souboru na Všechny soubory nebo Soubory obrázků, přejděte k souboru obrázku, který chcete použít, a pak vyberte Přidat.

    3. Vyberte soubor obrázku v Průzkumník řešení a potom v okně Vlastnosti nastavte akci sestavení na prostředek.

Sestavení a spuštění aplikace

  1. Pokud chcete sestavit a spustit aplikaci, stiskněte klávesu F5 nebo v nabídce Ladění vyberte Spustit ladění.

    Následující obrázek znázorňuje aplikaci s NavigationWindow tlačítky:

    Application after you build and run it.

  2. Zavřete aplikaci a vraťte se do sady Visual Studio.

Vytvoření rozložení

Rozložení poskytuje uspořádaný způsob, jak umístit prvky uživatelského rozhraní a také spravovat velikost a umístění těchto prvků při změně velikosti uživatelského rozhraní. Rozložení obvykle vytvoříte pomocí jednoho z následujících ovládacích prvků rozložení:

  • Canvas - Definuje oblast, ve které můžete explicitně umístit podřízené prvky pomocí souřadnic, které jsou relativní k oblasti plátna.
  • DockPanel - Definuje oblast, ve které můžete uspořádat podřízené prvky vodorovně nebo svisle vzhledem k sobě.
  • Grid – Definuje flexibilní oblast mřížky, která se skládá ze sloupců a řádků.
  • StackPanel - Uspořádá podřízené prvky do jedné čáry, která může být orientována vodorovně nebo svisle.
  • VirtualizingStackPanel - Uspořádá a virtualizuje obsah na jednom řádku, který je orientovaný vodorovně nebo svisle.
  • WrapPanel - Umístí podřízené prvky do sekvenční pozice zleva doprava, rozbít obsah na další řádek na okraji obsahujícího pole. Následné řazení probíhá postupně shora dolů nebo zprava doleva v závislosti na hodnotě vlastnosti Orientace.

Každý z těchto ovládacích prvků rozložení podporuje konkrétní typ rozložení pro jeho podřízené prvky. ExpenseIt stránky lze změnit velikost a každá stránka obsahuje prvky, které jsou uspořádané vodorovně a svisle vedle ostatních prvků. V tomto příkladu Grid se používá jako element rozložení pro aplikaci.

Tip

Další informace o prvcích najdete v Panel tématu Přehled panelů. Další informace o rozložení najdete v tématu Rozložení.

V této části vytvoříte tabulku s jedním sloupcem se třemi řádky a 10 pixelovým okrajem přidáním definic sloupců a řádků do objektu Grid in ExpenseItHome.xaml.

  1. V ExpenseItHome.xaml, nastavte Margin vlastnost prvku Grid na "10,0,10,10", který odpovídá levé, horní, pravé a dolní okraje:

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

    Tip

    Hodnoty okrajů můžete také nastavit v okně Vlastnosti v kategorii Rozložení:

    Margin values in Properties window

  2. Přidejte následující KÓD XAML mezi Grid značky pro vytvoření definic řádků a sloupců:

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

    Dva Height řádky jsou nastaveny na Auto, což znamená, že řádky mají velikost na základě obsahu v řádcích. Výchozí Height nastavení je Star nastavení velikosti, což znamená, že výška řádku je váženým poměrem dostupného místa. Pokud mají například dva řádky znaky Height "*", každý z nich má výšku, která je polovinou dostupného prostoru.

    Teď Grid by měl obsahovat následující xaml:

    <Grid Margin="10,0,10,10">
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition />
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
</Grid>

Přidání ovládacích prvků

V této části aktualizujete uživatelské rozhraní domovské stránky tak, aby zobrazoval seznam lidí, kde vyberete jednu osobu, která zobrazí sestavu výdajů. Ovládací prvky jsou objekty uživatelského rozhraní, které uživatelům umožňují pracovat s vaší aplikací. Další informace najdete v části o ovládacích prvcích.

Chcete-li vytvořit toto uživatelské rozhraní, přidáte následující prvky do ExpenseItHome.xaml:

  • A ListBox (pro seznam lidí).
  • A Label (pro záhlaví seznamu).
  • A Button (kliknutím zobrazíte sestavu výdajů pro osobu vybranou v seznamu).

Každý ovládací prvek je umístěn v řádku Grid nastavením Grid.Row připojené vlastnosti. Další informace o připojených vlastnostech naleznete v části Přehled připojených vlastností.

  1. Do ExpenseItHome.xamlpole přidejte následující kód XAML mezi Grid značky:

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

    Tip

    Ovládací prvky můžete také vytvořit přetažením z okna Panel nástrojů do okna návrhu a následným nastavením jejich vlastností v okně Vlastnosti .

  2. Sestavte a spusťte aplikaci.

    Následující obrázek znázorňuje vytvořené ovládací prvky:

ExpenseIt sample screenshot displaying a list of names

Přidání obrázku a názvu

V této části aktualizujete uživatelské rozhraní domovské stránky obrázkem a názvem stránky.

  1. Přidejte ExpenseItHome.xamldalší sloupec do ColumnDefinitions pevného Width 230 pixelů:

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

  2. Přidejte do řádku RowDefinitionsdalší řádek pro celkem čtyři řádky:

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

  3. Přesuňte ovládací prvky do druhého sloupce nastavením Grid.Column vlastnosti na 1 v každém ze tří ovládacích prvků (Border, ListBox a Button).

  4. Přesunutím každého ovládacího prvku dolů o řádek zvýšíte jeho Grid.Row hodnotu o 1 pro každý ze tří ovládacích prvků (Border, ListBox a Button) a pro prvek Border.

    XAML pro tyto tři ovládací prvky teď vypadá takto:

      <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. Nastavte vlastnost Pozadí na soubor obrázku watermark.png přidáním následujícího kódu XAML kamkoli mezi značky <Grid> a </Grid> značky:

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

  6. Border Před element přidejte s obsahem Label Zobrazit vyúčtování výdajů. Tento popisek je název stránky.

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

  7. Sestavte a spusťte aplikaci.

Následující obrázek ukazuje výsledky toho, co jste právě přidali:

ExpenseIt sample screenshot showing the new image background and page title

Přidání kódu pro zpracování událostí

  1. Do ExpenseItHome.xamlelementu přidejte obslužnou rutinu ClickButton události. Další informace naleznete v tématu Postupy: Vytvoření jednoduché obslužné rutiny události.

      <!-- 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. Otevřít ExpenseItHome.xaml.vb nebo ExpenseItHome.xaml.cs.

  3. Přidejte do ExpenseItHome třídy následující kód, který přidá obslužnou rutinu události kliknutí na tlačítko. Obslužná rutina události otevře stránku 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

Vytvoření uživatelského rozhraní pro ExpenseReportPage

ExpenseReportPage.xaml zobrazí sestavu výdajů pro osobu vybranou na ExpenseItHome stránce. V této části vytvoříte uživatelské rozhraní pro ExpenseReportPage. Do různých prvků uživatelského rozhraní přidáte také barvy pozadí a výplně.

  1. Otevřete ExpenseReportPage.xaml.

  2. Mezi značky přidejte následující XAML 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>

    Toto uživatelské rozhraní je podobné ExpenseItHome.xaml, s výjimkou dat sestavy se zobrazí v souboru DataGrid.

  3. Sestavte a spusťte aplikaci.

  4. Vyberte tlačítko Zobrazit.

    Zobrazí se stránka vyúčtování výdajů. Všimněte si také, že je povolené tlačítko zpětné navigace.

Následující obrázek ukazuje prvky uživatelského rozhraní přidané do ExpenseReportPage.xaml.

ExpenseIt sample screenshot showing the UI just created for the ExpenseReportPage.

Ovládací prvky stylu

Vzhled různých prvků je často stejný pro všechny prvky stejného typu v uživatelském rozhraní. Uživatelské rozhraní používá styly k opětovnému použití vzhledu napříč několika prvky. Opětovná použitelnost stylů pomáhá zjednodušit vytváření a správu XAML. Tato část nahrazuje atributy pro jednotlivé elementy, které byly definovány v předchozích krocích styly.

  1. Otevřete Application.xaml nebo App.xaml.

  2. Mezi značky přidejte následující XAML 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>

    Tento XAML přidá následující styly:

    • headerTextStyle: Formátování názvu Labelstránky .

    • labelStyle: Formátování ovládacích Label prvků.

    • columnHeaderStyle: Chcete-li formátovat DataGridColumnHeader.

    • listHeaderStyle: Formátování ovládacích prvků záhlaví Border seznamu

    • listHeaderTextStyle: Formátování záhlaví Labelseznamu .

    • buttonStyle: Chcete-li formátovat zapnuto ButtonExpenseItHome.xaml.

    Všimněte si, že styly jsou prostředky a podřízené elementu Application.Resources vlastnosti. V tomto umístění se styly použijí pro všechny prvky v aplikaci. Příklad použití prostředků v aplikaci .NET najdete v tématu Použití prostředků aplikace.

  3. Nahraďte ExpenseItHome.xamlvše mezi elementy Grid následujícím jazykem 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>

    Vlastnosti, například VerticalAlignment a FontFamily které definují vzhled každého ovládacího prvku, jsou odebrány a nahrazeny použitím stylů. Například se headerTextStyle použije na "Zobrazit vyúčtování výdajů" Label.

  4. Otevřete ExpenseReportPage.xaml.

  5. Nahraďte vše mezi Grid elementy následujícím kódem 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>

    Tento XAML přidává styly k prvkům Label a Border prvkům.

  6. Sestavte a spusťte aplikaci. Vzhled okna je stejný jako dříve.

    ExpenseIt sample screenshot with the same appearance as in the last section.

  7. Zavřete aplikaci a vraťte se do sady Visual Studio.

Vytvoření vazby dat k ovládacímu prvku

V této části vytvoříte data XML, která jsou svázaná s různými ovládacími prvky.

  1. Za ExpenseItHome.xamllevý Grid element přidejte následující XAML a vytvořte tak XmlDataProvider data, která obsahuje data pro každou osobu:

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

    Data se vytvoří jako Grid prostředek. Za normálních okolností by se tato data načetla jako soubor, ale kvůli jednoduchosti se data přidávají vložená.

  2. Do elementu <Grid.Resources> přidejte následující <xref:System.Windows.DataTemplate> prvek, který definuje, jak zobrazit data v objektu ListBox, za <XmlDataProvider> element:

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

    Další informace o šablonách dat najdete v tématu Přehled šablon dat.

  3. Existující nahraďte ListBox následujícím kódem XAML:

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

    Tento XAML sváže ItemsSource vlastnost ListBox zdroje dat a použije šablonu dat jako ItemTemplate.

Připojení data k ovládacím prvkům

Dále přidáte kód, který načte název vybraný na ExpenseItHome stránce a předá ho konstruktoru ExpenseReportPage. ExpenseReportPage nastaví svůj datový kontext s předanou položkou, což je to, k čemu ovládací prvky definované v ExpenseReportPage.xaml vytvoří vazbu.

  1. Otevřete Soubor ExpenseReportPage.xaml.vb nebo ExpenseReportPage.xaml.cs.

  2. Přidejte konstruktor, který vezme objekt, abyste mohli předat data vyúčtování výdajů vybrané 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. Otevřít ExpenseItHome.xaml.vb nebo ExpenseItHome.xaml.cs.

  4. Změňte obslužnou rutinu Click události tak, aby volala nový konstruktor, který předává data vyúčtování výdajů vybrané 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

Styl dat pomocí šablon dat

V této části aktualizujete uživatelské rozhraní pro každou položku v seznamech vázaných na data pomocí šablon dat.

  1. Otevřete ExpenseReportPage.xaml.

  2. Vytvořte vazbu obsahu elementů Name a Department Label na odpovídající vlastnost zdroje dat. Další informace o datové vazbě najdete v tématu Přehled datových vazeb.

    <!-- 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. Za levý Grid prvek přidejte následující šablony dat, které definují, jak zobrazit data vyúčtování výdajů:

    <!--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. DataGridTextColumn Nahraďte prvky pod DataGrid elementem DataGridTemplateColumn a použijte na ně šablony. Také zadejte ItemsSource atribut s jeho hodnotou v elementu 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. Sestavte a spusťte aplikaci.

  6. Vyberte osobu a pak vyberte tlačítko Zobrazit .

Následující obrázek znázorňuje obě stránky ExpenseIt aplikace s použitými ovládacími prvky, rozložením, styly, datovými vazbami a šablonami dat:

Both pages of the app showing the names list and an expense report.

Poznámka:

Tato ukázka ukazuje konkrétní funkci WPF a nedodržuje všechny osvědčené postupy pro věci, jako je zabezpečení, lokalizace a přístupnost. Komplexní pokrytí osvědčených postupů pro vývoj aplikací .NET a WPF najdete v následujících tématech:

Další kroky

V tomto názorném postupu jste se naučili řadu technik pro vytvoření uživatelského rozhraní pomocí windows Presentation Foundation (WPF). Teď byste měli mít základní znalosti o stavebních blocích aplikace .NET vázané na data. Další informace o architektuře WPF a programovacích modelech najdete v následujících tématech:

Další informace o vytváření aplikací najdete v následujících tématech:

Viz také