Delen via

Zelfstudie: Een WPF-app maken met .NET

In deze zelfstudie leert u hoe u Visual Studio gebruikt om een WPF-app (Windows Presentation Foundation) te maken. Met Visual Studio voegt u besturingselementen toe aan vensters en verwerkt u gebeurtenissen. Aan het einde van deze zelfstudie hebt u een eenvoudige app waarmee namen aan een keuzelijst worden toegevoegd.

In deze handleiding leert u:

  • Maak een nieuwe WPF-app.
  • Besturingselementen toevoegen aan een venster.
  • Beheer besturingsevenementen om de functionaliteit van de app te bieden.
  • Voer de app uit.

Hier volgt een voorbeeld van de app die is gemaakt tijdens deze zelfstudie:

Voltooide voorbeeld-app voor WPF-zelfstudie

Vereiste voorwaarden

Een WPF-app maken

De eerste stap bij het maken van een nieuwe app is het openen van Visual Studio en het genereren van de app op basis van een sjabloon.

  1. Open Visual Studio.

  2. Selecteer Een nieuw project maken.

    Een schermopname van het dialoogvenster Starten vanuit Visual Studio 2026. De knop Een nieuw project maken is gemarkeerd met een rood vak.

  3. Typ wpf in het vak Zoeken naar sjablonen en wacht tot de zoekresultaten worden weergegeven.

  4. Kies in het dropdownmenu voor de codetaal C# of Visual Basic.

  5. Selecteer in de lijst met sjablonen WPF-toepassing en klik vervolgens op Volgende.

    Belangrijk

    Selecteer niet het WPF-toepassing (.NET Framework) sjabloon.

    In de volgende afbeelding ziet u zowel C# als Visual Basic .NET-projectsjablonen. Als u het codetaalfilter hebt toegepast, wordt de bijbehorende sjabloon weergegeven.

    Schermopname van het dialoogvenster 'Een nieuw project maken' van Visual Studio met 'wpf' in het zoekvak en wpF-toepassingssjablonen gemarkeerd.

  6. Stel in het venster Uw nieuwe project configureren de projectnaam in op Namen en selecteer Volgende.

    U kunt uw project ook opslaan in een andere map door het pad Locatie aan te passen.

    Een schermopname van het dialoogvenster Uw nieuwe project configureren vanuit Visual Studio 2026. Het tekstvak Projectnaam bevat het woord 'Namen' en is gemarkeerd met een rood vak. De knop Volgende is ook gemarkeerd met een rood vak.

  7. Selecteer ten slotte in het venster Aanvullende informatie.NET 10.0 (langetermijnondersteuning) voor de frameworkinstelling en selecteer vervolgens Maken.

    Een schermopname van het dialoogvenster Aanvullende informatie in Visual Studio 2026. In de vervolgkeuzelijst Framework is .NET 10 (Langetermijnondersteuning) geselecteerd en gemarkeerd met een rood vak. De knop Maken is ook gemarkeerd met een rood vak.

Nadat Visual Studio de app heeft gegenereerd, wordt het XAML-ontwerpvenster voor het standaardvenster MainWindow geopend. Als de ontwerper niet zichtbaar is, dubbelklikt u op het bestand MainWindow.xaml in het Solution Explorer venster om de ontwerpfunctie te openen.

Belangrijke onderdelen van Visual Studio

Ondersteuning voor WPF in Visual Studio heeft vijf belangrijke onderdelen waarmee u werkt wanneer u een app maakt:

