Bagikan melalui

Xamarin.Forms Pengikatan Relatif

  • Artikel

Pengikatan relatif memberikan kemampuan untuk mengatur sumber pengikatan relatif terhadap posisi target pengikatan. Mereka dibuat dengan RelativeSource ekstensi markup, dan ditetapkan sebagai Source properti ekspresi pengikatan.

Ekstensi RelativeSource markup didukung oleh RelativeSourceExtension kelas , yang menentukan properti berikut:

  • Mode, dari jenis RelativeBindingSourceMode, menjelaskan lokasi sumber pengikatan relatif terhadap posisi target pengikatan.
  • AncestorLevel, dari jenis int, tingkat leluhur opsional untuk dicari, ketika Mode properti adalah FindAncestor. Dari AncestorLeveln instans yang dilewati AncestorTypen-1 dari .
  • AncestorType, dari jenis Type, jenis leluhur untuk dicari, ketika Mode properti adalah FindAncestor.

Catatan

Parser XAML memungkinkan RelativeSourceExtension kelas disingkat sebagai RelativeSource.

Properti Mode harus diatur ke salah RelativeBindingSourceMode satu anggota enumerasi:

  • TemplatedParent menunjukkan elemen tempat templat, di mana elemen terikat ada, diterapkan. Untuk informasi selengkapnya, lihat Mengikat ke induk templat.
  • Self menunjukkan elemen tempat pengikatan diatur, memungkinkan Anda untuk mengikat satu properti elemen tersebut ke properti lain pada elemen yang sama. Untuk informasi selengkapnya, lihat Mengikat ke diri sendiri.
  • FindAncestor menunjukkan leluhur di pohon visual elemen terikat. Mode ini harus digunakan untuk mengikat kontrol leluhur yang diwakili oleh AncestorType properti . Untuk informasi selengkapnya, lihat Mengikat ke leluhur.
  • FindAncestorBindingContextBindingContext menunjukkan leluhur di pohon visual elemen terikat. Mode ini harus digunakan untuk mengikat ke BindingContext leluhur yang diwakili oleh AncestorType properti . Untuk informasi selengkapnya, lihat Mengikat ke leluhur.

Properti Mode adalah properti konten kelas RelativeSourceExtension . Oleh karena itu, untuk ekspresi markup XAML yang dinyatakan dengan kurung kurawal, Anda dapat menghilangkan Mode= bagian ekspresi.

Untuk informasi selengkapnya tentang Xamarin.Forms ekstensi markup, lihat Ekstensi Markup XAML.

Ikat ke diri sendiri

Self Mode pengikatan relatif digunakan mengikat properti elemen ke properti lain pada elemen yang sama:

<BoxView Color="Red"
         WidthRequest="200"
         HeightRequest="{Binding Source={RelativeSource Self}, Path=WidthRequest}"
         HorizontalOptions="Center" />

Dalam contoh ini, BoxView mengatur propertinya WidthRequest ke ukuran tetap, dan HeightRequest properti mengikat ke WidthRequest properti . Oleh karena itu, kedua properti sama dan jadi persegi digambar:

Cuplikan layar pengikatan relatif mode Mandiri, di iOS dan Android

Penting

Saat mengikat properti elemen ke properti lain pada elemen yang sama, properti harus berjenis yang sama. Atau, Anda dapat menentukan pengonversi pada pengikatan untuk mengonversi nilai.

Penggunaan umum mode pengikatan ini diatur objek BindingContext ke properti itu sendiri. Kode berikut menunjukkan contoh ini:

<ContentPage ...
             BindingContext="{Binding Source={RelativeSource Self}, Path=DefaultViewModel}">
    <StackLayout>
        <ListView ItemsSource="{Binding Employees}">
            ...
        </ListView>
    </StackLayout>
</ContentPage>

Dalam contoh ini, BindingContext halaman diatur ke DefaultViewModel properti itu sendiri. Properti ini didefinisikan dalam file code-behind untuk halaman, dan menyediakan instans viewmodel. Pengikatan ListView ke Employees properti viewmodel.

Mengikat ke leluhur

FindAncestor Mode pengikatan relatif dan FindAncestorBindingContext digunakan untuk mengikat ke elemen induk, dari jenis tertentu, di pohon visual. Mode FindAncestor ini digunakan untuk mengikat ke elemen induk, yang berasal dari jenis .Element Mode FindAncestorBindingContext ini digunakan untuk mengikat ke BindingContext elemen induk.

Peringatan

Properti AncestorType harus diatur ke Type saat menggunakan FindAncestor mode pengikatan relatif dan FindAncestorBindingContext , jika tidak, akan XamlParseException dilemparkan.

Mode Jika properti tidak diatur secara eksplisit, mengatur AncestorType properti ke jenis yang berasal akan Element secara implisit mengatur Mode properti ke FindAncestor. Demikian pula, mengatur AncestorType properti ke jenis yang tidak berasal dari Element akan secara implisit mengatur Mode properti ke FindAncestorBindingContext.

