Zelfstudie: Een nieuwe WPF-app maken met .NET

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

In deze zelfstudie gaat u het volgende doen:

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

Voorwaarden

• Visual Studio 2022 versie 17.12 of hoger
  • Selecteer de workload voor het ontwikkelen van .NET-desktops
  • Selecteer het afzonderlijke onderdeel .NET 9

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.

   

3. Typ wpfin het vak Zoeken naar sjablonen en druk vervolgens op Enter.

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

5. Selecteer in de lijst met sjablonen WPF-toepassing en selecteer vervolgens 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 de codetaal filter hebt toegepast, wordt alleen de sjabloon voor die taal weergegeven.

   

6. Ga als volgt te werk in het venster Uw nieuwe project configureren:

   1. Voer in het vak ProjectnaamNamenin.
   2. Selecteer het selectievakje Plaats oplossing en project in dezelfde map.
   3. Kies desgewenst een andere Locatie om uw code op te slaan.
   4. Selecteer de knop Volgende.

   

7. In het venster Aanvullende informatie selecteer je .NET 9.0 (Standard Term Support) voor Target Framework. Selecteer de knop maken.

   

Zodra de app is gegenereerd, moet Visual Studio het XAML-ontwerpvenster openen voor het standaardvenster, MainWindow. 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:

1. Solution Explorer

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

2. Eigenschappen

   In dit venster worden eigenschapsinstellingen weergegeven die u kunt configureren op basis van het geselecteerde item. Als u bijvoorbeeld een item selecteert in Solution Explorer, ziet u eigenschapsinstellingen met betrekking tot het bestand. Als u een object selecteert in de Designer-, ziet u instellingen voor het element. Met betrekking tot de vorige afbeelding is de titelbalk van het venster geselecteerd in de ontwerpfunctie.

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 het besturingselement of sleept u het besturingselement neer op het oppervlak. 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 uw project is gemaakt, is de XAML-code-editor zichtbaar met een minimale hoeveelheid XAML-code 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 kenmerk x:Class="..". 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 door WPF wordt 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. Er zijn acht kenmerken gedeclareerd en ze behoren over het algemeen tot drie categorieën:

• XML-naamruimten

  Een XML-naamruimte biedt structuur aan de XML en bepaalt welke XML-inhoud in het bestand kan worden gedeclareerd.

  Het belangrijkste xmlns-attribuut importeert de XML-naamruimte voor het hele bestand en wordt in dit geval toegewezen aan de typen die door WPF zijn gedeclareerd. 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.

• kenmerk x:Class

  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.

• kenmerk Title

  Elk normaal kenmerk dat is gedeclareerd op 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 toets F5 te drukken of door Foutopsporing>Start Debugging te selecteren in het menu.

   U ziet het standaardvenster dat door de sjabloon wordt gegenereerd, zonder bedieningsonderdelen, en met de titel MainWindow:

   

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 standaardindelingselement dat aan u in deze XAML is geleverd, is besturingselement <Grid>.

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 kindobjecten of andere layoutelementen aan het raster toevoegen. 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. Dat geeft u niet echt veel flexibiliteit bij het plaatsen van besturingselementen.

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 raster in de XAML-code-editor of XAML-ontwerper. U ziet dat de XAML-ontwerper elke rij en kolom weergeeft:

   

Het eerste besturingselement toevoegen

Nu het raster is geconfigureerd, kunnen we er bedieningselementen aan toevoegen. Begin eerst met de labelcontrole.

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

   U ziet dat het label de helft van het venster in beslag neemt, omdat het automatisch is geplaatst in de eerste rij en kolom van het raster. Voor onze eerste rij hebben we niet zoveel ruimte nodig omdat we die rij alleen gebruiken voor het label.

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>
   

   U ziet dat de ontwerper nu toont dat het label een kleine hoeveelheid van de beschikbare hoogte in beslag neemt. Er is nu meer ruimte beschikbaar voor de volgende rij.

   

Plaatsing besturingselementen

Laten we het hebben over de plaatsing van bedienings-elementen. Het label dat in de vorige sectie is 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 krachtige 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, ze zijn 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 deze eigenschappen worden weggelaten uit het besturingselement, wordt geïmpliceerd dat ze de standaardwaarden 0 hebben, dus wordt het besturingselement in 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 die we gaan maken te plaatsen. 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 controle een naam heeft, kan er naar worden verwezen in de bijbehorende code. De naam wordt toegewezen aan het besturingselement met het kenmerk x:Name.

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

De laatste twee besturingselementen die we gaan toevoegen, zijn een tekstvak en een knop, waarin de gebruiker een naam invoert om toe te voegen aan de lijst. In plaats van meer rijen en kolommen in het raster te maken om deze besturingselementen te rangschikken, plaatsen we deze besturingselementen echter in het <StackPanel> indelingsbesturingselement.

Het stackpaneel verschilt van het raster in de wijze waarop de besturingselementen worden geplaatst. Terwijl u aangeeft waar u de besturingselementen met de gekoppelde eigenschappen Grid.Row en Grid.Column wilt hebben, werkt het stapelpaneel automatisch en plaatst elk van zijn kindbesturingselementen in volgorde. 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>
   

   Het kenmerk Margin werd eerder in het raster gebruikt, maar we hebben 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. Onze app heeft echter geen logica om daadwerkelijk functioneel te zijn. Vervolgens moeten we de controle-evenementen koppelen aan code en de app daadwerkelijk iets laten doen.

Code toevoegen voor de klik-gebeurtenis

De <Button> die we hebben gemaakt, heeft een Click-gebeurtenis die wordt geactiveerd wanneer de gebruiker op de knop drukt. U kunt zich abonneren op deze gebeurtenis en code toevoegen om een naam toe te voegen aan de keuzelijst. XAML-kenmerken worden gebruikt om u te abonneren op gebeurtenissen, net zoals ze worden gebruikt om eigenschappen in te stellen.

1. Vind het besturingselement <Button>.

2. Het kenmerk Click instellen 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 achterliggende code die overeenkomt met de opgegeven handlernaam.

   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

Nu de gebeurtenis is verwerkt, voert u de app uit. Het venster wordt weergegeven en u kunt een naam invoeren in het tekstvak en deze vervolgens toevoegen door op de knop te klikken.

Verwante inhoud

• Meer informatie over Windows Presentation Foundation
• Overzicht van XAML