De belangrijke onderdelen van Visual Studio 2026 die u moet weten bij het maken van een WPF-project voor .NET.

  1. Solution Explorer

    Al uw projectbestanden, code, vensters en resources worden weergegeven in dit venster.

  2. Eigenschappen

    In dit venster worden eigenschapsinstellingen weergegeven die u kunt configureren op basis van de context van het geselecteerde item. Als u bijvoorbeeld een item selecteert in Solution Explorer, worden instellingen met betrekking tot het bestand weergegeven. Als een object in de ontwerpfunctie is geselecteerd, worden de eigenschappen van het besturingselement of venster weergegeven.

  3. Gereedschapskist

    De werkset bevat alle besturingselementen die u aan een ontwerpoppervlak kunt toevoegen. Als u een besturingselement wilt toevoegen aan het huidige oppervlak, dubbelklikt u op een besturingselement of sleept u het besturingselement naar de ontwerpfunctie. Het is gebruikelijk om in plaats daarvan het venster van de XAML-code-editor te gebruiken om een gebruikersinterface (UI) te ontwerpen, terwijl u het XAML-ontwerpvenster gebruikt om een voorbeeld van de resultaten te bekijken.

  4. XAML-ontwerper

    Dit is de ontwerpfunctie voor een XAML-document. Het is interactief en u kunt objecten slepen en neerzetten vanuit de Werkset. Door items in de ontwerpfunctie te selecteren en te verplaatsen, kunt u de gebruikersinterface voor uw app visueel samenstellen.

    Wanneer zowel de ontwerpfunctie als de editor zichtbaar zijn, worden wijzigingen in de ene weergegeven in de andere.

    Wanneer u items in de ontwerpfunctie selecteert, worden in het venster Eigenschappen de eigenschappen en kenmerken van dat object weergegeven.

  5. XAML-code-editor

    Dit is de XAML-code-editor voor een XAML-document. De XAML-code-editor is een manier om uw gebruikersinterface handmatig te maken zonder een ontwerper. De ontwerper kan automatisch eigenschappen instellen voor een besturingselement wanneer het besturingselement wordt toegevoegd in de ontwerpfunctie. De XAML-code-editor biedt u veel meer controle.

    Wanneer zowel de ontwerpfunctie als de editor zichtbaar zijn, worden wijzigingen in de ene weergegeven in de andere. Terwijl u door de tekstverzorging in de code-editor navigeert, worden in het venster Eigenschappen de eigenschappen en kenmerken van dat object weergegeven.

De XAML onderzoeken

Nadat u uw project hebt gemaakt, wordt de XAML-code-editor geopend. Er wordt een minimale hoeveelheid XAML-code weergegeven om het venster weer te geven. Als de editor niet is geopend, dubbelklik op MainWindow.xaml in het venster Solution Explorer. XAML moet er ongeveer uitzien als in het volgende voorbeeld:

<Window x:Class="Names.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Names"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>

    </Grid>
</Window>

Belangrijk

Als u codeert in Visual Basic, is de XAML iets anders, met name het x:Class=".." kenmerk. XAML in Visual Basic gebruikt de klassenaam van het object en laat de naamruimte van de klasse weg.

Laten we de XAML opsplitsen om meer inzicht te krijgen in de XAML. XAML is gewoon XML die WPF verwerkt om een gebruikersinterface te maken. Als u XAML wilt begrijpen, moet u minimaal bekend zijn met de basisbeginselen van XML.

De document root <Window> vertegenwoordigt het type object dat wordt beschreven door het XAML-document. Het bestand declareert acht kenmerken en behoort over het algemeen tot drie categorieën:

  • XML-naamruimten

    Een XML-naamruimte biedt structuur aan de XML. Hiermee wordt bepaald welke XML-inhoud u in het bestand kunt declareren.

    Met het hoofdkenmerk xmlns wordt de XML-naamruimte voor het hele bestand geïmporteerd. In dit geval wordt dit gekoppeld aan de typen die zijn gedeclareerd door WPF. De andere XML-naamruimten declareren een voorvoegsel en importeren andere typen en objecten voor het XAML-bestand. De xmlns:local naamruimte declareert bijvoorbeeld het local voorvoegsel en wijst toe aan de objecten die door uw project zijn gedeclareerd, de objecten die zijn gedeclareerd in de Names codenaamruimte.

  • x:Class-kenmerk

    Dit kenmerk wijst de <Window> toe aan het type dat is gedefinieerd door uw code: het MainWindow.xaml.cs- of MainWindow.xaml.vb-bestand. Dit is de Names.MainWindow klasse in C# en MainWindow in Visual Basic.

  • Title-kenmerk

    Elk normaal kenmerk dat u declareert voor het XAML-object stelt een eigenschap van dat object in. In dit geval wordt met het kenmerk Title de eigenschap Window.Title ingesteld.

