Praca z danymi – Binding

Autor: Rafał Garbowski

Opublikowano: 2010-10-08

Wstęp

Praca z danymi może kojarzyć się z wykonywaniem operacji na danych, lecz nie tylko. Ważnym elementem jest prezentacja, w której wykonaniu pomocnymi mechanizmami są wiązanie,walidacja i konwersja danych. Z tego artykułu nauczysz się, jak wykorzystywać Data Binding w swoich projektach.

Data Binding

Czym jest Data Binding?

Binding umożliwia zarówno połączenie elementów interfejsu użytkownika z dużymi i często używanymi obiektami biznesowymi, jak i powiązanie ze sobą dwóch kontrolek. Działa więc niczym wskaźnik w języku C, gdyż unika niepotrzebnego kopiowania danych. Binding nie łączy ze sobą całych obiektów, jedynie ich właściwości. Pozwala na ich zsynchronizowanie, dzięki czemu obiekt docelowy jest automatycznie aktualizowany podczas zmiany wartości obiektu źródłowego. Wiązanie danych umożliwia ponadto oddzielenie interfejsu użytkownika od innych warstw aplikacji.

Implementacja prostego wiązania danych

Binding wymaga podstawienia BindingMarkup Extension pod właściwość bindowanej przez nas kontrolki. Pamiętajmy o nadaniu nazwy naszej kontrolce.

Najprostszy Data Binding polega na wpisaniu pomiędzy dwa nawiasy sześcienne słowa „Binding” w kodzie XAML kontrolki. W kodzie CS do kontrolki odwołujemy się poprzez DataContext, pod który podstawiamy właściwość obiektu biznesowego tego samego typu.

Wyświetlone zostanie pole „Name” obiektu „player1”, czyli słowo „Kobe”.

BindingMarkup Extension umożliwia również sprecyzowanie bindowanej właściwości i/lub określenie trybu wiązania.

Chociaż pod DataContext podstawiliśmy cały obiekt klasy „Player”, powiązane zostanie wyłącznie pole  „Name” tegoż obiektu.

W przykładzie powyżej użyłem trybu „OneWay”. Występują również inne tryby wiązania danych:

- OneWay – domyślny, obiekt docelowy jest aktualizowany w czasie tworzenia bindingu i za każdym razem, gdy zmianie ulegną dane źródłowe.

- OneTime – obiekt docelowy jest tylko aktualizowany w czasie tworzenia bindingu.

- TwoWay – aktualizuje dwie strony, gdy dane którejkolwiek ulegną zmianie. Możliwe jest ustawienie, kiedy obiekt źródłowy ma być aktualizowany.

Automatyczna aktualizacja obiektu docelowego w praktyce

Aby zaktualizować dane w obiekcie docelowym, musimy powiadomić mechanizm bindowania, że w obiekcie źródłowym dane uległy zmianie. W praktyce wygląda to tak, że zmieniając wartość dowolnej właściwości, wywołujemy event INotifyPropertyChanged. Poniższy kod musimy zaimplementować w klasie naszego obiektu:

Teraz wszędzie tam, gdzie zmieniamy dowolną właściwość obiektu, wywołujemy metodę „NotifyPropertyChanged” z nazwą owej właściwości.

Wiązanie kontrolek

Wiązanie kontrolek odbywa się z wykorzystaniem właściwości ElementName. Pierwszy TextBlock jest powiązany z kontrolką o nazwie „textBox”. TextBox wykorzystuje binding w trybie „TwoWay” z aktualizacją źródła wywoływaną przez programistę, natomiast drugi TextBlock w sposób domyślny wiąże ze sobą pole „Name” obiektu „player1”.

„Ręczna”aktualizacja obiektu źródłowego w trybie TwoWay

Przyciskiem „Button1” aktualizujemy źródło danych, a co za tym idzie - powiadamiamy silnik bindingu o zmianie danych w obiekcie źródłowym.  Wykorzystujemy do tego klasę BindingExpression. Należy pamiętać, aby właściwość UpdateSourceTrigger bindingu w kontrolce ustawić na „Explicit”.

Wiązanie kolekcji danych

Wiemy już, jak powiązać ze sobą dwa proste obiekty. Teraz zajmiemy się bindowaniem kolekcji danych. Powiązanie listy typu string z kontrolką o polach tego samego typu jest proste –BindingMarkup Extension podstawiamy pod właściwość ItemsSource.

Gdy musimy powiązać kontrolkę do wyświetlania kolekcji z kolekcją o niestandardowym typie danych, musimy użyć DataTemplate. Dzięki DataTemplate wyświetlimy tylko te pola obiektu, które chcemy.W szablonie danych możemy umieścić tylko jedną kontrolkę, stąd w kontrolce StackPanel znajdują się dwie kontrolki TextBlock.

Data Binding przy użyciu Expression Blend

Bindowanie możemy wykonać również za pomocą narzędzia Expression Blend.

Klikamy lewym przyciskiem myszy na kwadracik – oznaczający zaawansowne opcje – obok wybranej właściwości konrolki. Klikamy na opcję „Data Binding…”. Otworzy się nowe okno.

W oknie „Create Data Binding” do wyboru mamy:

- Data Field – służy do wiązania pól z modeli danych,

- Element Property – umożliwia powiązanie ze sobą kontrolek,

- Data Context – wybieramy, jeśli wcześniej ustawiliśmy Data Context.

Klikając na strzałkę na dole okna, która oznacza zaawansowane opcje, możemy również ustawić tryby bindingu, wartość domyślną bindingu i opcje konwersji.

Podsumowanie

Data Binding służy do wiązania kontrolek z obiektami biznesowymi lub innymi kontrolkami. INotifyPropertyChanged stosujemy, aby umożliwić automatyczną aktualizację kontrolek. Binding pozwala na aktualizację w obydwie strony, w tym ręczną aktualizację obiektu źródłowego. Wiązanie danych można łatwo „wyklikać”, używając do tego celu programu Expression Blend.

---