Xamarin.Forms CollectionView EmptyView
CollectionView
definiert die folgenden Eigenschaften, die verwendet werden können, um Benutzerfeedback zu geben, wenn keine Daten angezeigt werden:
EmptyView
vom Typobject
, die Zeichenfolge, Bindung oder Sicht, die angezeigt wird, wenn dieItemsSource
-Eigenschaft istnull
oder wenn die durch dieItemsSource
-Eigenschaft angegebene Auflistung leer ist oder leer istnull
. Standardwert:null
.EmptyViewTemplate
vom TypDataTemplate
, die Vorlage, die zum Formatieren der angegebenenEmptyView
verwendet werden soll. Standardwert:null
.
Diese Eigenschaften werden von BindableProperty
-Objekten unterstützt, was bedeutet, dass die Eigenschaften Ziele von Datenbindungen sein können.
Die Standard Verwendungsszenarien zum Festlegen der EmptyView
Eigenschaft zeigen Benutzerfeedback an, wenn ein Filtervorgang für einen CollectionView
keine Daten liefert, und Benutzerfeedback, während Daten aus einem Webdienst abgerufen werden.
Hinweis
Die EmptyView
-Eigenschaft kann auf eine Ansicht festgelegt werden, die bei Bedarf interaktive Inhalte enthält.
Weitere Informationen zu Datenvorlagen finden Sie unter Xamarin.Forms-Datenvorlagen.
Anzeigen einer Zeichenfolge, wenn Daten nicht verfügbar sind
Die EmptyView
-Eigenschaft kann auf eine Zeichenfolge festgelegt werden, die angezeigt wird, wenn die ItemsSource
-Eigenschaft ist null
oder wenn die durch die ItemsSource
-Eigenschaft angegebene Auflistung leer ist oder leer ist null
. Der folgende XAML-Code zeigt ein Beispiel für dieses Szenario:
<CollectionView ItemsSource="{Binding EmptyMonkeys}"
EmptyView="No items to display" />
Der entsprechende C#-Code lautet:
CollectionView collectionView = new CollectionView
{
EmptyView = "No items to display"
};
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "EmptyMonkeys");
Das Ergebnis ist, dass die als EmptyView
Eigenschaftswert festgelegte Zeichenfolge angezeigt wird, da die datengebundene Auflistung istnull
:
Anzeigen von Ansichten, wenn Daten nicht verfügbar sind
Die EmptyView
-Eigenschaft kann auf eine Ansicht festgelegt werden, die angezeigt wird, wenn die ItemsSource
-Eigenschaft ist null
oder wenn die durch die ItemsSource
-Eigenschaft angegebene Auflistung leer ist oder leer ist null
. Dies kann eine einzelne Ansicht oder eine Ansicht sein, die mehrere untergeordnete Ansichten enthält. Im folgenden XAML-Beispiel wird die EmptyView
Eigenschaft auf eine Ansicht festgelegt, die mehrere untergeordnete Ansichten enthält:
<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>
In diesem Beispiel wurde das , was wie ein redundantes ContentView
aussieht, als Stammelement von EmptyView
hinzugefügt. Dies liegt daran, dass intern einem nativen Container hinzugefügt wird, EmptyView
der keinen Kontext für Xamarin.Forms das Layout bereitstellt. Daher müssen Sie zum Positionieren der Ansichten, aus denen EmptyView
besteht, ein Stammlayout hinzufügen, dessen untergeordnetes Layout ein Layout ist, das sich innerhalb des Stammlayouts positionieren kann.
Der entsprechende C#-Code lautet:
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");
Wenn ausgeführt SearchBar
FilterCommand
wird, wird die von CollectionView
angezeigte Auflistung nach dem in der SearchBar.Text
-Eigenschaft gespeicherten Suchbegriff gefiltert. Wenn der Filtervorgang keine Daten ergibt, wird der StackLayout
als EmptyView
Eigenschaftswert festgelegte angezeigt:
Anzeigen eines benutzerdefinierten Vorlagentyps, wenn Daten nicht verfügbar sind
Die EmptyView
-Eigenschaft kann auf einen benutzerdefinierten Typ festgelegt werden, dessen Vorlage angezeigt wird, wenn die ItemsSource
-Eigenschaft ist null
oder wenn die von der ItemsSource
-Eigenschaft angegebene Auflistung leer ist oder leer ist null
. Die EmptyViewTemplate
-Eigenschaft kann auf eine DataTemplate
festgelegt werden, die die Darstellung von EmptyView
definiert. Der folgende XAML-Code zeigt ein Beispiel für dieses Szenario:
<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>
Der entsprechende C#-Code lautet:
SearchBar searchBar = new SearchBar { ... };
CollectionView collectionView = new CollectionView
{
EmptyView = new FilterData { Filter = searchBar.Text },
EmptyViewTemplate = new DataTemplate(() =>
{
return new Label { ... };
})
};
Der FilterData
Typ definiert eine Filter
-Eigenschaft und eine entsprechende 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); }
}
}
Die EmptyView
-Eigenschaft wird auf ein FilterData
-Objekt festgelegt, und die Filter
Eigenschaftendaten werden an die SearchBar.Text
-Eigenschaft gebunden. Wenn ausgeführt SearchBar
FilterCommand
wird, wird die von CollectionView
angezeigte Auflistung nach dem in der Filter
-Eigenschaft gespeicherten Suchbegriff gefiltert. Wenn der Filtervorgang keine Daten ergibt, wird der Label
in DataTemplate
definierten angezeigt, der EmptyViewTemplate
als -Eigenschaftswert festgelegt ist:
Hinweis
Beim Anzeigen eines benutzerdefinierten Vorlagentyps, wenn Daten nicht verfügbar sind, kann die EmptyViewTemplate
Eigenschaft auf eine Ansicht festgelegt werden, die mehrere untergeordnete Ansichten enthält.
Auswählen einer EmptyView zur Laufzeit
Sichten, die als EmptyView
angezeigt werden, wenn Daten nicht verfügbar sind, können als ContentView
Objekte in einem ResourceDictionary
definiert werden. Die EmptyView
-Eigenschaft kann dann basierend auf einer Geschäftslogik zur Laufzeit auf eine bestimmte ContentView
festgelegt werden. Der folgende XAML-Code zeigt ein Beispiel für dieses Szenario:
<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>
Dieser XAML-Code definiert zwei ContentView
Objekte auf Seitenebene ResourceDictionary
, wobei das Switch
-Objekt steuert, welches ContentView
Objekt als EmptyView
-Eigenschaftswert festgelegt wird. Wenn umgeschaltet Switch
wird, führt der OnEmptyViewSwitchToggled
Ereignishandler die -Methode aus ToggleEmptyView
:
void ToggleEmptyView(bool isToggled)
{
collectionView.EmptyView = isToggled ? Resources["BasicEmptyView"] : Resources["AdvancedEmptyView"];
}
Die ToggleEmptyView
-Methode legt die EmptyView
-Eigenschaft des collectionView
-Objekts auf eines der beiden ContentView
Objekte fest, die ResourceDictionary
in gespeichert sind, basierend auf dem Wert der Switch.IsToggled
-Eigenschaft. Wenn ausgeführt SearchBar
FilterCommand
wird, wird die von CollectionView
angezeigte Auflistung nach dem in der SearchBar.Text
-Eigenschaft gespeicherten Suchbegriff gefiltert. Wenn der Filtervorgang keine Daten ergibt, wird das ContentView
als EmptyView
Eigenschaft festgelegte Objekt angezeigt:
Weitere Informationen zu Ressourcenwörterbüchern finden Sie unter Xamarin.Forms Ressourcenwörterbücher.
Auswählen einer EmptyViewTemplate zur Laufzeit
Die Darstellung von EmptyView
kann zur Laufzeit basierend auf seinem Wert ausgewählt werden, indem die CollectionView.EmptyViewTemplate
-Eigenschaft auf ein DataTemplateSelector
-Objekt festgelegt wird:
<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>
Der entsprechende C#-Code lautet:
SearchBar searchBar = new SearchBar { ... };
CollectionView collectionView = new CollectionView
{
EmptyView = searchBar.Text,
EmptyViewTemplate = new SearchTermDataTemplateSelector { ... }
};
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");
Die EmptyView
-Eigenschaft wird auf die SearchBar.Text
-Eigenschaft und die EmptyViewTemplate
-Eigenschaft auf ein SearchTermDataTemplateSelector
-Objekt festgelegt.
Wenn ausgeführt SearchBar
FilterCommand
wird, wird die von CollectionView
angezeigte Auflistung nach dem in der SearchBar.Text
-Eigenschaft gespeicherten Suchbegriff gefiltert. Wenn der Filtervorgang keine Daten ergibt, wird die DataTemplate
vom SearchTermDataTemplateSelector
-Objekt ausgewählte als EmptyViewTemplate
-Eigenschaft festgelegt und angezeigt.
Das folgende Beispiel zeigt die SearchTermDataTemplateSelector
-Klasse:
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;
}
}
Die SearchTermTemplateSelector
-Klasse definiert DefaultTemplate
und OtherTemplate
DataTemplate
Eigenschaften, die auf unterschiedliche Datenvorlagen festgelegt sind. Die OnSelectTemplate
Überschreibung gibt zurück DefaultTemplate
, wodurch dem Benutzer eine Meldung angezeigt wird, wenn die Suchabfrage nicht gleich "xamarin" ist. Wenn die Suchabfrage gleich "xamarin" ist, gibt die OnSelectTemplate
Außerkraftsetzung zurück OtherTemplate
, wodurch dem Benutzer eine grundlegende Meldung angezeigt wird:
Weitere Informationen zu Datenvorlagenselektoren finden Sie unter Erstellen eines DataTemplateSelector.For more information about data template selektor, see Create a Xamarin.Forms DataTemplateSelector.