Xamarin.Forms CarrosselVer EmptyView
CarouselView
define as seguintes propriedades que podem ser usadas para fornecer comentários do usuário quando não há dados a serem exibidos:
EmptyView
, do tipoobject
, a cadeia de caracteres, associação ou exibição que será exibida quando aItemsSource
propriedade fornull
, ou quando a coleção especificada pelaItemsSource
propriedade estivernull
ou vazia. O valor padrão énull
.EmptyViewTemplate
, do tipoDataTemplate
, o modelo a ser usado para formatar o especificadoEmptyView
. O valor padrão énull
.
Essas propriedades são apoiadas por BindableProperty
objetos, o que significa que as propriedades podem ser destinos de associações de dados.
Os principais cenários de uso para definir a propriedade são exibir comentários do EmptyView
usuário quando uma operação de filtragem em um CarouselView
não produz dados e exibir comentários do usuário enquanto os dados estão sendo recuperados de um serviço Web.
Observação
A EmptyView
propriedade pode ser definida como um modo de exibição que inclui conteúdo interativo, se necessário.
Para obter mais informações sobre modelos de dados, consulte Xamarin.Forms Modelos de dados.
Exibir uma cadeia de caracteres quando os dados não estiverem disponíveis
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 estiver null
ou vazia. O XAML a seguir mostra um exemplo desse cenário:
<CarouselView ItemsSource="{Binding EmptyMonkeys}"
EmptyView="No items to display." />
Este é o código C# equivalente:
CarouselView carouselView = new CarouselView
{
EmptyView = "No items to display."
};
carouselView.SetBinding(ItemsView.ItemsSourceProperty, "EmptyMonkeys");
O resultado é que, como a coleção vinculada a dados é null
, a cadeia de caracteres definida como o valor da EmptyView
propriedade é exibida.
Visualizar exibições quando os dados não estiverem disponíveis
A propriedade EmptyView
pode ser definida como um modo de exibição, que será exibido quando a propriedade ItemsSource
for null
ou quando a coleção especificada pela propriedade ItemsSource
fornull
ou vazia. Pode ser uma exibição única ou uma exibição que contém várias exibições filho. O exemplo XAML a seguir mostra a propriedade EmptyView
definida como uma exibição que contém várias exibições filho:
<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>
Neste exemplo, o EmptyView
que parece redundante ContentView
foi adicionado como o elemento raiz do . Isso ocorre porque, internamente, o EmptyView
é adicionado a um contêiner nativo que não fornece nenhum contexto para Xamarin.Forms o layout. Portanto, para posicionar os modos de exibição que compõem o , EmptyView
você deve adicionar um layout raiz, cujo filho é um layout que pode se posicionar dentro do layout raiz.
Este é o código C# equivalente:
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");
Quando o SearchBar
executa o FilterCommand
, a coleção exibida pelo é filtrada para CarouselView
o termo de pesquisa armazenado na SearchBar.Text
propriedade. Se a operação de filtragem não produzir dados, o StackLayout
conjunto como o valor da EmptyView
propriedade será exibido.
Exibir um tipo personalizado de modelo quando os dados não estiverem disponíveis
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 está null
ou vazia. A EmptyViewTemplate
propriedade pode ser definida como a DataTemplate
que define a aparência do EmptyView
. O XAML a seguir mostra um exemplo desse cenário:
<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>
Este é o código C# equivalente:
SearchBar searchBar = new SearchBar { ... };
CarouselView carouselView = new CarouselView
{
EmptyView = new FilterData { Filter = searchBar.Text },
EmptyViewTemplate = new DataTemplate(() =>
{
return new Label { ... };
})
};
O FilterData
tipo define uma Filter
propriedade e um correspondente 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 dados da Filter
propriedade se vinculam à SearchBar.Text
propriedade. Quando o SearchBar
executa o FilterCommand
, a coleção exibida pelo é filtrada para CarouselView
o termo de pesquisa armazenado na Filter
propriedade. Se a operação de filtragem não produzir dados, o Label
definido no DataTemplate
, que é definido como o valor da EmptyViewTemplate
propriedade, será exibido.
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 um modo de exibição que contém vários modos de exibição filho.
Escolher um EmptyView em tempo de execução
Exibições que serão exibidas como um EmptyView
quando os dados não estiverem disponíveis podem ser definidas como objetos ContentView
em um ResourceDictionary
. A propriedade EmptyView
pode ser definida como uma ContentView
específica, com base em alguma lógica de negócios, em tempo de execução. O exemplo XAML a seguir mostra um exemplo desse cenário:
<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>
Esse XAML define dois ContentView
objetos no nível ResourceDictionary
da página, com o Switch
objeto controlando qual ContentView
objeto será definido como o valor da EmptyView
propriedade. Quando o Switch
é alternado, o manipulador de eventos OnEmptyViewSwitchToggled
executa o método ToggleEmptyView
:
void ToggleEmptyView(bool isToggled)
{
carouselView.EmptyView = isToggled ? Resources["BasicEmptyView"] : Resources["AdvancedEmptyView"];
}
O método ToggleEmptyView
define a propriedade EmptyView
do objeto carouselView
como um dos dois objetos ContentView
armazenados no ResourceDictionary
, com base no valor da propriedade Switch.IsToggled
. Quando o SearchBar
executa o FilterCommand
, a coleção exibida pelo é filtrada para CarouselView
o termo de pesquisa armazenado na SearchBar.Text
propriedade. Se a operação de filtragem não produzir dados, o ContentView
objeto definido como a EmptyView
propriedade será exibido.
Para obter mais informações sobre dicionários de recursos, consulte Xamarin.Forms Dicionários de recursos.
Escolha um EmptyViewTemplate em tempo de execução
A aparência do EmptyView
pode ser escolhida em tempo de execução, com base em seu valor, definindo a CarouselView.EmptyViewTemplate
propriedade como um DataTemplateSelector
objeto:
<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>
Este é o código C# equivalente:
SearchBar searchBar = new SearchBar { ... };
CarouselView carouselView = new CarouselView()
{
EmptyView = searchBar.Text,
EmptyViewTemplate = new SearchTermDataTemplateSelector { ... }
};
carouselView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");
A EmptyView
propriedade é definida como a SearchBar.Text
propriedade e a EmptyViewTemplate
propriedade é definida como um SearchTermDataTemplateSelector
objeto.
Quando o SearchBar
executa o FilterCommand
, a coleção exibida pelo é filtrada para CarouselView
o termo de pesquisa armazenado na SearchBar.Text
propriedade. Se a operação de filtragem não produzir dados, o DataTemplate
escolhido pelo SearchTermDataTemplateSelector
objeto será definido como a EmptyViewTemplate
propriedade e exibido.
O exemplo a seguir mostra a classe 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;
}
}
A classe SearchTermTemplateSelector
define as propriedades DefaultTemplate
e OtherTemplate
do DataTemplate
como modelos de dados diferentes. A OnSelectTemplate
substituição retorna DefaultTemplate
, que exibe uma mensagem para o usuário, quando a consulta de pesquisa não é igual a "xamarin". Quando a consulta de pesquisa é igual a "xamarin", a OnSelectTemplate
substituição retorna OtherTemplate
, que exibe uma mensagem básica para o usuário.
Para obter mais informações sobre seletores de modelo de dados, consulte Criar um Xamarin.Forms DataTemplateSelector.