Het venster wijzigen

Voor onze voorbeeld-app is dit venster te groot en is de titelbalk niet beschrijvend. Laten we dat oplossen.

  1. Voer eerst de app uit door op de F5-toets te drukken of door Foutopsporing>starten in het menu te selecteren.

    U ziet het standaardvenster dat door de sjabloon wordt gegenereerd, zonder besturingselementen en een titel van MainWindow:

    Een lege WPF-app

  2. Wijzig de titel van het venster door de Title in te stellen op Names.

  3. Wijzig de grootte van het venster door de Height in te stellen op 180 en Width op 260.

    <Window x:Class="Names.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Names"
        mc:Ignorable="d"
        Title="Names" Height="180" Width="260">
    <Grid>
        
    </Grid>
</Window>

De indeling voorbereiden

WPF biedt een krachtig indelingssysteem met veel verschillende indelingsbesturingselementen. Indelingsbesturingselementen helpen om kindbesturingselementen te plaatsen en de grootte ervan te wijzigen, en kunnen dit zelfs automatisch doen. Het standaard lay-outbeheer dat in deze XAML is gespecificeerd, is de <Grid> controle.

Met het rasterbesturingselement kunt u rijen en kolommen definiëren, net zoals een tabel, en besturingselementen binnen de grenzen van een specifieke rij- en kolomcombinatie plaatsen. U kunt een willekeurig aantal onderliggende besturingselementen of andere indelingsbesturingselementen toevoegen aan het raster. U kunt bijvoorbeeld een ander <Grid> controle-element in een specifieke rij- en kolomcombinatie plaatsen, waarna dat nieuwe raster vervolgens meer rijen en kolommen kan definiëren en zijn eigen onderliggende elementen kan bevatten.

Het rasterbesturingselement plaatst de onderliggende besturingselementen in rijen en kolommen. Een raster heeft altijd één rij en kolom gedeclareerd, wat betekent dat het raster standaard één cel is. Deze standaardinstelling biedt je niet veel flexibiliteit bij het plaatsen van bedieningselementen.

Pas de rasterindeling aan voor de bedieningselementen die vereist zijn voor deze app.

  1. Voeg een nieuw kenmerk toe aan het <Grid>-element: Margin="10".

    Deze instelling brengt het raster van de vensterranden binnen en maakt het een beetje mooier.

  2. Definieer twee rijen en twee kolommen, waarbij het raster wordt verdeeld in vier cellen:

    <Grid Margin="10">
    
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

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

  3. Selecteer het Grid in de XAML-code-editor of de XAML-ontwerper. In de XAML-ontwerpfunctie worden elke rij en kolom weergegeven:

    een WPF-app met de marge die is ingesteld op een raster

Het eerste besturingselement toevoegen

Nu het raster is geconfigureerd, kunt u beginnen met het toevoegen van bedieningselementen. Voeg het besturingselement label eerst toe.

  1. Maak een nieuw <Label> element in het <Grid> element, na de rij- en kolomdefinities. Stel de inhoud van het element in op de tekenreekswaarde Names:

    <Grid Margin="10">

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

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

    <Label>Names</Label>

</Grid>

    De <Label>Names</Label> definieert de inhoud Names. Sommige besturingselementen begrijpen hoe inhoud moet worden verwerkt, andere niet. De inhoud van een besturingselement wordt toegewezen aan de eigenschap Content. Als u de inhoud instelt via de syntaxis van het XAML-kenmerk, gebruikt u deze indeling: <Label Content="Names" />. Beide manieren doen hetzelfde, waarbij de inhoud van het label wordt ingesteld om de tekst weer te geven Names.

    Het label neemt de helft van het venster in beslag, omdat het automatisch is geplaatst in de eerste rij en kolom van het raster. Voor de eerste rij hebt u niet zoveel ruimte nodig, omdat u die rij alleen voor het label gaat gebruiken.

  2. Wijzig het kenmerk Height van de eerste <RowDefinition> van * in Auto.

    De Auto-waarde bepaalt de grootte van de rasterrij automatisch op de grootte van de inhoud, in dit geval de labelcontrole.

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

    De ontwerper toont nu het label dat een kleine hoeveelheid van de beschikbare hoogte bezette. Er is meer ruimte voor de volgende rij.

    een WPF-app met de marges ingesteld op een raster en een labelcontrole op de eerste rij

