Sdílet prostřednictvím

Xamarin.Forms CarouselView EmptyView

  • Článek

CarouselView definuje následující vlastnosti, které lze použít k poskytnutí zpětné vazby uživatelů, když se nezobrazí žádná data:

  • EmptyView, typu object, řetězec, vazba nebo zobrazení, které se zobrazí, když ItemsSource je nullvlastnost , nebo když kolekce určená ItemsSource vlastností je null nebo je prázdná. Výchozí hodnota je null.
  • EmptyViewTemplate, typu DataTemplate, šablona, která se má použít k formátování zadaného EmptyView. Výchozí hodnota je null.

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

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

Ekvivalentní kód jazyka C# je:

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

Výsledkem je to, že vzhledem k tomu, že kolekce vázané na data je null, řetězec nastavený při EmptyView zobrazení hodnoty vlastnosti.

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

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 { ... };
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");

Když se SearchBar spustí FilterCommand, kolekce zobrazená podle je CarouselView 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={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>

Ekvivalentní kód jazyka C# je:

SearchBar searchBar = new SearchBar { ... };
CarouselView carouselView = new CarouselView
{
    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 CarouselView 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 nastavena 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í příklad 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"
             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>

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)
{
    carouselView.EmptyView = isToggled ? Resources["BasicEmptyView"] : Resources["AdvancedEmptyView"];
}

Metoda ToggleEmptyView nastaví EmptyView vlastnost objektu carouselView 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 CarouselView filtrována pro hledaný termín uložený ve SearchBar.Text vlastnosti. Pokud operace filtrování neposkytuje žá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 CarouselView.EmptyViewTemplate vlastnosti na DataTemplateSelector objekt:

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

Ekvivalentní kód jazyka C# je:

SearchBar searchBar = new SearchBar { ... };
CarouselView carouselView = new CarouselView()
{
    EmptyView = searchBar.Text,
    EmptyViewTemplate = new SearchTermDataTemplateSelector { ... }
};
carouselView.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 CarouselView 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 OtherTemplate DataTemplate 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", OnSelectTemplate vrátí OtherTemplatese přepsání, které uživateli zobrazí základní zprávu.

Další informace o selektorech šablon dat naleznete v tématu Vytvoření objektu Xamarin.Forms DataTemplateSelector.