Как добавить средство выбора над CollectionView

Question

Я новичок в разработке Xamarin.Forms, поэтому я прошу прощения, если это базовый c вопрос. Ниже приведен готовый код для главной страницы Xamarin.Forms «ItemsPage.xaml»

. Я хочу добавить средство выбора над динамически отображаемым списком элементов.
Вопрос 1) Какой XAML я должен вставить, чтобы добавить сборщик? Я пробовал несколько вариантов, но xaml продолжает жаловаться.

Когда пользователь выбирает опцию в Pickerm, я хотел бы отфильтровать отображаемый список в CollectionView, чтобы показать только те элементы, которые относятся к тип, который пользователь выбрал в Picker. Вопрос 2) Как бы я применил такое поведение onchange, чтобы применить фильтр к отображаемому списку?

Заранее благодарим за любой совет или пример кода!

---

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="NB_App.Views.ItemsPage"
             Title="{Binding Title}"
             x:Name="BrowseItemsPage">

    <ContentPage.ToolbarItems>
        <ToolbarItem Text="Add" Clicked="AddItem_Clicked" />
    </ContentPage.ToolbarItems>


    <!-- This is where I want to insert the Picker -->

    <RefreshView IsRefreshing="{Binding IsBusy, Mode=TwoWay}" Command="{Binding LoadItemsCommand}">

        <CollectionView x:Name="ItemsCollectionView" ItemsSource="{Binding Items}" >
            <CollectionView.ItemTemplate>

Answer 1

Согласно вашему описанию, вы хотите добавить Picker для выбора элемента для фильтрации Collectionview, я прав?

Если да, я делаю один пример, который вы можете посмотреть:

<ContentPage
x:Class="demo3.collectionviewsample.Page2"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<ContentPage.Content>
    <StackLayout>
        <Picker
            ItemDisplayBinding="{Binding .}"
            ItemsSource="{Binding FilterOptions}"
            SelectedItem="{Binding SelectedFilter}" />
        <CollectionView ItemsSource="{Binding FilterSource}">
            <CollectionView.ItemTemplate>
                <DataTemplate>

                    <StackLayout Orientation="Horizontal">
                        <Label Text="{Binding Name}" />
                        <Label Text="{Binding Role}" />
                    </StackLayout>

                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </StackLayout>
</ContentPage.Content>

 public partial class Page2 : ContentPage
{
    public Page2()
    {
        InitializeComponent();
        this.BindingContext = new ItemViewModel();
    }
}

ViewModel:

public class Item
{
    public int Id { get; set; }
    public string Name { get; set; }     
    public string Role { get; set; }
}

public class ItemViewModel:ViewModelBase
{
    public ObservableCollection<string> FilterOptions { get; set; }
    public ObservableCollection<Item> source { get; set; }


    public List<Item> _FilterSource;
    public List<Item> FilterSource
    {
        get { return _FilterSource; }
        set
        {
            _FilterSource = value;
            RaisePropertyChanged("FilterSource");
        }
    }

    private string _SelectedFilter;
    public string SelectedFilter
    {
        get { return _SelectedFilter; }
        set
        {
            _SelectedFilter = value;
            RaisePropertyChanged("SelectedFilter");
            filteritems(SelectedFilter);
        }
    }


    public ItemViewModel()
    {
        FilterOptions = new ObservableCollection<string>()
        {
            "All",
            "Admin",
            "Editor",
            "Student"
        };

        source = new ObservableCollection<Item>()
        {
            new Item() { Id = 1, Name = "cherry", Role = "Admin" },
            new Item() { Id = 2, Name = "barry", Role = "Admin" },
            new Item() { Id = 3, Name = "json", Role = "Editor" },
            new Item() { Id = 3, Name = "json", Role = "Editor" },
            new Item() { Id = 5, Name = "Leo", Role = "Student" },
            new Item() { Id = 6, Name = "Cole", Role = "Student" }
        };


        FilterSource = new List<Item>();
    }

    private void filteritems(string selecteditem)
    {
        FilterSource.Clear();
        if(selecteditem=="All")
        {
            FilterSource = source.ToList();
        }
        else
        {
            FilterSource = source.Where(item => item.Role == selecteditem).ToList();
        }

    }
}

ViewModelBase - это класс, реализующий интерфейс INotifyPropertyChanged, для изменения данных.

public class ViewModelBase : INotifyPropertyChanged
{

    public event PropertyChangedEventHandler PropertyChanged;


    public void RaisePropertyChanged(string propertyName)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (handler != null)
        {
            handler(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

Снимок экрана:

Answer 2

Вы будете связывать ItemsSource с CollectionView, когда Picker вызывает событие SelectedIndexChanged

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="App9.MainPage">


    <ContentPage.ToolbarItems>
        <ToolbarItem Text="Add" Clicked="AddItem_Clicked" />
    </ContentPage.ToolbarItems>
    <StackLayout>
        <Picker Title="My Picker" SelectedIndexChanged="Picker_SelectedIndexChanged">
            <Picker.Items>
                <x:Array>
                    <x:String>A</x:String>
                    <x:String>B</x:String>
                    <x:String>C</x:String>
                    <x:String>D</x:String>
                </x:Array>
            </Picker.Items>
        </Picker>
        <!-- This is where I want to insert the Picker -->
        <RefreshView IsRefreshing="{Binding IsBusy, Mode=TwoWay}" Command="{Binding LoadItemsCommand}">

            <CollectionView x:Name="ItemsCollectionView"  />
        </RefreshView>
    </StackLayout>
</ContentPage>

Код позади

        private void Picker_SelectedIndexChanged(object sender, EventArgs e)
        {
            var picker = sender as Picker;
            switch (picker.SelectedIndex)
            {
                case 0:
                    ItemsCollectionView.ItemsSource = new ObservableCollection<string>() { "apple", "america"};
                    break;
                case 1:
                    ItemsCollectionView.ItemsSource = new ObservableCollection<string>() { "ball", "basket" };
                    break;
                case 2:
                    ItemsCollectionView.ItemsSource = new ObservableCollection<string>() { "cat", "coronavirus" };
                    break;
                case 3:
                    ItemsCollectionView.ItemsSource = new ObservableCollection<string>() { "dog", "disease" };
                    break;
                default:
                    break;
            }
        }

Вы также можете сделать это через MVVM с помощью команд. Поскольку вы новичок, подход должен помочь в освоении кода.