How to filter in Xamarin-CodePudding

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

CodePudding user response：

you can do this with a LINQ query

protected void FilterFood(object sender, EventArgs args)
{
  myCollectionView.ItemsSource = AllProducts.Where(x => x.Type == "Food").ToList();
}

CodePudding user response：

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();
}