:::no-loc(Xamarin.Forms)::: CollectionView EmptyView:::no-loc(Xamarin.Forms)::: CollectionView EmptyView

サンプルのダウンロードサンプルのダウンロードDownload Sample Download the sample

CollectionView 表示するデータがない場合にユーザーフィードバックを提供するために使用できる次のプロパティを定義します。CollectionView defines the following properties that can be used to provide user feedback when there's no data to display:

  • EmptyView型の、 object プロパティがのときに表示される文字列、バインディング、またはビュー、または ItemsSource null プロパティによって指定されたコレクション ItemsSource が null または空の場合に表示される。EmptyView, of type object, the string, binding, or view that will be displayed when the ItemsSource property is null, or when the collection specified by the ItemsSource property is null or empty. 既定値は null です。The default value is null.
  • EmptyViewTemplate型の DataTemplate 。指定したの書式設定に使用するテンプレート EmptyView 。EmptyViewTemplate, of type DataTemplate, the template to use to format the specified EmptyView. 既定値は null です。The default value is null.

これらのプロパティは、オブジェクトによって支えられてい BindableProperty ます。これは、プロパティをデータバインディングのターゲットにできることを意味します。These properties are backed by BindableProperty objects, which means that the properties can be targets of data bindings.

プロパティを設定するための主な使用シナリオで EmptyView は、に対するフィルター処理操作によってデータが得られ CollectionView ず、web サービスからデータを取得しているときにユーザーフィードバックが表示される場合に、ユーザーフィードバックが表示されます。The main usage scenarios for setting the EmptyView property are displaying user feedback when a filtering operation on a CollectionView yields no data, and displaying user feedback while data is being retrieved from a web service.

注意

プロパティは、 EmptyView 必要に応じて、対話型コンテンツを含むビューに設定できます。The EmptyView property can be set to a view that includes interactive content if required.

データ テンプレートの詳細については、「:::no-loc(Xamarin.Forms)::: のデータ テンプレート」を参照してください。For more information about data templates, see :::no-loc(Xamarin.Forms)::: Data Templates.

データが使用できないときに文字列を表示するDisplay a string when data is unavailable

プロパティは、プロパティ EmptyView がの場合 ItemsSource 、またはプロパティ null で指定されたコレクション ItemsSource がまたは空の場合に表示される文字列に設定でき null ます。The EmptyView property can be set to a string, which will be displayed when the ItemsSource property is null, or when the collection specified by the ItemsSource property is null or empty. 次の XAML は、このシナリオの例を示しています。The following XAML shows an example of this scenario:

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

これに相当する C# コードを次に示します。The equivalent C# code is:

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

その結果、データバインドコレクションがであるため、 null プロパティ値として設定された文字列が EmptyView 表示されます。The result is that, because the data bound collection is null, the string set as the EmptyView property value is displayed:

IOS および Android での空の表示テキストを含む CollectionView 縦の一覧のスクリーンショットScreenshot of a CollectionView vertical list with a text empty view, on iOS and Android

データが使用できないときにビューを表示するDisplay views when data is unavailable

プロパティは、プロパティ EmptyView がの場合 ItemsSource 、またはプロパティ null で指定されたコレクション ItemsSource がまたは空の場合に表示されるビューに設定でき null ます。The EmptyView property can be set to a view, which will be displayed when the ItemsSource property is null, or when the collection specified by the ItemsSource property is null or empty. 1つのビュー、または複数の子ビューを含むビューを指定できます。This can be a single view, or a view that contains multiple child views. 次の XAML の例は、 EmptyView 複数の子ビューを含むビューに設定されたプロパティを示しています。The following XAML example shows the EmptyView property set to a view that contains multiple child views:

<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 ます。In this example, what looks like a redundant ContentView has been added as the root element of the EmptyView. これは、内部的には、 EmptyView レイアウトのコンテキストを提供しないネイティブコンテナーにが追加されるためです :::no-loc(Xamarin.Forms)::: 。This is because internally, the EmptyView is added to a native container that doesn't provide any context for :::no-loc(Xamarin.Forms)::: layout. したがって、を構成するビューを配置するには、ルートレイアウトを EmptyView 追加する必要があります。その子は、ルートレイアウト内に配置できるレイアウトです。Therefore, to position the views that comprise your EmptyView, you must add a root layout, whose child is a layout that can position itself within the root layout.

