Wiązanie kontrolek WPF z zestawem danych w aplikacjach .NET Framework

W tym przewodniku utworzysz aplikację WPF zawierającą kontrolki powiązane z danymi. Kontrolki są powiązane z rekordami produktów, które są hermetyzowane w zestawie danych. Możesz również dodawać przyciski, aby przeglądać produkty i zapisywać zmiany w rekordach produktów.

W tym przewodniku przedstawiono następujące zadania:

• Tworzenie aplikacji WPF i zestawu danych generowanego na podstawie danych w przykładowej bazie danych AdventureWorksLT.

• Utworzenie zestawu kontrolek powiązanych z danymi przez przeciągnięcie tabeli danych z okna Źródła danych do okna w projektancie WPF.

• Tworzenie przycisków, które nawigują do przodu i do tyłu przez rekordy produktów.

• Utworzenie przycisku, który zapisuje zmiany wprowadzane przez użytkowników do rekordów produktów w tabeli danych i źródłowym źródle danych.

Wymagania wstępne

Do ukończenia tego przewodnika potrzebne są następujące składniki:

• Do ukończenia tego samouczka potrzebne są obciążenia tworzenia aplikacji klasycznych platformy .NEToraz przechowywania i przetwarzania danych zainstalowanych w programie Visual Studio. Aby je zainstalować, otwórz Instalator programu Visual Studio i wybierz Modyfikuj (lub Więcej>Modyfikuj) obok wersji programu Visual Studio, którą chcesz zmodyfikować. Zobacz Modyfikowanie programu Visual Studio.

• Dostęp do uruchomionego wystąpienia programu SQL Server lub programu SQL Server Express z dołączoną do niej przykładową bazą danych AdventureWorks Light (AdventureWorksLT). Aby pobrać bazę danych, zobacz Przykładowe bazy danych AdventureWorks.

Wcześniejsza wiedza na temat poniższych pojęć jest również przydatna, ale nie jest wymagana do ukończenia przewodnika:

• Zestawy danych i TableAdaptery. Aby uzyskać więcej informacji, zobacz Narzędzia zestawu danych w programach Visual Studio i TableAdapters.

• Powiązanie danych WPF. Aby uzyskać więcej informacji, zobacz Przegląd powiązania danych .

Tworzenie projektu

Utwórz nowy projekt WPF, aby wyświetlić rekordy produktów.

1. Otwórz program Visual Studio.

2. W oknie uruchamiania wybierz pozycję Utwórz nowy projekt.

3. Wyszukaj szablon projektu aplikacji WPF języka C# i wykonaj kroki tworzenia projektu, nazywając projekt AdventureWorksProductsEditor.

   Program Visual Studio tworzy projekt AdventureWorksProductsEditor.

Tworzenie zestawu danych dla aplikacji

Przed utworzeniem kontrolek powiązanych z danymi należy zdefiniować model danych dla aplikacji i dodać go do okna Źródła danych . W tym przewodniku utworzysz zestaw danych do użycia jako model danych.

1. W menu Dane kliknij pozycję Pokaż źródła danych.

   Zostanie otwarte okno Źródła danych .

2. W oknie Źródła danych kliknij pozycję Dodaj nowe źródło danych.

   Otwiera się kreator Konfiguracja źródła danych.

3. Na stronie Wybierz typ źródła danych wybierz pozycję Baza danych, a następnie wybierz pozycję Dalej.

4. Na stronie Wybieranie modelu bazy danych wybierz pozycję Zestaw danych, a następnie wybierz pozycję Dalej.

5. Na stronie Wybieranie połączenia danych wybierz jedną z następujących opcji:

   • Jeśli na liście rozwijanej jest dostępne połączenie danych z przykładową bazą danych AdventureWorksLT, wybierz je, a następnie wybierz przycisk Dalej.

   • Kliknij pozycję Nowe połączenie i utwórz połączenie z bazą danych AdventureWorksLT.

6. Na stronie Zapisz parametry połączenia w pliku Konfiguracji aplikacji zaznacz pole wyboru Tak, zapisz połączenie jako , a następnie wybierz przycisk Dalej.

7. Na stronie Wybieranie obiektów bazy danych rozwiń węzeł Tabel, a następnie wybierz tabelę Product (SalesLT).

