BindableLayout

Telusuri sampel

Tata letak yang dapat diikat .NET Multi-platform App UI (.NET MAUI) memungkinkan kelas tata letak apa pun yang berasal dari Layout kelas untuk menghasilkan kontennya dengan mengikat koleksi item, dengan opsi untuk mengatur tampilan setiap item dengan DataTemplate.

Tata letak yang dapat diikat disediakan oleh BindableLayout kelas, yang mengekspos properti terlampir berikut:

• ItemsSource – menentukan kumpulan IEnumerable item yang akan ditampilkan oleh tata letak.
• ItemTemplate – menentukan DataTemplate untuk diterapkan ke setiap item dalam kumpulan item yang ditampilkan oleh tata letak.
• ItemTemplateSelector – menentukan DataTemplateSelector yang akan digunakan untuk memilih DataTemplate item saat runtime.

Catatan

Properti ItemTemplate lebih diutamakan ketika ItemTemplate properti dan ItemTemplateSelector diatur.

Selain itu, BindableLayout kelas mengekspos properti yang dapat diikat berikut:

• EmptyView – menentukan string tampilan atau yang akan ditampilkan ketika ItemsSource properti adalah null, atau ketika koleksi yang ditentukan oleh ItemsSource properti adalah null atau kosong. Nilai defaultnya adalah null.
• EmptyViewTemplate – menentukan DataTemplate yang akan ditampilkan ketika ItemsSource properti adalah null, atau ketika koleksi yang ditentukan oleh ItemsSource properti adalah null atau kosong. Nilai defaultnya adalah null.

Catatan

Properti EmptyViewTemplate lebih diutamakan ketika EmptyView properti dan EmptyViewTemplate diatur.

Semua properti ini dapat dilampirkan ke AbsoluteLayoutkelas , , FlexLayout, HorizontalStackLayoutGrid, StackLayout, dan VerticalStackLayout , yang semuanya berasal dari Layout kelas .

BindableLayout.ItemsSource Saat properti diatur ke kumpulan item dan dilampirkan ke Layoutkelas -turunan, setiap item dalam koleksi ditambahkan ke Layoutkelas -turunan untuk ditampilkan. Kelas Layout-turunan kemudian akan memperbarui tampilan turunannya ketika koleksi yang mendasar berubah.

Tata letak yang dapat diikat hanya boleh digunakan ketika kumpulan item yang akan ditampilkan kecil, dan pengguliran dan pilihan tidak diperlukan. Meskipun pengguliran dapat disediakan dengan membungkus tata letak yang dapat diikat dalam ScrollView, ini tidak disarankan karena tata letak yang dapat diikat tidak memiliki virtualisasi UI. Saat menggulir diperlukan, tampilan yang dapat digulir yang menyertakan virtualisasi UI, seperti ListView atau CollectionView, harus digunakan. Kegagalan untuk mengamati rekomendasi ini dapat menyebabkan masalah performa.

Penting

Meskipun secara teknis dimungkinkan untuk melampirkan tata letak yang dapat diikat ke kelas tata letak apa pun yang berasal dari Layout kelas, tidak selalu praktis untuk melakukannya, terutama untuk AbsoluteLayout kelas dan Grid . Misalnya, pertimbangkan skenario ingin menampilkan kumpulan data dalam menggunakan tata letak yang Grid dapat diikat, di mana setiap item dalam koleksi adalah objek yang berisi beberapa properti. Setiap baris di Grid harus menampilkan objek dari koleksi, dengan setiap kolom di Grid menampilkan salah satu properti objek. DataTemplate Karena untuk tata letak yang dapat diikat hanya dapat berisi satu objek, objek tersebut diperlukan untuk menjadi kelas tata letak yang berisi beberapa tampilan yang masing-masing menampilkan salah satu properti objek di kolom tertentuGrid. Meskipun skenario ini dapat direalisasikan dengan tata letak yang dapat diikat, skenario ini menghasilkan induk Grid yang berisi anak Grid untuk setiap item dalam koleksi terikat, yang merupakan penggunaan Grid tata letak yang sangat tidak efisien dan bermasalah.

Mengisi tata letak yang dapat diikat dengan data

Tata letak yang dapat diikat diisi dengan data dengan mengatur propertinya ItemsSource ke koleksi apa pun yang mengimplementasikan IEnumerable, dan melampirkannya ke Layoutkelas -turunan:

