Korzystanie z Bindingu  

Autor: Tomasz Kowalczyk

Opublikowano: 2012-08-06

Jest to drugi artykuł z serii, która przedstawia możliwości Silverlight 5. W tym odcinku zaprezentowana zostanie jedna z najważniejszych funkcji Frameworka – Binding (Data Binding), znana również programistom używającym WPF (Windows Presentation Foundation).

Silverlight w najnowszej wersji wspiera długo oczekiwane i bardzo przydatne funkcje, tj. Ancestor Relative Source Binding i Imiplicit Data Templates.

Po przeczytaniu poniższego artykułu będziesz wiedział, jak:

• korzystać z Bindingu w projekcie opartym o wzorzec MVVM (Model-View-ViewModel),
• stosować Ancestor Relative Source Binding,
• stosować Imiplicit Data Templates.

Wprowadzenie

Każda osoba, która używała już Silverlight przyzna, że jedną z najważniejszych funkcji, którą należy opanować, programując w Silverlight, jest Binding. Jest to swego rodzaju połączenie (relacja) pomiędzy logiką naszej aplikacji (ViewModel) a jej widokiem (View), prezentowanym jako interfejs użytkownika, gdzie dane (Model) mogą pochodzić z dowolnego źródła.

Korzystanie z Bindingu przynosi jeszcze lepsze rezultaty wraz z poprawną implementacją wzorca MVVM. Wykorzystanie tych dwóch technik pozwala, w bardzo efektywny sposób, rozdzielić pracę pomiędzy przygotowanie interfejsu użytkownika a opracowanie logiki działania aplikacji. Schemat, przedstawiający zasadę działania MVVM i miejsce Bindingu, przedstawiony został na Rys. 1. MVVM w Silverlight 5.

Rys. 1. MVVM w Silverlight 5.

Źródło:http://johnpapa.net/mix11-silverlight-bootcamp-slides-and-mvvm-demo

Implementacja

Aplikacja, pokazująca praktyczne zastosowanie nowych możliwości, jest projektem typu Silverlight Navigation Application, w którym należy wybrać, z opcji górnego menu, interesującą funkcję oraz kliknąć jej nazwę, aby móc zobaczyć efekt działania. Projekt został zaprezentowany na Rys. 2. Przykładowy projekt.

Rys. 2. Przykładowy projekt.

Swój sposób działania ta prosta aplikacja opiera na dwóch klasach modelu danych (Person i PremiumCustomer), które odzwierciedlają klientów hipotetycznego sklepu. Następnie, zdefiniowano dwa widoki, dla zobrazowania poszczególnych, nowych funkcji w Silverlight 5:

• Ascending (Ancestor Relative Source Binding),
• Implicit (Imiplicit Data Templates).

W zależności od wybranego widoku, zostaną do niego zbindowane odpowiednie kolekcje, umieszczone w klasie typu ViewModel, o nazwie AncestorBindingViewModel, która implementuje interfejs INotifyPropertyChanged, zgodnie z MVVM. W momencie odwołania się do tego obiektu, inicjuje on przykładowymi danymi dwie kolekcje:

public AncestorBindingViewModel()

        {

            States = new List<string> { "Arizona", "Utah", "California" };

            People = new List<Person>

        {

            new Person {FirstName = "John", LastName = "Doe"},

            new Person {FirstName = "Jane", LastName = "Doe"},

            new PremiumCustomer {FirstName = "Tom", LastName = "Kow"}

        };

Ancestor Relative Source Binding

Technika znana do tej pory z aplikacji WPF, dostępna teraz w Silverlight, pozwala na Binding własności, zgodnie z mechanizmem dziedziczenia. Pozwala zdefiniować, od jakiego typu obiektu dany element będzie dziedziczył właściwości (AncestorType) oraz na jakim poziomie hierarchii dziedziczenia się znajduje (AncestorLevel):

<navigation:Page.Resources>
        <types:AncestorBindingViewModel x:Key="ViewModel" />
        <DataTemplate DataType="types:Person">
            <StackPanel Orientation="Horizontal">
                <ComboBox ItemsSource="{Binding DataContext.States,
                    RelativeSource={RelativeSource AncestorType=ListBox,AncestorLevel=1}}"
                    Width="100" Height="20" />
                <TextBlock Margin="5,0,0,0" Text="{Binding FirstName}" />
                <TextBlock Margin="5,0,0,0" Text="{Binding LastName}" />
            </StackPanel>
        </DataTemplate>
    </navigation:Page.Resources>

    <Grid x:Name="LayoutRoot" DataContext="{Binding Source={StaticResource ViewModel}}">
        <ListBox ItemsSource="{Binding People}" />
    </Grid>

W powyższym przykładzie widać element Combobox, który będzie wyświetlał nazwy stanów i wyświetlał, odpowiednio do nich, nazwy ich mieszkańców, zgodnie z mechanizmem Bindingu. Jest to możliwe dzięki ustawieniu atrybutu AncestorType elementu Combobox, aby wskazywał dane, zgodne z elementem Listbox, dla którego ustawiony został mechanizm Bindingu.

Imiplicit Data Templates

Data Templates to niezwykle istotny mechanizm dla wszystkich aplikacji typu LOB (Line of Business), tworzonych z wykorzystaniem Silverlight, pozwalający na ustawienie formatowania specyficznego dla danego typu danych. W najnowszej wersji Silverlight programiści mają również dostęp do tej funkcji, dzięki której możliwe jest przypisanie Templatu do konkretnego typu obiektu:

<navigation:Page.Resources>
        <types:AncestorBindingViewModel x:Key="ViewModel" />
        <DataTemplate DataType="types:Person">
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding FirstName}" Margin="0,0,2,0" />
                <TextBlock Text="{Binding LastName}" />
            </StackPanel>
        </DataTemplate>

        <DataTemplate DataType="types:PremiumCustomer">
            <StackPanel Orientation="Horizontal" Background="Yellow">
                <TextBlock Text="{Binding FirstName}" Margin="0,0,2,0" />
                <TextBlock Text="{Binding LastName}" />
            </StackPanel>
        </DataTemplate>
    </navigation:Page.Resources>

    <Grid x:Name="LayoutRoot" DataContext="{Binding Source={StaticResource ViewModel}}">
        <ListBox ItemsSource="{Binding Customers}" />
    </Grid>

Dzięki nowej funkcji, powyższy kod wyświetla, za pomocą Bindingu, w elemencie Listbox, zawartość  kolekcji Customers, która składa się z obiektów reprezentujących zwykłych klientów i klientów specjalnych, tych drugich wyświetla, zgodnie z zdefiniowanym Templatem z żółtym kolorem tła. Efekt tego został pokazany na Rys. 3. Implicit Data Templates.

Rys. 3. Implicit Data Templates.

Podsumowanie

W tym artykule poznaliśmy nowe możliwości Bindingu, zaimplementowane w Silverlight 5, oraz sposób ich wykorzystania, zgodny ze wzorcem MVVM.

W następnym odcinku przedstawione zostanie debugowanie aplikacji.