Xamarin.Forms CollectionView EmptyView

サンプルをダウンロードします。 サンプルをダウンロードする

CollectionView では、表示するデータがない場合にユーザー フィードバックを提供するために使用できる次のプロパティを定義します。

  • EmptyView、 型、文字列、バインディング、または プロパティが の場合に表示されるビュー、または プロパティで指定されたコレクションが または空の場合 object ItemsSource null ItemsSource null に表示されます。 既定値は null です。
  • EmptyViewTemplate型の DataTemplate 。指定した の書式を設定するために使用するテンプレート EmptyView 。 既定値は null です。

これらのプロパティは オブジェクトによってサポートされます。これは、プロパティがデータ バインディングのターゲット BindableProperty になることができます。

プロパティを設定するための主な使用シナリオは、 に対するフィルター処理操作でデータが生成されない場合にユーザー フィードバックを表示し、Web サービスからデータを取得している間にユーザーフィードバックを EmptyView CollectionView 表示することです。

注意

プロパティ EmptyView は、必要に応じて対話型コンテンツを含むビューに設定できます。

データ テンプレートの詳細については、「Xamarin.Forms のデータ テンプレート」を参照してください。

データが使用できない場合に文字列を表示する

プロパティは文字列に設定できます。これは、 プロパティが の場合、または プロパティで指定されたコレクションが または空の場合 EmptyView ItemsSource null ItemsSourcenull 表示されます。 次の XAML は、このシナリオの例を示しています。

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

これに相当する C# コードを次に示します。

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

その結果、データ バインド コレクションが なので、プロパティ値として設定 null された文字列 EmptyView が表示されます。

![iOS および Android 上のテキストが空のビューを含む CollectionView の垂直リストのスクリーンショット](emptyview-images/null-itemssource.pngテキストが空のビューを含む CollectionView の垂直リスト。

データが使用できない場合にビューを表示する

プロパティは、ビューに設定できます。ビューは、 プロパティが の場合、または プロパティで指定されたコレクションが または空の場合 EmptyView ItemsSource null ItemsSource null に表示されます。 1 つのビュー、または複数の子ビューを含むビューを指定できます。 次の XAML の例は、複数 EmptyView の子ビューを含むビューに設定された プロパティを示しています。

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

この例では、冗長と思える機能 ContentView が のルート要素として追加されています EmptyView 。 これは、内部的には、 がレイアウトのコンテキストを提供しないネイティブ コンテナー EmptyView に追加されるため Xamarin.Forms です。 したがって、 を構成するビューを配置するには、ルート レイアウトを追加する必要があります。その子は、自身をルート レイアウト内に配置できるレイアウト EmptyView です。

これに相当する C# コードを次に示します。

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

SearchBar を実行すると、 によって表示されるコレクションは、 プロパティに格納されている FilterCommand CollectionView 検索用語に対してフィルター処理 SearchBar.Text されます。 フィルター処理操作でデータが生成されない場合は、 StackLayout プロパティ値として EmptyView 設定が表示されます。

![iOS および Android 上のカスタム空のビューを含む CollectionView の垂直リストのスクリーンショット](emptyview-images/filter-multiple-views.pngカスタム空のビューを含む CollectionView の垂直リスト。

データが使用できない場合にテンプレートのカスタム型を表示する

プロパティは、カスタム型に設定できます。そのテンプレートは、 プロパティが の場合、または プロパティで指定されたコレクションが または空の場合 EmptyView ItemsSource null ItemsSource null に表示されます。 プロパティ EmptyViewTemplate は、 の外観 DataTemplate を定義する に設定できます EmptyView 。 次の XAML は、このシナリオの例を示しています。

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

これに相当する C# コードを次に示します。

SearchBar searchBar = new SearchBar { ... };
CollectionView collectionView = new CollectionView
{
    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 CollectionView 検索用語に対してフィルター処理 Filter されます。 フィルター処理操作でデータが生成されない場合、プロパティ値として設定されている で定義されている Label DataTemplate EmptyViewTemplate が表示されます。

![iOS および Android 上の空のビュー テンプレートを含む CollectionView の垂直リストのスクリーンショット](emptyview-images/emptyviewtemplate.png"CollectionView vertical list with empty view template" (空のビュー テンプレートを含む CollectionView の垂直リスト)

注意

データが使用できないときにテンプレートのカスタム型を表示する場合、 プロパティは、複数の子ビューを含む 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"
             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>

この XAML では、ページ レベルの に 2 つのオブジェクトを定義します。オブジェクトは、プロパティ値として設定されるオブジェクト ContentView ResourceDictionary Switch ContentViewEmptyView 制御します。 が切 Switch り替えらた場合、 OnEmptyViewSwitchToggled イベント ハンドラーは メソッドを実行 ToggleEmptyView します。

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

メソッドは、 プロパティの値に基づいて、 オブジェクトの プロパティを、 に格納されている 2 つのオブジェクト ToggleEmptyView EmptyViewcollectionView ContentView ResourceDictionary 1 つに設定 Switch.IsToggled します。 が SearchBar を実行すると、 によって表示されるコレクションは、 プロパティに格納されている FilterCommand CollectionView 検索用語に対してフィルター処理 SearchBar.Text されます。 フィルター処理操作でデータが生成されない場合は、 プロパティ ContentView として設定された EmptyView オブジェクトが表示されます。

![iOS および Android 上の、スワップされた空のビューを含む CollectionView の垂直リストのスクリーンショット](emptyview-images/swap.png入れ替えた空のビューを含む CollectionView の垂直リスト。

リソース ディクショナリの詳細については、「リソース ディクショナリ」 Xamarin.Forms を参照してください

実行時に EmptyViewTemplate を選択する

の外観は、 プロパティを オブジェクトに設定することで、実行時に値 EmptyView に基 CollectionView.EmptyViewTemplate づいて選択 DataTemplateSelector できます。

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

これに相当する C# コードを次に示します。

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

プロパティ EmptyView は プロパティに設定 SearchBar.Text され、 プロパティ EmptyViewTemplate は オブジェクトに設定 SearchTermDataTemplateSelector されます。

SearchBar を実行すると、 によって表示されるコレクションは、 プロパティに格納されている FilterCommand CollectionView 検索用語に対してフィルター処理 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 なる OtherTemplate DataTemplate データ テンプレートに設定される プロパティと プロパティを定義します。 オーバーライドは を返します。検索クエリが "xamarin" と等しくない場合、ユーザーに OnSelectTemplate DefaultTemplate メッセージが表示されます。 検索クエリが "xamarin" と等しい場合、オーバーライドによって が返され、ユーザーに基本的な OnSelectTemplate OtherTemplate メッセージが表示されます。

[![iOS および Android での CollectionView ランタイムの空のビュー テンプレート選択のスクリーンショット](emptyview-images/datatemplateselector.png"CollectionView でのランタイム空のビュー テンプレートの選択"。](emptyview-images/datatemplateselector-large.png#lightbox "CollectionView でのランタイムの空のビュー テンプレートの選択")

データ テンプレート セレクターの詳細については Xamarin.Forms 、「DataTemplateSelector の作成」を参照してください