Xamarin.Forms CollectionView EmptyView

Download Sample サンプルをダウンロードします

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

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

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

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

Note

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

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

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

プロパティをEmptyView文字列に設定できます。このプロパティは、プロパティがnull指定されている場合ItemsSource、またはプロパティで指定されたコレクションがnull空または空の場合にItemsSource表示されます。 次の 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");

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

Screenshot of a CollectionView vertical list with a text empty view, on iOS and Android

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

プロパティをEmptyViewビューに設定できます。このビューは、プロパティがnull指定されている場合ItemsSource、またはプロパティで指定されたコレクションがnull空または空の場合にItemsSource表示されます。 これは、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 設定が表示されます。

Screenshot of a CollectionView vertical list with custom empty view, on iOS and Android

データが使用できないときにテンプレート化されたカスタム型を表示する

このプロパティはEmptyView、カスタム型に設定できます。そのテンプレートは、プロパティがあるnull場合ItemsSource、またはプロパティで指定されたコレクションがnull空または空の場合にItemsSource表示されます。 プロパティはEmptyViewTemplate、の外観EmptyViewを定義する a DataTemplate に設定できます。 次の 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フィルター処理されます。 フィルター処理操作でデータが生成されない場合は、LabelDataTemplateプロパティ値としてEmptyViewTemplate設定されている定義されたデータが表示されます。

Screenshot of a CollectionView vertical list with an empty view template, on iOS and Android

Note

データが使用できないときにテンプレート化されたカスタム型を表示する場合、 EmptyViewTemplate プロパティは複数の子ビューを含むビューに設定できます。

実行時に EmptyView を選択する

データが使用できないときに表示されるEmptyViewビューは、オブジェクトとしてContentViewResourceDictionary定義できます。 その 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 では、ページ レベルResourceDictionaryで 2 つのContentViewオブジェクトが定義され、Switchオブジェクトによってプロパティ値として設定されるオブジェクトがEmptyView制御ContentViewされます。 Switch切り替えると、イベント ハンドラーはOnEmptyViewSwitchToggledメソッドをToggleEmptyView実行します。

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

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

Screenshot of a CollectionView vertical list with swapped empty views, on iOS and Android

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

実行時に EmptyViewTemplate を選択する

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

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

クラスは SearchTermTemplateSelectorDefaultTemplate 異なるデータ テンプレートに設定されるプロパティを定義し OtherTemplateDataTemplate 、プロパティを定義します。 オーバーライドは OnSelectTemplate 、検索クエリが "xamarin" と等しくない場合に、ユーザーにメッセージを表示する返 DefaultTemplateします。 検索クエリが "xamarin" と等しい場合、 OnSelectTemplate オーバーライドによって返 OtherTemplateされ、ユーザーに基本的なメッセージが表示されます。

Screenshot of a CollectionView runtime empty view template selection, on iOS and Android

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