[Solved] ExpanderControl connected with NotifyCollectionChangedAction randomly expands items

[Kamil]

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);
        OnCollectionChanged(a);

    }
}

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:

ViewModel:

 

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

                  item.Symbol = "test";

              }));
          }

      }

View:

   

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

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

[Deyan]

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.

Regards,
Deyan
Telerik