<Grid BindableLayout.ItemsSource="{Binding Items}" />

Kode C# yang setara adalah:

IEnumerable<string> items = ...;
Grid grid = new Grid();
BindableLayout.SetItemsSource(grid, items);

BindableLayout.ItemsSource Saat properti terlampir diatur pada tata letak, tetapi BindableLayout.ItemTemplate properti terlampir tidak diatur, setiap item dalam IEnumerable koleksi akan ditampilkan oleh Label yang dibuat oleh BindableLayout kelas.

Tentukan tampilan item

Tampilan setiap item dalam tata letak yang dapat diikat dapat ditentukan dengan mengatur BindableLayout.ItemTemplate properti terlampir ke DataTemplate:

<StackLayout BindableLayout.ItemsSource="{Binding User.TopFollowers}"
             Orientation="Horizontal"
             ...>
    <BindableLayout.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding}"
                   Aspect="AspectFill"
                   WidthRequest="44"
                   HeightRequest="44"
                   ... />
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</StackLayout>

Kode C# yang setara adalah:

DataTemplate imageTemplate = ...;
StackLayout stackLayout = new StackLayout();
BindableLayout.SetItemsSource(stackLayout, viewModel.User.TopFollowers);
BindableLayout.SetItemTemplate(stackLayout, imageTemplate);

Dalam contoh ini, setiap item dalam TopFollowers koleksi akan ditampilkan oleh tampilan yang Image ditentukan dalam DataTemplate:

Untuk informasi selengkapnya tentang templat data, lihat Templat data.

Pilih tampilan item saat runtime

Tampilan setiap item dalam tata letak yang dapat diikat dapat dipilih saat runtime, berdasarkan nilai item, dengan mengatur BindableLayout.ItemTemplateSelector properti terlampir ke DataTemplateSelector:

<FlexLayout BindableLayout.ItemsSource="{Binding User.FavoriteTech}"
            BindableLayout.ItemTemplateSelector="{StaticResource TechItemTemplateSelector}"
            ... />

Kode C# yang setara adalah:

DataTemplateSelector dataTemplateSelector = new TechItemTemplateSelector { ... };
FlexLayout flexLayout = new FlexLayout();
BindableLayout.SetItemsSource(flexLayout, viewModel.User.FavoriteTech);
BindableLayout.SetItemTemplateSelector(flexLayout, dataTemplateSelector);

Contoh berikut menunjukkan TechItemTemplateSelector kelas:

public class TechItemTemplateSelector : DataTemplateSelector
{
    public DataTemplate DefaultTemplate { get; set; }
    public DataTemplate MAUITemplate { get; set; }

    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        return (string)item == ".NET MAUI" ? MAUITemplate : DefaultTemplate;
    }
}

Kelas TechItemTemplateSelector menentukan DefaultTemplate dan MAUITemplateDataTemplate properti yang diatur ke templat data yang berbeda. Metode OnSelectTemplate mengembalikan MAUITemplate, yang menampilkan item berwarna merah tua dengan hati di sampingnya, ketika item sama dengan ".NET MAUI". Ketika item tidak sama dengan ".NET MAUI", OnSelectTemplate metode mengembalikan DefaultTemplate, yang menampilkan item menggunakan warna default dari Label:

Untuk informasi selengkapnya tentang pemilih templat data, lihat Membuat DataTemplateSelector.

Menampilkan string ketika data tidak tersedia

Properti EmptyView dapat diatur ke string, yang akan ditampilkan oleh Label ketika ItemsSource properti adalah null, atau ketika koleksi yang ditentukan oleh ItemsSource properti adalah null atau kosong. XAML berikut menunjukkan contoh skenario ini:

<StackLayout BindableLayout.ItemsSource="{Binding UserWithoutAchievements.Achievements}"
             BindableLayout.EmptyView="No achievements">
    ...
</StackLayout>

Hasilnya adalah bahwa ketika koleksi terikat data adalah null, string yang ditetapkan sebagai EmptyView nilai properti ditampilkan:

Tampilkan tampilan ketika data tidak tersedia

Properti EmptyView dapat diatur ke tampilan, yang akan ditampilkan ketika ItemsSource properti adalah null, atau ketika koleksi yang ditentukan oleh ItemsSource properti adalah null atau kosong. Ini bisa berupa tampilan tunggal, atau tampilan yang berisi beberapa tampilan turunan. Contoh XAML berikut menunjukkan properti yang EmptyView diatur ke tampilan yang berisi beberapa tampilan turunan:

<StackLayout BindableLayout.ItemsSource="{Binding UserWithoutAchievements.Achievements}">
    <BindableLayout.EmptyView>
        <StackLayout>
            <Label Text="None."
                   FontAttributes="Italic"
                   FontSize="{StaticResource smallTextSize}" />
            <Label Text="Try harder and return later?"
                   FontAttributes="Italic"
                   FontSize="{StaticResource smallTextSize}" />
        </StackLayout>
    </BindableLayout.EmptyView>
    ...
</StackLayout>

Hasilnya adalah bahwa ketika pengumpulan terikat data adalah null, dan tampilan turunannya StackLayout ditampilkan.

Demikian pula, EmptyViewTemplate dapat diatur ke DataTemplate, yang akan ditampilkan ketika ItemsSource properti adalah null, atau ketika koleksi yang ditentukan oleh ItemsSource properti adalah null atau kosong. DataTemplate dapat berisi satu tampilan, atau tampilan yang berisi beberapa tampilan turunan. Selain itu, BindingContext dari akan diwariskan dari BindingContextBindableLayout.EmptyViewTemplate Contoh XAML berikut menunjukkan EmptyViewTemplate properti yang diatur ke yang DataTemplate berisi satu tampilan:

<StackLayout BindableLayout.ItemsSource="{Binding UserWithoutAchievements.Achievements}">
    <BindableLayout.EmptyViewTemplate>
        <DataTemplate>
            <Label Text="{Binding Source={x:Reference usernameLabel}, Path=Text, StringFormat='{0} has no achievements.'}" />
        </DataTemplate>
    </BindableLayout.EmptyViewTemplate>
    ...
</StackLayout>

Hasilnya adalah bahwa ketika pengumpulan terikat data adalah null, Label di DataTemplate ditampilkan:

Catatan

Properti EmptyViewTemplate tidak dapat diatur melalui DataTemplateSelector.

Pilih EmptyView saat runtime

Tampilan yang akan ditampilkan sebagai EmptyView saat data tidak tersedia, dapat didefinisikan sebagai ContentView objek dalam ResourceDictionary. EmptyView Properti kemudian dapat diatur ke tertentu ContentView, berdasarkan beberapa logika bisnis, pada runtime. XAML berikut menunjukkan contoh skenario ini:

<ContentPage ...>
    <ContentPage.Resources>
        ...    
        <ContentView x:Key="BasicEmptyView">
            <StackLayout>
                <Label Text="No achievements."
                       FontSize="14" />
            </StackLayout>
        </ContentView>
        <ContentView x:Key="AdvancedEmptyView">
            <StackLayout>
                <Label Text="None."
                       FontAttributes="Italic"
                       FontSize="14" />
                <Label Text="Try harder and return later?"
                       FontAttributes="Italic"
                       FontSize="14" />
            </StackLayout>
        </ContentView>
    </ContentPage.Resources>

    <StackLayout>
        ...
        <Switch Toggled="OnEmptyViewSwitchToggled" />

        <StackLayout x:Name="stackLayout"
                     BindableLayout.ItemsSource="{Binding UserWithoutAchievements.Achievements}">
            ...
        </StackLayout>
    </StackLayout>
</ContentPage>

XAML mendefinisikan dua ContentView objek di tingkat ResourceDictionaryhalaman , dengan Switch objek yang mengontrol objek mana yang ContentView akan ditetapkan sebagai EmptyView nilai properti. Switch Ketika dialihkan, penanganan OnEmptyViewSwitchToggled aktivitas menjalankan ToggleEmptyView metode :

void ToggleEmptyView(bool isToggled)
{
    object view = isToggled ? Resources["BasicEmptyView"] : Resources["AdvancedEmptyView"];
    BindableLayout.SetEmptyView(stackLayout, view);
}

Metode ToggleEmptyView mengatur EmptyView properti StackLayout objek ke salah satu dari dua ContentView objek yang disimpan di ResourceDictionary, berdasarkan nilai Switch.IsToggled properti . Kemudian, ketika pengumpulan terikat data adalah null, objek yang ContentView ditetapkan sebagai EmptyView properti ditampilkan.