Udostępnij za pośrednictwem

Xamarin.Forms CarouselView EmptyView

  • Artykuł

CarouselView Definiuje następujące właściwości, które mogą służyć do przekazywania opinii użytkowników, gdy nie ma danych do wyświetlenia:

  • EmptyView, typu object, ciąg, powiązanie lub widok, który będzie wyświetlany, gdy ItemsSource właściwość ma nullwartość , lub gdy kolekcja określona przez ItemsSource właściwość jest null lub jest pusta. Domyślna wartość to null.
  • EmptyViewTemplate, typu DataTemplate, szablon używany do formatowania określonego EmptyViewelementu . Domyślna wartość to null.

Te właściwości są wspierane przez BindableProperty obiekty, co oznacza, że właściwości mogą być obiektami docelowymi powiązań danych.

Główne scenariusze użycia do ustawiania EmptyView właściwości są wyświetlane opinie użytkowników w przypadku operacji filtrowania w wyniku CarouselView braku danych i wyświetlania opinii użytkowników podczas pobierania danych z usługi internetowej.

Uwaga

Właściwość EmptyView można ustawić na widok zawierający zawartość interaktywną, jeśli jest to wymagane.

Aby uzyskać więcej informacji na temat szablonów danych, zobacz Xamarin.Forms Szablony danych.

Wyświetlanie ciągu, gdy dane są niedostępne

Właściwość EmptyView można ustawić na ciąg, który będzie wyświetlany, gdy ItemsSource właściwość to null, lub gdy kolekcja określona przez ItemsSource właściwość jest lub jest null pusta. Poniższy kod XAML przedstawia przykład tego scenariusza:

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

Równoważny kod języka C# to:

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

Wynikiem jest to, że ponieważ kolekcja powiązana z danymi to null, zostanie wyświetlony ciąg ustawiony jako EmptyView wartość właściwości.

Wyświetlanie widoków, gdy dane są niedostępne

Właściwość EmptyView można ustawić na widok, który będzie wyświetlany, gdy ItemsSource właściwość to null, lub gdy kolekcja określona ItemsSource przez właściwość jest lub jest null pusta. Może to być pojedynczy widok lub widok zawierający wiele widoków podrzędnych. Poniższy przykład XAML przedstawia EmptyView właściwość ustawioną na widok zawierający wiele widoków podrzędnych:

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

W tym przykładzie, jak wygląda nadmiarowy ContentView element, został dodany jako element główny elementu EmptyView. Jest to spowodowane tym, że wewnętrznie element EmptyView jest dodawany do kontenera natywnego, który nie udostępnia żadnego kontekstu dla Xamarin.Forms układu. W związku z tym, aby umieścić widoki składające się na EmptyViewelement , należy dodać układ główny, którego element podrzędny jest układem, który może być umieszczony w układzie głównym.

Równoważny kod języka C# to:

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 Po wykonaniu FilterCommandobiektu kolekcja wyświetlana przez CarouselView element jest filtrowana pod kątem terminu wyszukiwania przechowywanego SearchBar.Text we właściwości . Jeśli operacja filtrowania nie zwraca żadnych danych, StackLayout zostanie wyświetlony zestaw jako EmptyView wartość właściwości.

Wyświetlanie typu niestandardowego szablonu, gdy dane są niedostępne

Właściwość EmptyView można ustawić na typ niestandardowy, którego szablon jest wyświetlany, gdy ItemsSource właściwość ma nullwartość , lub gdy kolekcja określona przez ItemsSource właściwość jest lub jest null pusta. Właściwość EmptyViewTemplate można ustawić na , DataTemplate która definiuje wygląd EmptyViewobiektu . Poniższy kod XAML przedstawia przykład tego scenariusza:

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

Równoważny kod języka C# to:

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

Typ FilterData definiuje Filter właściwość i odpowiadający mu BindablePropertyelement :

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

