Geek Answers Handbook

Strange behavior with lots of data in ListBox and Checkbox [minimal project provided]

For this problem, I made a minimal project so that everyone experiences this behavior. I hope this is not just my engine running like that.

minimal project

In my project, I realized a list with a lot of sample data. The list has a check box item for each item.

Problem: First I check / uncheck the boxes in my list. Then I scroll several times through my list. Now I notice that many checkboxes are checked / not checked randomly. If I cut the ListBox down a bit (see comments in the source code), there is no strange behavior. EDIT :: If you do not have this problem, try checking the items at the very bottom of the list. You may need to expand the list with a few objects to see the problem.

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

FROM#

    // 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 / delete 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 is as follows:

    <!--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>

Optionally, if you want to try using LongListSelector to 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"

, - . ...

EDIT:

:

EDIT:

, , :

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

, , .

+2
1

. XAML:

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

+2

More articles:


All Articles