Share via

Zelfstudie: Uw eerste WPF-toepassing maken in Visual Studio 2019

In dit artikel leest u hoe u een Windows Presentation Foundation-bureaubladtoepassing (WPF) ontwikkelt die de elementen bevat die gebruikelijk zijn voor de meeste WPF-toepassingen: Extensible Application Markup Language (XAML) markeringen, code-behind, toepassingsdefinities, besturingselementen, indeling, gegevensbinding en stijlen. Als u de toepassing wilt ontwikkelen, gebruikt u Visual Studio.

Belangrijk

Dit artikel is geschreven voor .NET Framework. Zie Zelfstudie: Een nieuwe WPF-app (WPF .NET) maken om aan de slag te gaan met .NET.

In deze handleiding leer je hoe je:

  • Maak een WPF-project.
  • Gebruik XAML om het uiterlijk van de gebruikersinterface (UI) van de toepassing te ontwerpen.
  • Schrijf code om het gedrag van de toepassing te bouwen.
  • Maak een toepassingsdefinitie om de toepassing te beheren.
  • Besturingselementen toevoegen en de indeling maken om de gebruikersinterface van de toepassing samen te stellen.
  • Maak stijlen voor een consistent uiterlijk in de gebruikersinterface van de toepassing.
  • Koppel de gebruikersinterface aan gegevens, zowel om de gebruikersinterface van gegevens te vullen als om de gegevens en de gebruikersinterface gesynchroniseerd te houden.

Aan het einde van de zelfstudie hebt u een zelfstandige Windows-toepassing gemaakt waarmee gebruikers onkostendeclaraties voor geselecteerde personen kunnen bekijken. De toepassing bestaat uit verschillende WPF-pagina's die worden gehost in een browservenster.

Aanbeveling

De voorbeeldcode die in deze zelfstudie wordt gebruikt, is beschikbaar voor Visual Basic en C# in de voorbeeldcode van de WPF-app voor zelfstudie.

U kunt de codetaal van de voorbeeldcode tussen C# en Visual Basic in-/uitschakelen met behulp van de taalkiezer boven op deze pagina.

Vereiste voorwaarden

  • Visual Studio 2019 waarop de ontwikkelworkload voor .NET Desktop is geïnstalleerd.

    Zie Visual Studio installeren voor meer informatie over het installeren van de nieuwste versie van Visual Studio.

Het toepassingsproject maken

