:::no-loc(Xamarin.Forms)::: EmptyView CollectionView:::no-loc(Xamarin.Forms)::: CollectionView EmptyView

Baixar Exemplo Baixar o exemploDownload Sample Download the sample

CollectionView define as seguintes propriedades que podem ser usadas para fornecer comentários do usuário quando não há dados a serem exibidos:CollectionView defines the following properties that can be used to provide user feedback when there's no data to display:

  • EmptyView, do tipo object , a cadeia de caracteres, a associação ou a exibição que será exibida quando a ItemsSource propriedade for null , ou quando a coleção especificada pela ItemsSource propriedade for null ou vazia.EmptyView, of type object, the string, binding, or view that will be displayed when the ItemsSource property is null, or when the collection specified by the ItemsSource property is null or empty. O valor padrão é null.The default value is null.
  • EmptyViewTemplate, do tipo DataTemplate , o modelo a ser usado para formatar o especificado EmptyView .EmptyViewTemplate, of type DataTemplate, the template to use to format the specified EmptyView. O valor padrão é null.The default value is null.

Essas propriedades são apoiadas por BindableProperty objetos, o que significa que as propriedades podem ser destinos de associações de dados.These properties are backed by BindableProperty objects, which means that the properties can be targets of data bindings.

Os principais cenários de uso para definir a EmptyView propriedade são exibir comentários do usuário quando uma operação de filtragem em um CollectionView não produz dados e exibindo comentários do usuário enquanto os dados estão sendo recuperados de um serviço Web.The main usage scenarios for setting the EmptyView property are displaying user feedback when a filtering operation on a CollectionView yields no data, and displaying user feedback while data is being retrieved from a web service.

Observação

A EmptyView propriedade pode ser definida como uma exibição que inclui conteúdo interativo, se necessário.The EmptyView property can be set to a view that includes interactive content if required.

Para obter mais informações sobre modelos de dados, consulte :::no-loc(Xamarin.Forms)::: modelos de dados.For more information about data templates, see :::no-loc(Xamarin.Forms)::: Data Templates.

Exibir uma cadeia de caracteres quando os dados estiverem indisponíveisDisplay a string when data is unavailable

A EmptyView propriedade pode ser definida como uma cadeia de caracteres, que será exibida quando a ItemsSource propriedade for null , ou quando a coleção especificada pela ItemsSource propriedade for null ou vazia.The EmptyView property can be set to a string, which will be displayed when the ItemsSource property is null, or when the collection specified by the ItemsSource property is null or empty. O XAML a seguir mostra um exemplo desse cenário:The following XAML shows an example of this scenario:

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

Este é o código C# equivalente:The equivalent C# code is:

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

O resultado é que, como a coleção associada a dados é null , a cadeia de caracteres definida como o EmptyView valor da propriedade é exibida:The result is that, because the data bound collection is null, the string set as the EmptyView property value is displayed:

Captura de tela de uma lista vertical CollectionView com uma exibição de texto vazio, no iOS e no AndroidScreenshot of a CollectionView vertical list with a text empty view, on iOS and Android

Exibir exibições quando os dados estiverem indisponíveisDisplay views when data is unavailable

A EmptyView propriedade pode ser definida como uma exibição, que será exibida quando a ItemsSource propriedade for null , ou quando a coleção especificada pela ItemsSource propriedade for null ou vazia.The EmptyView property can be set to a view, which will be displayed when the ItemsSource property is null, or when the collection specified by the ItemsSource property is null or empty. Isso pode ser uma exibição única ou uma exibição que contenha várias exibições filhas.This can be a single view, or a view that contains multiple child views. O exemplo de XAML a seguir mostra a EmptyView propriedade definida como uma exibição que contém várias exibições filho:The following XAML example shows the EmptyView property set to a view that contains multiple child views:

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

Neste exemplo, o que parece um redundante ContentView foi adicionado como o elemento raiz do EmptyView .In this example, what looks like a redundant ContentView has been added as the root element of the EmptyView. Isso ocorre porque, internamente, EmptyView é adicionado a um contêiner nativo que não fornece nenhum contexto para :::no-loc(Xamarin.Forms)::: layout.This is because internally, the EmptyView is added to a native container that doesn't provide any context for :::no-loc(Xamarin.Forms)::: layout. Portanto, para posicionar as exibições que compõem seu EmptyView , você deve adicionar um layout raiz, cujo filho é um layout que pode se posicionar dentro do layout raiz.Therefore, to position the views that comprise your EmptyView, you must add a root layout, whose child is a layout that can position itself within the root layout.

