Xamarin.Forms CollectionView EmptyView
Stažení ukázkyCollectionView definuje následující vlastnosti, které lze použít k poskytnutí zpětné vazby uživatelů, když se nezobrazí žádná data:
EmptyView, typuobject, řetězec, vazba nebo zobrazení, které se zobrazí, kdyžItemsSourcejenullvlastnost , nebo když kolekce určenáItemsSourcevlastností jenullnebo je prázdná. Výchozí hodnota jenull.EmptyViewTemplate, typuDataTemplate, šablona, která se má použít k formátování zadanéhoEmptyView. Výchozí hodnota jenull.
Tyto vlastnosti jsou podporovány BindableProperty objekty, což znamená, že vlastnosti mohou být cílem datových vazeb.
Hlavní scénáře použití pro nastavení EmptyView vlastnosti zobrazují zpětnou vazbu uživatelů, když operace filtrování na CollectionView základě výnosu nepřináší žádná data a zobrazuje zpětnou vazbu uživatelů při načítání dat z webové služby.
Poznámka:
Vlastnost EmptyView lze nastavit na zobrazení, které v případě potřeby obsahuje interaktivní obsah.
Další informace o šablonách dat naleznete v tématu Xamarin.Forms Šablony dat.
Zobrazení řetězce, když data nejsou k dispozici
Vlastnost EmptyView lze nastavit na řetězec, který se zobrazí, když ItemsSource je nullvlastnost , nebo když kolekce určená ItemsSource vlastností je nebo je null prázdná. Následující xaml ukazuje příklad tohoto scénáře:
<CollectionView ItemsSource="{Binding EmptyMonkeys}"
EmptyView="No items to display" />
Ekvivalentní kód jazyka C# je:
CollectionView collectionView = new CollectionView
{
EmptyView = "No items to display"
};
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "EmptyMonkeys");
Výsledkem je to, že vzhledem k tomu, že kolekce vázaná na data je null, řetězec nastavený jako EmptyView hodnota vlastnosti se zobrazí:
Zobrazení, když data nejsou k dispozici
Vlastnost EmptyView lze nastavit na zobrazení, které se zobrazí, když ItemsSource je nullvlastnost , nebo když kolekce určená ItemsSource vlastností je null nebo je prázdná. Může to být jedno zobrazení nebo zobrazení, které obsahuje více podřízených zobrazení. Následující příklad XAML ukazuje EmptyView vlastnost nastavenou na zobrazení, které obsahuje více podřízených zobrazení:
<StackLayout Margin="20">
<SearchBar x:Name="searchBar"
SearchCommand="{Binding FilterCommand}"
SearchCommandParameter="{Binding Source={x:Reference searchBar}, Path=Text}"
Placeholder="Filter" />
<CollectionView ItemsSource="{Binding Monkeys}">
<CollectionView.ItemTemplate>
<DataTemplate>
...
</DataTemplate>
</CollectionView.ItemTemplate>
<CollectionView.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>
</CollectionView.EmptyView>
</CollectionView>
</StackLayout>
V tomto příkladu se ContentView jako kořenový prvek objektu EmptyView. Je to proto, EmptyView že se interně přidá do nativního kontejneru, který neposkytuje žádný kontext pro Xamarin.Forms rozložení. Chcete-li tedy umístit zobrazení, která tvoří vaše EmptyView, musíte přidat kořenové rozložení, jehož podřízeným rozložením je rozložení, které se může umístit v kořenovém rozložení.
Ekvivalentní kód jazyka C# je:
SearchBar searchBar = new SearchBar { ... };
CollectionView collectionView = new CollectionView
{
EmptyView = new ContentView
{
Content = new StackLayout
{
Children =
{
new Label { Text = "No results matched your filter.", ... },
new Label { Text = "Try a broader filter?", ... }
}
}
}
};
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");
Když se SearchBar spustí FilterCommand, kolekce zobrazená podle je CollectionView filtrována pro hledaný termín uložený ve SearchBar.Text vlastnosti. Pokud operace filtrování nevyvolá žádná data, zobrazí se nastavená StackLayout hodnota EmptyView vlastnosti:
Zobrazení vlastního typu šablony, pokud data nejsou k dispozici
Vlastnost EmptyView lze nastavit na vlastní typ, jehož šablona se zobrazí, když ItemsSource je nullvlastnost , nebo když kolekce určená ItemsSource vlastností je null nebo je prázdná. Vlastnost EmptyViewTemplate lze nastavit na, DataTemplate která definuje vzhled objektu EmptyView. Následující xaml ukazuje příklad tohoto scénáře:
<StackLayout Margin="20">
<SearchBar x:Name="searchBar"
SearchCommand="{Binding FilterCommand}"
SearchCommandParameter="{Binding Source={x:Reference searchBar}, Path=Text}"
Placeholder="Filter" />
<CollectionView ItemsSource="{Binding Monkeys}">
<CollectionView.ItemTemplate>
<DataTemplate>
...
</DataTemplate>
</CollectionView.ItemTemplate>
<CollectionView.EmptyView>
<views:FilterData Filter="{Binding Source={x:Reference searchBar}, Path=Text}" />
</CollectionView.EmptyView>
<CollectionView.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>
</CollectionView.EmptyViewTemplate>
</CollectionView>
</StackLayout>
Ekvivalentní kód jazyka C# je:
SearchBar searchBar = new SearchBar { ... };
CollectionView collectionView = new CollectionView
{
EmptyView = new FilterData { Filter = searchBar.Text },
EmptyViewTemplate = new DataTemplate(() =>
{
return new Label { ... };
})
};
Typ FilterData definuje Filter vlastnost a odpovídající 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); }
}
}
Vlastnost EmptyView je nastavena na FilterData objekt a Filter data vlastnosti se sváže s SearchBar.Text vlastností. Když se SearchBar spustí FilterCommand, kolekce zobrazená podle je CollectionView filtrována pro hledaný termín uložený ve Filter vlastnosti. Pokud operace filtrování nevyvolá žádná data, Label zobrazí se definovaná v DataTemplatesadě , která je nastavená jako EmptyViewTemplate hodnota vlastnosti:
Poznámka:
Při zobrazení vlastního typu šablony v případě nedostupnosti dat lze vlastnost nastavit na zobrazení, EmptyViewTemplate které obsahuje více podřízených zobrazení.
Volba prázdného zobrazení za běhu
Zobrazení, která se zobrazí jako EmptyView při nedostupnosti dat, lze definovat jako ContentView objekty v objektu ResourceDictionary. Vlastnost EmptyView pak může být nastavena na konkrétní ContentView, na základě určité obchodní logiky za běhu. Následující xaml ukazuje příklad tohoto scénáře:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="CollectionViewDemos.Views.EmptyViewSwapPage"
Title="EmptyView (swap)">
<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 x:Name="searchBar"
SearchCommand="{Binding FilterCommand}"
SearchCommandParameter="{Binding Source={x:Reference searchBar}, Path=Text}"
Placeholder="Filter" />
<StackLayout Orientation="Horizontal">
<Label Text="Toggle EmptyViews" />
<Switch Toggled="OnEmptyViewSwitchToggled" />
</StackLayout>
<CollectionView x:Name="collectionView"
ItemsSource="{Binding Monkeys}">
<CollectionView.ItemTemplate>
<DataTemplate>
...
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
</ContentPage>
Tento XAML definuje dva ContentView objekty na úrovni ResourceDictionarystránky s Switch objektem určujícím, který ContentView objekt bude nastaven jako EmptyView hodnota vlastnosti. Při přepnutí OnEmptyViewSwitchToggled obslužné Switch rutiny události spustí metoduToggleEmptyView:
void ToggleEmptyView(bool isToggled)
{
collectionView.EmptyView = isToggled ? Resources["BasicEmptyView"] : Resources["AdvancedEmptyView"];
}
Metoda ToggleEmptyView nastaví EmptyView vlastnost objektu collectionView na jeden ze dvou ContentView objektů uložených v ResourceDictionaryzávislosti na hodnotě Switch.IsToggled vlastnosti. Když se SearchBar spustí FilterCommand, kolekce zobrazená podle je CollectionView filtrována pro hledaný termín uložený ve SearchBar.Text vlastnosti. Pokud operace filtrování nevyvolá žádná data, ContentView objekt nastavený při EmptyView zobrazení vlastnosti:
Další informace o slovníkech prostředků najdete v tématu Xamarin.Forms Slovníky zdrojů.
Volba EmptyViewTemplate za běhu
Vzhled objektu EmptyView lze vybrat za běhu na základě jeho hodnoty nastavením CollectionView.EmptyViewTemplate vlastnosti na DataTemplateSelector objekt:
<ContentPage ...
xmlns:controls="clr-namespace:CollectionViewDemos.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={x:Reference searchBar}, Path=Text}"
Placeholder="Filter" />
<CollectionView ItemsSource="{Binding Monkeys}"
EmptyView="{Binding Source={x:Reference searchBar}, Path=Text}"
EmptyViewTemplate="{StaticResource SearchSelector}" />
</StackLayout>
</ContentPage>
Ekvivalentní kód jazyka C# je:
SearchBar searchBar = new SearchBar { ... };
CollectionView collectionView = new CollectionView
{
EmptyView = searchBar.Text,
EmptyViewTemplate = new SearchTermDataTemplateSelector { ... }
};
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");
Vlastnost je nastavena EmptyView na SearchBar.Text vlastnost a EmptyViewTemplate vlastnost je nastavena na SearchTermDataTemplateSelector objekt.
Když se SearchBar spustí FilterCommand, kolekce zobrazená podle je CollectionView filtrována pro hledaný termín uložený ve SearchBar.Text vlastnosti. Pokud operace filtrování neposkytuje žádná data, DataTemplate je zvolen objekt SearchTermDataTemplateSelector nastaven jako EmptyViewTemplate vlastnost a zobrazen.
Následující příklad ukazuje SearchTermDataTemplateSelector třídu:
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;
}
}
Třída SearchTermTemplateSelector definuje a OtherTemplateDataTemplate vlastnosti, které jsou nastaveny DefaultTemplate na různé šablony dat. Přepsání OnSelectTemplate vrátí DefaultTemplatezprávu uživateli, pokud se vyhledávací dotaz nerovná xamarinu. Pokud je vyhledávací dotaz roven výrazu "xamarin", vrátí se přepsání, OnSelectTemplate které uživateli zobrazí OtherTemplatezákladní zprávu:
Další informace o selektorech šablon dat naleznete v tématu Vytvoření objektu Xamarin.Forms DataTemplateSelector.