De eerste stap is het maken van de toepassingsinfrastructuur, die een toepassingsdefinitie, twee pagina's en een afbeelding bevat.

  1. Maak een nieuw WPF-toepassingsproject in Visual Basic of Visual C# met de naam ExpenseIt:

    1. Open Visual Studio en selecteer Een nieuw project maken onder het menu Aan de slag .

      Het dialoogvenster Een nieuw project maken wordt geopend.

    2. Selecteer in de vervolgkeuzelijst TaalC# of Visual Basic.

    3. Selecteer de WPF-appsjabloon (.NET Framework) en selecteer Volgende.

      Een nieuw projectdialoogvenster maken

      Het dialoogvenster Uw nieuwe project configureren wordt geopend.

    4. Voer de projectnaam ExpenseIt in en selecteer Aanmaken.

      Een nieuw projectdialoogvenster configureren

      Visual Studio maakt het project en opent de ontwerpfunctie voor het standaardtoepassingsvenster met de naam MainWindow.xaml.

  2. Open Application.xaml (Visual Basic) of App.xaml (C#).

    Dit XAML-bestand definieert een WPF-toepassing en alle toepassingsbronnen. U gebruikt dit bestand ook om de gebruikersinterface op te geven, in dit geval MainWindow.xaml, die automatisch wordt weergegeven wanneer de toepassing wordt gestart.

    Uw XAML moet er als volgt uitzien in Visual Basic:

    <Application x:Class="Application"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    StartupUri="MainWindow.xaml">
    <Application.Resources>
        
    </Application.Resources>
</Application>

    Zoals het volgende in 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. Open MainWindow.xaml.

    Dit XAML-bestand is het hoofdvenster van uw toepassing en geeft inhoud weer die op pagina's is gemaakt. De Window klasse definieert de eigenschappen van een venster, zoals de titel, grootte of het pictogram, en verwerkt gebeurtenissen, zoals sluiten of verbergen.

  4. Wijzig het Window element in een NavigationWindow, zoals wordt weergegeven in de volgende 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>

    Deze app navigeert naar verschillende inhoud, afhankelijk van de gebruikersinvoer. Daarom moet de belangrijkste Window worden gewijzigd in een NavigationWindow. NavigationWindow neemt alle eigenschappen van Window. Het NavigationWindow element in het XAML-bestand maakt een exemplaar van de NavigationWindow klasse. Zie Navigatieoverzicht voor meer informatie.

  5. Verwijder de Grid elementen tussen de NavigationWindow tags.

  6. Wijzig de volgende eigenschappen in de XAML-code voor het NavigationWindow element:

    • Stel de Title eigenschap in op 'ExpenseIt'.

    • Stel de Height eigenschap in op 350 pixels.

    • Stel de Width eigenschap in op 500 pixels.

    Uw XAML moet er als volgt uitzien voor 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>

    En als volgt voor 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. Open MainWindow.xaml.vb of MainWindow.xaml.cs.

    Dit bestand is een code-behind-bestand dat code bevat voor het afhandelen van de gebeurtenissen die zijn gedeclareerd in MainWindow.xaml. Dit bestand bevat een gedeeltelijke klasse voor het venster dat is gedefinieerd in XAML.

  8. Als u C# gebruikt, wijzigt u de MainWindow klasse om af te leiden van NavigationWindow. (In Visual Basic gebeurt dit automatisch wanneer u het venster in XAML wijzigt.) Uw C#-code moet er nu als volgt uitzien:

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

Bestanden toevoegen aan de toepassing

In deze sectie voegt u twee pagina's en een afbeelding toe aan de toepassing.

  1. Voeg een nieuwe pagina toe aan het project en geef deze ExpenseItHome.xamlde naam:

    1. Klik in Solution Explorer met de rechtermuisknop op het ExpenseIt projectknooppunt en kiesPagina>.

    2. In het dialoogvenster Nieuw item toevoegen is de sjabloon Pagina (WPF) al geselecteerd. Voer de naam ExpenseItHomein en selecteer Vervolgens Toevoegen.

    Deze pagina is de eerste pagina die wordt weergegeven wanneer de toepassing wordt gestart. Er wordt een lijst met personen weergegeven waaruit u kunt selecteren om een onkostendeclaratie weer te geven.

  2. open ExpenseItHome.xaml.

  3. Stel Title in op "ExpenseIt - Home".

  4. Stel de DesignHeight in op 350 pixels en de DesignWidth op 500 pixels.

    De XAML wordt nu als volgt weergegeven voor Visual Basic:

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

    En als volgt voor 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. Open MainWindow.xaml.

  6. Voeg een Source eigenschap toe aan het NavigationWindow element en stel deze in op 'ExpenseItHome.xaml'.

    Dit wordt ingesteld ExpenseItHome.xaml als de eerste pagina die wordt geopend wanneer de toepassing wordt gestart.

    Voorbeeld van XAML in 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>

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

    Aanbeveling

    U kunt ook de eigenschap Bron instellen in de categorie Diversen van het venster Eigenschappen .

    Broneigenschap in het venster Eigenschappen

  7. Voeg nog een nieuwe WPF-pagina toe aan het project en geef deze de naam ExpenseReportPage.xaml::

    1. Klik in Solution Explorer met de rechtermuisknop op het ExpenseIt projectknooppunt en kiesPagina>.

    2. Selecteer in het dialoogvenster Nieuw item toevoegen de sjabloon Pagina (WPF ). Voer de naam ExpenseReportPage in en selecteer Vervolgens Toevoegen.

    Op deze pagina wordt het onkostenrapport weergegeven voor de persoon die op de ExpenseItHome pagina is geselecteerd.

  8. Open ExpenseReportPage.xaml.

  9. Stel Title in op "ExpenseIt - View Expense".

  10. Stel de DesignHeight in op 350 pixels en de DesignWidth op 500 pixels.

    ExpenseReportPage.xaml ziet er nu als volgt uit in Visual Basic:

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

    Zoals het volgende in 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. Open ExpenseItHome.xaml.vb en ExpenseReportPage.xaml.vb of ExpenseItHome.xaml.cs en ExpenseReportPage.xaml.cs.

    Wanneer u een nieuw paginabestand maakt, wordt in Visual Studio automatisch het code-behind-bestand gemaakt. Deze code-behind-bestanden verwerken de logica voor het reageren op gebruikersinvoer.

    Uw code moet er zo uitzien voor 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

    Zoals het volgende voor 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. Voeg een afbeelding toe met de naamwatermark.png aan het project. U kunt uw eigen installatiekopie maken, het bestand kopiëren uit de voorbeeldcode of het ophalen uit de GitHub-opslagplaats microsoft/WPF-Samples .

    1. Klik met de rechtermuisknop op het projectknooppunt en selecteerBestaand item> of druk op Shift+Alt+A.

    2. Stel in het dialoogvenster Bestaand item toevoegen het bestandsfilter in op Alle bestanden of afbeeldingsbestanden, blader naar het afbeeldingsbestand dat u wilt gebruiken en selecteer vervolgens Toevoegen.

    3. Selecteer het afbeeldingsbestand in Solution Explorer en stel vervolgens in het venster Eigenschappende buildactie in op resource.

De toepassing bouwen en uitvoeren

  1. Als u de toepassing wilt bouwen en uitvoeren, drukt u op F5 of selecteert u Foutopsporing starten in het menu Foutopsporing .

    In de volgende afbeelding ziet u de toepassing met de NavigationWindow knoppen:

    Toepassing nadat u deze hebt gebouwd en uitgevoerd.

  2. Sluit de toepassing om terug te keren naar Visual Studio.

De indeling maken

Indeling biedt een geordende manier om UI-elementen te plaatsen en beheert ook de grootte en positie van deze elementen wanneer de grootte van een gebruikersinterface wordt gewijzigd. Meestal maakt u een indeling met een van de volgende indelingsbesturingselementen:

  • Canvas - Definieert een gebied waarin u subelementen expliciet kunt plaatsen met behulp van coördinaten die ten opzichte van het canvasgebied zijn.
  • DockPanel - Definieert een gebied waarin u kind-elementen horizontaal of verticaal kunt rangschikken, in relatie tot elkaar.
  • Grid - Definieert een flexibel rastergebied dat bestaat uit kolommen en rijen.
  • StackPanel - Hiermee rangschikt u onderliggende elementen in een enkele lijn die horizontaal of verticaal kunnen worden georiënteerd.
  • VirtualizingStackPanel - Rangschikt en virtualiseert inhoud op één regel die horizontaal of verticaal is gericht.
  • WrapPanel - Plaatst onderliggende elementen in sequentiële positie van links naar rechts, waarbij inhoud wordt onderbroken naar de volgende regel aan de rand van het inhoudsvak. Het ordenen gebeurt opeenvolgend van boven naar beneden of van rechts naar links, afhankelijk van de waarde van de eigenschap Oriëntatie.

Elk van deze indelingsbesturingselementen ondersteunt een bepaald type indeling voor de onderliggende elementen. ExpenseIt pagina's kunnen worden aangepast en elke pagina heeft elementen die horizontaal en verticaal naast andere elementen zijn gerangschikt. In dit voorbeeld wordt het Grid gebruikt als indelingselement voor de toepassing.

Aanbeveling

Zie Panel voor meer informatie over elementen. Zie Indeling voor meer informatie over de indeling.

In deze sectie maakt u een tabel met één kolom met drie rijen en een marge van 10 pixels door kolom- en rijdefinities toe te voegen aan de Grid tabel in ExpenseItHome.xaml.

  1. Stel ExpenseItHome.xamlin de eigenschap op het Margin element in Grid op '10,0,10,10', die overeenkomt met linker-, boven-, rechter- en ondermarges:

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

    Aanbeveling

    U kunt ook de margewaarden instellen in het venster Eigenschappen , onder de categorie Indeling :

    Margewaarden in het venster Eigenschappen

  2. Voeg de volgende XAML toe tussen de Grid tags om de rij- en kolomdefinities te maken:

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

    De Height grootte van twee rijen is ingesteld op Auto, wat betekent dat de rijen zijn aangepast op basis van de inhoud in de rijen. De standaard Height-grootte is Star, wat betekent dat de rijhoogte een gewogen verhouding is van de beschikbare ruimte. Als bijvoorbeeld twee rijen elk een Height *hebben, hebben ze elk een hoogte die de helft van de beschikbare ruimte is.

    Uw Grid moet nu de volgende XAML bevatten:

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

Besturingselementen toevoegen

In deze sectie werkt u de gebruikersinterface van de startpagina bij om een lijst met personen weer te geven, waarbij u één persoon selecteert om hun onkostendeclaratie weer te geven. Besturingselementen zijn UI-objecten waarmee gebruikers kunnen communiceren met uw toepassing. Zie Besturingselementenvoor meer informatie.

Als u deze gebruikersinterface wilt maken, voegt u de volgende elementen toe aan ExpenseItHome.xaml:

  • A ListBox (voor de lijst met personen).
  • A Label (voor de lijstkoptekst).
  • A Button (als u wilt klikken om de onkostendeclaratie weer te geven voor de persoon die in de lijst is geselecteerd).

Elk besturingselement wordt in een rij van het Grid besturingselement geplaatst door de Grid.Row gekoppelde eigenschap in te stellen. Zie Overzicht van bijgevoegde eigenschappen voor meer informatie over gekoppelde eigenschappen.

  1. Voeg ExpenseItHome.xaml de volgende XAML ergens tussen de Grid tags toe:

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

    Aanbeveling

    U kunt de besturingselementen ook maken door ze vanuit het werksetvenster naar het ontwerpvenster te slepen en vervolgens hun eigenschappen in het venster Eigenschappen in te stellen.

  2. Bouw en voer de toepassing uit.

    In de volgende afbeelding ziet u de besturingselementen die u hebt gemaakt:

Voorbeeldschermopname van ExpenseIt met een lijst met namen

Een afbeelding en een titel toevoegen

In deze sectie werkt u de gebruikersinterface van de startpagina bij met een afbeelding en een paginatitel.

  1. Voeg ExpenseItHome.xamleen andere kolom toe aan de ColumnDefinitions kolom met een vaste Width van 230 pixels:

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

  2. Voeg nog een rij toe aan de RowDefinitions, voor een totaal van vier rijen:

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

  3. Verplaats de besturingselementen naar de tweede kolom door de Grid.Column eigenschap in te stellen op 1 in elk van de drie besturingselementen (Rand, Keuzelijst en Knop).

  4. Verplaats elk besturingselement een rij naar beneden door de Grid.Row waarde met 1 te verhogen voor elk van de drie besturingselementen (Kader, Keuzelijst en Knop) en voor het element Kader.

    De XAML voor de drie besturingselementen ziet er nu als volgt uit:

      <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. Stel de eigenschap Achtergrond in op het watermark.png afbeeldingsbestand door de volgende XAML overal tussen de <Grid> en </Grid> tags toe te voegen:

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

  6. Voor het Border element voegt u een Label met de inhoud Onkostenrapport weergeven toe. Dit label is de titel van de pagina.

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

  7. Bouw en voer de toepassing uit.

In de volgende afbeelding ziet u de resultaten van wat u zojuist hebt toegevoegd:

Voorbeeldschermopname van ExpenseIt met de nieuwe afbeeldingsachtergrond en paginatitel

Code toevoegen om gebeurtenissen te verwerken

  1. Voeg in ExpenseItHome.xamlhet element een Click gebeurtenis-handler Button toe. Zie Procedure voor meer informatie : Een eenvoudige gebeurtenis-handler maken.

      <!-- 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. Open ExpenseItHome.xaml.vb of ExpenseItHome.xaml.cs.

  3. Voeg de volgende code toe aan de ExpenseItHome klasse om een knop toe te voegen op gebeurtenishandler. De gebeurtenis-handler opent de pagina 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

De gebruikersinterface voor ExpenseReportPage maken

ExpenseReportPage.xaml geeft het onkostenrapport weer voor de persoon die op de ExpenseItHome pagina is geselecteerd. In deze sectie maakt u de gebruikersinterface voor ExpenseReportPage. U voegt ook achtergrond- en opvulkleuren toe aan de verschillende elementen van de gebruikersinterface.

  1. Open ExpenseReportPage.xaml.

  2. Voeg de volgende XAML toe tussen de Grid tags:

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

    Deze gebruikersinterface is vergelijkbaar met ExpenseItHome.xaml, behalve dat de rapportgegevens worden weergegeven in een DataGrid.

  3. Bouw en voer de toepassing uit.

  4. Selecteer de knop Weergave .

    De pagina onkostendeclaratie wordt weergegeven. U ziet ook dat de navigatieknop terug is ingeschakeld.

In de volgende afbeelding ziet u de ui-elementen die zijn toegevoegd aan ExpenseReportPage.xaml.

Voorbeeldschermopname van ExpenseIt met de gebruikersinterface die zojuist is gemaakt voor de ExpenseReportPage.

Stijlbesturingselementen

Het uiterlijk van verschillende elementen is vaak hetzelfde voor alle elementen van hetzelfde type in een gebruikersinterface. In de gebruikersinterface worden stijlen gebruikt om weergaven herbruikbaar te maken voor meerdere elementen. De herbruikbaarheid van stijlen helpt bij het vereenvoudigen van het maken en beheren van XAML. In deze sectie worden de kenmerken per element vervangen die in de vorige stappen zijn gedefinieerd door stijlen.

  1. Open het Application.xaml of App.xaml.

  2. Voeg de volgende XAML toe tussen de Application.Resources tags:

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

    Met deze XAML worden de volgende stijlen toegevoegd:

    • headerTextStyle: Als u de paginatitel Labelwilt opmaken.

    • labelStyle: Als u de Label besturingselementen wilt opmaken.

    • columnHeaderStyle: Om de DataGridColumnHeader te formatteren.

    • listHeaderStyle: Om de besturingselementen voor de lijstkoptekst Border op te maken.

    • listHeaderTextStyle: Als u de lijstkoptekst Labelwilt opmaken.

    • buttonStyle: Hiermee kunt u de Button indeling opmaken op ExpenseItHome.xaml.

    Let op dat de stijlen resources en kindelementen van het Application.Resources eigenschapselement zijn. Op deze locatie worden de stijlen toegepast op alle elementen in een toepassing. Zie Toepassingsbronnen gebruiken voor een voorbeeld van het gebruik van resources in een .NET-app.

  3. Vervang alles tussen de ExpenseItHome.xaml elementen in Grid door het volgende: 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>

    De eigenschappen zoals VerticalAlignment en FontFamily die het uiterlijk van elk besturingselement definiëren, worden verwijderd en vervangen door het toepassen van de stijlen. De instelling wordt bijvoorbeeld headerTextStyle toegepast op 'Onkostenrapport weergeven' Label.

  4. Open ExpenseReportPage.xaml.

  5. Vervang alles tussen de Grid elementen door de volgende 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>

    Met deze XAML worden stijlen toegevoegd aan de Label en Border elementen.

  6. Bouw en voer de toepassing uit. Het uiterlijk van het venster is hetzelfde als eerder.

    Voorbeeldschermopname van ExpenseIt met hetzelfde uiterlijk als in de laatste sectie.

  7. Sluit de toepassing om terug te keren naar Visual Studio.

Gegevens binden aan een besturingselement

In deze sectie maakt u de XML-gegevens die zijn gebonden aan verschillende besturingselementen.

  1. Voeg ExpenseItHome.xamlna het openingselement Grid de volgende XAML toe om een XmlDataProvider XAML te maken die de gegevens voor elke persoon bevat:

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

    De gegevens worden gemaakt als een Grid bron. Normaal gesproken worden deze gegevens als een bestand geladen, maar voor het gemak worden de gegevens inline toegevoegd.

  2. Voeg binnen het <Grid.Resources> element het volgende <xref:System.Windows.DataTemplate> element toe, waarmee wordt gedefinieerd hoe de gegevens in het ListBoxelement worden weergegeven, na het <XmlDataProvider> element:

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

    Zie het overzicht van gegevenssjablonen voor meer informatie over gegevenssjablonen.

  3. Vervang de bestaande ListBox door de volgende XAML:

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

    Deze XAML bindt de eigenschap ItemsSource van de ListBox aan de gegevensbron en past het gegevenssjabloon toe als ItemTemplate.

Gegevens verbinden met besturingselementen

Vervolgens voegt u code toe om de naam op te halen die op de ExpenseItHome pagina is geselecteerd en door te geven aan de constructor van ExpenseReportPage. ExpenseReportPage stelt de gegevenscontext in met het doorgegeven item, waarop de besturingselementen die in ExpenseReportPage.xaml zijn gedefinieerd aan zijn gebonden.

  1. Open ExpenseReportPage.xaml.vb of ExpenseReportPage.xaml.cs.

  2. Voeg een constructor toe die een object gebruikt, zodat u de gegevens van de onkostendeclaratie van de geselecteerde persoon kunt doorgeven.

    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. Open ExpenseItHome.xaml.vb of ExpenseItHome.xaml.cs.

  4. Wijzig de Click gebeurtenishandler om de nieuwe constructor aan te roepen die de gegevens van de onkostendeclaratie van de geselecteerde persoon doorgeeft.

    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

Stijlgegevens met gegevenssjablonen

In deze sectie werkt u de gebruikersinterface voor elk item in de gegevensgebonden lijsten bij met behulp van gegevenssjablonen.

  1. Open ExpenseReportPage.xaml.

  2. Bind de inhoud van de elementen 'Naam' en 'Afdeling' Label aan de juiste gegevensbroneigenschap. Zie het overzicht van gegevensbindingen voor meer informatie over gegevensbinding.

    <!-- 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. Voeg na het openen Grid van het element de volgende gegevenssjablonen toe, waarmee wordt gedefinieerd hoe de onkostendeclaratiegegevens moeten worden weergegeven:

    <!--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. Vervang de DataGridTextColumn elementen door DataGridTemplateColumn onder het DataGrid element en pas de sjablonen erop toe. Geef ook het ItemsSource kenmerk op samen met de bijbehorende waarde in het DataGrid-element.

    <!-- 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. Bouw en voer de toepassing uit.

  6. Selecteer een persoon en selecteer vervolgens de knop Beeld .

In de volgende afbeelding ziet u beide pagina's van de ExpenseIt toepassing met besturingselementen, indeling, stijlen, gegevensbinding en gegevenssjablonen die zijn toegepast:

Beide pagina's van de app met de lijst met namen en een onkostendeclaratie.

Opmerking

Dit voorbeeld demonstreert een specifieke functie van WPF en volgt niet alle aanbevolen procedures voor zaken als beveiliging, lokalisatie en toegankelijkheid. Zie de volgende onderwerpen voor uitgebreide dekking van WPF en de best practices voor het ontwikkelen van .NET-apps:

Volgende stappen

In deze procedure hebt u een aantal technieken geleerd voor het maken van een gebruikersinterface met behulp van Windows Presentation Foundation (WPF). U moet nu basiskennis hebben van de bouwstenen van een gegevensgebonden .NET-app. Zie de volgende onderwerpen voor meer informatie over de WPF-architectuur en programmeermodellen:

Zie de volgende onderwerpen voor meer informatie over het maken van toepassingen:

Zie ook