Xamarin.Forms CollectionView EmptyView

Makale
12/02/2021
Okumak için 6 dakika

CollectionView görüntülenecek veri olmadığında Kullanıcı geri bildirimi sağlamak için kullanılabilecek aşağıdaki özellikleri tanımlar:

_ItemsView_EmptyView "Data-LinkType =" Absolute-path ">EmptyView , tür object , bağlama veya görünüm Xamarin_Forms EmptyView _ItemsView_ItemsSource" Data-linktype = "Absolute-path" >ItemsSource özelliği olduğunda ya da null özelliği tarafından belirtilen koleksiyon ItemsSourcenull olduğunda görüntülenecek olan görünüm. null varsayılan değerdir.
_ItemsView_EmptyViewTemplate "Data-LinkType =" Absolute-path ">, EmptyViewTemplate türü DataTemplate , belirtilen şekilde biçimlendirmek için kullanılacak şablon EmptyView . null varsayılan değerdir.

Bu özellikler nesneler tarafından desteklenir BindableProperty . Bu, özelliklerin veri bağlamalarının hedefleri olabileceği anlamına gelir.

_ItemsView_EmptyView Xamarin_Forms "Data-LinkType =" Absolute-path ">özelliğini ayarlamaya yönelik ana kullanım senaryoları, EmptyView bir veri oluşturulduğunda bir filtreleme işlemi CollectionView veri oluştururken ve veri bir Web hizmetinden alınırken Kullanıcı geri bildirimi görüntülenirken Kullanıcı geri bildirimlerini görüntülüyor.

Not

Xamarin_Forms _ItemsView_EmptyView "Data-LinkType =" Absolute-path ">EmptyView özelliği gerekirse etkileşimli içerik içeren bir görünüme ayarlanabilir.

Veri şablonları hakkında daha fazla bilgi için bkz Xamarin.Forms Data Templates ..

Veriler kullanılamadığında bir dize görüntüle

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

Eşdeğer C# kodu:

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

Sonuç olarak, veri bağlantılı koleksiyon, null Xamarin_Forms olarak ayarlanan dize null _ItemsView_EmptyView "Data-LinkType =" Absolute-path ">EmptyView özellik değeri görüntülenir:

metin boş görünümü olan bir CollectionView dikey listesinin ekran görüntüsünü görüntüleme, iOS ve Android

Veriler kullanılamadığında görünümleri görüntüle

Xamarin_Forms _ItemsView_EmptyView "Data-LinkType =" Absolute-path ">EmptyView özelliği, Xamarin_Forms EmptyView _ItemsView_ItemsSource" Data-LinkType = "Absolute-path" >ItemsSource özelliği olduğunda null veya özellik tarafından belirtilen koleksiyon ItemsSourcenull olduğunda görüntülenecek olan bir görünüme ayarlanabilir. Bu tek bir görünüm veya birden çok alt görünüm içeren bir görünüm olabilir. Aşağıdaki XAML örneği, EmptyView birden çok alt görünüm içeren bir görünüme ayarlanan özelliği gösterir:

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

Bu örnekte, ContentViewContentView "Data-LinkType =" Absolute-path ">_ItemsView_EmptyView Xamarin_Forms kök öğesi olarak yedekli EmptyView gibi görünür . Bunun nedeni, dahili olarak, EmptyView düzen için herhangi bir bağlam sağlamayan yerel bir kapsayıcıya eklenidir Xamarin.Forms . Bu nedenle, kendisini oluşturan görünümleri konumlandırmak için EmptyView , alt öğesi kök düzen içinde konumlandırılmayacak bir düzen olan kök Düzen eklemeniz gerekir.

Eşdeğer C# kodu:

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Öğesini yürüttüğünde, FilterCommand tarafından görünen koleksiyon, CollectionView Xamarin_Forms SearchBar _InputView_Text "Data-LinkType =" Absolute-path ">özelliğinde depolanan arama terimi için filtrelenir SearchBar.Text . Filtreleme işlemi hiç veri alıyorsa, StackLayout _ItemsView_EmptyView Xamarin_Forms olarak ayarlanan StackLayout "Data-LinkType =" Absolute-path ">EmptyView özellik değeri görüntülenir:

boş görünümü olan bir CollectionView dikey listesinin ekran görüntüsü, iOS ve Android birlikte görüntülenir

Veriler kullanılamadığında şablonlu özel bir tür görüntüle

Xamarin_Forms _ItemsView_EmptyView "Data-LinkType =" Absolute-path ">EmptyView özelliği, Xamarin_Forms EmptyView _ItemsView_ItemsSource" Data-LinkType = "Absolute-path" >ItemsSource özelliği olduğunda null veya özellik tarafından belirtilen koleksiyon ItemsSourcenull olduğunda, şablonu görüntülenecek olan özel bir tür olarak ayarlanabilir. Xamarin_Forms _ItemsView_EmptyViewTemplate "Data-LinkType =" Absolute-path ">EmptyViewTemplate özelliği, görünümünü tanımlayan bir öğesine ayarlanabilir DataTemplateEmptyView . Aşağıdaki XAML bu senaryoya bir örnek göstermektedir:

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

Eşdeğer C# kodu:

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

FilterDataTürü bir özelliği tanımlar Filter ve buna karşılık gelen 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); }
    }
}

Xamarin_Forms _ItemsView_EmptyView "Data-LinkType =" Absolute-path ">EmptyView özelliği bir nesne olarak ayarlanmıştır FilterData ve Filter özellik verileri Xamarin_Forms EmptyView _InputView_Text" Data-LinkType = "Absolute-path" >SearchBar.Text özelliğine bağlar. SearchBarÖğesini yürüttüğünde, FilterCommand tarafından görünen koleksiyon, CollectionView özelliğinde depolanan arama terimi için filtrelenir Filter . Filtreleme işlemi, Label içinde tanımlanan, DataTemplate Xamarin_Forms Label _ItemsView_EmptyViewTemplate "Data-LinkType =" absolute-path ">EmptyViewTemplate özellik değeri olarak ayarlanan bir veri üretir:

