question

DavidSpecter-2446 avatar image
0 Votes"
DavidSpecter-2446 asked JarvanZhang-MSFT edited

CheckBox Filter Xamarin Forms

Hi,
I would like to make a filter in a listview with checkbox.
<StackLayout x:Name="sFilter" Padding="10" BackgroundColor="#f5f5ff" IsVisible="false">
<Grid ColumnSpacing="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.05*"/>
<ColumnDefinition Width="0.25*"/>
<ColumnDefinition Width="0.05*"/>
<ColumnDefinition Width="0.25*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>

                             <CheckBox x:Name="cBluelog" CheckedChanged="cBluelog_changed" Grid.Column="0" Grid.Row="0" IsChecked="True"/>
                             <Label Grid.Column="1" Grid.Row="0" Text="BlueLOG" VerticalTextAlignment="Center" HorizontalOptions="Start" FontSize="Medium" TextColor="black"/>
    
                             <CheckBox x:Name="cTempble" CheckedChanged="cBluelog_changed" Grid.Column="0" Grid.Row="1" IsChecked="True"/>
                             <Label Grid.Column="1" Grid.Row="1" Text="TEMPBLE" VerticalTextAlignment="Center" HorizontalOptions="Start" FontSize="Medium" TextColor="black"/>
    
                             <CheckBox x:Name="cBluelogG" CheckedChanged="cBluelog_changed" Grid.Column="2" Grid.Row="0" IsChecked="True"/>
                             <Label Grid.Column="3" Grid.Row="0" Text="BlueLOG G" VerticalTextAlignment="Center" HorizontalOptions="Start" FontSize="Medium" TextColor="black"/>
    
                             <CheckBox x:Name="cBluelogTHR" CheckedChanged="cBluelog_changed" Grid.Column="2" Grid.Row="1" IsChecked="True"/>
                             <Label Grid.Column="3" Grid.Row="1" Text="BlueLOG TRH" VerticalTextAlignment="Center" HorizontalOptions="Start" FontSize="Medium" TextColor="black"/>
                         </Grid>
                     </StackLayout>

How can I filter my listview?

Best Regards,
Davide.


dotnet-xamarin
· 2
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

I would like to make a filter in a listview with checkbox

How do you want to filter the checkbox in the listView? If you want to filter the checkboxes that are checked, try to set data binding for the IsChecked property for the CheckBox. Then detect the property's value of the model class to perform the filter work.

private async void Button_Clicked(object sender, EventArgs e)
{
    int count = 0;
    foreach (var item in viewModel.DataCollection)
    {
        if (item.IsSelected)
            count++;
    }
    DisplayAlert("Filter the CheckBox", "Selected CheckBox Count:" + count, "ok");
}
0 Votes 0 ·

HI,
I'm so sorry for the late reply but I didn't receive any notification.
I have a ListView with multiple object inside. I would like to filter them with checkboxes.
Ex if I check Checkbox "type 1" in the ListView should appear only object "type 1".
Ex2 if I check Checkbox "type 1" and "Type 2" in the ListView should appear only object "type 1, Type 2".

Best Regards,
David.


0 Votes 0 ·

1 Answer

JarvanZhang-MSFT avatar image
0 Votes"
JarvanZhang-MSFT answered JarvanZhang-MSFT edited

Hello,​

Welcome to our Microsoft Q&A platform!

I have a ListView with multiple object inside. I would like to filter them with checkboxes ...

@DavidSpecter-2446 For this function, try to change the ItemsSource of the listView at runtime. You could create two ObservableCollection<T> property in the viewModel class, one is used to save the total data and the other is used to store the filtered data. Set binding for the ItemsSource property with the filtered collection.

Check the code:

//page.xaml
<ListView HasUnevenRows="True" ItemsSource="{Binding FilterDataCollection}" >
    <ListView.ItemTemplate>
        ...
    </ListView.ItemTemplate>
</ListView>
<CheckBox CheckedChanged="CheckBox_CheckedChanged"/>

//page.xaml.cs
public partial class TestPage : ContentPage
{
    TestPageViewModel viewModel;
    public TestPage()
    {
        InitializeComponent();
        viewModel = new TestPageViewModel();
        BindingContext = viewModel;
    }

    private void CheckBox_CheckedChanged(object sender, CheckedChangedEventArgs e)
    {
        viewModel.FilterDataCollection.Clear();

        if (e.Value)
        {
            foreach (var item in viewModel.DataCollection)
            {
                if (item.TheType == ItemType.Type_1)
                {
                    viewModel.FilterDataCollection.Add(item);
                }
            }
        }
        else
        {
            foreach (var item in viewModel.DataCollection)
            {
                if (item.TheType == ItemType.Type_2)
                {
                    viewModel.FilterDataCollection.Add(item);
                }
            }
        }
    }
}

Model class and ViewModel class

public enum ItemType
{
    Type_1,
    Type_2
}

public class TestPageModel : INotifyPropertyChanged
{
    ...

    private ItemType theType;
    public ItemType TheType
    {
        get
        {
            return theType;
        }
        set
        {
            if (theType != value)
            {
                theType = value;
                NotifyPropertyChanged("TheType");
            }
        }
    }

    protected virtual void NotifyPropertyChanged([CallerMemberName] string propertyName = "")
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
    public event PropertyChangedEventHandler PropertyChanged;
}

public class TestPageViewModel
{
    public ObservableCollection<TestPageModel> DataCollection { get; set; }
    public ObservableCollection<TestPageModel> FilterDataCollection { get; set; }

    public TestPageViewModel()
    {
        DataCollection = new ObservableCollection<TestPageModel>();

        DataCollection.Add(new TestPageModel { Content = "item_1", TheType = ItemType.Type_2 });
        DataCollection.Add(new TestPageModel { Content = "item_2", TheType = ItemType.Type_1 });
        DataCollection.Add(new TestPageModel { Content = "item_3", TheType = ItemType.Type_2 });
        DataCollection.Add(new TestPageModel { Content = "item_4", TheType = ItemType.Type_1 });
        DataCollection.Add(new TestPageModel { Content = "item_5", TheType = ItemType.Type_2 });

        FilterDataCollection = new ObservableCollection<TestPageModel>();
        foreach (var item in DataCollection)
        {
            if (item.TheType == ItemType.Type_2)
                FilterDataCollection.Add(item);
        }
    }
}


Best Regards,

Jarvan Zhang



If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.



5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.