Xamarin.Forms CarouselView EmptyView
CarouselView menentukan properti berikut yang dapat digunakan untuk memberikan umpan balik pengguna ketika tidak ada data yang ditampilkan:
EmptyView, dari jenisobject, string, pengikatan, atau tampilan yang akan ditampilkan ketikaItemsSourceproperti adalahnull, atau ketika koleksi yang ditentukan olehItemsSourceproperti adalahnullatau kosong. Nilai defaultnya adalahnull.EmptyViewTemplate, dari jenisDataTemplate, templat yang digunakan untuk memformat yang ditentukanEmptyView. Nilai defaultnya adalahnull.
Properti ini didukung oleh BindableProperty objek, yang berarti bahwa properti dapat menjadi target pengikatan data.
Skenario penggunaan utama untuk mengatur EmptyView properti menampilkan umpan balik pengguna saat operasi pemfilteran tidak CarouselView menghasilkan data, dan menampilkan umpan balik pengguna saat data diambil dari layanan web.
Catatan
Properti EmptyView dapat diatur ke tampilan yang menyertakan konten interaktif jika diperlukan.
Untuk informasi selengkapnya tentang templat data, lihat Xamarin.Forms Templat Data.
Menampilkan string ketika data tidak tersedia
Properti EmptyView dapat diatur ke string, yang akan ditampilkan ketika ItemsSource properti adalah null, atau ketika koleksi yang ditentukan oleh ItemsSource properti adalah null atau kosong. XAML berikut menunjukkan contoh skenario ini:
<CarouselView ItemsSource="{Binding EmptyMonkeys}"
EmptyView="No items to display." />
Kode C# yang setara adalah:
CarouselView carouselView = new CarouselView
{
EmptyView = "No items to display."
};
carouselView.SetBinding(ItemsView.ItemsSourceProperty, "EmptyMonkeys");
Hasilnya adalah bahwa, karena 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 Margin="20">
<SearchBar SearchCommand="{Binding FilterCommand}"
SearchCommandParameter="{Binding Source={RelativeSource Self}, Path=Text}"
Placeholder="Filter" />
<CarouselView ItemsSource="{Binding Monkeys}">
<CarouselView.EmptyView>
<ContentView>
<StackLayout HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand">
<Label Text="No results matched your filter."
Margin="10,25,10,10"
FontAttributes="Bold"
FontSize="18"
HorizontalOptions="Fill"
HorizontalTextAlignment="Center" />
<Label Text="Try a broader filter?"
FontAttributes="Italic"
FontSize="12"
HorizontalOptions="Fill"
HorizontalTextAlignment="Center" />
</StackLayout>
</ContentView>
</CarouselView.EmptyView>
<CarouselView.ItemTemplate>
...
</CarouselView.ItemTemplate>
</CarouselView>
</StackLayout>
Dalam contoh ini, apa yang terlihat seperti redundan ContentView telah ditambahkan sebagai elemen akar dari EmptyView. Ini karena secara internal, EmptyView ditambahkan ke kontainer asli yang tidak menyediakan konteks apa pun untuk Xamarin.Forms tata letak. Oleh karena itu, untuk memposisikan tampilan yang terdiri dari Anda EmptyView, Anda harus menambahkan tata letak akar, yang anaknya adalah tata letak yang dapat memposisikan dirinya dalam tata letak akar.
Kode C# yang setara adalah:
SearchBar searchBar = new SearchBar { ... };
CarouselView carouselView = new CarouselView
{
EmptyView = new ContentView
{
Content = new StackLayout
{
Children =
{
new Label { Text = "No results matched your filter.", ... },
new Label { Text = "Try a broader filter?", ... }
}
}
}
};
carouselView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");
SearchBar Saat menjalankan FilterCommand, koleksi yang ditampilkan oleh CarouselView difilter untuk istilah pencarian yang disimpan dalam SearchBar.Text properti . Jika operasi pemfilteran tidak menghasilkan data, StackLayout set sebagai EmptyView nilai properti ditampilkan.
Menampilkan jenis kustom yang di-template ketika data tidak tersedia
Properti EmptyView dapat diatur ke jenis kustom, yang templatnya ditampilkan saat ItemsSource properti adalah null, atau ketika koleksi yang ditentukan oleh ItemsSource properti adalah null atau kosong. Properti EmptyViewTemplate dapat diatur ke yang DataTemplate menentukan tampilan EmptyView. XAML berikut menunjukkan contoh skenario ini:
<StackLayout Margin="20">
<SearchBar x:Name="searchBar"
SearchCommand="{Binding FilterCommand}"
SearchCommandParameter="{Binding Source={RelativeSource Self}, Path=Text}"
Placeholder="Filter" />
<CarouselView ItemsSource="{Binding Monkeys}">
<CarouselView.EmptyView>
<controls:FilterData Filter="{Binding Source={x:Reference searchBar}, Path=Text}" />
</CarouselView.EmptyView>
<CarouselView.EmptyViewTemplate>
<DataTemplate>
<Label Text="{Binding Filter, StringFormat='Your filter term of {0} did not match any records.'}"
Margin="10,25,10,10"
FontAttributes="Bold"
FontSize="18"
HorizontalOptions="Fill"
HorizontalTextAlignment="Center" />
</DataTemplate>
</CarouselView.EmptyViewTemplate>
<CarouselView.ItemTemplate>
...
</CarouselView.ItemTemplate>
</CarouselView>
</StackLayout>
Kode C# yang setara adalah:
SearchBar searchBar = new SearchBar { ... };
CarouselView carouselView = new CarouselView
{
EmptyView = new FilterData { Filter = searchBar.Text },
EmptyViewTemplate = new DataTemplate(() =>
{
return new Label { ... };
})
};
Jenis mendefinisikan FilterDataFilter properti, dan yang sesuai BindableProperty:
public class FilterData : BindableObject
{
public static readonly BindableProperty FilterProperty = BindableProperty.Create(nameof(Filter), typeof(string), typeof(FilterData), null);
public string Filter
{
get { return (string)GetValue(FilterProperty); }
set { SetValue(FilterProperty, value); }
}
}
Properti EmptyView diatur ke FilterData objek, dan Filter data properti mengikat ke SearchBar.Text properti . SearchBar Saat menjalankan FilterCommand, koleksi yang ditampilkan oleh CarouselView difilter untuk istilah pencarian yang disimpan dalam Filter properti . Jika operasi pemfilteran tidak menghasilkan data, Label yang ditentukan dalam DataTemplate, yang ditetapkan sebagai EmptyViewTemplate nilai properti, ditampilkan.
Catatan
Saat menampilkan jenis kustom templat saat data tidak tersedia, EmptyViewTemplate properti dapat diatur ke tampilan yang berisi beberapa tampilan turunan.
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. Contoh XAML berikut menunjukkan contoh skenario ini:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:viewmodels="clr-namespace:CarouselViewDemos.ViewModels"
x:Class="CarouselViewDemos.Views.EmptyViewSwapPage"
Title="EmptyView (swap)">
<ContentPage.BindingContext>
<viewmodels:MonkeysViewModel />
</ContentPage.BindingContext>
<ContentPage.Resources>
<ContentView x:Key="BasicEmptyView">
<StackLayout>
<Label Text="No items to display."
Margin="10,25,10,10"
FontAttributes="Bold"
FontSize="18"
HorizontalOptions="Fill"
HorizontalTextAlignment="Center" />
</StackLayout>
</ContentView>
<ContentView x:Key="AdvancedEmptyView">
<StackLayout>
<Label Text="No results matched your filter."
Margin="10,25,10,10"
FontAttributes="Bold"
FontSize="18"
HorizontalOptions="Fill"
HorizontalTextAlignment="Center" />
<Label Text="Try a broader filter?"
FontAttributes="Italic"
FontSize="12"
HorizontalOptions="Fill"
HorizontalTextAlignment="Center" />
</StackLayout>
</ContentView>
</ContentPage.Resources>
<StackLayout Margin="20">
<SearchBar SearchCommand="{Binding FilterCommand}"
SearchCommandParameter="{Binding Source={RelativeSource Self}, Path=Text}"
Placeholder="Filter" />
<StackLayout Orientation="Horizontal">
<Label Text="Toggle EmptyViews" />
<Switch Toggled="OnEmptyViewSwitchToggled" />
</StackLayout>
<CarouselView x:Name="carouselView"
ItemsSource="{Binding Monkeys}">
<CarouselView.ItemTemplate>
...
</CarouselView.ItemTemplate>
</CarouselView>
</StackLayout>
</ContentPage>
XAML ini 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)
{
carouselView.EmptyView = isToggled ? Resources["BasicEmptyView"] : Resources["AdvancedEmptyView"];
}
Metode ToggleEmptyView mengatur EmptyView properti carouselView objek ke salah satu dari dua ContentView objek yang disimpan di ResourceDictionary, berdasarkan nilai Switch.IsToggled properti . SearchBar Saat menjalankan FilterCommand, koleksi yang ditampilkan oleh CarouselView difilter untuk istilah pencarian yang disimpan dalam SearchBar.Text properti . Jika operasi pemfilteran tidak menghasilkan data, objek yang ContentView ditetapkan sebagai EmptyView properti ditampilkan.
Untuk informasi selengkapnya tentang kamus sumber daya, lihat Xamarin.Forms Kamus Sumber Daya.
Pilih EmptyViewTemplate saat runtime
EmptyView Tampilan dapat dipilih pada runtime, berdasarkan nilainya, dengan mengatur CarouselView.EmptyViewTemplate properti ke DataTemplateSelector objek:
<ContentPage ...
xmlns:controls="clr-namespace:CarouselViewDemos.Controls">
<ContentPage.Resources>
<DataTemplate x:Key="AdvancedTemplate">
...
</DataTemplate>
<DataTemplate x:Key="BasicTemplate">
...
</DataTemplate>
<controls:SearchTermDataTemplateSelector x:Key="SearchSelector"
DefaultTemplate="{StaticResource AdvancedTemplate}"
OtherTemplate="{StaticResource BasicTemplate}" />
</ContentPage.Resources>
<StackLayout Margin="20">
<SearchBar x:Name="searchBar"
SearchCommand="{Binding FilterCommand}"
SearchCommandParameter="{Binding Source={RelativeSource Self}, Path=Text}"
Placeholder="Filter" />
<CarouselView ItemsSource="{Binding Monkeys}"
EmptyView="{Binding Source={x:Reference searchBar}, Path=Text}"
EmptyViewTemplate="{StaticResource SearchSelector}">
<CarouselView.ItemTemplate>
...
</CarouselView.ItemTemplate>
</CarouselView>
</StackLayout>
</ContentPage>
Kode C# yang setara adalah:
SearchBar searchBar = new SearchBar { ... };
CarouselView carouselView = new CarouselView()
{
EmptyView = searchBar.Text,
EmptyViewTemplate = new SearchTermDataTemplateSelector { ... }
};
carouselView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");
Properti EmptyView diatur ke SearchBar.Text properti , dan EmptyViewTemplate properti diatur ke SearchTermDataTemplateSelector objek .
SearchBar Saat menjalankan FilterCommand, koleksi yang ditampilkan oleh CarouselView difilter untuk istilah pencarian yang disimpan dalam SearchBar.Text properti . Jika operasi pemfilteran tidak menghasilkan data, DataTemplate objek yang dipilih SearchTermDataTemplateSelector diatur sebagai EmptyViewTemplate properti dan ditampilkan.
Contoh berikut menunjukkan SearchTermDataTemplateSelector kelas:
public class SearchTermDataTemplateSelector : DataTemplateSelector
{
public DataTemplate DefaultTemplate { get; set; }
public DataTemplate OtherTemplate { get; set; }
protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
{
string query = (string)item;
return query.ToLower().Equals("xamarin") ? OtherTemplate : DefaultTemplate;
}
}
Kelas SearchTermTemplateSelector menentukan DefaultTemplate dan OtherTemplateDataTemplate properti yang diatur ke templat data yang berbeda. Penimpaan OnSelectTemplateDefaultTemplatemengembalikan , yang menampilkan pesan kepada pengguna, saat kueri pencarian tidak sama dengan "xamarin". Saat kueri pencarian sama dengan "xamarin", OnSelectTemplate penimpaan OtherTemplatemengembalikan , yang menampilkan pesan dasar kepada pengguna.
Untuk informasi selengkapnya tentang pemilih templat data, lihat Membuat Xamarin.Forms DataTemplateSelector.