Xamarin.Forms CollectionView EmptyView
Descarga del ejemploCollectionView define las siguientes propiedades que se pueden usar para proporcionar comentarios del usuario cuando no hay datos que mostrar:
- , de tipo , la cadena, el enlace o la vista que se mostrarán cuando la propiedad
EmptyViewobjectEmptyViewdata-linktype="absolute-path">de Xamarin_Forms _ItemsView_ItemsSource"ItemsSourcenullItemsSourcesea onullcuando la colección especificada por la propiedad esté o esté vacía. El valor predeterminado esnull. - _ItemsView_EmptyViewTemplate" data-linktype="absolute-path">, de tipo , la plantilla que se usará para dar formato
EmptyViewTemplateDataTemplatealEmptyViewespecificado. El valor predeterminado esnull.
Estas propiedades están copiadas por objetos , lo que significa que las propiedades BindableProperty pueden ser destinos de enlaces de datos.
Los escenarios de uso principales para establecer la propiedad Xamarin_Forms _ItemsView_EmptyView" data-linktype="absolute-path">muestran los comentarios del usuario cuando una operación de filtrado en no produce ningún dato y muestran los comentarios del usuario mientras se recuperan datos de un EmptyViewCollectionView servicio web.
Nota:
La propiedad Xamarin_Forms _ItemsView_EmptyView" data-linktype="absolute-path">se puede establecer en una vista que incluya contenido interactivo si es EmptyView necesario.
Para obtener más información sobre las plantillas de datos, vea Xamarin.Forms Data Templates .
Mostrar una cadena cuando los datos no están disponibles
La propiedad Xamarin_Forms _ItemsView_EmptyView" data-linktype="absolute-path">se puede establecer en una cadena, que se mostrará cuando la propiedad EmptyViewEmptyView data-linktype="absolute-path">de Xamarin_Forms _ItemsView_ItemsSource" ItemsSourcenullItemsSource sea , null o cuando la colección especificada por la propiedad esté o esté vacía. En el código XAML siguiente se muestra un ejemplo de este escenario:
<CollectionView ItemsSource="{Binding EmptyMonkeys}"
EmptyView="No items to display" />
El código de C# equivalente es el siguiente:
CollectionView collectionView = new CollectionView
{
EmptyView = "No items to display"
};
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "EmptyMonkeys");
El resultado es que, dado que la colección enlazada a datos es , se muestra la cadena establecida como el valor de propiedad null Xamarin_Forms null _ItemsView_EmptyView" data-linktype="absolute-path">: EmptyView
Mostrar vistas cuando los datos no están disponibles
La propiedad Xamarin_Forms se puede establecer en una vista, que se mostrará cuando la propiedad EmptyViewEmptyView data-linktype="absolute-path">de Xamarin_Forms _ItemsView_ItemsSource" ItemsSourcenullItemsSource sea , null o cuando la colección especificada por la propiedad esté o esté vacía. Puede ser una vista única o una vista que contenga varias vistas secundarias. En el ejemplo xaml siguiente se muestra EmptyView la propiedad establecida en una vista que contiene varias vistas secundarias:
<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>
En este ejemplo, se ha agregado lo que parece redundante como el elemento raíz de ContentView Xamarin_Forms ContentView _ItemsView_EmptyView" data-linktype="absolute-path">EmptyView . Esto se debe a que internamente, se EmptyView agrega a un contenedor nativo que no proporciona ningún contexto para el Xamarin.Forms diseño. Por lo tanto, para colocar las vistas que componen , debe agregar un diseño raíz, cuyo elemento secundario es un diseño que puede colocarse dentro EmptyView del diseño raíz.
El código de C# equivalente es el siguiente:
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");
Cuando ejecuta , la colección mostrada por se filtra para el término de búsqueda almacenado en la propiedad SearchBarFilterCommand Xamarin_Forms CollectionViewSearchBar _InputView_Text" data-linktype="absolute-path">. SearchBar.Text Si la operación de filtrado no produce ningún dato, se muestra el conjunto como el valor de propiedad Xamarin_Forms StackLayoutStackLayout _ItemsView_EmptyView" data-linktype="absolute-path">EmptyView propiedad:
y Android con vista vacía personalizadaMostrar un tipo personalizado con plantilla cuando los datos no están disponibles
La propiedad Xamarin_Forms se puede establecer en un tipo personalizado, cuya plantilla se muestra cuando la propiedad EmptyViewEmptyView data-linktype="absolute-path">de Xamarin_Forms _ItemsView_ItemsSource" ItemsSourcenullItemsSource es , null o cuando la colección especificada por la propiedad es o está vacía. La Xamarin_Forms _ItemsView_EmptyViewTemplate" data-linktype="absolute-path">EmptyViewTemplate se DataTemplate puede establecer en un que define la apariencia de EmptyView . En el código XAML siguiente se muestra un ejemplo de este escenario:
<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>
El código de C# equivalente es el siguiente:
SearchBar searchBar = new SearchBar { ... };
CollectionView collectionView = new CollectionView
{
EmptyView = new FilterData { Filter = searchBar.Text },
EmptyViewTemplate = new DataTemplate(() =>
{
return new Label { ... };
})
};
El FilterData tipo define una propiedad y un correspondiente FilterBindableProperty :
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); }
}
}
La propiedad Xamarin_Forms _ItemsView_EmptyView" data-linktype="absolute-path">se establece en un objeto y los datos de propiedad se enlazan a la propiedad EmptyViewFilterData Xamarin_Forms FilterEmptyView _InputView_Text" data-linktype="absolute-path">. SearchBar.Text Cuando ejecuta , la colección mostrada por se filtra para el SearchBar término de búsqueda almacenado en la propiedad FilterCommandCollectionViewFilter . Si la operación de filtrado no produce ningún dato, se muestra el definido en , que se establece como el valor de propiedad LabelDataTemplate Xamarin_Forms Label _ItemsView_EmptyViewTemplate" data-linktype="absolute-path">: EmptyViewTemplate
y Android con plantilla de vista vacíaNota:
Al mostrar un tipo personalizado con plantilla cuando los datos no están disponibles, la propiedad data-linktype="absolute-path">de Xamarin_Forms _ItemsView_EmptyViewTemplate" se puede establecer en una vista que contenga varias vistas EmptyViewTemplate secundarias.
Elegir un elemento EmptyView en tiempo de ejecución
Las vistas que se mostrarán como un objeto Xamarin_Forms _ItemsView_EmptyView" data-linktype="absolute-path">cuando los datos no estén EmptyView disponibles, ContentView se pueden definir como objetos en ResourceDictionary . A EmptyView continuación, la propiedad se puede establecer en un ContentView específico, en función de alguna lógica de negocios, en tiempo de ejecución. En el código XAML siguiente se muestra un ejemplo de este escenario:
<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>
Este XAML define dos objetos en el nivel de página , con el objeto que controla qué objeto se establecerá como el valor de propiedad ContentViewResourceDictionary Xamarin_Forms SwitchContentViewContentView _ItemsView_EmptyView" data-linktype="absolute-path">. EmptyView Cuando se Switch activa, el controlador OnEmptyViewSwitchToggled de eventos ejecuta el método ToggleEmptyView :
void ToggleEmptyView(bool isToggled)
{
collectionView.EmptyView = isToggled ? Resources["BasicEmptyView"] : Resources["AdvancedEmptyView"];
}
El método establece la propiedad Xamarin_Forms _ItemsView_EmptyView" data-linktype="absolute-path">del objeto en uno de los dos objetos almacenados en , basándose en el valor de la propiedad ToggleEmptyViewToggleEmptyViewEmptyView Xamarin_Forms collectionViewContentViewResourceDictionary _Switch_IsToggled" data-linktype="absolute-path">. Switch.IsToggled Cuando ejecuta , la colección mostrada por se filtra para el término de búsqueda almacenado en la propiedad SearchBarFilterCommand Xamarin_Forms CollectionViewSearchBar _InputView_Text" data-linktype="absolute-path">. SearchBar.Text Si la operación de filtrado no produce ningún dato, se muestra ContentView el objeto establecido como la propiedad EmptyView :
Para obtener más información sobre los diccionarios de recursos, vea Xamarin.Forms Resource Dictionaries .
Elegir una emptyViewTemplate en tiempo de ejecución
La apariencia de Xamarin_Forms _ItemsView_EmptyView" data-linktype="absolute-path">se puede elegir en tiempo de ejecución, en función de su valor, estableciendo la propiedad EmptyViewEmptyView Xamarin_Forms _ItemsView_EmptyViewTemplate" data-linktype="absolute-path">en CollectionView.EmptyViewTemplate un DataTemplateSelector objeto :
<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>
El código de C# equivalente es el siguiente:
SearchBar searchBar = new SearchBar { ... };
CollectionView collectionView = new CollectionView
{
EmptyView = searchBar.Text,
EmptyViewTemplate = new SearchTermDataTemplateSelector { ... }
};
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");
La propiedad Xamarin_Forms _ItemsView_EmptyView" data-linktype="absolute-path">se establece en la propiedad EmptyView Xamarin_Forms EmptyView _InputView_Text" data-linktype="absolute-path">y la propiedad SearchBar.Text Xamarin_Forms _ItemsView_EmptyViewTemplate" data-linktype="absolute-path">EmptyViewTemplateSearchTermDataTemplateSelector se establece en un objeto .
Cuando ejecuta , la colección mostrada por se filtra para el término de búsqueda almacenado en la propiedad SearchBarFilterCommand Xamarin_Forms CollectionViewSearchBar _InputView_Text" data-linktype="absolute-path">. SearchBar.Text Si la operación de filtrado no produce ningún dato, el objeto elegido por el objeto se establece como la propiedad DataTemplateSearchTermDataTemplateSelectorDataTemplate data-linktype="absolute-path >" de Xamarin_Forms _ItemsView_EmptyViewTemplate" y se EmptyViewTemplate muestra.
En el ejemplo siguiente se muestra la SearchTermDataTemplateSelector clase :
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;
}
}
La SearchTermTemplateSelector clase define las propiedades y que se establecen en diferentes plantillas de DefaultTemplateOtherTemplateDataTemplate datos. La invalidación devuelve , que muestra un mensaje al usuario, cuando la consulta de búsqueda OnSelectTemplate no es igual a DefaultTemplate "xamarin". Cuando la consulta de búsqueda es igual a "xamarin", la invalidación OnSelectTemplate devuelve , que muestra un mensaje básico al OtherTemplate usuario:
en iOS y Android Runtime, selección de plantilla de vista vacía enPara obtener más información sobre los selectores de plantillas de datos, vea Create a Xamarin.Forms DataTemplateSelector .