Este é o código C# equivalente:The equivalent C# code is:

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

Quando o SearchBar executa o FilterCommand , a coleção exibida pelo CollectionView é filtrada para o termo de pesquisa armazenado na SearchBar.Text propriedade.When the SearchBar executes the FilterCommand, the collection displayed by the CollectionView is filtered for the search term stored in the SearchBar.Text property. Se a operação de filtragem não gerar dados, o StackLayout conjunto como o EmptyView valor da propriedade será exibido:If the filtering operation yields no data, the StackLayout set as the EmptyView property value is displayed:

Captura de tela de uma lista vertical CollectionView com exibição vazia personalizada, no iOS e no AndroidScreenshot of a CollectionView vertical list with custom empty view, on iOS and Android

Exibir um tipo personalizado de modelo quando os dados estiverem indisponíveisDisplay a templated custom type when data is unavailable

A EmptyView propriedade pode ser definida como um tipo personalizado, cujo modelo é exibido quando a ItemsSource propriedade é null , ou quando a coleção especificada pela ItemsSource propriedade é null ou vazia.The EmptyView property can be set to a custom type, whose template is displayed when the ItemsSource property is null, or when the collection specified by the ItemsSource property is null or empty. A EmptyViewTemplate propriedade pode ser definida como um DataTemplate que define a aparência do EmptyView .The EmptyViewTemplate property can be set to a DataTemplate that defines the appearance of the EmptyView. O XAML a seguir mostra um exemplo desse cenário:The following XAML shows an example of this scenario:

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

Este é o código C# equivalente:The equivalent C# code is:

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

O FilterData tipo define uma Filter propriedade e um correspondente BindableProperty :The FilterData type defines a Filter property, and a corresponding 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); }
    }
}

A EmptyView propriedade é definida como um FilterData objeto e os Filter dados de propriedade são associados à SearchBar.Text propriedade.The EmptyView property is set to a FilterData object, and the Filter property data binds to the SearchBar.Text property. Quando o SearchBar executa o FilterCommand , a coleção exibida pelo CollectionView é filtrada para o termo de pesquisa armazenado na Filter propriedade.When the SearchBar executes the FilterCommand, the collection displayed by the CollectionView is filtered for the search term stored in the Filter property. Se a operação de filtragem não gerar dados, o Label definido no DataTemplate , que é definido como o EmptyViewTemplate valor da propriedade, será exibido:If the filtering operation yields no data, the Label defined in the DataTemplate, that's set as the EmptyViewTemplate property value, is displayed:

Captura de tela de uma lista vertical CollectionView com um modelo de exibição vazio, no iOS e no AndroidScreenshot of a CollectionView vertical list with an empty view template, on iOS and Android

Observação

Ao exibir um tipo personalizado de modelo quando os dados não estão disponíveis, a EmptyViewTemplate propriedade pode ser definida como uma exibição que contém várias exibições filho.When displaying a templated custom type when data is unavailable, the EmptyViewTemplate property can be set to a view that contains multiple child views.

Escolha um EmptyView em tempo de execuçãoChoose an EmptyView at runtime

Exibições que serão exibidas como um EmptyView quando os dados estiverem indisponíveis, podem ser definidas como ContentView objetos em um ResourceDictionary .Views that will be displayed as an EmptyView when data is unavailable, can be defined as ContentView objects in a ResourceDictionary. A EmptyView propriedade pode então ser definida como um específico ContentView , com base em alguma lógica de negócios, em tempo de execução.The EmptyView property can then be set to a specific ContentView, based on some business logic, at runtime. O XAML a seguir mostra um exemplo desse cenário:The following XAML shows an example of this scenario:

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

Esse XAML define dois ContentView objetos no nível de página ResourceDictionary , com o Switch objeto que controla qual ContentView objeto será definido como o EmptyView valor da propriedade.This XAML defines two ContentView objects in the page-level ResourceDictionary, with the Switch object controlling which ContentView object will be set as the EmptyView property value. Quando o Switch é alternado, o OnEmptyViewSwitchToggled manipulador de eventos executa o ToggleEmptyView método:When the Switch is toggled, the OnEmptyViewSwitchToggled event handler executes the ToggleEmptyView method:

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