Plaatsing besturingselementen

Laten we het hebben over de plaatsing van bedienings-elementen. Het label dat u in de vorige sectie hebt gemaakt, wordt automatisch in rij 0 en kolom 0 van het raster geplaatst. De nummering voor rijen en kolommen begint bij 0 en wordt met 1 verhoogd. Het besturingselement weet niets van het raster en het besturingselement definieert geen eigenschappen om de plaatsing ervan in het raster te beheren.

Hoe laat u een besturingselement weten dat een andere rij of kolom moet worden gebruikt wanneer het besturingselement geen kennis heeft van het raster? Gekoppelde eigenschappen! Het raster maakt gebruik van het eigenschappensysteem van WPF.

Het rasterbesturingselement definieert nieuwe eigenschappen die de child controls aan zichzelf kunnen koppelen. De eigenschappen bestaan niet daadwerkelijk op het besturingselement zelf, maar worden beschikbaar voor het besturingselement zodra het is toegevoegd aan het raster.

Het raster definieert twee eigenschappen om de positie van een onderliggend besturingselement te bepalen: Grid.Row en Grid.Column. Als u deze eigenschappen weglaat uit het besturingselement, zijn de standaardwaarden 0. Het besturingselement wordt dus in de rij 0 en kolom 0 van het raster geplaatst. Wijzig de plaatsing van het besturingselement <Label> door het kenmerk Grid.Column in te stellen op 1:

<Label Grid.Column="1">Names</Label>

U ziet dat het label is verplaatst naar de tweede kolom. U kunt de Grid.Row en Grid.Column gekoppelde eigenschappen gebruiken om de volgende besturingselementen te plaatsen die u gaat maken. Voorlopig herstelt u het label echter naar kolom 0.

Maak de namenlijst aan

Nu het raster op de juiste manier is aangepast en het label is gemaakt, voegt u op de rij onder het label een lijstvak toe.

  1. Declareer het besturingselement <ListBox /> als een sub-element van het besturingselement <Label>.

  2. Stel de eigenschap Grid.Row in op 1.

  3. Stel de eigenschap x:Name in op lstNames.

    Zodra een control een naam heeft, kunt u er in de code-behind naar verwijzen. Wijs de naam toe aan het besturingselement met behulp van het x:Name kenmerk.

De XAML moet er als volgt uitzien:

<Grid Margin="10">

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

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

    <Label>Names</Label>
    <ListBox Grid.Row="1" x:Name="lstNames" />

</Grid>

De resterende besturingselementen toevoegen

Voeg een tekstvak en een knop toe. De gebruiker gebruikt deze bedieningselementen om een naam in te voeren die aan de optielijst moet worden toegevoegd. In plaats van meer rijen en kolommen in het raster te maken om deze besturingselementen te rangschikken, plaatst u deze besturingselementen in het <StackPanel> indelingsbesturingselement.

Het stackpaneel verschilt van de grid in de manier waarop het besturingselementen plaatst. Terwijl u de Grid.Row en Grid.Column gekoppelde eigenschappen gebruikt om aan de grid aan te geven waar u de besturingselementen wilt plaatsen, werkt het stackpaneel automatisch. Het ordent elk van zijn kindbesturingselementen opeenvolgend. Het 'stapelt' elk besturingselement na de andere.

  1. Declareer het besturingselement <StackPanel> als een sub-element van het besturingselement <ListBox>.

  2. Stel de eigenschap Grid.Row in op 1.

  3. Stel de eigenschap Grid.Column in op 1.

  4. Stel de Margin in op 5,0,0,0.

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

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

<Label>Names</Label>
<ListBox Grid.Row="1" x:Name="lstNames" />

<StackPanel Grid.Row="1" Grid.Column="1" Margin="5,0,0,0">
    