8. Kliknij przycisk Finish (Zakończ).

   Program Visual Studio dodaje nowy AdventureWorksLTDataSet.xsd plik do projektu i dodaje odpowiedni element AdventureWorksLTDataSet do okna Źródła danych . Plik AdventureWorksLTDataSet.xsd definiuje typowy zestaw danych o nazwie AdventureWorksLTDataSet i tableAdapter o nazwie ProductTableAdapter. W dalszej części tego przewodnika użyjesz ProductTableAdapter, aby uzupełnić zestaw danych i zapisać zmiany z powrotem do bazy danych.

9. Skompiluj projekt.

Edytuj domyślną metodę wypełniania obiektu TableAdapter

Aby wypełnić zestaw danych danymi, użyj Fill metody ProductTableAdapter. Domyślnie metoda Fill wypełnia element ProductDataTable we AdventureWorksLTDataSet wszystkimi wierszami danych z tabeli Product. Tę metodę można zmodyfikować tak, aby zwracała tylko podzbiór wierszy. W tym przewodniku zmodyfikuj metodę Fill tak, aby zwracała tylko wiersze dla produktów, które mają zdjęcia.

1. W Eksploratorze rozwiązań kliknij dwukrotnie plik AdventureWorksLTDataSet.xsd .

   Otwiera się projektant zestawu danych.

2. W projektancie kliknij prawym przyciskiem myszy zapytanie Fill, GetData() i wybierz polecenie Konfiguruj.

   Otworzy się kreator konfiguracji TableAdapter.

3. Na stronie Wprowadź instrukcję SQL, dodaj następującą klauzulę WHERE po instrukcji SELECT w polu tekstowym.

   WHERE ThumbnailPhotoFileName <> 'no_image_available_small.gif'
   

4. Kliknij przycisk Finish (Zakończ).

Definiowanie interfejsu użytkownika

Dodaj kilka przycisków do okna, modyfikując kod XAML w projektancie WPF. W dalszej części tego przewodnika dodasz kod, który umożliwia użytkownikom przewijanie i zapisywanie zmian w rekordach produktów przy użyciu tych przycisków.

1. W Eksploratorze rozwiązań kliknij dwukrotnie plik MainWindow.xaml.

   Zostanie otwarte okno w projektancie WPF.

2. W widoku XAML projektanta dodaj następujący kod między tagami <Grid> :

   <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. Skompiluj projekt.

Tworzenie kontrolek powiązanych z danymi

Utwórz kontrolki, które wyświetlają rekordy klientów, przeciągając tabelę Product z okna Źródła danych do projektanta WPF.

1. W oknie Źródła danych kliknij menu rozwijane dla węzła Produkt i wybierz pozycję Szczegóły.

2. Rozwiń węzeł Product.

3. W tym przykładzie niektóre pola nie będą wyświetlane, dlatego kliknij menu rozwijane obok następujących węzłów i wybierz pozycję Brak:

   • IDKategoriiProduktu

   • ProductModelID

   • NazwaPlikuMiniaturyZdjęcia

   • rowguid

   • DataModyfikacji

4. Kliknij menu rozwijane obok węzła ThumbNailPhoto i wybierz pozycję Obraz.

   Uwaga / Notatka

   Domyślnie elementy w oknie Źródła danych reprezentujące obrazy mają domyślną kontrolkę ustawioną na Wartość Brak. Dzieje się tak, ponieważ obrazy są przechowywane jako tablice bajtów w bazach danych, a tablice bajtów mogą zawierać dowolne elementy z prostej tablicy bajtów do pliku wykonywalnego dużej aplikacji.

5. W oknie Źródła danych przeciągnij węzeł Product do wiersza siatki pod wierszem zawierającym przyciski.

   Program Visual Studio generuje kod XAML, który definiuje zestaw kontrolek powiązanych z danymi w tabeli Products . Generuje również kod, który ładuje dane. Aby uzyskać więcej informacji na temat wygenerowanego kodu XAML i kodu, zobacz Bind WPF controls to data in Visual Studio (Wiązanie kontrolek WPF z danymi w programie Visual Studio).

