How to add Picker above a CollectionView - xaml

Question

I am new to Xamarin.Forms development, so I apologize if this is a basic question.
Below is the out-of-the-box code for a Xamarin.Forms Master-Detail page "ItemsPage.xaml"
I would like to add a Picker above the dynamically displayed list of items.
Question 1) What XAML should I insert to add a Picker? I've tried a few variations, but the xaml keeps complaining.
When a user selects an option in the Pickerm, I would like to filter the displayed list in the CollectionView to only show the items that are of the type that the user chose in the Picker.
Question 2) How would I put that onchange behavior to apply a filter to the displayed list?
Thank you advance for any advice or sample code!
<?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

You will bind ItemsSource of CollectionView when Picker raises SelectedIndexChanged event
<?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>
Code behind
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;
}
}
You can do this through MVVM with commands as well. Since you are novice code behind approach should help learn it.

Answer 2

According to your description, you want to add Picker to select item to filter Collectionview, am I right?
If yes, I do one sample that you can take a look:
<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 is the class that implementing INotifyPropertyChanged interface, to inotify data changed.
public class ViewModelBase : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
public void RaisePropertyChanged(string propertyName)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null)
{
handler(this, new PropertyChangedEventArgs(propertyName));
}
}
}
The Screenshot: