Xamarin.Forms CarouselView EmptyView

發行項
03/08/2024

Download Sample 下載範例

CarouselView 定義下列屬性，這些屬性可用來在沒有任何數據顯示時提供使用者意見反應：

EmptyView、型object別為的字串、系結或檢視表，當屬性為 null時，或屬性所ItemsSource指定的集合為 null 或空白時，就會顯示ItemsSource該字串、系結或檢視。預設值是 null。
EmptyViewTemplate型 DataTemplate別為的範本，用來格式化指定的 EmptyView。預設值是 null。

這些屬性是由 BindableProperty 物件所支援，這表示屬性可以是數據系結的目標。

設定 EmptyView 屬性的主要使用案例是在篩選作業 CarouselView 產生任何數據時顯示使用者意見反應，以及在從 Web 服務擷取數據時顯示使用者意見反應。

注意

EmptyView屬性可以設定為視需要包含互動式內容的檢視。

如需數據範本的詳細資訊，請參閱 Xamarin.Forms 數據範本。

當數據無法使用時顯示字串

屬性EmptyView可以設定為字串，當屬性為 null時ItemsSource，或屬性所ItemsSource指定的集合為 null 或空白時，就會顯示此字串。下列 XAML 顯示此案例的範例：

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

對等的 C# 程式碼為：

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

結果是，因為數據系結集合是 null，所以會顯示為屬性值的 EmptyView 字串集。

當數據無法使用時顯示檢視

屬性EmptyView可以設定為檢視，當屬性為 null時ItemsSource，或屬性指定的ItemsSource集合為 null 或空白時，就會顯示該檢視。這可以是單一檢視或包含多個子檢視的檢視。下列 XAML 範例顯示 EmptyView 屬性設定為包含多個子檢視的檢視：

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

在此範例中，已新增備援 ContentView 專案做為的 EmptyView根元素。這是因為在內部， EmptyView 會新增至未提供任何版面配置 Xamarin.Forms 內容的原生容器。因此，若要放置組成的 EmptyView檢視，您必須新增根配置，其子系是可在根配置中定位本身的配置。

對等的 C# 程式碼為：

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當執行 FilterCommand時，所CarouselView顯示的集合會針對儲存在屬性中的SearchBar.Text搜尋字詞進行篩選。如果篩選作業不會產生任何數據，則會 StackLayout 顯示設定為 EmptyView 屬性值。

當數據無法使用時，顯示範本化自定義類型

屬性EmptyView可以設定為自定義類型，其樣板會在屬性為 null時ItemsSource顯示，或屬性指定的ItemsSource集合為 null 或空白時。 EmptyViewTemplate屬性可以設定為 DataTemplate ，定義的外觀EmptyView。下列 XAML 顯示此案例的範例：

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

對等的 C# 程式碼為：

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

型 FilterData 別會 Filter 定義屬性和對應的 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); }
    }
}

屬性 EmptyView 會設定為 FilterData 物件，而 Filter 屬性數據會系結至 SearchBar.Text 屬性。 SearchBar當執行 FilterCommand時，所CarouselView顯示的集合會針對儲存在屬性中的Filter搜尋字詞進行篩選。如果篩選作業不會產生任何數據， Label 則會顯示中 DataTemplate定義的，其設定為 EmptyViewTemplate 屬性值。

注意

當數據無法使用時顯示樣板化自定義類型時， EmptyViewTemplate 屬性可以設定為包含多個子檢視的檢視。

在運行時間選擇 EmptyView

當數據無法使用時，會顯示為 EmptyView 的檢視，可以定義為 ContentView 中的 ResourceDictionary物件。 EmptyView屬性接著可以在執行時間根據某些商業規則，設定為特定的 ContentView。下列 XAML 範例顯示此案例的範例：

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

這個 XAML 會在頁面層級ResourceDictionary定義兩個ContentView物件，而 Switch 物件會控制哪些ContentView物件將設定為 EmptyView 屬性值。 Switch切換時，OnEmptyViewSwitchToggled事件處理程式會ToggleEmptyView執行方法：

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

方法會ToggleEmptyView根據屬性的值Switch.IsToggled，將 EmptyView 對象的屬性carouselView設定為儲存在中ResourceDictionary之兩ContentView個物件的其中一個。 SearchBar當執行 FilterCommand時，所CarouselView顯示的集合會針對儲存在屬性中的SearchBar.Text搜尋字詞進行篩選。如果篩選作業不會產生任何數據， ContentView 則會顯示設定為 EmptyView 屬性的物件。

如需資源字典的詳細資訊，請參閱 Xamarin.Forms 資源字典。

在運行時間選擇 EmptyViewTemplate

您可以藉由將屬性設定CarouselView.EmptyViewTemplate為 DataTemplateSelector 物件，在執行時間根據其值來選擇的外觀EmptyView：

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

對等的 C# 程式碼為：

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

屬性 EmptyView 會設定為 SearchBar.Text 屬性，而 EmptyViewTemplate 屬性會設定為 SearchTermDataTemplateSelector 物件。

SearchBar當執行 FilterCommand時，所CarouselView顯示的集合會針對儲存在屬性中的SearchBar.Text搜尋字詞進行篩選。如果篩選作業不會產生任何數據， DataTemplate 則對象的 SearchTermDataTemplateSelector 選擇會設定為 EmptyViewTemplate 屬性並顯示。

下列範例顯示類別 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;
    }
}

類別 SearchTermTemplateSelector 會 DefaultTemplate 定義和 OtherTemplateDataTemplate 屬性，這些屬性會設定為不同的數據範本。當搜尋查詢不等於「xamarin」時，覆 OnSelectTemplate 寫會 DefaultTemplate傳回，向使用者顯示訊息。當搜尋查詢等於「xamarin」時，覆 OnSelectTemplate 寫會 OtherTemplate傳回，向用戶顯示基本訊息。

如需數據範本選取器的詳細資訊，請參閱建立 Xamarin.Forms DataTemplateSelector。

Xamarin.Forms CarouselView EmptyView

當數據無法使用時顯示字串

當數據無法使用時顯示檢視

當數據無法使用時，顯示範本化自定義類型

在運行時間選擇 EmptyView

在運行時間選擇 EmptyViewTemplate

相關連結

其他資源