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

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, přečtěte si kurz: Vytvoření nové aplikace WPF (WPF .NET).

V tomto návodu se naučíte, jak:

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.

Návod

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.

Požadavky

Visual Studio 2019 s nainstalovanou úlohou vývoje desktopových aplikací .NET

Další informace o instalaci nejnovější verze sady Visual Studio naleznete v tématu Instalace sady Visual Studio.

Vytvoření projektu aplikace

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

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ší.
  
  Otevře se dialogové okno Konfigurovat nový projekt .
4. Zadejte název ExpenseIt projektu a pak vyberte Vytvořit.
  
  Visual Studio vytvoří projekt a otevře návrháře pro výchozí okno aplikace s názvem MainWindow.xaml.

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>

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í.
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.
Odstraňte prvky Grid z prostoru mezi značkami NavigationWindow.

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>

Otevřete MainWindow.xaml.vb nebo MainWindow.xaml.cs.

Tento soubor je soubor code-behind, 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.

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.

Přidejte do projektu novou stránku a pojmenujte ji ExpenseItHome.xaml:
1. V Průzkumníku ř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ých si mohou vybrat, pro zobrazení sestavy výdajů.
Otevřít ExpenseItHome.xaml.
Title Nastavte hodnotu "ExpenseIt - Home".

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>

Otevřete MainWindow.xaml.

Přidejte do elementu Source NavigationWindow vlastnost a nastavte ji na "ExpenseItHome.xaml".

Tím se nastaví ExpenseItHome.xaml jako první stránka, která se otevře 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>

Návod

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

Zdrojová vlastnost v okně Vlastnosti

Přidejte do projektu další novou stránku WPF a pojmenujte ji ExpenseReportPage.xaml::
1. V Průzkumníku ř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 stránce ExpenseItHome.
Otevřete ExpenseReportPage.xaml.
Title Nastavte hodnotu "ExpenseIt - View Expense".

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>

Otevřete ExpenseItHome.xaml.vb a ExpenseReportPage.xaml.vb nebo ExpenseItHome.xaml.cs a ExpenseReportPage.xaml.cs.

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

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

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íku řešení a potom v okně Vlastnosti nastavte Akci sestavení na Prostředek.

Sestavení a spuštění aplikace

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:
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 Canvas.
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é řady, kterou lze orientovat 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, přenese obsah na další řádek, pokud se blíží k 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.

Návod

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.

V ExpenseItHome.xaml, nastavte vlastnost Margin prvku Grid na "10,0,10,10", což odpovídá levým, horním, pravým a dolním okrajům.
```
<Grid Margin="10,0,10,10">
```
Návod

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

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 je Star velikost, 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.

Vaše Grid by nyní mělo 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 naleznete v tématu ovládací prvky .

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 díky nastavení připojené vlastnosti Grid.Row. Další informace o připojených vlastnostech naleznete v části Přehled připojených vlastností.

Do ExpenseItHome.xaml přidejte následující XAML někam mezi Grid tagy:


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

Návod

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 .

Sestavte a spusťte aplikaci.

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

Snímek obrazovky s ukázkou ExpenseIt zobrazující seznam jmen

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.

V ExpenseItHome.xaml přidejte další sloupec do ColumnDefinitions s pevnou šířkou Width 230 pixelů.

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

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

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

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

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>

Nastavte vlastnost Background na soubor obrázkuwatermark.png přidáním následujícího kódu XAML kamkoli mezi značky <Grid> a </Grid>.
```
<Grid.Background>
    <ImageBrush ImageSource="watermark.png"/>
</Grid.Background>
```

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

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

Sestavte a spusťte aplikaci.

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

Ukázkový snímek obrazovky ExpenseIt s novým obrázkovým pozadím a názvem stránky

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

Do prvku ExpenseItHome.xaml přidejte obslužnou rutinu události Click. 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>

Otevřít ExpenseItHome.xaml.vb nebo ExpenseItHome.xaml.cs.

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

Otevřete ExpenseReportPage.xaml.

Přidejte následující XAML mezi značky 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, kromě toho, že data sestavy jsou zobrazena v DataGrid.

Sestavte a spusťte aplikaci.
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.

Snímek obrazovky s ukázkou ExpenseIt zobrazující právě vytvořené uživatelské rozhraní pro 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.

Otevřete Application.xaml nebo App.xaml.

Přidejte následující XAML mezi značky 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: Formátovat DataGridColumnHeader.
listHeaderStyle: Formátování ovládacích prvků záhlaví Border seznamu
listHeaderTextStyle: Naformátujte záhlaví seznamu Label.
buttonStyle: Chcete-li formátovat Button na ExpenseItHome.xaml.

Všimněte si, že styly jsou zdroje a potomky elementu vlastnosti Application.Resources. 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.

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

Otevřete ExpenseReportPage.xaml.

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.

Sestavte a spusťte aplikaci. Vzhled okna je stejný jako dříve.
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.

Po otevření ExpenseItHome.xaml elementu, přidejte následující XAML, abyste vytvořili Grid, 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>

Datum je vytvořeno jako Grid zdroj. Za normálních okolností by se tato data načítala jako soubor, ale kvůli jednoduchosti se přidávají přímo.

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

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 vlastnost ItemsSource prvku ListBox se zdrojem dat a použije šablonu dat jako ItemTemplate.

Připojení dat 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.

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

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

Otevřít ExpenseItHome.xaml.vb nebo ExpenseItHome.xaml.cs.

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.

Otevřete ExpenseReportPage.xaml.

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>

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>

DataGridTextColumn Nahraďte prvky pod DataGridTemplateColumn elementem DataGrid 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>

Sestavte a spusťte aplikaci.
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:

Obě stránky aplikace zobrazující seznam názvů a sestavu výdajů

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:

Architektura WPF
XAML ve WPF
Přehled vlastností závislostí
Rozložení

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

Viz také

Váš názor

Byla tato stránka užitečná?

Last updated on 2025-05-07

Sdílet prostřednictvím

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

Požadavky

Vytvoření projektu aplikace

Přidání souborů do aplikace

Sestavení a spuštění aplikace

Vytvoření rozložení

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

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

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

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

Ovládací prvky stylu

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

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

Styl dat pomocí šablon dat

Další kroky

Viz také

Váš názor

Další materiály