Condividi tramite

Xamarin.Forms CarouselView EmptyView

  • Articolo

CarouselView definisce le proprietà seguenti che possono essere usate per fornire commenti e suggerimenti degli utenti quando non sono presenti dati da visualizzare:

  • EmptyView, di tipo object, la stringa, l'associazione o la vista che verrà visualizzata quando la proprietà è nullo quando la ItemsSource raccolta specificata dalla ItemsSource proprietà è null o vuota. Il valore predefinito è null.
  • EmptyViewTemplate, di tipo DataTemplate, il modello da usare per formattare l'oggetto specificato EmptyView. Il valore predefinito è null.

Queste proprietà sono supportate da BindableProperty oggetti , il che significa che le proprietà possono essere destinazioni di data binding.

Gli scenari di utilizzo principali per l'impostazione della EmptyView proprietà visualizzano commenti e suggerimenti degli utenti quando un'operazione di filtro su un CarouselView non produce dati e visualizza il feedback degli utenti durante il recupero dei dati da un servizio Web.

Nota

La EmptyView proprietà può essere impostata su una visualizzazione che include contenuto interattivo, se necessario.

Per altre informazioni sui modelli di dati, vedere Xamarin.Forms Modelli di dati.

Visualizzare una stringa quando i dati non sono disponibili

La EmptyView proprietà può essere impostata su una stringa, che verrà visualizzata quando la proprietà è nullo quando la ItemsSource raccolta specificata dalla ItemsSource proprietà è null o vuota. Il codice XAML seguente illustra un esempio di questo scenario:

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

Il codice C# equivalente è il seguente:

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

Il risultato è che, poiché la raccolta associata a dati è null, viene visualizzata la stringa impostata come valore della EmptyView proprietà.

Visualizzare le visualizzazioni quando i dati non sono disponibili

La EmptyView proprietà può essere impostata su una visualizzazione, che verrà visualizzata quando la proprietà è nullo quando l'insieme ItemsSource ItemsSource specificato dalla proprietà è null o vuoto. Può trattarsi di una singola visualizzazione o di una visualizzazione che contiene più visualizzazioni figlio. L'esempio XAML seguente mostra la EmptyView proprietà impostata su una visualizzazione che contiene più visualizzazioni figlio:

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

In questo esempio, l'aspetto di una ridondanza ContentView è stato aggiunto come elemento radice di EmptyView. Questo perché internamente, EmptyView viene aggiunto a un contenitore nativo che non fornisce alcun contesto per Xamarin.Forms il layout. Pertanto, per posizionare le visualizzazioni che comprendono EmptyView, è necessario aggiungere un layout radice, il cui elemento figlio è un layout che può posizionarsi all'interno del layout radice.

Il codice C# equivalente è il seguente:

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

SearchBar Quando esegue , l'insieme FilterCommandvisualizzato da CarouselView viene filtrato per il termine di ricerca archiviato nella SearchBar.Text proprietà . Se l'operazione di filtro non restituisce dati, viene visualizzato il StackLayout set come valore della EmptyView proprietà.

Visualizzare un tipo personalizzato basato su modelli quando i dati non sono disponibili

La EmptyView proprietà può essere impostata su un tipo personalizzato, il cui modello viene visualizzato quando la proprietà è nullo quando la ItemsSource raccolta specificata dalla ItemsSource proprietà è null o vuota. La EmptyViewTemplate proprietà può essere impostata su un DataTemplate oggetto che definisce l'aspetto dell'oggetto EmptyView. Il codice XAML seguente illustra un esempio di questo scenario:

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

Il codice C# equivalente è il seguente:

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

Il FilterData tipo definisce una Filter proprietà e un oggetto corrispondente 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); }
    }
}

La EmptyView proprietà è impostata su un FilterData oggetto e i dati della Filter proprietà vengono associati alla SearchBar.Text proprietà . SearchBar Quando esegue , l'insieme FilterCommandvisualizzato da CarouselView viene filtrato per il termine di ricerca archiviato nella Filter proprietà . Se l'operazione di filtro non restituisce dati, viene visualizzato l'oggetto Label definito in DataTemplate, impostato come valore della EmptyViewTemplate proprietà.

Nota

Quando si visualizza un tipo personalizzato basato su modelli quando i dati non sono disponibili, la EmptyViewTemplate proprietà può essere impostata su una visualizzazione che contiene più visualizzazioni figlio.

Scegliere un controllo EmptyView in fase di esecuzione

Le viste che verranno visualizzate come un EmptyView oggetto quando i dati non sono disponibili, possono essere definite come ContentView oggetti in un oggetto ResourceDictionary. La EmptyView proprietà può quindi essere impostata su un oggetto specifico ContentView, in base a una logica di business in fase di esecuzione. L'esempio XAML seguente illustra un esempio di questo scenario:

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

Questo codice XAML definisce due ContentView oggetti nel livello ResourceDictionarydi pagina , con il controllo dell'oggetto Switch che ContentView verrà impostato come valore della EmptyView proprietà. Quando l'oggetto Switch viene attivato o disattivato, il OnEmptyViewSwitchToggled gestore eventi esegue il ToggleEmptyView metodo :

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

Il ToggleEmptyView metodo imposta la EmptyView proprietà dell'oggetto carouselView su uno dei due ContentView oggetti archiviati in ResourceDictionary, in base al valore della Switch.IsToggled proprietà . SearchBar Quando esegue , l'insieme FilterCommandvisualizzato da CarouselView viene filtrato per il termine di ricerca archiviato nella SearchBar.Text proprietà . Se l'operazione di filtro non restituisce dati, l'oggetto ContentView impostato come EmptyView proprietà viene visualizzato.

Per altre informazioni sui dizionari risorse, vedere Xamarin.Forms Dizionari risorse.

Scegliere un controllo EmptyViewTemplate in fase di esecuzione

L'aspetto EmptyView di può essere scelto in fase di esecuzione, in base al relativo valore, impostando la CarouselView.EmptyViewTemplate proprietà su un DataTemplateSelector oggetto :

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

Il codice C# equivalente è il seguente:

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

La EmptyView proprietà è impostata sulla SearchBar.Text proprietà e la EmptyViewTemplate proprietà è impostata su un SearchTermDataTemplateSelector oggetto .

SearchBar Quando esegue , l'insieme FilterCommandvisualizzato da CarouselView viene filtrato per il termine di ricerca archiviato nella SearchBar.Text proprietà . Se l'operazione di filtro non restituisce dati, l'oggetto DataTemplate scelto dall'oggetto SearchTermDataTemplateSelector viene impostato come EmptyViewTemplate proprietà e visualizzato.

L'esempio seguente illustra la SearchTermDataTemplateSelector classe :

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 classe definisce DefaultTemplate e OtherTemplate DataTemplate proprietà impostate su modelli di dati diversi. L'override OnSelectTemplate restituisce DefaultTemplate, che visualizza un messaggio all'utente, quando la query di ricerca non è uguale a "xamarin". Quando la query di ricerca è uguale a "xamarin", l'override OnSelectTemplate restituisce OtherTemplate, che visualizza un messaggio di base all'utente.

Per altre informazioni sui selettori di modelli di dati, vedere Creare un Xamarin.Forms oggetto DataTemplateSelector.