Aracılığıyla paylaş

Xamarin.Forms CarouselView EmptyView

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

  • EmptyView, türünde object, özelliği olduğunda ItemsSource veya özelliği nulltarafından ItemsSource null belirtilen koleksiyon boş olduğunda görüntülenecek dize, bağlama veya görünüm. Varsayılan değer şudur: null.
  • EmptyViewTemplate, türündeki DataTemplate, belirtilen EmptyViewbiçimlendirmek için kullanılacak şablon. Varsayılan değer şudur: null.

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

Özelliği ayarlamak EmptyView için temel kullanım senaryoları, bir filtre işlemi CarouselView veri vermediğinde kullanıcı geri bildirimini görüntülemek ve bir web hizmetinden veri alınırken kullanıcı geri bildirimini görüntülemektir.

Not

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 . Veri Şablonları.

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

EmptyView özelliği, özelliği olduğunda ItemsSource veya özelliği nulltarafından belirtilen koleksiyon boş olduğunda görüntülenecek bir dizeye ItemsSource null ayarlanabilir. Aşağıdaki XAML bu senaryonun bir örneğini gösterir:

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

Eşdeğer C# kodu:

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

Sonuç olarak, veri bağlı koleksiyonu olduğundan null, özellik değeri olarak EmptyView ayarlanan dize görüntülenir.

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

EmptyView özelliği, özelliği olduğunda ItemsSource veya özelliği nulltarafından belirtilen koleksiyon boş olduğunda görüntülenecek bir görünüme ItemsSource null 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, birden çok alt görünüm içeren bir görünüme ayarlanmış özelliği gösterir 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>

Bu örnekte, yedekli ContentView gibi görünen şey öğesinin kök öğesi EmptyViewolarak eklenmiştir. Bunun nedeni, dahili olarak düzeninin EmptyView bağlamını Xamarin.Forms sağlamayan bir yerel kapsayıcıya eklenmesidir. Bu nedenle, öğesini EmptyViewoluşturan görünümleri konumlandırmak için, alt öğesi kök düzenin içinde kendisini konumlandırabilen bir düzen olan bir kök düzeni eklemeniz gerekir.

Eşdeğer C# kodu:

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 yürütürkenFilterCommand, tarafından CarouselView görüntülenen koleksiyon özelliğinde SearchBar.Text depolanan arama terimi için filtrelenmiş durumdadır. Filtreleme işlemi veri vermezse, StackLayout özellik değeri olarak EmptyView kümesi görüntülenir.

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

EmptyView özelliği, özelliği olduğunda ItemsSource veya özelliği nulltarafından belirtilen koleksiyon boş olduğunda şablonu görüntülenen özel bir türe ItemsSource null ayarlanabilir. özelliği, EmptyViewTemplate görünümünü EmptyViewtanımlayan bir DataTemplate olarak ayarlanabilir. Aşağıdaki XAML bu senaryonun bir örneğini gösterir:

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

Eşdeğer C# kodu:

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

türü FilterData bir Filter özelliği ve buna karşılık gelen BindablePropertybir öğesini tanımlar:

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 özelliği bir FilterData nesneye ayarlanır ve Filter özellik verileri özelliğine SearchBar.Text bağlanır. SearchBar yürütürkenFilterCommand, tarafından CarouselView görüntülenen koleksiyon özelliğinde Filter depolanan arama terimi için filtrelenmiş durumdadır. Filtreleme işlemi veri vermezse, Label içinde tanımlanan DataTemplateve özellik değeri olarak EmptyViewTemplate ayarlanan değeri görüntülenir.

Not

Veriler kullanılamadığında şablonlu bir özel tür görüntülenirken, EmptyViewTemplate özellik birden çok alt görünüm içeren bir görünüme ayarlanabilir.

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

Veriler kullanılamadığında olarak EmptyView görüntülenecek görünümler, içindeki ResourceDictionarynesneler olarak ContentView tanımlanabilir. Özelliği EmptyView daha sonra çalışma zamanında bazı iş mantığına göre belirli ContentViewbir olarak ayarlanabilir. Aşağıdaki XAML örneği bu senaryonun bir örneğini gösterir:

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

Bu XAML, sayfa düzeyinde ResourceDictionaryiki ContentView nesne tanımlar ve nesne, hangi ContentView nesnenin Switch EmptyView özellik değeri olarak ayarlandığını denetler. Switch iki durumlu olduğunda, OnEmptyViewSwitchToggled olay işleyicisi yöntemini yürütürToggleEmptyView:

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

yöntemi, nesnesinin carouselView özelliğini, özelliğinin değerine göre içinde ResourceDictionarydepolanan iki ContentView nesneden Switch.IsToggled birine ayarlarEmptyView.ToggleEmptyView SearchBar yürütürkenFilterCommand, tarafından CarouselView görüntülenen koleksiyon özelliğinde SearchBar.Text depolanan arama terimi için filtrelenmiş durumdadır. Filtreleme işlemi veri vermezse, ContentView özellik olarak EmptyView ayarlanan nesne görüntülenir.

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

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

öğesinin EmptyView görünümü, değerine göre çalışma zamanında özelliği bir DataTemplateSelector nesne olarak ayarlanarak CarouselView.EmptyViewTemplate seçilebilir:

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

Eşdeğer C# kodu:

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

EmptyView özelliği özelliğineSearchBar.Text, EmptyViewTemplate özelliği ise bir SearchTermDataTemplateSelector nesnesine ayarlanır.

SearchBar yürütürkenFilterCommand, tarafından CarouselView görüntülenen koleksiyon özelliğinde SearchBar.Text depolanan arama terimi için filtrelenmiş durumdadır. Filtreleme işlemi veri vermezse, DataTemplate nesne tarafından SearchTermDataTemplateSelector seçilen özellik olarak EmptyViewTemplate ayarlanır ve görüntülenir.

Aşağıdaki örnekte sınıfı gösterilmektedir 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 sınıfı, farklı veri şablonlarına ayarlanmış ve OtherTemplate DataTemplate özelliklerini tanımlarDefaultTemplate. Geçersiz OnSelectTemplate kılma, DefaultTemplatearama sorgusu "xamarin" ile eşit olmadığında kullanıcıya bir ileti görüntüleyen döndürür. Arama sorgusu "xamarin" değerine eşit olduğunda geçersiz kılma, OnSelectTemplate kullanıcıya temel bir ileti görüntüleyen değerini döndürür OtherTemplate.

Veri şablonu seçicileri hakkında daha fazla bilgi için bkz. DataTemplateSelector oluşturmaXamarin.Forms.

  • Last updated on