Catatan

Pengikatan relatif yang menggunakan FindAncestorBindingContext mode akan diterapkan kembali ketika BindingContext leluhur mana pun berubah.

XAML berikut menunjukkan contoh di mana Mode properti akan secara implisit diatur ke FindAncestorBindingContext:

<ContentPage ...
             BindingContext="{Binding Source={RelativeSource Self}, Path=DefaultViewModel}">
    <StackLayout>
        <ListView ItemsSource="{Binding Employees}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout Orientation="Horizontal">
                            <Label Text="{Binding Fullname}"
                                   VerticalOptions="Center" />
                            <Button Text="Delete"
                                    Command="{Binding Source={RelativeSource AncestorType={x:Type local:PeopleViewModel}}, Path=DeleteEmployeeCommand}"
                                    CommandParameter="{Binding}"
                                    HorizontalOptions="EndAndExpand" />
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage>

Dalam contoh ini, BindingContext halaman diatur ke DefaultViewModel properti itu sendiri. Properti ini didefinisikan dalam file code-behind untuk halaman, dan menyediakan instans viewmodel. Pengikatan ListView ke Employees properti viewmodel. DataTemplate, yang mendefinisikan tampilan setiap item di ListView, berisi Button. Properti tombol Command terikat ke DeleteEmployeeCommand dalam viewmodel induknya. Mengetuk menghapus Button karyawan:

Cuplikan layar pengikatan relatif mode FindAncestor, di iOS dan Android

Selain itu, properti opsional AncestorLevel dapat membantu memisahkan pencarian leluhur dalam skenario di mana mungkin ada lebih dari satu leluhur dari jenis itu di pohon visual:

<Label Text="{Binding Source={RelativeSource AncestorType={x:Type Entry}, AncestorLevel=2}, Path=Text}" />

Dalam contoh ini, Label.Text properti mengikat ke Text properti detik Entry yang ditemui di jalur ke atas, dimulai dari elemen target pengikatan.

Catatan

Properti AncestorLevel harus diatur ke 1 untuk menemukan nenek moyang terdekat dengan elemen target pengikatan.

Mengikat ke induk yang di-template

TemplatedParent Mode pengikatan relatif digunakan untuk mengikat dari dalam templat kontrol ke instans objek runtime tempat templat diterapkan (dikenal sebagai induk templat). Mode ini hanya berlaku jika pengikatan relatif berada dalam templat kontrol, dan mirip dengan mengatur TemplateBinding.

XAML berikut menunjukkan contoh TemplatedParent mode pengikatan relatif:

<ContentPage ...>
    <ContentPage.Resources>
        <ControlTemplate x:Key="CardViewControlTemplate">
            <Frame BindingContext="{Binding Source={RelativeSource TemplatedParent}}"
                   BackgroundColor="{Binding CardColor}"
                   BorderColor="{Binding BorderColor}"
                   ...>
                <Grid>
                    ...
                    <Label Text="{Binding CardTitle}"
                           ... />
                    <BoxView BackgroundColor="{Binding BorderColor}"
                             ... />
                    <Label Text="{Binding CardDescription}"
                           ... />
                </Grid>
            </Frame>
        </ControlTemplate>
    </ContentPage.Resources>
    <StackLayout>        
        <controls:CardView BorderColor="DarkGray"
                           CardTitle="John Doe"
                           CardDescription="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elit dolor, convallis non interdum."
                           IconBackgroundColor="SlateGray"
                           IconImageSource="user.png"
                           ControlTemplate="{StaticResource CardViewControlTemplate}" />
        <controls:CardView BorderColor="DarkGray"
                           CardTitle="Jane Doe"
                           CardDescription="Phasellus eu convallis mi. In tempus augue eu dignissim fermentum. Morbi ut lacus vitae eros lacinia."
                           IconBackgroundColor="SlateGray"
                           IconImageSource="user.png"
                           ControlTemplate="{StaticResource CardViewControlTemplate}" />
        <controls:CardView BorderColor="DarkGray"
                           CardTitle="Xamarin Monkey"
                           CardDescription="Aliquam sagittis, odio lacinia fermentum dictum, mi erat scelerisque erat, quis aliquet arcu."
                           IconBackgroundColor="SlateGray"
                           IconImageSource="user.png"
                           ControlTemplate="{StaticResource CardViewControlTemplate}" />
    </StackLayout>
</ContentPage>

Dalam contoh ini, Frame, yang merupakan elemen akar dari ControlTemplate, telah BindingContext diatur ke instans objek runtime tempat templat diterapkan. Oleh karena itu, Frame dan anak-anaknya menyelesaikan ekspresi pengikatan mereka terhadap properti setiap CardView objek:

Cuplikan layar pengikatan relatif mode TemplatedParent, di iOS dan Android

Untuk informasi selengkapnya tentang templat kontrol, lihat Xamarin.Forms Templat Kontrol.