6. W projektancie kliknij pole tekstowe obok etykiety ID produktu.

7. W oknie Właściwości zaznacz pole wyboru obok właściwości IsReadOnly .

Nawigowanie po rekordach produktów

Dodaj kod, który umożliwia użytkownikom przewijanie rekordów produktów przy użyciu przycisków < i >.

1. W edytorze projektowania dwukrotnie kliknij przycisk < na powierzchni okna.

   Program Visual Studio otwiera plik z kodem i tworzy nową backButton_Click procedurę obsługi zdarzenia dla zdarzenia Click.

2. Zmodyfikuj procedurę Window_Loaded obsługi zdarzeń, aby element ProductViewSource, AdventureWorksLTDataSeti AdventureWorksLTDataSetProductTableAdapter był poza metodą i był dostępny dla całego formularza. Zadeklaruj tylko te, aby były globalne do formularza, i przypisz je w Window_Loaded programie obsługi zdarzeń podobnym do następującego:

   • 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. Dodaj następujący kod do programu obsługi zdarzeń backButton_Click :

   • C#
   • VB

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

4. Wróć do projektanta i dwukrotnie kliknij przycisk >.

5. Dodaj następujący kod do programu obsługi zdarzeń nextButton_Click :

   • C#
   • VB

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

Zapisywanie zmian w rekordach produktów

Dodaj kod, który umożliwia użytkownikom zapisywanie zmian w rekordach produktów przy użyciu przycisku Zapisz zmiany .

1. W projektancie kliknij dwukrotnie przycisk Zapisz zmiany .

   Program Visual Studio otwiera plik za kodem i tworzy nową saveButton_Click procedurę obsługi zdarzeń dla Click zdarzenia.

2. Dodaj następujący kod do programu obsługi zdarzeń saveButton_Click :

   • C#
   • VB

   adventureWorksLTDataSetProductTableAdapter.Update(AdventureWorksLTDataSet.Product);
   

   Uwaga / Notatka

   W tym przykładzie użyto metody Save w TableAdapter, aby zapisać zmiany. Jest to odpowiednie w tym przewodniku, ponieważ zmieniana jest tylko jedna tabela danych. Jeśli musisz zapisać zmiany w wielu tabelach danych, możesz też użyć UpdateAll metody wygenerowanej TableAdapterManager przez program Visual Studio z zestawem danych. Aby uzyskać więcej informacji, zobacz TableAdapters.

Testowanie aplikacji

Skompiluj i uruchom aplikację. Sprawdź, czy możesz wyświetlać i aktualizować rekordy produktów.

1. Naciśnij klawisz F5.

   Aplikacja kompiluje i uruchamia. Sprawdź następujące:

   • Pola tekstowe zawierają dane z pierwszego rekordu produktu zawierającego zdjęcie. Ten produkt ma identyfikator 713 i nazwę Long-Sleeve Logo Jersey, S.

   • Możesz kliknąć przyciski > lub <, aby przejść do innych rekordów produktów.

2. W jednym z rekordów produktu zmień wartość Rozmiar , a następnie wybierz pozycję Zapisz zmiany.

3. Zamknij aplikację, a następnie uruchom ponownie aplikację, naciskając F5 w programie Visual Studio.

4. Przejdź do zmienionego rekordu produktu i sprawdź, czy zmiana została utrwalona.

5. Zamknij aplikację.

Dalsze kroki

Po ukończeniu tego przewodnika możesz wypróbować następujące powiązane zadania:

• Dowiedz się, jak używać okna Źródła danych w programie Visual Studio do powiązania kontrolek WPF z innymi typami źródeł danych. Aby uzyskać więcej informacji, zobacz Wiązanie kontrolek WPF z usługą danych WCF.

• Dowiedz się, jak używać okna Źródła danych w programie Visual Studio do wyświetlania powiązanych danych (czyli danych w relacji nadrzędny-podrzędny) w kontrolkach WPF. Aby uzyskać więcej informacji, zobacz Przewodnik: wyświetlanie powiązanych danych w aplikacji WPF.

Treści powiązane

• Wiązanie kontrolek WPF z danymi w programie Visual Studio
• Narzędzia zestawu danych w programie Visual Studio
• Omówienie wiązania danych