Menggunakan pengikatan data di XAML

  • 6 menit

Pengikatan data dapat dideklarasikan dalam kode atau di XAML menggunakan ekstensi markup. Unit ini membahas yang terakhir karena ini adalah cara paling umum untuk membuat pengikatan. Ada beberapa alasan untuk lebih memilih XAML. Pertama, sebagian besar orang menganggap pengikatan sebagai bagian dari kode UI mereka karena pengikatan mendapatkan data untuk ditampilkan UI. Kedua, ada ekstensi markup bernama Binding yang membuatnya mudah dilakukan.

Apa itu pengikatan data

Pengikatan mengikat dua properti bersama-sama. Satu properti ada di UI Anda dan yang lainnya ada di objek model data Anda. Jika nilai salah satu properti berubah, objek pengikatan dapat memperbarui yang lain. Dengan kata lain, pengikatan adalah objek perantara yang menyinkronkan UI dan data Anda. Kami menggunakan istilah sumber dan target untuk mengidentifikasi dua objek yang terlibat:

  • Sumber: Sumber dapat menjadi objek dari jenis apa pun. Dalam praktiknya, Anda biasanya menggunakan objek data sebagai sumber Anda. Anda perlu mengidentifikasi properti pada objek sumber tersebut untuk berpartisipasi dalam pengikatan. Anda mengidentifikasi properti dengan mengatur Path properti dalam pengikatan.

  • Target: Target adalah properti yang diimplementasikan menggunakan properti khusus yang BindablePropertydisebut . Objek dengan BindableProperty harus berasal dari BindableObject. Semua kontrol yang disediakan dalam .NET MAUI berasal dari BindableObject dan sebagian besar propertinya adalah BindableProperties.

Diagram berikut mengilustrasikan bagaimana pengikatan adalah objek perantara antara dua properti:

A diagram that illustrates a binding as an intermediary between a source object property and a target object bindable property.

Cara membuat pengikatan data di XAML

Mari kita lihat pengikatan sederhana yang dibuat di XAML dengan menggunakan {Binding} ekstensi markup. Ini mengikat WeatherService.Humidity properti sumber ke Text properti kontrol UI.

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

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

Sumber pengikatannya adalah:

  • Instans objek dari jenis .WeatherService Ini direferensikan melalui {StaticResource ...} ekstensi XAML, yang menunjuk ke objek dalam kamus sumber daya tata letak tumpukan.

  • Menunjuk Path ke properti bernama Humidity pada WeatherService jenis .

    Path adalah parameter pertama yang tidak disebutkan namanya pada {Binding} sintaks, dan Path= sintaks dapat dihilangkan. Kedua pengikatan ini setara:

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

Target pengikatan adalah:

  • Kontrol.Label
  • Properti kontrol Text .

Saat UI ditampilkan, {Binding} ekstensi XAML membuat pengikatan antara WeatherService dan Label. Pengikatan membaca WeatherService.Humidity nilai properti ke Label.Text dalam properti .

Gunakan kontrol lain sebagai sumber pengikatan

Salah satu fitur pengikatan yang berguna adalah dapat mengikat kontrol lain. XAML berikut adalah demonstrasi sederhana:

<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>

Properti Slider.Value terikat ke Label.Rotation properti, tetapi dengan cara yang berbeda dari yang dijelaskan sebelumnya. Ini menggunakan mode OneWayToSourcepengikatan , yang membalikkan mekanisme pengikatan umum. Alih-alih Sumber memperbarui Target, OneWayToSource perbarui Sumber saat Target berubah. Dalam contoh ini ketika penggeser bergerak, penggeser memperbarui rotasi label berdasarkan nilai penggeser, seperti yang diilustrasikan dalam animasi berikut:

An animated image of a slider control being dragged with a mouse. As the slider moves, a piece of text rotates to match the position of the slider.

Skenario umum untuk mengikat kontrol satu sama lain adalah ketika kontrol, biasanya kontrol koleksi seperti ListView atau CarouselView, memiliki item yang dipilih yang ingin Anda gunakan sebagai sumber data. Dalam contoh halaman yang menampilkan prakiraan cuaca, Anda mungkin memiliki ListView prakiraan lima hari. Saat pengguna memilih hari dalam daftar, detail prakiraan cuaca tersebut ditampilkan di kontrol lain. Jika pengguna memilih hari lain, kontrol lain kembali diperbarui dengan detail hari yang dipilih.

Gunakan sumber yang sama di beberapa pengikatan

Contoh sebelumnya menunjukkan menggunakan sumber daya statis sebagai sumber untuk satu pengikatan. Sumber tersebut dapat digunakan dalam beberapa pengikatan. Berikut adalah contoh mendeklarasikan pengikatan di tiga kontrol yang berbeda, semua mengikat ke objek dan properti Pathyang sama , meskipun beberapa menghilangkan Path properti:

<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>

Anda tidak perlu menggunakan hal yang sama Path saat menggunakan yang sama Source:

<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>

Jarang Anda menyajikan satu bagian data dari sumber, meskipun itu bisa terjadi. Biasanya Anda memiliki beberapa kontrol menggunakan potongan data yang berbeda dari sumber yang sama. Situasi ini sangat umum sehingga BindableObject kelas memiliki properti bernama BindingContext yang berfungsi sebagai sumber untuk pengikatan data. Ingatlah bahwa kontrol .NET MAUI mewarisi dari BindableObject kelas , sehingga kontrol .NET MAUI memiliki BindingContext properti .

Source Mengatur pengikatan bersifat opsional. Pengikatan yang belum Source diatur secara otomatis mencari pohon visual XAML untuk BindingContext, yang diatur dalam XAML atau ditetapkan ke elemen induk menurut kode. Pengikatan dievaluasi mengikuti pola ini:

  1. Jika pengikatan mendefinisikan Source, sumber tersebut digunakan dan pencarian berhenti. Pengikatan Path diterapkan ke Source untuk mendapatkan nilai. Jika Source tidak diatur, pencarian dimulai untuk sumber pengikatan.

  2. Pencarian dimulai dengan objek target itu sendiri. Jika objek BindingContext target tidak null, pencarian akan berhenti dan pengikatan Path diterapkan ke BindingContext untuk mendapatkan nilai. BindingContext Jika null, maka pencarian berlanjut.

  3. Proses ini berlanjut hingga mencapai akar XAML. Pencarian berakhir dengan memeriksa BindingContext akar untuk nilai non-null. Jika tidak ada yang valid BindingContext ditemukan, pengikatan tidak memiliki apa pun untuk diikat dan tidak melakukan apa pun.

Adalah umum untuk mengatur BindingContext pada tingkat objek akar, untuk diterapkan ke seluruh XAML.

Ada satu fitur nyaman terakhir yang layak disebutkan. Pengikatan mengawasi perubahan pada referensi objek sumbernya. Ini berfungsi bahkan untuk pengikatan yang menggunakan BindingContext sebagai sumbernya. Source Jika atau BindingContext ditetapkan ulang ke objek lain, pengikatan mengambil data dari sumber baru dan memperbarui targetnya.

Uji pengetahuan Anda

1.

Mana yang benar dari objek sumber dalam pengikatan .NET MAUI?

2.

Mana yang benar dari properti target dalam pengikatan .NET MAUI?

3.

Jika semua pengikatan pada kontrol dalam objek sumber yang Grid sama membutuhkan, strategi apa yang paling aman untuk mengatur objek sumber hanya sekali?