ExpanderControl connected with NotifyCollectionChangedAction randomly expands items

2 posts, 0 answers
  1. Kamil
    Kamil avatar
    2 posts
    Member since:
    Nov 2012

    Posted 24 Sep 2013 Link to this post

    In my windows phone 8 application I've created truly observable collection for noticing when item changes in collection. Here is collection code:

    public class TrulyObservableCollection<T> : ObservableCollection<T> where T : INotifyPropertyChanged
        public TrulyObservableCollection()
            : base()
            CollectionChanged += new NotifyCollectionChangedEventHandler(TrulyObservableCollection_CollectionChanged);
        void TrulyObservableCollection_CollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
            if (e.NewItems != null)
                foreach (Object item in e.NewItems)
                    var test = item as INotifyPropertyChanged;
                    (item as INotifyPropertyChanged).PropertyChanged += new PropertyChangedEventHandler(item_PropertyChanged);
            if (e.OldItems != null)
                foreach (Object item in e.OldItems)
                    (item as INotifyPropertyChanged).PropertyChanged -= new PropertyChangedEventHandler(item_PropertyChanged);
        void item_PropertyChanged(object sender, PropertyChangedEventArgs e)
            NotifyCollectionChangedEventArgs a = new NotifyCollectionChangedEventArgs(NotifyCollectionChangedAction.Reset);

    In my view I have list of expander controls. On Item tap event I would like to change something in tapped item and refresh list. Here is the code how i'm doing it:


       public TrulyObservableCollection<SymbolRecord> Symbols {get; set;}
      private RelayCommand<SymbolRecord> tapCommand;
          public RelayCommand<SymbolRecord> TapCommand
                  return tapCommand ?? (tapCommand = new RelayCommand<SymbolRecord>((item) =>
                      item.Symbol = "test";


    <telerikData:RadJumpList x:Name="ListControl" Grid.Row="1"IsCheckModeEnabled="False" GroupPickerItemTemplate="{StaticResource JumpListHeaderItemTemplate}"   GroupHeaderTemplate="{StaticResource JumpListHeaderTemplate}"  ItemsSource="{Binding Path=Symbols}"  >
                            <telerikPrimitives:RadExpanderControl ContentTemplate="{StaticResource ExpanderControlContentTemplate}"  Content="{Binding}" ExpandableContent="{Binding}"  VerticalAlignment="Stretch" VerticalContentAlignment="Stretch" ExpanderTemplate="{StaticResource ExpanderControlContentTemplate}" >
                <i:EventTrigger  EventName="ItemTap" SourceName="ListControl" >
                    <cmd:EventToCommand  Command="{Binding TapCommand}" CommandParameter="{Binding SelectedItem,
                                              ElementName=ListControl}"  />

    When I click on item in emulator the property Symbol is changing but what's more random items are being expanded. Dont know why this is happening. Please help me
  2. Deyan
    Deyan avatar
    2026 posts

    Posted 25 Sep 2013 Link to this post

    Hi Kamil,

    Thanks for writing and for the code snippet.

    Using the ExpanderControl in a DataBoundListBox/JumpList requires you to define a IsExpanded property on your business model and bind it to the IsExpanded property of the expander control in your Item Template. The binding should be TwoWay mode. This is needed because the DataBoundListBox/JupList implement a UI virtualization mechanism that reuses Visual Containers (DataBoundListBoxItem instances) for the different data items while scrolling. So if you expand an expander and reset the collection, it might happen that this expander is reused for another data item that hasn't been expanded previously.

    You therefore need to bind the IsExpanded property of the expander in the template to a property to keep the expanded state for each data item.

    Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
  3. DevCraft banner
Back to Top