Właściwość EmptyView jest ustawiona na FilterData obiekt, a Filter dane właściwości są powiązane z właściwością SearchBar.Text . SearchBar Po wykonaniu FilterCommandobiektu kolekcja wyświetlana przez CarouselView element jest filtrowana pod kątem terminu wyszukiwania przechowywanego Filter we właściwości . Jeśli operacja filtrowania nie daje żadnych danych, Label zostanie wyświetlona wartość zdefiniowana w DataTemplateobiekcie , która jest ustawiona EmptyViewTemplate jako wartość właściwości.

Uwaga

Podczas wyświetlania typu niestandardowego szablonu, gdy dane są niedostępne, EmptyViewTemplate właściwość można ustawić na widok zawierający wiele widoków podrzędnych.

Wybieranie elementu EmptyView w czasie wykonywania

Widoki, które będą wyświetlane jako EmptyView gdy dane są niedostępne, można zdefiniować jako ContentView obiekty w obiekcie ResourceDictionary. Właściwość EmptyView można następnie ustawić na określoną ContentViewwartość , na podstawie określonej logiki biznesowej w czasie wykonywania. Poniższy przykład XAML przedstawia przykład tego scenariusza:

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

Ten kod XAML definiuje dwa ContentView obiekty na poziomie ResourceDictionarystrony, a Switch obiekt kontroluje, który ContentView obiekt zostanie ustawiony jako EmptyView wartość właściwości. Switch Po przełączeniu OnEmptyViewSwitchToggled programu obsługi zdarzeń wykonuje metodę ToggleEmptyView :

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

Metoda ToggleEmptyView ustawia EmptyView właściwość carouselView obiektu na jeden z dwóch ContentView obiektów przechowywanych w ResourceDictionaryobiekcie na podstawie wartości Switch.IsToggled właściwości . SearchBar Po wykonaniu FilterCommandobiektu kolekcja wyświetlana przez CarouselView element jest filtrowana pod kątem terminu wyszukiwania przechowywanego SearchBar.Text we właściwości . Jeśli operacja filtrowania nie daje żadnych danych, ContentView zostanie wyświetlony obiekt ustawiony jako EmptyView właściwość.

Aby uzyskać więcej informacji na temat słowników zasobów, zobacz Xamarin.Forms Słowniki zasobów.

Wybieranie elementu EmptyViewTemplate w czasie wykonywania

EmptyView Wygląd obiektu można wybrać w czasie wykonywania na podstawie jego wartości, ustawiając CarouselView.EmptyViewTemplate właściwość na DataTemplateSelector obiekt:

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

Równoważny kod języka C# to:

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

Właściwość EmptyView jest ustawiona SearchBar.Text na właściwość, a EmptyViewTemplate właściwość jest ustawiona SearchTermDataTemplateSelector na obiekt.

SearchBar Po wykonaniu FilterCommandobiektu kolekcja wyświetlana przez CarouselView element jest filtrowana pod kątem terminu wyszukiwania przechowywanego SearchBar.Text we właściwości . Jeśli operacja filtrowania nie daje żadnych danych, DataTemplate wybrany przez SearchTermDataTemplateSelector obiekt jest ustawiany jako EmptyViewTemplate właściwość i wyświetlany.

W poniższym przykładzie przedstawiono klasę 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;
    }
}

Klasa SearchTermTemplateSelector definiuje DefaultTemplate właściwości, OtherTemplateDataTemplate które są ustawione na różne szablony danych. Zastąpienie OnSelectTemplate zwraca DefaultTemplatewartość , która wyświetla użytkownikowi komunikat, gdy zapytanie wyszukiwania nie jest równe "xamarin". Gdy zapytanie wyszukiwania jest równe "xamarin", OnSelectTemplate zastąpienie zwraca OtherTemplatewartość , która wyświetla podstawowy komunikat dla użytkownika.

Aby uzyskać więcej informacji na temat selektorów szablonów danych, zobacz Create a DataTemplateSelector (Tworzenie selektora Xamarin.Forms szablonów danych).