WPF-besturingselementen binden aan een gegevensset in .NET Framework-toepassingen

In deze handleiding maakt u een WPF-toepassing die gegevensgebonden besturingselementen bevat. De besturingselementen zijn gebonden aan productrecords die zijn ingekapseld in een gegevensset. U voegt ook knoppen toe om door producten te bladeren en wijzigingen in productrecords op te slaan.

Deze handleiding illustreert de volgende taken:

• Een WPF-toepassing en een gegevensset maken die wordt gegenereerd op basis van gegevens in de AdventureWorksLT-voorbeelddatabase.

• Een set gegevensgebonden besturingselementen maken door een gegevenstabel uit het venster Gegevensbronnen naar een venster in wpf Designer te slepen.

• Knoppen maken die vooruit en achteruit door productrecords bladeren.

• Een knop maken waarmee wijzigingen worden opgeslagen die gebruikers aanbrengen in de productrecords in de gegevenstabel en de onderliggende gegevensbron.

Vereiste voorwaarden

U hebt de volgende onderdelen nodig om dit scenario te voltooien:

• Voor het voltooien van deze zelfstudie hebt u de ontwikkel- en gegevensopslag- en verwerkingsworkloads van .NET nodig die zijn geïnstalleerd in Visual Studio. Als u deze wilt installeren, opent u Visual Studio Installer en kiest u Wijzigen (of Meer>Wijzigen) naast de versie van Visual Studio die u wilt wijzigen. Zie Visual Studio wijzigen.

• Toegang tot een actief exemplaar van SQL Server of SQL Server Express waaraan de AdventureWorks Light-voorbeelddatabase (AdventureWorksLT) is gekoppeld. Als u de database wilt downloaden, raadpleegt u Voorbeelddatabases van AdventureWorks.

Voorafgaande kennis van de volgende concepten is ook nuttig, maar is niet vereist om de procedure te voltooien:

• Gegevenssets en TableAdapters. Zie Hulpmiddelen voor gegevenssets in Visual Studio en TableAdapters voor meer informatie.

• WPF-gegevensbinding. Zie Overzicht van gegevensbindingenvoor meer informatie.

Het project maken

Maak een nieuw WPF-project om productrecords weer te geven.

1. Open Visual Studio.

2. Kies in het startvenster Een nieuw project maken.

3. Zoek naar de projectsjabloon C# WPF App en volg de stappen om het project te maken, met de naam AdventureWorksProductsEditor.

   Visual Studio maakt het project AdventureWorksProductsEditor.

Een gegevensset voor de toepassing maken

Voordat u gegevensgebonden besturingselementen kunt maken, moet u een gegevensmodel voor uw toepassing definiëren en toevoegen aan het venster Gegevensbronnen . In deze stapsgewijze handleiding maakt u een gegevensset om als gegevensmodel te gebruiken.

1. Klik in het menu Gegevens op Gegevensbronnen weergeven.

   Het venster Gegevensbronnen wordt geopend.

2. Klik in het venster Gegevensbronnen op Nieuwe gegevensbron toevoegen.

   De wizard Gegevensbronconfiguratie wordt geopend.

3. Selecteer op de pagina Een gegevensbrontype kiezen de optie Database en selecteer vervolgens Volgende.

4. Op de pagina Een databasemodel kiezen, selecteer Gegevensset en selecteer vervolgens Volgende.

5. Selecteer op de pagina Uw gegevensverbinding kiezen een van de volgende opties:

   • Als een gegevensverbinding met de AdventureWorksLT-voorbeelddatabase beschikbaar is in de vervolgkeuzelijst, selecteert u deze en selecteert u vervolgens Volgende.

   • Klik op Nieuwe verbinding en maak een verbinding met de AdventureWorksLT-database.

6. Op de pagina Sla de verbindingsreeks op in het configuratiebestand van de toepassing, vink het selectievakje Ja, sla de verbinding op als aan en selecteer vervolgens Volgende.

7. Vouw tabellen uit op de pagina Databaseobjecten kiezen en selecteer vervolgens de tabel Product (SalesLT).

8. Klik op Voltooien.

   Visual Studio voegt een nieuw AdventureWorksLTDataSet.xsd bestand toe aan het project en voegt een bijbehorend AdventureWorksLTDataSet-item toe aan het venster Gegevensbronnen . Het AdventureWorksLTDataSet.xsd-bestand definieert een getypte gegevensset genaamd AdventureWorksLTDataSet en een TableAdapter met de naam ProductTableAdapter. Later in deze stapsgewijze handleiding gebruikt u de ProductTableAdapter om de gegevensset in te vullen en wijzigingen weer op te slaan in de database.

9. Bouw het project.