</StackPanel>

    U hebt eerder het Margin kenmerk in het raster gebruikt, maar u plaatst slechts één waarde, 10. Deze marge heeft een waarde van 5,0,0,0, die heel anders is dan 10. De marge-eigenschap is een Thickness type en kan beide waarden interpreteren. Een dikte definieert de ruimte rond elke zijde van een rechthoekig kader, linker, bovenste, rechts, respectievelijk onderste. Als de waarde voor de marge één waarde is, wordt die waarde voor alle vier de zijden gebruikt.

  5. Maak in het besturingselement <StackPanel> een <TextBox /> besturingselement.

    1. Stel de eigenschap x:Name in op txtName.

  6. Ten slotte maakt u na de <TextBox>, nog steeds binnen de <StackPanel>, een <Button> controle-element.

    1. Stel de eigenschap x:Name in op btnAdd.
    2. Stel de Margin in op 0,5,0,0.
    3. Stel de inhoud in op Add Name.

De XAML moet er als volgt uitzien:

<StackPanel Grid.Row="1" Grid.Column="1" Margin="5,0,0,0">
    <TextBox x:Name="txtName" />
    <Button x:Name="btnAdd" Margin="0,5,0,0">Add Name</Button>
</StackPanel>

De indeling voor het venster is voltooid. De app heeft echter geen logica om daadwerkelijk functioneel te zijn. Vervolgens moet u de besturingsevenementen koppelen aan de code en de app daadwerkelijk iets laten doen.

Code toevoegen voor de klik-gebeurtenis

De <Button> die u hebt gemaakt, heeft een Click-gebeurtenis die door de app wordt gegenereerd wanneer de gebruiker op de knop drukt. Abonneer u op deze gebeurtenis en voeg code toe om een naam toe te voegen aan de keuzelijst. Gebruik XAML-kenmerken om u te abonneren op gebeurtenissen, net zoals u ze gebruikt om eigenschappen in te stellen.

  1. Vind het besturingselement <Button>.

  2. Stel het Click kenmerk in op ButtonAddName_Click.

    <StackPanel Grid.Row="1" Grid.Column="1" Margin="5,0,0,0">
    <TextBox x:Name="txtName" />
    <Button x:Name="btnAdd" Margin="0,5,0,0" Click="ButtonAddName_Click">Add Name</Button>
</StackPanel>

  3. Genereer de code van de gebeurtenis-handler. Klik met de rechtermuisknop op ButtonAddName_Click en selecteer Ga naar definitie.

    Met deze actie wordt een methode gegenereerd in de codeachter die overeenkomt met de handlernaam die u hebt opgegeven.

    private void ButtonAddName_Click(object sender, RoutedEventArgs e)
{

}

    Private Sub ButtonAddName_Click(sender As Object, e As RoutedEventArgs)

End Sub

  4. Voeg vervolgens de volgende code toe om deze drie stappen uit te voeren:

    1. Zorg ervoor dat het tekstvak een naam bevat.
    2. Controleer of de naam die in het tekstvak is ingevoerd nog niet bestaat.
    3. Voeg de naam toe aan de keuzelijst.
    private void ButtonAddName_Click(object sender, RoutedEventArgs e)
{
    if (!string.IsNullOrWhiteSpace(txtName.Text) && !lstNames.Items.Contains(txtName.Text))
    {
        lstNames.Items.Add(txtName.Text);
        txtName.Clear();
    }
}

    Private Sub ButtonAddName_Click(sender As Object, e As RoutedEventArgs)
    If Not String.IsNullOrWhiteSpace(txtName.Text) And Not lstNames.Items.Contains(txtName.Text) Then
        lstNames.Items.Add(txtName.Text)
        txtName.Clear()
    End If
End Sub

De app uitvoeren

Nadat u de gebeurtenis hebt afgehandeld, start u de app. Het venster wordt weergegeven en u kunt een naam invoeren in het tekstvak. Voeg de naam toe door de knop te selecteren.

Een WPF voor .NET-app uitvoeren in Visual Studio 2026.

Verwante inhoud

  • Last updated on