O ToggleEmptyView método define a EmptyView Propriedade do collectionView objeto como um dos dois ContentView objetos armazenados no ResourceDictionary , com base no valor da Switch.IsToggled propriedade.The ToggleEmptyView method sets the EmptyView property of the collectionView object to one of the two ContentView objects stored in the ResourceDictionary, based on the value of the Switch.IsToggled property. Quando o SearchBar executa o FilterCommand , a coleção exibida pelo CollectionView é filtrada para o termo de pesquisa armazenado na SearchBar.Text propriedade.When the SearchBar executes the FilterCommand, the collection displayed by the CollectionView is filtered for the search term stored in the SearchBar.Text property. Se a operação de filtragem não gerar dados, o ContentView objeto definido como a EmptyView propriedade será exibido:If the filtering operation yields no data, the ContentView object set as the EmptyView property is displayed:

Captura de tela de uma lista vertical CollectionView com exibições vazias trocadas, no iOS e no AndroidScreenshot of a CollectionView vertical list with swapped empty views, on iOS and Android

Para obter mais informações sobre dicionários de recursos, consulte :::no-loc(Xamarin.Forms)::: dicionários de recursos.For more information about resource dictionaries, see :::no-loc(Xamarin.Forms)::: Resource Dictionaries.

Escolha um EmptyViewTemplate em tempo de execuçãoChoose an EmptyViewTemplate at runtime

A aparência do EmptyView pode ser escolhida em tempo de execução, com base em seu valor, definindo a CollectionView.EmptyViewTemplate propriedade como um DataTemplateSelector objeto:The appearance of the EmptyView can be chosen at runtime, based on its value, by setting the CollectionView.EmptyViewTemplate property to a DataTemplateSelector object:

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

Este é o código C# equivalente:The equivalent C# code is:

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

A EmptyView propriedade é definida como a SearchBar.Text propriedade e a EmptyViewTemplate propriedade é definida como um SearchTermDataTemplateSelector objeto.The EmptyView property is set to the SearchBar.Text property, and the EmptyViewTemplate property is set to a SearchTermDataTemplateSelector object.

Quando o SearchBar executa o FilterCommand , a coleção exibida pelo CollectionView é filtrada para o termo de pesquisa armazenado na SearchBar.Text propriedade.When the SearchBar executes the FilterCommand, the collection displayed by the CollectionView is filtered for the search term stored in the SearchBar.Text property. Se a operação de filtragem não gerar dados, o DataTemplate escolhido pelo SearchTermDataTemplateSelector objeto será definido como a EmptyViewTemplate propriedade e exibido.If the filtering operation yields no data, the DataTemplate chosen by the SearchTermDataTemplateSelector object is set as the EmptyViewTemplate property and displayed.

O exemplo a seguir mostra a SearchTermDataTemplateSelector classe:The following example shows the SearchTermDataTemplateSelector class:

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

A SearchTermTemplateSelector classe define DefaultTemplate e OtherTemplate DataTemplate Propriedades que são definidas para modelos de dados diferentes.The SearchTermTemplateSelector class defines DefaultTemplate and OtherTemplate DataTemplate properties that are set to different data templates. A OnSelectTemplate substituição retorna DefaultTemplate , que exibe uma mensagem para o usuário, quando a consulta de pesquisa não é igual a "xamarin".The OnSelectTemplate override returns DefaultTemplate, which displays a message to the user, when the search query isn't equal to "xamarin". Quando a consulta de pesquisa é igual a "xamarin", a OnSelectTemplate substituição retorna OtherTemplate , que exibe uma mensagem básica ao usuário:When the search query is equal to "xamarin", the OnSelectTemplate override returns OtherTemplate, which displays a basic message to the user:

Captura de tela de uma seleção de modelo de exibição vazia do tempo de execução CollectionView, no iOS e no AndroidScreenshot of a CollectionView runtime empty view template selection, on iOS and Android

Para obter mais informações sobre seletores de modelo de dados, consulte criar um :::no-loc(Xamarin.Forms)::: DataTemplateSelector.For more information about data template selectors, see Create a :::no-loc(Xamarin.Forms)::: DataTemplateSelector.