Strange behaviour with a lot of data in ListBox an

2019-07-19 04:49发布

问题:

For that problem I made a minimal project for everyone to experience this behaviour. I hope it is not just on my engine running like this.

minimal project

In my project I realized a listbox with a a lot of sample data. The listbox has a checkbox element for each item as well.

The problem: First I check/uncheck checkboxes in my listbox. Then I scroll several times through my listbox. Now I notice that a lot of checkboxes get checked/unchecked randomly. If I cut the ListBox a bit down (see comments in source code) there is no strange behaviour. EDIT:: If you dont have this problem, try to check items at the very bottom of the list. Maybe you have to extend the list with some more objects to see the problem.

Here some code snippets. As you can see I already tried it with List/ObservableCollection, PropertyChanged and LongListSelector instead of Listbox.

C#

    // Already tried to use simple List<SampleCheckedData> buildings. 
    // Doesnt change anything.
    private ObservableCollection<SampleCheckedData> buildings;

    // Already tried with this as well.
    /*protected ObservableCollection<SampleCheckedData> Buildings
    {
        get
        {
            return buildings;
        }
        set
        {
            buildings = value;
        }
    }*/

    public MainPage()
    {
        InitializeComponent();

        buildings = new ObservableCollection<SampleCheckedData>();

        buildings.Add(new SampleCheckedData() { Name = "Cloudy", IsChecked = false });
        buildings.Add(new SampleCheckedData() { Name = "Sun", IsChecked = false });
        buildings.Add(new SampleCheckedData() { Name = "Drizzle", IsChecked = false });
        buildings.Add(new SampleCheckedData() { Name = "Snow", IsChecked = false });
        buildings.Add(new SampleCheckedData() { Name = "Cloudy", IsChecked = false });
        buildings.Add(new SampleCheckedData() { Name = "Sun", IsChecked = false });
        buildings.Add(new SampleCheckedData() { Name = "Drizzle", IsChecked = false });
        buildings.Add(new SampleCheckedData() { Name = "Snow", IsChecked = false });
        buildings.Add(new SampleCheckedData() { Name = "Cloudy", IsChecked = false });
        buildings.Add(new SampleCheckedData() { Name = "Sun", IsChecked = false });
        buildings.Add(new SampleCheckedData() { Name = "Cloudy", IsChecked = false });
        buildings.Add(new SampleCheckedData() { Name = "Sun", IsChecked = false });
        buildings.Add(new SampleCheckedData() { Name = "Drizzle", IsChecked = false });
        buildings.Add(new SampleCheckedData() { Name = "Snow", IsChecked = false });
        buildings.Add(new SampleCheckedData() { Name = "Cloudy", IsChecked = false });
        buildings.Add(new SampleCheckedData() { Name = "Sun", IsChecked = false });
        buildings.Add(new SampleCheckedData() { Name = "Cloudy", IsChecked = false });
        buildings.Add(new SampleCheckedData() { Name = "Sun", IsChecked = false });
        buildings.Add(new SampleCheckedData() { Name = "Drizzle", IsChecked = false });
        buildings.Add(new SampleCheckedData() { Name = "Snow", IsChecked = false });

        // If you comment this data out, the listbox is smaller and no problem occurs in my case.
        buildings.Add(new SampleCheckedData() { Name = "Cloudy" , IsChecked = false });
        buildings.Add(new SampleCheckedData() { Name = "Sun", IsChecked = false });
        buildings.Add(new SampleCheckedData() { Name = "Cloudy", IsChecked = false });
        buildings.Add(new SampleCheckedData() { Name = "Sun", IsChecked = false });
        buildings.Add(new SampleCheckedData() { Name = "Drizzle", IsChecked = false });
        buildings.Add(new SampleCheckedData() { Name = "Snow", IsChecked = false });
        // If you comment this data out, the listbox is smaller and no problem occurs in my case. [END]

        this.listBox2.ItemsSource = buildings;
    }

My check/uncheck events:

    private void CheckBox_Checked(object sender, RoutedEventArgs e)
    {
        //Use this if you use the LongListSelector.
        //ListBoxItem checedItem = this.listBox2.SelectedItem as ListBoxItem;

        ListBoxItem checedItem = this.listBox2.ItemContainerGenerator.ContainerFromItem((sender as CheckBox).DataContext) as ListBoxItem;
        if (checedItem != null)
        {
            checedItem.IsSelected = true;
        }
    }

    private void CheckBox_Unchecked(object sender, RoutedEventArgs e)
    {
        //Use this if you use the LongListSelector.
        //ListBoxItem checedItem = this.listBox2.SelectedItem as ListBoxItem;

        ListBoxItem checedItem = this.listBox2.ItemContainerGenerator.ContainerFromItem((sender as CheckBox).DataContext) as ListBoxItem;
        if (checedItem != null)
        {
            checedItem.IsSelected = false;
        }
    }

And my smple data class:

public class SampleCheckedData
{
    //Already tried with this, but it is not working.

    /*
    private bool _isChecked;
    public bool IsChecked
    {
        get { return _isChecked; }
        set
        {
            if (_isChecked != value)
            {
                _isChecked = value;
                NotifyPropertyChanged("IsChecked");
            }
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    private void NotifyPropertyChanged(String info)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(info));
        }
    } 
    */

    public bool IsChecked
    {
        get;
        set;
    }

    public string Name
    {
        get;
        set;
    }
}

XAML

My content looks like this:

    <!--ContentPanel - zusätzliche Inhalte hier platzieren-->
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

        <ListBox x:Name="listBox2" SelectionMode="Multiple">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <CheckBox IsChecked="{Binding IsChecked}" Checked="CheckBox_Checked" Unchecked="CheckBox_Unchecked"/>
                        <TextBlock Text="{Binding Name}" Width="150" VerticalAlignment="Center"/>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

        <!--//Use this if you use the LongListSelector.-->
        <!--<toolkit:LongListSelector  x:Name="listBox2"  Background="Transparent" IsFlatList="True"   ItemTemplate="{StaticResource citiesItemTemplate}" />-->

    </Grid>

Optional if you want to try it with LongListSelector include:

    <DataTemplate x:Key="citiesItemTemplate">
        <StackPanel Grid.Column="1"  VerticalAlignment="Top">
            <TextBlock Text="{Binding Name}" FontSize="26"  Margin="12,-12,12,6"/>
            <CheckBox IsChecked="{Binding IsChecked}" Checked="CheckBox_Checked" Unchecked="CheckBox_Unchecked"/>
        </StackPanel>
    </DataTemplate>

And xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

I hope someone can solve this. Didnt find any clues...

EDIT:

Related problems:

One Two Three

EDIT:

I noticed that you have to add some mor eobjects in the list to have this problem:

    buildings.Add(new SampleCheckedData() { Name = "Cloudy", IsChecked = false });
    buildings.Add(new SampleCheckedData() { Name = "Sun", IsChecked = false });
    buildings.Add(new SampleCheckedData() { Name = "Cloudy", IsChecked = false });
    .....

Then, when you check items at the very top or bottom of the list, the problem occurs.

回答1:

You never save the selected state of the checkbox. Fix your XAML:

<CheckBox IsChecked="{Binding IsChecked,Mode=TwoWay}" Checked="CheckBox_Checked" Unchecked="CheckBox_Unchecked"/>