Oktatóanyag: Az első WPF-alkalmazás létrehozása a Visual Studio 2019-ben

Ez a cikk bemutatja, hogyan fejleszthet asztali Windows Presentation Foundation (WPF) alkalmazásokat, amelyek a legtöbb WPF-alkalmazásra jellemző elemeket tartalmazzák: Extensible Application Markup Language (XAML) korrektúra, kód mögött, alkalmazásdefiníciók, vezérlők, elrendezés, adatkötés és stílusok. Az alkalmazás fejlesztéséhez a Visual Studiót kell használnia.

Fontos

Ez a cikk a .NET-keretrendszerhez készült. A .NET használatának megkezdéséhez tekintse meg az oktatóanyagot: Új WPF-alkalmazás (WPF .NET) létrehozása.

Ebben az oktatóanyagban a következőket sajátíthatja el:

WPF-projekt létrehozása.
Az XAML használatával megtervezi az alkalmazás felhasználói felületének (UI) megjelenését.
Írjon kódot az alkalmazás viselkedésének felépítéséhez.
Hozzon létre egy alkalmazásdefiníciót az alkalmazás kezeléséhez.
Adjon hozzá vezérlőket, és hozza létre az elrendezést az alkalmazás felhasználói felületének létrehozásához.
Stílusok létrehozása egységes megjelenéshez az alkalmazás felhasználói felületén.
A felhasználói felületet az adatokhoz köti, így feltölti a felhasználói felületet az adatokból, és szinkronizálja az adatokat és a felhasználói felületet.

Az oktatóanyag végére egy különálló Windows-alkalmazást fog létrehozni, amely lehetővé teszi a felhasználók számára a kiválasztott személyek költségjelentéseinek megtekintését. Az alkalmazás több WPF-oldalból áll, amelyek böngészőstílusú ablakban találhatók.

Jótanács

Az oktatóanyagban használt mintakód visual basic és C# nyelven is elérhető a WPF-alkalmazás mintakódjának oktatóanyagában.

A mintakód kódnyelvét a C# és a Visual Basic közötti váltáshoz használja a lap tetején található nyelvválasztót.

Előfeltételek

A Visual Studio 2019 telepítve van a .NET asztali fejlesztési számítási feladattal.

A Visual Studio legújabb verziójának telepítéséről további információt a Visual Studio telepítése című témakörben talál.

Az alkalmazásprojekt létrehozása

Az első lépés az alkalmazásinfrastruktúra létrehozása, amely egy alkalmazásdefiníciót, két oldalt és egy képet tartalmaz.

Hozzon létre egy új WPF-alkalmazásprojektet a Visual Basic vagy a Visual C# névvel ExpenseIt:
1. Nyissa meg a Visual Studiót, és válassza az Első lépések menü Új projekt létrehozása parancsát.
  
  Megnyílik az Új projekt létrehozása párbeszédpanel.
2. A Nyelv legördülő listában válassza a C# vagy a Visual Basic lehetőséget.
3. Válassza ki a WPF-alkalmazás (.NET-keretrendszer) sablont, majd válassza a Tovább lehetőséget.
  
  Megnyílik az új projekt konfigurálása párbeszédpanel.
4. Adja meg a projekt nevét ExpenseIt , majd válassza a Létrehozás lehetőséget.
  
  A Visual Studio létrehozza a projektet, és megnyitja a tervezőt a MainWindow.xaml nevű alapértelmezett alkalmazásablakhoz.

