Xamarin.Forms KarussellView EmptyView

  • Artikel

CarouselView definiert die folgenden Eigenschaften, die verwendet werden können, um Benutzerfeedback bereitzustellen, wenn keine Daten angezeigt werden:

  • EmptyView, vom Typ object, die Zeichenfolge, Bindung oder Ansicht, die angezeigt wird, wenn die Eigenschaft ItemsSource den Wert null hat oder wenn die durch die Eigenschaft ItemsSource angegebene Sammlung null oder leer ist. Der Standardwert ist null.
  • EmptyViewTemplate, vom Typ DataTemplate, die Vorlage zum Formatieren der angegebenen EmptyView. Der Standardwert ist null.

Diese Eigenschaften werden durch BindableProperty-Objekte unterstützt, was bedeutet, dass die Eigenschaften Ziele von Datenbindungen sein können.

Die wichtigsten Nutzungsszenarien zum Festlegen der Eigenschaft EmptyView zeigen Benutzerfeedback an, wenn ein Filtervorgang für CarouselView keine Daten zurückgibt. Es wird Benutzerfeedback angezeigt, während Daten von einem Webdienst abgerufen werden.

Hinweis

Die Eigenschaft EmptyView 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 Eigenschaft EmptyView kann auf eine Zeichenfolge festgelegt werden, die angezeigt wird, wenn die Eigenschaft ItemsSource den Wert null hat oder wenn die durch die Eigenschaft ItemsSource angegebene Sammlung null oder leer ist. Der folgende XAML-Code ist ein Beispiel für dieses Szenario:

<CarouselView ItemsSource="{Binding EmptyMonkeys}"
              EmptyView="No items to display." />

Der entsprechende C#-Code lautet:

CarouselView carouselView = new CarouselView
{
    EmptyView = "No items to display."
};
carouselView.SetBinding(ItemsView.ItemsSourceProperty, "EmptyMonkeys");

Das Ergebnis ist, dass, da die datengebundene Auflistung null lautet, die Zeichenfolge, die als Eigenschaftswert EmptyView festgelegt wurde, angezeigt wird.

Anzeigen von Ansichten bei nicht verfügbaren Daten

Die Eigenschaft EmptyView kann auf eine Ansicht festgelegt werden, die angezeigt wird, wenn die Eigenschaft ItemsSource den Wert null hat oder wenn die durch die Eigenschaft ItemsSource angegebene Sammlung null oder leer ist. Dies kann eine einzelne Ansicht oder eine Ansicht sein, die mehrere untergeordnete Ansichten enthält. Das folgende XAML-Beispiel zeigt die Eigenschaft EmptyView, die auf eine Ansicht festgelegt ist, die mehrere untergeordnete Ansichten enthält:

<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>

In diesem Beispiel wurde ein redundantes ContentView Element als Stammelement der EmptyView. Dies liegt daran, dass der EmptyView interne Container einem systemeigenen Container hinzugefügt wird, der keinen Kontext für Xamarin.Forms das Layout bereitstellt. Daher müssen Sie ein Stammlayout hinzufügen, dessen untergeordnetes Element ein Layout ist, das sich innerhalb des Stammlayouts positionieren kann, um die Ansichten zu positionieren, die aus EmptyView bestehen.

Der entsprechende C#-Code lautet:

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");

Wenn die SearchBar die FilterCommand ausführt, wird die von der CarouselView angezeigte Sammlung nach dem in der SearchBar.Text-Eigenschaft gespeicherten Suchbegriff gefiltert. Wenn die Filterung keine Daten ergibt, wird der StackLayout als EmptyView-Eigenschaftswert angezeigt.

Anzeige eines benutzerdefinierten Typs mit Vorlage, wenn keine Daten verfügbar sind

Die Eigenschaft EmptyView kann auf einen benutzerdefinierten Typ festgelegt werden, dessen Vorlage angezeigt wird, wenn die Eigenschaft ItemsSource den Wert null hat oder wenn die durch die Eigenschaft ItemsSource angegebene Sammlung null oder leer ist. Die Eigenschaft EmptyViewTemplate kann auf eine DataTemplate-Eigenschaft festgelegt werden, die die Darstellung von EmptyView definiert. Der folgende XAML-Code ist ein Beispiel für dieses Szenario:

<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>

Der entsprechende C#-Code lautet:

SearchBar searchBar = new SearchBar { ... };
CarouselView carouselView = new CarouselView
{
    EmptyView = new FilterData { Filter = searchBar.Text },
    EmptyViewTemplate = new DataTemplate(() =>
    {
        return new Label { ... };
    })
};