Not

Veriler kullanılamadığında şablonlu özel bir tür görüntülenirken, Xamarin_Forms _ItemsView_EmptyViewTemplate "Data-LinkType =" Absolute-path ">EmptyViewTemplate özelliği birden çok alt görünüm içeren bir görünüme ayarlanabilir.

Çalışma zamanında EmptyView seçin

Bir Xamarin_Forms olarak görüntülenecek Görünümler _ItemsView_EmptyView "Data-LinkType =" Absolute-path ">EmptyView veriler kullanılamadığında, ContentView bir içinde nesne olarak tanımlanabilir ResourceDictionary . EmptyViewDaha sonra özellik, ContentView çalışma zamanında bazı iş mantığına göre belirli bir şekilde ayarlanabilir. Aşağıdaki XAML bu senaryoya bir örnek göstermektedir:

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

Bu XAML, ContentViewResourceDictionarySwitchContentViewContentView "Data-LinkType =" Absolute-path ">EmptyView özellik değeri _ItemsView_EmptyView Xamarin_Forms olarak hangi nesnenin ayarlanacağını denetleyen nesne ile sayfa düzeyindeki iki nesneyi tanımlar . Açıldığında, SwitchOnEmptyViewSwitchToggled olay işleyicisi ToggleEmptyView yöntemini yürütür:

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

ToggleEmptyViewYöntemi, ToggleEmptyViewEmptyViewcollectionViewContentViewResourceDictionary Xamarin_Forms _Switch_IsToggled "Data-LinkType =" Absolute-path ">Switch.IsToggled özelliğinin değerine bağlı olarak, nesnenin Xamarin_Forms _ItemsView_EmptyView" Data-LinkType = "Absolute-path" >özelliğini içinde depolanan iki nesneden birine ayarlar. SearchBarÖğesini yürüttüğünde, FilterCommand tarafından görünen koleksiyon, CollectionView Xamarin_Forms SearchBar _InputView_Text "Data-LinkType =" Absolute-path ">özelliğinde depolanan arama terimi için filtrelenir SearchBar.Text . Filtreleme işlemi veri alıyorsa, ContentView özellik olarak ayarlanan nesne EmptyView görüntülenir:

bir CollectionView dikey listesinin ekran görüntüsü, bulunan boş görünümleri olan iOS ve Android bulunan boş görünümler

Kaynak sözlükleri hakkında daha fazla bilgi için bkz Xamarin.Forms Resource Dictionaries ..

Çalışma zamanında EmptyViewTemplate seçin

_ItemsView_EmptyView "Data-LinkType =" Absolute-path ">Xamarin_Forms görünümü, EmptyView Xamarin_Forms EmptyView _ItemsView_EmptyViewTemplate" Data-LinkType = "Absolute-path" >CollectionView.EmptyViewTemplate özelliğinin bir nesne olarak ayarlanarak çalışma zamanında, kendi değerine göre seçilebilir 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>

Eşdeğer C# kodu:

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

Xamarin_Forms _ItemsView_EmptyView "Data-LinkType =" Absolute-path ">EmptyView özelliği Xamarin_Forms EmptyView _InputView_Text" Data-LinkType = "Absolute-path" >SearchBar.Text özelliğine ayarlı ve Xamarin_Forms _ItemsView_EmptyViewTemplate "Data-LinkType =" Absolute-path ">EmptyViewTemplate özelliği bir SearchTermDataTemplateSelector nesneye ayarlanmış.

SearchBarÖğesini yürüttüğünde, FilterCommand tarafından görünen koleksiyon, CollectionView Xamarin_Forms SearchBar _InputView_Text "Data-LinkType =" Absolute-path ">özelliğinde depolanan arama terimi için filtrelenir SearchBar.Text . Filtreleme işlemi hiç veri alıyorsa, DataTemplate nesne tarafından seçilen, SearchTermDataTemplateSelectorDataTemplate "Data-LinkType =" absolute-path ">özelliği _ItemsView_EmptyViewTemplate Xamarin_Forms olarak ayarlanır EmptyViewTemplate ve görüntülenir.

Aşağıdaki örnek, sınıfını göstermektedir 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;
    }
}

SearchTermTemplateSelectorSınıfı, DefaultTemplateOtherTemplateDataTemplate farklı veri şablonları olarak ayarlanan özellikleri ve tanımlar. OnSelectTemplateGeçersiz kılma, DefaultTemplate arama sorgusu "Xamarin" değerine eşit olmadığında kullanıcıya bir ileti görüntüleyen geri döndürür. Arama sorgusu "Xamarin" değerine eşitse, OnSelectTemplate geçersiz kılma, OtherTemplate kullanıcıya temel bir ileti görüntüleyen ' ı döndürür.

bir CollectionView çalışma zamanı boş görünüm şablonu seçimi, iOS ve Android

Veri şablonu seçicileri hakkında daha fazla bilgi için bkz Create a Xamarin.Forms DataTemplateSelector ..

Xamarin.Forms CollectionView EmptyView

Lütfen deneyiminizi değerlendirin

Veriler kullanılamadığında bir dize görüntüle

Veriler kullanılamadığında görünümleri görüntüle

Veriler kullanılamadığında şablonlu özel bir tür görüntüle

Çalışma zamanında EmptyView seçin

Çalışma zamanında EmptyViewTemplate seçin

İlgili bağlantılar