これに相当する C# コードを次に示します。The equivalent C# code is:

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 ます。When the SearchBar executes the FilterCommand, the collection displayed by the CollectionView is filtered for the search term stored in the SearchBar.Text property. フィルター処理操作によってデータが生成されない場合、 StackLayout プロパティ値としてセット EmptyView が表示されます。If the filtering operation yields no data, the StackLayout set as the EmptyView property value is displayed:

IOS と Android 上のカスタムの空のビューを使用した CollectionView の一覧のスクリーンショットScreenshot of a CollectionView vertical list with custom empty view, on iOS and Android

データが使用できないときに、テンプレート化されたカスタム型を表示するDisplay a templated custom type when data is unavailable

プロパティは EmptyView カスタム型に設定できます。これは、プロパティがの場合 ItemsSource null 、またはプロパティで指定されたコレクション ItemsSource がまたは空の場合に、そのテンプレートが表示され null ます。The EmptyView property can be set to a custom type, whose template is displayed when the ItemsSource property is null, or when the collection specified by the ItemsSource property is null or empty. プロパティは、 EmptyViewTemplate DataTemplate の外観を定義するに設定でき EmptyView ます。The EmptyViewTemplate property can be set to a DataTemplate that defines the appearance of the EmptyView. 次の XAML は、このシナリオの例を示しています。The following XAML shows an example of this scenario:

<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# コードを次に示します。The equivalent C# code is:

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

型は、 FilterData Filter プロパティ、および対応するを定義し BindableProperty ます。The FilterData type defines a Filter property, and a corresponding 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 ます。The EmptyView property is set to a FilterData object, and the Filter property data binds to the SearchBar.Text property. がを実行すると、に SearchBar FilterCommand よって表示されるコレクション CollectionView は、プロパティに格納されている検索用語に対してフィルター処理され Filter ます。When the SearchBar executes the FilterCommand, the collection displayed by the CollectionView is filtered for the search term stored in the Filter property. フィルター処理操作によってデータが生成されない場合、 Label DataTemplate プロパティ値として設定されたで定義されているが EmptyViewTemplate 表示されます。If the filtering operation yields no data, the Label defined in the DataTemplate, that's set as the EmptyViewTemplate property value, is displayed:

IOS と Android の空のビューテンプレートを含む CollectionView の一覧のスクリーンショットScreenshot of a CollectionView vertical list with an empty view template, on iOS and Android

注意

データが使用できないときに、テンプレート化されたカスタム型を表示する場合は、 EmptyViewTemplate 複数の子ビューを含むビューにプロパティを設定できます。When displaying a templated custom type when data is unavailable, the EmptyViewTemplate property can be set to a view that contains multiple child views.

実行時に EmptyView を選択するChoose an EmptyView at runtime

データが使用できないときにとして表示されるビュー EmptyView は、 ContentView 内のオブジェクトとして定義でき ResourceDictionary ます。Views that will be displayed as an EmptyView when data is unavailable, can be defined as ContentView objects in a ResourceDictionary. この EmptyView プロパティは、 ContentView 実行時に何らかのビジネスロジックに基づいて、特定のに設定できます。The EmptyView property can then be set to a specific ContentView, based on some business logic, at runtime. 次の XAML は、このシナリオの例を示しています。The following XAML shows an example of this scenario:

<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 ます。オブジェクトは、 ContentView プロパティ値として設定するオブジェクトを制御し EmptyView ます。This XAML defines two ContentView objects in the page-level ResourceDictionary, with the Switch object controlling which ContentView object will be set as the EmptyView property value. Switchが切り替えられると、 OnEmptyViewSwitchToggled イベントハンドラーによってメソッドが実行され ToggleEmptyView ます。When the Switch is toggled, the OnEmptyViewSwitchToggled event handler executes the ToggleEmptyView method:

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