Der Typ FilterData definiert eine Filter-Eigenschaft und ein entsprechendes 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 Eigenschaft EmptyView wird auf ein FilterData-Objekt festgelegt, und die Daten der Eigenschaft Filter werden an die Eigenschaft SearchBar.Text gebunden. Wenn die SearchBar die FilterCommand ausführt, wird die von der CarouselView angezeigte Sammlung nach dem in der Filter-Eigenschaft gespeicherten Suchbegriff gefiltert. Wenn die Filterung keine Daten ergibt, wird das in DataTemplate definierte Label, das als EmptyViewTemplate-Eigenschaftswert eingestellt ist, angezeigt.

Hinweis

Wenn ein benutzerdefinierter Vorlagentyp angezeigt wird und keine Daten verfügbar sind, kann die Eigenschaft EmptyViewTemplate auf eine Ansicht festgelegt werden, die mehrere untergeordnete Ansichten enthält.

Auswählen von EmptyView zur Laufzeit

Ansichten, die als EmptyView angezeigt werden, wenn keine Daten verfügbar sind, können als ContentView-Objekte in ResourceDictionary definiert werden. Die EmptyView Eigenschaft kann dann zur Laufzeit auf eine bestimmte ContentViewGeschäftslogik festgelegt werden. Das folgende XAML-Beispiel zeigt ein Beispiel für dieses Szenario:

<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>

Dieses XAML definiert zwei ContentView-Objekte in der Seitenebene ResourceDictionary, wobei das Switch-Objekt steuert, welches ContentView-Objekt als EmptyView-Eigenschaftswert festgelegt wird. Wenn Switch umgeschaltet wird, führt der Ereignishandler OnEmptyViewSwitchToggled die Methode ToggleEmptyView aus:

void ToggleEmptyView(bool isToggled)
{
    carouselView.EmptyView = isToggled ? Resources["BasicEmptyView"] : Resources["AdvancedEmptyView"];
}

Die Methode ToggleEmptyView legt die Eigenschaft EmptyView des Objekts carouselView auf der Grundlage des Werts der Eigenschaft Switch.IsToggled auf eines der beiden ContentView-Objekte fest, die in ResourceDictionary gespeichert sind. Wenn die SearchBar die FilterCommand ausführt, wird die von der CarouselView angezeigte Sammlung nach dem in der SearchBar.Text-Eigenschaft gespeicherten Suchbegriff gefiltert. Wenn die Filterung keine Daten ergibt, wird das ContentView-Objekt, das als EmptyView-Eigenschaft festgelegt wurde, angezeigt.

Weitere Informationen zu Ressourcenwörterbüchern finden Sie unter Xamarin.Forms Ressourcenwörterbücher.

Auswahl eines EmptyViewTemplate zur Laufzeit

Die Darstellung des EmptyView kann zur Laufzeit abhängig von seinem Wert gewählt werden, indem die CarouselView.EmptyViewTemplate-Eigenschaft auf ein DataTemplateSelector-Objekt gesetzt wird:

<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>

Der entsprechende C#-Code lautet:

SearchBar searchBar = new SearchBar { ... };
CarouselView carouselView = new CarouselView()
{
    EmptyView = searchBar.Text,
    EmptyViewTemplate = new SearchTermDataTemplateSelector { ... }
};
carouselView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");

Die EmptyView-Eigenschaft wird auf die SearchBar.Text-Eigenschaft und die EmptyViewTemplate-Eigenschaft wird auf ein SearchTermDataTemplateSelector-Objekt gesetzt.

Wenn SearchBarFilterCommand ausführt, wird die durch die Eigenschaft CarouselView angezeigte Sammlung nach dem in der Eigenschaft SearchBar.Text gespeicherten Suchbegriff gefiltert. Wenn die Filterung keine Daten ergibt, wird das vom SearchTermDataTemplateSelector-Objekt ausgewählte DataTemplate als EmptyViewTemplate-Eigenschaft gesetzt und angezeigt.

Das folgende Beispiel zeigt die Klasse SearchTermDataTemplateSelector:

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 Klasse SearchTermTemplateSelector definiert DefaultTemplate und OtherTemplateDataTemplate Eigenschaften, die auf verschiedene Datenvorlagen gesetzt werden. Die OnSelectTemplate-Überschreibung gibt DefaultTemplate zurück, was dem Benutzenden eine Meldung anzeigt, wenn die Suchanfrage nicht gleich „xamarin“ ist. Wenn die Suchanfrage gleich „xamarin“ ist, gibt die OnSelectTemplate-Überschreibung OtherTemplate zurück, was dem Benutzenden eine einfache Meldung anzeigt.

Weitere Informationen zu Datenvorlagenselektoren finden Sie unter Create a Xamarin.Forms DataTemplateSelector.