Używanie powiązań danych w języku XAML

Powiązania danych można zadeklarować w kodzie lub w języku XAML przy użyciu rozszerzeń znaczników. W tej lekcji omówiono tę drugą, ponieważ jest to najbardziej typowy sposób tworzenia powiązań. Istnieje kilka powodów, dla których warto preferować język XAML. Po pierwsze, większość osób uważa powiązania za część kodu interfejsu użytkownika, ponieważ powiązania pobierają dane dla interfejsu użytkownika do wyświetlenia. Po drugie, istnieje rozszerzenie znaczników o nazwie Binding , które ułatwia wykonywanie.

Co to są powiązania danych

Powiązanie łączy ze sobą dwie właściwości. Jedna właściwość znajduje się w interfejsie użytkownika, a druga znajduje się w obiekcie modelu danych. Jeśli wartość każdej właściwości ulegnie zmianie, obiekt powiązania może zaktualizować drugi. Innymi słowy, powiązania są obiektami pośredniczącymi, które synchronizują interfejs użytkownika i dane. Używamy terminów źródłowych i docelowych , aby zidentyfikować dwa zaangażowane obiekty:

• Źródło: Źródło może być obiektem dowolnego typu. W praktyce zazwyczaj używasz obiektu danych jako źródła. Należy zidentyfikować właściwość dla tego obiektu źródłowego, aby uczestniczyć w powiązaniu. Właściwość można zidentyfikować, ustawiając Path właściwość w powiązaniu.

• Element docelowy: element docelowy jest właściwością zaimplementowaną przy użyciu właściwości specjalnej BindablePropertyo nazwie . Obiekt z elementem BindableProperty musi pochodzić z klasy BindableObject. Wszystkie kontrolki dostępne w .NET MAUI pochodzą z elementu BindableObject, a większość ich właściwości to BindableProperties.

Na poniższym diagramie pokazano, jak powiązanie jest obiektem pośredniczącym między dwiema właściwościami:

Jak utworzyć powiązanie danych w języku XAML

Przyjrzyjmy się prostego powiązania utworzonego {Binding} w języku XAML przy użyciu rozszerzenia znaczników. WeatherService.Humidity Powiązanie właściwości źródła z właściwością Text kontrolki interfejsu użytkownika.

<VerticalStackLayout Margin="10">
    <VerticalStackLayout.Resources>
        <ResourceDictionary>
            <services:WeatherService x:Key="myWeatherService" />
        </ResourceDictionary>
    </VerticalStackLayout.Resources>

    <Label Text="{Binding Path=Humidity, Source={StaticResource myWeatherService}}" />
</VerticalStackLayout>

Źródło powiązania to:

• Wystąpienie WeatherService obiektu typu. Wystąpienie jest przywołyane za pośrednictwem {StaticResource ...} rozszerzenia XAML, które wskazuje obiekt w słowniku zasobów układu stosu.

• Wskazuje Path właściwość o nazwie Humidity w typie WeatherService .

  Jest Path to pierwszy nienazwany parametr składni {Binding} , a składnia Path= może zostać pominięta. Te dwa powiązania są równoważne:

  <Label Text="{Binding Path=Humidity, Source={StaticResource myWeatherService}}" />
  <Label Text="{Binding Humidity, Source={StaticResource myWeatherService}}" />
  

Element docelowy powiązania to:

• Kontrolka Label .
• Właściwość kontrolki Text .

Po wyświetleniu {Binding} interfejsu użytkownika rozszerzenie XAML tworzy powiązanie między elementem i WeatherServiceLabel. Powiązanie odczytuje WeatherService.Humidity wartość właściwości do Label.Text właściwości.

Używanie innej kontrolki jako źródła powiązania

Jedną z przydatnych funkcji powiązania jest możliwość powiązania z innymi kontrolkami. Poniższy kod XAML jest prostym pokazem:

<VerticalStackLayout HorizontalOptions="Center" VerticalOptions="Center">
    <Label x:Name="TargetLabel" Text="TEXT TO ROTATE" BackgroundColor="Yellow" />
    <Slider WidthRequest="100" Maximum="360"
            Value="{Binding Rotation, Mode=OneWayToSource, Source={x:Reference TargetLabel}}" />
</VerticalStackLayout>

Właściwość Slider.Value jest powiązana z właściwością Label.Rotation , ale w inny sposób niż wcześniej wyjaśniono. Ta właściwość używa trybu OneWayToSourcepowiązania , który odwraca typowy mechanizm powiązania. Zamiast tego, aby źródło aktualizowało element docelowy, to OneWayToSource aktualizuje źródło, gdy element docelowy ulega zmianie. W tym przykładzie po przesunięciu suwaka aktualizuje rotację etykiety na podstawie wartości suwaka, jak pokazano w poniższej animacji:

