How to filter in Xamarin - xamarin

Question

I am quite new to Xamarin and I want to make filtering in xamarin. So I have three buttons drinks, food and all. When it is all I want to show all of them and when the drinks button is clicked I only want to show drinks etc.
So here are my buttons:
<StackLayout HorizontalOptions="Center" VerticalOptions="Center">
<Button Text="All" x:Name="All" Clicked="Handle_Filter" TextColor="#EEF2FF" FontSize="18" HorizontalOptions="Center" BackgroundColor="#FF5959" />
</StackLayout>
<StackLayout Grid.Column="1" HorizontalOptions="Center" VerticalOptions="Center">
<Button Text="Food" x:Name="Food" Clicked="Handle_Filter" TextColor="#676FA3" FontSize="18" HorizontalOptions="Center" BackgroundColor="#EEF2FF"/>
</StackLayout>
<StackLayout Grid.Column="2" HorizontalOptions="Center" VerticalOptions="Center">
<Button Text="Drinks" x:Name="Drinks" Clicked="Handle_Filter" TextColor="#676FA3" FontSize="18" HorizontalOptions="Center" BackgroundColor="#EEF2FF"/>
</StackLayout>
And the area which needs to be filtered:
<CollectionView Grid.Row="3" Margin="25" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
SelectionMode="None" ItemsSource="{Binding AllProducts}">
<CollectionView.ItemsLayout>
<LinearItemsLayout Orientation="Vertical" ItemSpacing="20"/>
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<pv:PancakeView HasShadow="True" BackgroundColor="#EEF2FF" VerticalOptions="StartAndExpand"
HorizontalOptions="FillAndExpand">
<Grid ColumnSpacing="3" HorizontalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<BoxView Grid.RowSpan="1" BackgroundColor="#EEF2FF"/>
<BoxView Grid.Column="1" Grid.RowSpan="1" BackgroundColor="#EEF2FF"/>
<BoxView Grid.Column="2" Grid.RowSpan="1" BackgroundColor="#EEF2FF"/>
<Button
Text="{Binding Name}"
Grid.Column="0"
HorizontalOptions="Center"
VerticalOptions="Center"
TextColor="Black"
BackgroundColor="#EEF2FF"
/>
</Grid>
</pv:PancakeView>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
And my products:
public class Product
{
public string Type { get; set; }
public string Name { get; set; }
public int Stock { get; set; }
}
And help would be appreciated since I am really new in Xamarin.
Thanks

Answer 1

you can do this with a LINQ query
protected void FilterFood(object sender, EventArgs args)
{
myCollectionView.ItemsSource = AllProducts.Where(x => x.Type == "Food").ToList();
}

Answer 2

Your Buttons in Xaml file:
<StackLayout HorizontalOptions="Center" VerticalOptions="Center">
<Button Text="All" x:Name="All" Clicked="onAllFilterClicked" TextColor="#EEF2FF" FontSize="18" HorizontalOptions="Center" BackgroundColor="#FF5959" />
</StackLayout>
<StackLayout Grid.Column="1" HorizontalOptions="Center" VerticalOptions="Center">
<Button Text="Food" x:Name="Food" Clicked="onFoodFilterClicked" TextColor="#676FA3" FontSize="18" HorizontalOptions="Center" BackgroundColor="#EEF2FF"/>
</StackLayout>
<StackLayout Grid.Column="2" HorizontalOptions="Center" VerticalOptions="Center">
<Button Text="Drinks" x:Name="Drinks" Clicked="onDrinksFilterClicked" TextColor="#676FA3" FontSize="18" HorizontalOptions="Center" BackgroundColor="#EEF2FF"/>
</StackLayout>
Set a name to your CollectionView x:Name="cvProducts"
On your Buttons .cs file:
protected void onAllFilterClicked(object sender, EventArgs args)
{
cvProducts.ItemsSource = AllProducts;
}
protected void onFoodFilterClicked(object sender, EventArgs args)
{
cvProducts.ItemsSource = AllProducts.Select(x => x.Type == "Food").ToList();
}
protected void onDrinksFilterClicked(object sender, EventArgs args)
{
cvProducts.ItemsSource = AllProducts.Select(x => x.Type == "Drinks").ToList();
}