De standaardvulmethode van de TableAdapter bewerken

Als u de gegevensset wilt vullen met gegevens, gebruikt u de Fill methode van de ProductTableAdapter. Fill De methode vult standaard de ProductDataTable in de AdventureWorksLTDataSet met alle rijen uit de tabel Product. U kunt deze methode wijzigen om alleen een subset van de rijen te retourneren. Voor deze doorloop wijzigt u de Fill functie om alleen rijen te retourneren voor producten die foto's hebben.

1. Dubbelklik in Solution Explorer op het bestand AdventureWorksLTDataSet.xsd .

   De ontwerpfunctie voor gegevenssets wordt geopend.

2. Klik in de ontwerpfunctie met de rechtermuisknop op de query Fill, GetData() en selecteer Configureren.

   De wizard TableAdapter-configuratie wordt geopend.

3. Voeg op de pagina Een SQL-instructie invoeren de volgende WHERE component toe na de SELECT instructie in het tekstvak.

   WHERE ThumbnailPhotoFileName <> 'no_image_available_small.gif'
   

4. Klik op Voltooien.

De gebruikersinterface definiëren

Voeg verschillende knoppen toe aan het venster door de XAML in de WPF Designer te wijzigen. Verderop in deze procedure voegt u code toe waarmee gebruikers kunnen bladeren en wijzigingen in productenrecords kunnen opslaan met behulp van deze knoppen.

1. Dubbelklik in Solution Explorer op MainWindow.xaml.

   Het venster wordt geopend in de WPF Designer.

2. Voeg in de XAML-weergave van de ontwerpfunctie de volgende code toe tussen de <Grid> tags:

   <Grid.RowDefinitions>
       <RowDefinition Height="75" />
       <RowDefinition Height="625" />
   </Grid.RowDefinitions>
   <Button HorizontalAlignment="Left" Margin="22,20,0,24" Name="backButton" Width="75">&lt;</Button>
   <Button HorizontalAlignment="Left" Margin="116,20,0,24" Name="nextButton" Width="75">&gt;</Button>
   <Button HorizontalAlignment="Right" Margin="0,21,46,24" Name="saveButton" Width="110">Save changes</Button>
   

3. Bouw het project.

Gegevensgebonden besturingselementen maken

Besturingselementen maken waarmee klantrecords worden weergegeven door de Product tabel vanuit het venster Gegevensbronnen naar de WPF Designer te slepen.

1. Klik in het venster Gegevensbronnen op de vervolgkeuzelijst voor het knooppunt Product en selecteer Details.

2. Vouw het knooppunt Product uit.

3. In dit voorbeeld worden sommige velden niet weergegeven, dus klik op de vervolgkeuzelijst naast de volgende knooppunten en selecteer Geen:

   • ProductCategoryID

   • ProductModelID

   • ThumbnailFotoBestandsnaam

   • rowguid

   • GewijzigdeDatum

4. Klik op de vervolgkeuzelijst naast het knooppunt ThumbNailPhoto en selecteer Afbeelding.

   Opmerking

   Items in het venster Gegevensbronnen die afbeeldingen vertegenwoordigen, hebben standaard hun besturingselement ingesteld op Geen. Dit komt doordat afbeeldingen worden opgeslagen als bytematrices in databases en bytematrices alles kunnen bevatten, van een eenvoudige matrix van bytes tot het uitvoerbare bestand van een grote toepassing.

5. Sleep vanuit het venster Gegevensbronnen het knooppunt Product naar de rasterrij onder de rij met de knoppen.

   Visual Studio genereert XAML die een set besturingselementen definieert die zijn gebonden aan gegevens in de tabel Producten . Er wordt ook code gegenereerd waarmee de gegevens worden geladen. Zie WPF-besturingselementen binden aan gegevens in Visual Studio voor meer informatie over de gegenereerde XAML en code.

6. Klik in de ontwerpfunctie op het tekstvak naast het label Product-id .

7. Selecteer in het venster Eigenschappen het selectievakje naast de eigenschap IsReadOnly.

Navigeren door productgegevens

Voeg code toe waarmee gebruikers door productrecords kunnen schuiven met behulp van de < knoppen.>

1. Dubbelklik in de ontwerpfunctie op de < knop op het vensteroppervlak.

   Visual Studio opent het code-behind-bestand en maakt een nieuwe backButton_Click gebeurtenis-handler voor de Click gebeurtenis.

2. Wijzig de Window_Loaded gebeurtenis-handler, zodat de ProductViewSource, AdventureWorksLTDataSeten AdventureWorksLTDataSetProductTableAdapter zich buiten de methode bevinden en toegankelijk zijn voor het hele formulier. Maak alleen deze globaal voor het formulier en ken ze toe binnen de Window_Loaded event handler zoals in het volgende voorbeeld:

   • C#
   • VB

   private AdventureWorksProductsEditor.AdventureWorksLTDataSet AdventureWorksLTDataSet;
   private AdventureWorksProductsEditor.AdventureWorksLTDataSetTableAdapters.ProductTableAdapter adventureWorksLTDataSetProductTableAdapter;
   private System.Windows.Data.CollectionViewSource productViewSource;
   
   private void Window_Loaded(object sender, RoutedEventArgs e)
   {
       AdventureWorksLTDataSet = ((AdventureWorksProductsEditor.AdventureWorksLTDataSet)(this.FindResource("adventureWorksLTDataSet")));
       // Load data into the table Product. You can modify this code as needed.
       adventureWorksLTDataSetProductTableAdapter = new AdventureWorksProductsEditor.AdventureWorksLTDataSetTableAdapters.ProductTableAdapter();
       adventureWorksLTDataSetProductTableAdapter.Fill(AdventureWorksLTDataSet.Product);
       productViewSource = ((System.Windows.Data.CollectionViewSource)(this.FindResource("productViewSource")));
       productViewSource.View.MoveCurrentToFirst();
   }
   

3. Voeg de volgende code toe aan de backButton_Click gebeurtenis-handler:

   • C#
   • VB

   if (productViewSource.View.CurrentPosition > 0)
   {
       productViewSource.View.MoveCurrentToPrevious();
   }
   

4. Ga terug naar de ontwerpfunctie en dubbelklik op de > knop.

5. Voeg de volgende code toe aan de nextButton_Click gebeurtenis-handler:

   • C#
   • VB

   if (productViewSource.View.CurrentPosition < ((CollectionView)productViewSource.View).Count - 1)
   {
       productViewSource.View.MoveCurrentToNext();
   }
   

Wijzigingen in productrecords opslaan

Voeg code toe waarmee gebruikers wijzigingen in productrecords kunnen opslaan met behulp van de knop Wijzigingen opslaan .

1. Dubbelklik in de ontwerpfunctie op de knop Wijzigingen opslaan .

   Visual Studio opent het code-behind-bestand en maakt een nieuwe saveButton_Click gebeurtenis-handler voor de Click gebeurtenis.

2. Voeg de volgende code toe aan de saveButton_Click gebeurtenis-handler:

   • C#
   • VB

   adventureWorksLTDataSetProductTableAdapter.Update(AdventureWorksLTDataSet.Product);
   

   Opmerking

   In dit voorbeeld wordt de Save methode van de TableAdapter methode gebruikt om de wijzigingen op te slaan. Dit is geschikt in dit scenario, omdat er slechts één gegevenstabel wordt gewijzigd. Als u wijzigingen in meerdere gegevenstabellen wilt opslaan, kunt u ook de UpdateAll methode gebruiken van de TableAdapterManager methode die Visual Studio met uw gegevensset genereert. Zie TableAdapters voor meer informatie.

De toepassing testen

Bouw en voer de toepassing uit. Controleer of u productrecords kunt bekijken en bijwerken.

1. Druk op F5.

   De toepassing wordt opgebouwd en uitgevoerd. Controleer het volgende:

   • In de tekstvakken worden gegevens uit de eerste productrecord met een foto weergegeven. Dit product heeft de product-id 713 en de naam Long-Sleeve Logo Jersey, S.

   • U kunt op de > of < knoppen klikken om door andere productrecords te navigeren.

2. Wijzig in een van de productrecords de waarde Grootte en selecteer Wijzigingen opslaan.

3. Sluit de toepassing en start de toepassing opnieuw door op F5 te drukken in Visual Studio.

4. Navigeer naar de productrecord die u hebt gewijzigd en controleer of de wijziging is behouden.

5. Sluit de toepassing.

Volgende stappen

Nadat u deze procedure hebt voltooid, kunt u de volgende gerelateerde taken proberen:

• Meer informatie over het gebruik van het venster Gegevensbronnen in Visual Studio om WPF-besturingselementen te binden aan andere typen gegevensbronnen. Zie WPF-besturingselementen binden aan een WCF-gegevensservice voor meer informatie.

• Meer informatie over het gebruik van het venster Gegevensbronnen in Visual Studio om gerelateerde gegevens (dat wil weten gegevens in een relatie tussen bovenliggende en onderliggende items) weer te geven in WPF-besturingselementen. Zie Walkthrough: Gerelateerde gegevens weergeven in een WPF-app voor meer informatie.

Verwante inhoud

• WPF-besturingselementen verbinden met gegevens in Visual Studio
• Datasettools in Visual Studio
• Overzicht van gegevensbindingen