Xamarin.Forms CollectionView EmptyView

  • Artikel

Beispiel herunterladen Das Beispiel herunterladen

CollectionView definiert die folgenden Eigenschaften, die verwendet werden können, um Benutzerfeedback zu geben, wenn keine Daten angezeigt werden:

  • EmptyViewvom Typ object, die Zeichenfolge, Bindung oder Sicht, die angezeigt wird, wenn die ItemsSource -Eigenschaft ist nulloder wenn die durch die ItemsSource -Eigenschaft angegebene Auflistung leer ist oder leer ist null . Standardwert: null.
  • EmptyViewTemplatevom Typ DataTemplate, die Vorlage, die zum Formatieren der angegebenen EmptyViewverwendet 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 nulloder 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:

Screenshot einer vertikalen CollectionView-Liste mit einer leeren Textansicht unter iOS und Android

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 nulloder 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 EmptyViewhinzugefü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 EmptyViewbesteht, 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 SearchBarFilterCommandwird, 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:

Screenshot einer vertikalen CollectionView-Liste mit benutzerdefinierter leerer Ansicht unter iOS und Android

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 nulloder 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 EmptyViewdefiniert. 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 SearchBarFilterCommandwird, 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 DataTemplatedefinierten angezeigt, der EmptyViewTemplate als -Eigenschaftswert festgelegt ist:

Screenshot einer vertikalen CollectionView-Liste mit einer leeren Ansichtsvorlage unter iOS und Android

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 ResourceDictionarydefiniert werden. Die EmptyView -Eigenschaft kann dann basierend auf einer Geschäftslogik zur Laufzeit auf eine bestimmte ContentViewfestgelegt 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 ResourceDictionaryin gespeichert sind, basierend auf dem Wert der Switch.IsToggled -Eigenschaft. Wenn ausgeführt SearchBarFilterCommandwird, 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:

Screenshot einer vertikalen CollectionView-Liste mit getauschten leeren Ansichten unter iOS und Android

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 SearchBarFilterCommandwird, 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 OtherTemplateDataTemplate 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:

Screenshot einer Auswahl einer leeren Ansichtsvorlage für eine CollectionView-Laufzeit, unter iOS und Android

Weitere Informationen zu Datenvorlagenselektoren finden Sie unter Erstellen eines DataTemplateSelector.For more information about data template selektor, see Create a Xamarin.Forms DataTemplateSelector.