Xamarin.Forms CollectionView EmptyView

Článek
12/02/2021
7 min ke čtení

CollectionView definuje následující vlastnosti, které lze použít k poskytnutí zpětné vazby uživatele, když není k dispozici žádná data k zobrazení:

_ItemsView_EmptyView "data-LINKTYPE =" absolutní cesta ">EmptyView , typ object , řetězec, vazbu nebo zobrazení, které se zobrazí, když Xamarin_Forms EmptyView _ItemsView_ItemsSource data-LINKTYPE =" absolutní cesta ">ItemsSource vlastnost je nebo null když je kolekce určená ItemsSource vlastností null nebo prázdná. Výchozí hodnota je null.
_ItemsView_EmptyViewTemplate "data-LINKTYPE =" absolutní cestu ">EmptyViewTemplate typu DataTemplate , šablonu, která se má použít k formátování zadaného EmptyView . Výchozí hodnota je null.

Tyto vlastnosti jsou zálohovány BindableProperty objekty, což znamená, že vlastnosti mohou být cílem datových vazeb.

Hlavní scénáře použití pro nastavení Xamarin_Forms _ItemsView_EmptyView "data-LINKTYPE =" absolutní cesta ">EmptyView vlastnost zobrazuje zpětnou vazbu uživatele v případě, že operace filtrování CollectionView neposkytuje žádná data a zobrazuje zpětnou vazbu od uživatele při načítání dat z webové služby.

Poznámka

Vlastnost Xamarin_Forms _ItemsView_EmptyView data-LINKTYPE = "absolutní cesta" >EmptyView lze nastavit na zobrazení, které v případě potřeby obsahuje interaktivní obsah.

Další informace o datových šablonách naleznete v tématu Xamarin.Forms Data Templates .

Zobrazit řetězec, pokud nejsou data k dispozici

Vlastnost Xamarin_Forms _ItemsView_EmptyView data-LINKTYPE = "absolutní cesta" >EmptyView možné nastavit na řetězec, který se zobrazí, pokud Xamarin_Forms EmptyView _ItemsView_ItemsSource data-linktype = "absolutní cesta" >ItemsSource vlastnost je nebo null když je kolekce určená ItemsSource vlastností null nebo prázdná. Následující kód XAML ukazuje příklad tohoto scénáře:

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

Ekvivalentní kód jazyka C#:

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

Výsledkem je, že vzhledem k tomu, že kolekce vázaných na data je null , je zobrazena řetězcová null hodnota Xamarin_Forms _ItemsView_EmptyView "data-LINKTYPE =" absolutní cesta ">EmptyView hodnota vlastnosti:

Zobrazení zobrazení, pokud nejsou data k dispozici

Vlastnost Xamarin_Forms _ItemsView_EmptyView data-LINKTYPE = "absolutní cesta" >EmptyView možné nastavit na zobrazení, které se zobrazí, když Xamarin_Forms EmptyView _ItemsView_ItemsSource data-linktype = "absolutní cesta" >ItemsSource vlastnost je nebo null když je kolekce určená ItemsSource vlastností null nebo prázdná. Může se jednat o 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 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>

V tomto příkladu, co vypadá jako redundantní, bylo ContentView přidáno jako kořenový prvek Xamarin_Forms ContentView _ItemsView_EmptyView "data-LINKTYPE =" absolutní cesta ">EmptyView . Je to proto, že interně se EmptyView přidá do nativního kontejneru, který neposkytuje žádný kontext pro Xamarin.Forms rozložení. Proto pro umístění zobrazení, která tvoří EmptyView , je nutné přidat kořenové rozložení, jehož podřízené je rozložení, které se může umístit do kořenového rozložení.

Ekvivalentní kód jazyka C#:

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

Když se SearchBar spustí FilterCommand , kolekce zobrazená v CollectionView je filtrovaná pro hledaný termín uložený ve Xamarin_Forms SearchBar _InputView_Text "data-LINKTYPE =" absolutní cesta ">SearchBar.Text vlastnost. Pokud operace filtrování nevrátí žádná data, StackLayout zobrazí se sada Xamarin_Forms StackLayout _ItemsView_EmptyView data-LINKTYPE = "absolutní cesta" >EmptyView hodnota vlastnosti:

Zobrazit vlastní typ se šablonou, pokud nejsou k dispozici data

Vlastnost Xamarin_Forms _ItemsView_EmptyView data-LINKTYPE = "absolutní cesta" >EmptyView možné nastavit na vlastní typ, jehož šablona se zobrazí, když Xamarin_Forms EmptyView _ItemsView_ItemsSource data-linktype = "absolutní cesta" >ItemsSource vlastnost je nebo null když je kolekce určená ItemsSource vlastností null nebo prázdná. Vlastnost Xamarin_Forms _ItemsView_EmptyViewTemplate data-LINKTYPE = "absolutní cesta >" EmptyViewTemplate lze nastavit na hodnotu DataTemplate , která definuje vzhled EmptyView . Následující kód XAML ukazuje příklad tohoto scénáře:

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

Ekvivalentní kód jazyka C#:

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