メソッドは、 ToggleEmptyView EmptyView collectionView プロパティの値に基づいて、オブジェクトのプロパティを ContentView 、に格納されている2つのオブジェクトのいずれかに設定し ResourceDictionary Switch.IsToggled ます。The ToggleEmptyView method sets the EmptyView property of the collectionView object to one of the two ContentView objects stored in the ResourceDictionary, based on the value of the Switch.IsToggled property. がを実行すると、に SearchBar FilterCommand よって表示されるコレクション CollectionView は、プロパティに格納されている検索用語に対してフィルター処理され SearchBar.Text ます。When the SearchBar executes the FilterCommand, the collection displayed by the CollectionView is filtered for the search term stored in the SearchBar.Text property. フィルター処理操作によってデータが生成されない場合、 ContentView プロパティとして設定されたオブジェクト EmptyView が表示されます。If the filtering operation yields no data, the ContentView object set as the EmptyView property is displayed:

IOS と Android で空のビューをスワップした CollectionView の一覧のスクリーンショットScreenshot of a CollectionView vertical list with swapped empty views, on iOS and Android

リソースディクショナリの詳細については、「 :::no-loc(Xamarin.Forms)::: リソースディクショナリ」を参照してください。For more information about resource dictionaries, see :::no-loc(Xamarin.Forms)::: Resource Dictionaries.

実行時に EmptyViewTemplate を選択するChoose an EmptyViewTemplate at runtime

の外観は、 EmptyView プロパティをオブジェクトに設定することによって、実行時に値に基づいて選択でき CollectionView.EmptyViewTemplate DataTemplateSelector ます。The appearance of the EmptyView can be chosen at runtime, based on its value, by setting the CollectionView.EmptyViewTemplate property to a DataTemplateSelector object:

<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# コードを次に示します。The equivalent C# code is:

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

プロパティが EmptyView プロパティに設定され、 SearchBar.Text EmptyViewTemplate プロパティがオブジェクトに設定されてい SearchTermDataTemplateSelector ます。The EmptyView property is set to the SearchBar.Text property, and the EmptyViewTemplate property is set to a SearchTermDataTemplateSelector object.

がを実行すると、に SearchBar FilterCommand よって表示されるコレクション CollectionView は、プロパティに格納されている検索用語に対してフィルター処理され SearchBar.Text ます。When the SearchBar executes the FilterCommand, the collection displayed by the CollectionView is filtered for the search term stored in the SearchBar.Text property. フィルター処理操作によってデータが生成されない場合、 DataTemplate オブジェクトによって選択されたがプロパティとし SearchTermDataTemplateSelector て設定さ EmptyViewTemplate れ、表示されます。If the filtering operation yields no data, the DataTemplate chosen by the SearchTermDataTemplateSelector object is set as the EmptyViewTemplate property and displayed.

クラスの例を次に示し SearchTermDataTemplateSelector ます。The following example shows the SearchTermDataTemplateSelector class:

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 さまざまなデータテンプレートに設定されるプロパティとプロパティを定義します。The SearchTermTemplateSelector class defines DefaultTemplate and OtherTemplate DataTemplate properties that are set to different data templates. OnSelectTemplate上書きは DefaultTemplate 、検索クエリが "xamarin" と等しくない場合に、ユーザーにメッセージを表示するを返します。The OnSelectTemplate override returns DefaultTemplate, which displays a message to the user, when the search query isn't equal to "xamarin". 検索クエリが "xamarin" と等しい場合、オーバーライドはを OnSelectTemplate 返します OtherTemplate 。これにより、ユーザーに基本的なメッセージが表示されます。When the search query is equal to "xamarin", the OnSelectTemplate override returns OtherTemplate, which displays a basic message to the user:

IOS と Android での CollectionView runtime の空のビューテンプレートの選択のスクリーンショットScreenshot of a CollectionView runtime empty view template selection, on iOS and Android

データテンプレートセレクターの詳細については、「 Create a :::no-loc(Xamarin.Forms)::: DataTemplateSelector」を参照してください。For more information about data template selectors, see Create a :::no-loc(Xamarin.Forms)::: DataTemplateSelector.