Typowy scenariusz wiązania kontrolek ze sobą polega na tym, że kontrolka — zazwyczaj kontrolka kolekcji, taka jak CollectionView lub CarouselView— ma wybrany element, którego chcesz użyć jako źródła danych. W przykładzie strony wyświetlającej prognozę pogody może istnieć pięciodniowa CollectionView prognoza. Gdy użytkownik wybierze dzień na liście, szczegóły prognozy pogody są wyświetlane w innych kontrolkach. Jeśli użytkownik wybierze kolejny dzień, inne kontrolki zostaną ponownie zaktualizowane o szczegóły wybranego dnia.

Użyj tego samego źródła w wielu powiązaniach

W poprzednim przykładzie pokazano użycie zasobu statycznego jako źródła pojedynczego powiązania. Tego źródła można używać w wielu powiązaniach. Oto przykład deklarowania powiązania między trzema różnymi kontrolkami, wszystkie powiązania z tym samym obiektem i właściwością Path, choć niektóre pomijają Path właściwość:

<VerticalStackLayout Margin="10">
    <VerticalStackLayout.Resources>
        <vm:SimpleWeatherServiceObject x:Key="myWeatherService" />
    </VerticalStackLayout.Resources>
    <Entry Text="{Binding Humidity, Source={StaticResource myWeatherService}}" />
    <Label Text="{Binding Path=Humidity, Source={StaticResource myWeatherService}}" />
</VerticalStackLayout>

Nie musisz używać tego samego Path elementu w przypadku korzystania z tego samego Sourceelementu :

<VerticalStackLayout Margin="10">
    <VerticalStackLayout.Resources>
        <vm:SimpleWeatherServiceObject x:Key="myWeatherService" />
    </VerticalStackLayout.Resources>
    <Entry Text="{Binding Temperature, Source={StaticResource myWeatherService}}" />
    <Label Text="{Binding Path=Humidity, Source={StaticResource myWeatherService}}" />
</VerticalStackLayout>

Rzadko przedstawiasz pojedynczy fragment danych ze źródła, choć może się to zdarzyć. Zwykle masz kilka kontrolek używających różnych fragmentów danych z tego samego źródła. Taka sytuacja jest tak powszechna, że BindableObject klasa ma właściwość o nazwie BindingContext , która działa jako źródło powiązania danych. Pamiętaj, że kontrolki .NET MAUI dziedziczą z BindableObject klasy, więc kontrolki .NET MAUI mają BindingContext właściwość .

Ustawienie powiązania Source jest opcjonalne. Powiązanie, które nie ma Source ustawione automatycznie przeszukuje drzewo wizualne XAML dla BindingContextelementu , który jest ustawiony w języku XAML lub przypisany do elementu nadrzędnego według kodu. Powiązania są oceniane zgodnie z tym wzorcem:

1. Jeśli powiązanie definiuje Sourceelement , to źródło jest używane i wyszukiwanie zostanie zatrzymane. Powiązanie jest stosowane do Path elementu Source w celu uzyskania wartości. Jeśli Source nie jest ustawiona, wyszukiwanie rozpoczyna się od źródła powiązania.

2. Wyszukiwanie rozpoczyna się od samego obiektu docelowego. Jeśli obiekt docelowy BindingContext nie ma wartości null, wyszukiwanie zostanie zatrzymane, a powiązanie Path zostanie zastosowane do BindingContext elementu w celu uzyskania wartości. Jeśli parametr BindingContext ma wartość null, wyszukiwanie będzie kontynuowane.

3. Ten proces będzie kontynuowany do momentu osiągnięcia katalogu głównego XAML. Wyszukiwanie kończy się sprawdzaniem BindingContext elementu głównego dla wartości innej niż null. Jeśli nie znaleziono prawidłowej BindingContext wartości, powiązanie nie ma nic do powiązania i nic nie robi.

Często ustawia się wartość BindingContext na poziomie obiektu głównego w celu zastosowania do całego kodu XAML.

Jest jedna ostatnia wygodna funkcja, o której warto wspomnieć. Powiązania obserwują zmiany w odwołaniu do obiektu ich źródła. Działa to nawet w przypadku powiązań, które używają BindingContext jako źródła. Jeśli obiekt Source lub BindingContext zostanie ponownie przydzielony do innego obiektu, powiązania pobierają dane z nowego źródła i aktualizują ich element docelowy.