FilterDataTyp 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 Xamarin_Forms _ItemsView_EmptyView data-LINKTYPE = "absolutní cesta" >EmptyView vlastnost je nastavena na FilterData objekt a Filter data vlastnosti se sváže s EmptyView vlastností Xamarin_Forms _InputView_Text data-LINKTYPE = "absolutní cesta" >SearchBar.Text . Když se SearchBar spustí FilterCommand , kolekce zobrazená v CollectionView je filtrovaná pro hledaný termín uložený ve Filter Vlastnosti. Pokud operace filtrování nevrátí žádná data, Label je zobrazena definice v DataTemplate , která je nastavena jako Xamarin_Forms Label _ItemsView_EmptyViewTemplate "data-LINKTYPE =" absolutní cesta ">EmptyViewTemplate hodnota vlastnosti.

Poznámka

Při zobrazení vlastního typu vytvořeného šablonou, pokud nejsou k dispozici data, Xamarin_Forms vlastnost _ItemsView_EmptyViewTemplate data-LINKTYPE = "absolutní cesta >" EmptyViewTemplate lze nastavit na zobrazení, které obsahuje více podřízených zobrazení.

Zvolit EmptyView za běhu

Zobrazení, která se zobrazí jako Xamarin_Forms _ItemsView_EmptyView "data-LINKTYPE =" absolutní cesta ">EmptyView Pokud nejsou data k dispozici, je možné definovat jako ContentView objekty v ResourceDictionary . EmptyViewVlastnost může být poté nastavena na určitou hodnotu na ContentView základě některé obchodní logiky za běhu. Následující kód 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"
             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>

Tento kód XAML definuje dva ContentView objekty na úrovni stránky ResourceDictionary s Switch objektem, který řídí, který ContentView objekt bude nastaven jako Xamarin_Forms ContentView _ItemsView_EmptyView "data-linktype =" absolutní cesta ">EmptyView hodnota vlastnosti. Když Switch je přepínací, OnEmptyViewSwitchToggled obslužná rutina události spustí ToggleEmptyView metodu:

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

ToggleEmptyViewMetoda nastaví Xamarin_Forms vlastnost ToggleEmptyView _ItemsView_EmptyView "data-LINKTYPE =" absolutní cesta ">EmptyViewcollectionView objektu na jeden ze dvou ContentView objektů uložených v objektu ResourceDictionary , a to na základě hodnoty Xamarin_Forms _Switch_IsToggled data-LINKTYPE =" absolutní cesta ">Switch.IsToggled vlastnost. Když se SearchBar spustí FilterCommand , kolekce zobrazená v CollectionView je filtrovaná pro hledaný termín uložený ve Xamarin_Forms SearchBar _InputView_Text "data-LINKTYPE =" absolutní cesta ">SearchBar.Text vlastnost. Pokud operace filtrování nevrátí žádná data, ContentView zobrazí se objekt nastavený jako EmptyView vlastnost:

Další informace o slovnících Resources naleznete v tématu Xamarin.Forms Resource Dictionaries .

Zvolit EmptyViewTemplate za běhu

Vzhled Xamarin_Forms _ItemsView_EmptyView "data-LINKTYPE =" absolutní cestu ">EmptyView lze zvolit za běhu na základě jeho hodnoty nastavením Xamarin_Forms EmptyView _ItemsView_EmptyViewTemplate" data-linktype = "absolutní cesta" >CollectionView.EmptyViewTemplate vlastnost na DataTemplateSelector objekt:

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

Ekvivalentní kód jazyka C#:

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

Vlastnost Xamarin_Forms _ItemsView_EmptyView data-LINKTYPE = "absolutní cesta" >EmptyView vlastnost je nastavena na Xamarin_Forms EmptyView _InputView_Text data-linktype = "absolutní cesta" >SearchBar.Text vlastnost a vlastnost Xamarin_Forms _ItemsView_EmptyViewTemplate data-LINKTYPE = "absolutní cesta" >EmptyViewTemplate vlastnost je nastavena na SearchTermDataTemplateSelector objekt.

Když se SearchBar spustí FilterCommand , kolekce zobrazená v CollectionView je filtrovaná pro hledaný termín uložený ve Xamarin_Forms SearchBar _InputView_Text "data-LINKTYPE =" absolutní cesta ">SearchBar.Text vlastnost. Pokud operace filtrování nevrátí žádná data, DataTemplate je zvolený SearchTermDataTemplateSelector objekt nastaven jako Xamarin_Forms DataTemplate _ItemsView_EmptyViewTemplate "data-LINKTYPE =" absolutní cesta ">EmptyViewTemplate vlastnost a zobrazí se.

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

SearchTermTemplateSelectorTřída definuje DefaultTemplate a OtherTemplateDataTemplate vlastnosti, které jsou nastaveny na různé datové šablony. OnSelectTemplatePřepsání vrátí hodnotu DefaultTemplate , která zobrazí uživateli zprávu, pokud vyhledávací dotaz není roven "Xamarin". Když je vyhledávací dotaz roven "Xamarin", OnSelectTemplate přepsání vrátí OtherTemplate , které zobrazí základní zprávu uživateli:

Výběr šablony snímku obrazovky CollectionView běhového zobrazení s prázdným šablonou v systému iOS a Android výběr

Další informace o selektorech datových šablon naleznete v tématu Create a Xamarin.Forms DataTemplateSelector .

Xamarin.Forms CollectionView EmptyView

Ohodnoťte vaše zkušenosti

Zobrazit řetězec, pokud nejsou data k dispozici

Zobrazení zobrazení, pokud nejsou data k dispozici

Zobrazit vlastní typ se šablonou, pokud nejsou k dispozici data

Zvolit EmptyView za běhu

Zvolit EmptyViewTemplate za běhu

Související odkazy