Nyissa meg az Application.xaml (Visual Basic) vagy az App.xaml (C#) alkalmazást.

Ez az XAML-fájl egy WPF-alkalmazást és minden alkalmazáserőforrást határoz meg. Ezzel a fájllal megadhatja a mainwindow.xaml felhasználói felületet is, amely automatikusan megjeleníti az alkalmazás indításakor.

Az XAML-nek a következőképpen kell kinéznie a Visual Basicben:

<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 C#-ban pedig az alábbiakhoz hasonlóan:

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

Nyissa meg MainWindow.xaml.

Ez az XAML-fájl az alkalmazás főablaka, és a lapokban létrehozott tartalmakat jeleníti meg. Az Window osztály meghatározza egy ablak tulajdonságait, például a címét, méretét vagy ikonját, és kezeli az eseményeket, például a bezárást vagy a elrejtést.
Módosítsa az Window elemet a következő XAML-ben látható értékre NavigationWindow:
```
<NavigationWindow x:Class="ExpenseIt.MainWindow"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     ...
</NavigationWindow>
```
Ez az alkalmazás a felhasználói bemenettől függően különböző tartalmakra navigál. Ezért kell a főt Window egy NavigationWindow. NavigationWindow a minden tulajdonságát Windowörökli. Az NavigationWindow XAML-fájl eleme létrehozza az osztály egy példányát NavigationWindow . További információ: Navigáció – áttekintés.
Távolítsa el az Grid elemeket a NavigationWindow címkék között.

Módosítsa a következő tulajdonságokat az elem XAML-kódjában NavigationWindow :

Állítsa a Title tulajdonságot "ExpenseIt" értékre.
Állítsa a Height tulajdonságot 350 képpontra.
Állítsa a Width tulajdonságot 500 képpontra.

Az XAML-nek a következőhöz hasonlóan kell kinéznie a Visual Basic esetében:

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

És a következő a C# esetében:

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

Nyissa meg MainWindow.xaml.vb vagy MainWindow.xaml.cs.

Ez a fájl egy kód mögötti fájl, amely kódot tartalmaz a MainWindow.xaml-ben deklarált események kezelésére. Ez a fájl az XAML-ben definiált ablak egy részleges osztályát tartalmazza.

Ha C#-ot használ, módosítsa az MainWindow osztályt úgy, hogy az a NavigationWindow származzon. (A Visual Basicben ez automatikusan megtörténik az XAML ablakának módosításakor.) A C#-kódnak így kell kinéznie:


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

Fájlok hozzáadása az alkalmazáshoz

Ebben a szakaszban két oldalt és egy képet fog hozzáadni az alkalmazáshoz.

Adjon hozzá egy új lapot a projekthez, és nevezze el:ExpenseItHome.xaml
1. A Megoldáskezelőben kattintson a jobb gombbal a projektcsomópontra, és válassza a ExpenseItLap>.
2. Az Új elem hozzáadása párbeszédpanelen a Lap (WPF) sablon már ki van jelölve. Adja meg a nevet ExpenseItHome, majd válassza a Hozzáadás lehetőséget.
Ez a lap az első lap, amely az alkalmazás indításakor jelenik meg. Megjeleníti azoknak a személyeknek a listáját, akik közül választhat, és megjelenítheti a költségjelentést.
Nyissa meg ExpenseItHome.xaml.
Állítsa be a Title "ExpenseIt - Home" értéket.

Állítsa be a DesignHeight 350 képpontot és az DesignWidth 500 képpontot.

Az XAML mostantól a következőképpen jelenik meg a Visual Basic esetében:

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

És a következő a C# esetében:

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

Nyissa meg MainWindow.xaml.

Adjon hozzá egy tulajdonságot Source az NavigationWindow elemhez, és állítsa "ExpenseItHome.xaml" értékre.

ExpenseItHome.xaml Az alkalmazás indításakor ez lesz az első megnyitott lap.

XAML példa Visual Basic környezetben:

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

És C#-ban:

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

Jótanács

A Forrás tulajdonságot a Tulajdonságok ablak Egyéb kategóriájában is beállíthatja .

Forrástulajdonság a Tulajdonságok ablakban

Adjon hozzá egy másik új WPF-lapot a projekthez, és nevezze el ExpenseReportPage.xaml néven:
1. A Megoldáskezelőben kattintson a jobb gombbal a projektcsomópontra, és válassza a ExpenseItLap>.
2. Az Új elem hozzáadása párbeszédpanelen válassza a Lap (WPF) sablont. Adja meg a ExpenseReportPage nevet, majd válassza a Hozzáadás lehetőséget.
Ezen a lapon megjelenik a lapon kiválasztott személy költségjelentése ExpenseItHome .
Nyissa meg a ExpenseReportPage.xaml fájlt.
Állítsa be a Title "ExpenseIt - View Expense" értéket.

Állítsa be a DesignHeight 350 képpontot és az DesignWidth 500 képpontot.

A ExpenseReportPage.xaml mostantól a következőképpen néz ki a Visual Basicben:

<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 C#-ban pedig az alábbiakhoz hasonlóan:

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

Nyissa meg ExpenseItHome.xaml.vb és ExpenseReportPage.xaml.vb, vagy ExpenseItHome.xaml.cs és ExpenseReportPage.xaml.cs.

Új lapfájl létrehozásakor a Visual Studio automatikusan létrehozza a kód mögötti fájlt. Ezek a kód mögötti fájlok kezelik a felhasználói bemenetekre való válaszadás logikáját.

A kódnak a következőhöz hasonlóan kell kinéznie 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 ExpenseReportPage esetében pedig az alábbiakhoz hasonlóan:

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

Adjon hozzá egy watermark.png nevű képet a projekthez. Létrehozhat saját lemezképet, másolhatja a fájlt a mintakódból, vagy lekérheti a Microsoft/WPF-Samples GitHub-adattárból.
1. Kattintson a jobb gombbal a projektcsomópontra, és válassza aMeglévő elem> lehetőséget, vagy nyomja le a Shift+ AltA+.
2. A Meglévő elem hozzáadása párbeszédpanelen állítsa a fájlszűrőt a Minden fájl vagy képfájl értékre, keresse meg a használni kívánt képfájlt, majd válassza a Hozzáadás lehetőséget.
3. Válassza ki a képfájlt a Megoldáskezelőben, majd a Tulajdonságok ablakban állítsa a buildelési műveleteterőforrásra.

Az alkalmazás létrehozása és futtatása

Az alkalmazás létrehozásához és futtatásához nyomja le az F5 billentyűt, vagy válassza a Hibakeresésmenüben a Hibakeresés indítása lehetőséget.

Az alábbi ábrán az alkalmazás látható a NavigationWindow gombokkal:
Zárja be az alkalmazást a Visual Studióba való visszatéréshez.

Az elrendezés létrehozása

Az elrendezés rendezett módot biztosít a felhasználói felület elemeinek elhelyezésére, valamint az elemek méretének és helyzetének kezelésére a felhasználói felület átméretezésekor. Általában az alábbi elrendezésvezérlők egyikével hoz létre elrendezést:

Canvas – Meghatározza azt a területet, amelyen belül a gyermekelemeket explicit módon elhelyezheti a Vászon területhez viszonyított koordináták használatával.
DockPanel – Meghatározza azt a területet, ahol a gyermekelemek egymáshoz képest vízszintesen vagy függőlegesen rendezhetők.
Grid – Egy rugalmas rácsterületet határoz meg, amely oszlopokból és sorokból áll.
StackPanel - A gyermekelemeket egyetlen sorba rendezi, amely elrendezhető vízszintesen vagy függőlegesen.
VirtualizingStackPanel – Egyetlen sorban rendezi és virtualizálja a tartalmat, amely vízszintesen vagy függőlegesen van orientált.
WrapPanel - A gyermekelemeket sorrendben rendezi balról jobbra, a tartalmat a következő sorra törve a doboz szélén. A későbbi rendezés sorrendben történik felülről lefelé vagy jobbról balra a Tájolás tulajdonság értékétől függően.

Mindegyik elrendezésvezérlő támogatja a gyermekelemek adott elrendezéstípusát. ExpenseIt az oldalak átméretezhetők, és minden oldal olyan elemeket tartalmaz, amelyek vízszintesen és függőlegesen vannak elrendezve más elemek mellett. Ebben a példában az Grid elrendezési elemként van használva az alkalmazásban.

Jótanács

Az elemekről Panel további információt a Panelek áttekintése című témakörben talál. Az elrendezésről további információt az Elrendezés című témakörben talál.

Ebben a szakaszban egy három sorból és egy 10 képpontos margóból álló egyoszlopos táblázatot hoz létre úgy, hogy oszlop- és sordefiníciókat ad hozzá a Grid be ExpenseItHome.xaml.

Ebben ExpenseItHome.xamlaz esetben állítsa az Margin Grid elem tulajdonságát "10,0,10,10" értékre, amely a bal, a felső, a jobb és az alsó margónak felel meg:
```
<Grid Margin="10,0,10,10">
```
Jótanács

A Margóértékeket a Tulajdonságok ablakban, az Elrendezés kategóriában is beállíthatja :
Adja hozzá a következő XAML-t a címkék közé a Grid sor- és oszlopdefiníciók létrehozásához:
```
<Grid.ColumnDefinitions>
    <ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
    <RowDefinition Height="Auto"/>
    <RowDefinition />
    <RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
```
A Height értéke a két sor esetében Auto-re van beállítva, ami azt jelenti, hogy a sorok mérete a tartalmuk alapján van meghatározva. Az alapértelmezett Height érték a Star méretezés, ami azt jelenti, hogy a sormagasság a rendelkezésre álló terület súlyozott aránya. Ha például két sor "*" értékkel rendelkezik Height , mindegyiknek van egy magassága, amely a rendelkezésre álló terület fele.

A Grid következő XAML-t kell tartalmaznia:
```
<Grid Margin="10,0,10,10">
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition />
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
</Grid>
```

Vezérlők hozzáadása

Ebben a szakaszban frissíteni fogja a kezdőlap felhasználói felületét, hogy megjelenítse a személyek listáját, ahol kiválaszt egy személyt a költségjelentésük megjelenítéséhez. A vezérlők olyan felhasználói felületi objektumok, amelyek lehetővé teszik a felhasználók számára az alkalmazással való interakciót. További információ: Vezérlők.

A felhasználói felület létrehozásához a következő elemeket kell hozzáadnia a következőhöz ExpenseItHome.xaml:

A ListBox (a személyek listájához).
A Label (a lista fejlécéhez).
A Button (a listában kijelölt személy költségjelentésének megtekintéséhez kattintson ide).

Az egyes vezérlők a csatolt tulajdonság beállításával kerülnek a Grid Grid.Row sorba. A csatolt tulajdonságokról további információt a Csatolt tulajdonságok áttekintése című témakörben talál.

A ExpenseItHome.xaml elemhez adja hozzá a következő XAML-t valahol a Grid címkék közé:


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

Jótanács

A vezérlőket úgy is létrehozhatja, hogy az Eszközkészlet ablakból a tervezőablakba húzza őket, majd beállítja a tulajdonságokat a Tulajdonságok ablakban.

Hozza létre és futtassa az alkalmazást.

Az alábbi ábrán a létrehozott vezérlők láthatók:

A ExpenseIt minta képernyőképe a nevek listájának megjelenítéséről

Kép és cím hozzáadása

Ebben a szakaszban egy képpel és egy lapcímmel fogja frissíteni a kezdőlap felhasználói felületét.

ExpenseItHome.xaml-ban/-ben adjon hozzá egy másik oszlopot a ColumnDefinitions fix szélességgel, 230 képpontos:

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

Adjon hozzá egy másik sort a RowDefinitionsnégy sorból álló sorhoz:

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

Helyezze át a vezérlőket a második oszlopba úgy, hogy a Grid.Column tulajdonságot a három vezérlő (Szegély, Listamező és Gomb) mindegyikében 1 értékre állítja.

Az egyes vezérlőelemeket egy sorba helyezheti úgy, hogy az értékét 1-zel növeli Grid.Row a három vezérlőelem (Szegély, Listamező és Gomb) és a Szegély elem esetében.

A három vezérlő XAML-je a következőhöz hasonlóan néz ki:

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

Állítsa a Háttér tulajdonságot a watermark.png képfájlra, ha a következő XAML-t adja hozzá a <Grid> és </Grid> címkék közé.
```
<Grid.Background>
    <ImageBrush ImageSource="watermark.png"/>
</Grid.Background>
```

Border Az elem előtt adjon hozzá egy Label "Költségjelentés megtekintése" tartalommal. Ez a címke a lap címe.

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

Hozza létre és futtassa az alkalmazást.

Az alábbi ábrán az imént hozzáadott eredmények láthatók:

ExpenseIt minta képernyőkép az új kép hátteréről és a lap címről

Kód hozzáadása események kezeléséhez

A ExpenseItHome.xaml elemben adjon hozzá egy Click eseménykezelőt az Button elemhez. További információ : Útmutató: Egyszerű eseménykezelő létrehozása.

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

Nyisd meg ExpenseItHome.xaml.vb vagy ExpenseItHome.xaml.cs.

Adja hozzá az alábbi kódot az ExpenseItHome osztályhoz, hogy egy gombostűs eseménykezelőt adjon hozzá. Az eseménykezelő megnyitja a ExpenseReportPage lapot.

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

A ExpenseReportPage felhasználói felületének létrehozása

A ExpenseReportPage.xaml megjeleníti az oldalon kijelölt személy költségjelentését ExpenseItHome . Ebben a szakaszban a ExpenseReportPage felhasználói felületét fogja létrehozni. Emellett háttér- és kitöltési színeket is hozzáadhat a különböző felhasználói felületi elemekhez.

Nyissa meg a ExpenseReportPage.xaml fájlt.

Adja hozzá a következő XAML-t a Grid címkék közé:

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

Ez a felhasználói felület hasonló ExpenseItHome.xaml-hoz, de a jelentés adatai egy DataGrid-ben jelennek meg.

Hozza létre és futtassa az alkalmazást.
Válassza a Nézet gombot.

Megjelenik a költségjelentés lap. Azt is láthatja, hogy a háttérnavigációs gomb engedélyezve van.

Az alábbi ábrán a ExpenseReportPage.xaml elemhez hozzáadott felhasználói felületi elemek láthatók.

A ExpenseIt minta képernyőképe, amelyen az imént létrehozott felhasználói felület látható a ExpenseReportPage-hez.

Stílusvezérlők

A különböző elemek megjelenése gyakran azonos a felhasználói felületen azonos típusú összes elem esetében. A felhasználói felület stílusok használatával több elem között is használhatóvá teszi a megjelenéseket. A stílusok újrafelhasználhatósága megkönnyíti az XAML létrehozását és kezelését. Ez a szakasz az előző lépésekben definiált elemenkénti attribútumokat stílusokra cseréli.

Nyissa meg az Application.xaml vagy az App.xaml fájlt.

Adja hozzá a következő XAML-t a Application.Resources címkék közé:


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

Ez az XAML a következő stílusokat adja hozzá:

headerTextStyle: A lap címének Labelformázása.
labelStyle: A Label vezérlők formázása.
columnHeaderStyle: A DataGridColumnHeader formázása.
listHeaderStyle: A listafejléc Border vezérlőinek formázása.
listHeaderTextStyle: A listafejléc Labelformázása.
buttonStyle: A Button formázása ExpenseItHome.xaml.

Figyelje meg, hogy a stílusok a Application.Resources tulajdonságelem erőforrásai és gyermekei. Ezen a helyen a rendszer az alkalmazás összes elemére alkalmazza a stílusokat. Az erőforrások .NET-alkalmazásokban való használatára vonatkozó példa: Alkalmazáserőforrások használata.

Ebben ExpenseItHome.xaml cseréljen le mindent a Grid elemek között a következő XAML-re:

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

Az egyes vezérlők megjelenését meghatározó tulajdonságokat VerticalAlignment FontFamily a rendszer eltávolítja és lecseréli a stílusok alkalmazásával. A program például a headerTextStyle "Költségjelentés megtekintése" Labelelemre alkalmazza.

Nyissa meg a ExpenseReportPage.xaml fájlt.

Cserélje le az Grid elemek közötti mindent a következő XAML-ra:

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

Ez az XAML stílusokat ad hozzá a `Label` és `Border` elemekhez.

Hozza létre és futtassa az alkalmazást. Az ablak megjelenése megegyezik a korábbival.
Zárja be az alkalmazást a Visual Studióba való visszatéréshez.

Adatok kötése vezérlőhöz

Ebben a szakaszban a különböző vezérlőkhöz kötött XML-adatokat fogja létrehozni.

A ExpenseItHome.xamlnyitó Grid elem után adja hozzá a következő XAML-t, hogy létrehozhasson egy XmlDataProvider olyan fájlt, amely tartalmazza az egyes személyek adatait:

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

Az adat Grid erőforrásként jön létre. Ezek az adatok általában fájlként töltődnek be, de az egyszerűség kedvéért az adatok beágyazottan lesznek hozzáadva.

Az elemen <Grid.Resources> belül adja hozzá a következő <xref:System.Windows.DataTemplate> elemet, amely meghatározza, hogyan jelenjenek meg az adatok az ListBoxelem után:<XmlDataProvider>
```
<Grid.Resources>
    
    <DataTemplate x:Key="nameItemTemplate">
        <Label Content="{Binding XPath=@Name}"/>
    </DataTemplate>
</Grid.Resources>
```
Az adatsablonokról további információt az Adatcsatolás áttekintése című témakörben talál.

Cserélje le a meglévőt ListBox a következő XAML-ra:

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

Ez az XAML az ItemsSource adatforráshoz köti a ListBox tulajdonságot, és az adatsablont alkalmazza az ItemTemplateadatforrásként.

Adatok csatlakoztatása vezérlőkhöz

Ezután kódot ad hozzá a lapon kijelölt ExpenseItHome név lekéréséhez, majd átadja azt a ExpenseReportPage konstruktorának. A ExpenseReportPage az átadott elemhez állítja be az adatkörnyezetét, amelyhez a ExpenseReportPage.xaml fájlban definiált vezérlők kötődnek.

Nyissa meg ExpenseReportPage.xaml.vb vagy ExpenseReportPage.xaml.cs.

Adjon hozzá egy olyan konstruktort, amely egy objektumot vesz fel, hogy átadhassa a kijelölt személy költségjelentési adatait.

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

Nyisd meg ExpenseItHome.xaml.vb vagy ExpenseItHome.xaml.cs.

Módosítsa az Click eseménykezelőt úgy, hogy meghívja az új konstruktort, aki átadja a kiválasztott személy költségjelentési adatait.

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

Adatok stílusa adatsablonokkal

Ebben a szakaszban adatsablonok használatával frissíti az adathoz kötött listák egyes elemeinek felhasználói felületét.

Nyissa meg a ExpenseReportPage.xaml fájlt.

Kösse a "Name" és a "Department" Label elemek tartalmát a megfelelő adatforrástulajdonsághoz. Az adatkötésről további információt az Adatkötés áttekintése című témakörben talál.

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

A nyitó Grid elem után adja hozzá a következő adatsablonokat, amelyek meghatározzák a költségjelentés adatainak megjelenítését:

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

Cserélje le az DataGridTextColumn elemeket DataGridTemplateColumn az DataGrid elem alá, és alkalmazza rájuk a sablonokat. Emellett adja meg az ItemsSource attribútumot az elem értékével DataGrid együtt.

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

Hozza létre és futtassa az alkalmazást.
Jelöljön ki egy személyt, majd kattintson a Nézet gombra.

Az alábbi ábrán az ExpenseIt alkalmazás mindkét oldala látható vezérlőkkel, elrendezéssel, stílusokkal, adatkötéssel és adatsablonokkal:

Az alkalmazás mindkét oldala tartalmazza a névlistát és a költségjelentést.

Megjegyzés:

Ez a minta a WPF egy adott funkcióját mutatja be, és nem követi az összes ajánlott eljárást, például a biztonságot, a honosítást és az akadálymentességet. A WPF és a .NET-alkalmazásfejlesztési ajánlott eljárások átfogó lefedéséért tekintse meg az alábbi témaköröket:

Következő lépések

Ebben az útmutatóban számos módszert ismert meg a felhasználói felület Windows Presentation Foundation (WPF) használatával történő létrehozására. Most már alapszintű ismereteket kell tudnia az adatkötésű .NET-alkalmazások építőelemeiről. A WPF architektúrával és a programozási modellekkel kapcsolatos további információkért tekintse meg a következő témaköröket:

Az alkalmazások létrehozásával kapcsolatos további információkért tekintse meg az alábbi témaköröket:

Lásd még

Visszajelzés

Hasznosnak találta ezt az oldalt?

Last updated on 2025-05-07

Megosztás a következőn keresztül:

Oktatóanyag: Az első WPF-alkalmazás létrehozása a Visual Studio 2019-ben

Előfeltételek

Az alkalmazásprojekt létrehozása

Fájlok hozzáadása az alkalmazáshoz

Az alkalmazás létrehozása és futtatása

Az elrendezés létrehozása

Vezérlők hozzáadása

Kép és cím hozzáadása

Kód hozzáadása események kezeléséhez

A ExpenseReportPage felhasználói felületének létrehozása

Stílusvezérlők

Adatok kötése vezérlőhöz

Adatok csatlakoztatása vezérlőkhöz

Adatok stílusa adatsablonokkal

Következő lépések

Lásd még

Visszajelzés

További források