WP7 listbox binding not working properly

Question

A noob error for sure (I started yesterday afternoon developing in WP7), but I'm wasting a lot time on it.
I post my class and a little part of my code:

public class ChronoLaps : INotifyPropertyChanged
{
    private ObservableCollection<ChronoLap> laps = null;

    public int CurrentLap
    {
        get { return lap; }
        set
        {
            if (value == lap) return;
            // Some code here ....
            ChronoLap newlap = new ChronoLap()
            {
                // Some code here ...
            };
            Laps.Insert(0, newlap);

            lap = value;
            NotifyPropertyChanged("CurrentLap");
            NotifyPropertyChanged("Laps");
        }
    }

    public ObservableCollection<ChronoLap> Laps { 
        get { return laps; }
        set
        {
            if (value == laps) return;
            laps = value;
            if (laps != null)
            {
                laps.CollectionChanged += delegate
                {
                    MeanTime = Laps.Sum(p => p.Time.TotalMilliseconds) / (Laps.Count * 1000);
                    NotifyPropertyChanged("MeanTime");
                };
            }
            NotifyPropertyChanged("Laps");
        }
    }
}

MainPage.xaml.cs

public partial class MainPage : PhoneApplicationPage
{
    public ChronoLaps History { get; private set; }

    private void butStart_Click(object sender, EventArgs e)
    {
        History = new ChronoLaps();
        // History.Laps.Add(new ChronoLap() { Distance = 0 });

        LayoutRoot.DataContext = History;
    }
}

MainPage.xaml

<phone:PhoneApplicationPage>    
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid Grid.Row="2">
            <ScrollViewer Margin="-5,13,3,36" Height="758">
                <ListBox Name="lbHistory" ItemContainerStyle="{StaticResource ListBoxStyle}"
                         ItemsSource="{Binding Laps}" 
                         HorizontalAlignment="Left" Margin="5,25,0,0"
                         VerticalAlignment="Top" Width="444">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="{Binding Lap}" Width="40" />
                                <TextBlock Text="{Binding Time}" Width="140" />
                                <TextBlock Text="{Binding TotalTime}" Width="140" />
                                <TextBlock Text="{Binding Distance}" />
                            </StackPanel>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
            </ScrollViewer>
        </Grid>
    </Grid>
</phone:PhoneApplicationPage>       

Problem is that when I add one or more items to History.Laps collection, my listbox is not refreshed and these items don't appear.
But if I remove comment on // History.Laps.Add(new ChronoLap()... line, this item appear and so every other inserted later.
More: if I remove that comment and then write History.Laps.Clear() (before or after setting binding) binding is not working anymore. It's like it gets crazy if collection is empty.
I really don't understand the reason...

UPDATE AND SOLUTION :
If i move

History = new ChronoLaps();
LayoutRoot.DataContext = History;

from butStart_Click to public MainPage() everything works as expected.
Can someone explain me the reason?

Answer 1

Actually I see no point of having a separate class for ChronoLaps. Here is how I modified the code for MainPage.xaml.cs and everything seems to be working for me.

public partial class MainPage : PhoneApplicationPage
    {
        public ObservableCollection<ChronoLap> Laps { get; set; }
        public double MeanTime { get; set; }

        // Constructor
        public MainPage()
        {
            InitializeComponent();
            Laps = new ObservableCollection<ChronoLap>();
            Laps.CollectionChanged += delegate
            {
                MeanTime = Laps.Sum(p => p.Time.TotalMilliseconds) / (Laps.Count * 1000);
            };
            DataContext = this;
            Loaded += (s, e) =>
                          {
                              Laps.Add(new ChronoLap() {Time = TimeSpan.FromSeconds(1000)});
                              Laps.Add(new ChronoLap() {Time = TimeSpan.FromSeconds(1000)});
                              Laps.Add(new ChronoLap() {Time = TimeSpan.FromSeconds(1000)});
                          };
        }
    }

Answer 2

Try binding DataContext and ItemSource for listbox..

How i have done is..

 <ListBox x:Name="AppList" Background="White" DataContext="{Binding DisplayItem}" SelectionChanged="AppList_SelectionChanged" Height="500" Width="auto">
            <ListBox.ItemTemplate>
                <DataTemplate>
  </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

And i dont know if it will help but still i will just post the code that i am using..

ItemList.cs

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Media.Imaging;


namespace AppHouseLibrary { public class ItemList : IComparable { private string _name; public string WidgetName { get { return _name; } set { _name = value; } } public int ID { get; set; } private BitmapImage _Icon; public BitmapImage Icon { get { return _Icon; } set { _Icon = value; } } //public string arrow { get; set; } public BitmapImage arrow { get; set; } public int CompareTo(ItemList other) { return this.WidgetName.CompareTo(other.WidgetName); } } } 

I have a UIManager.cs class in which am refreshing the data before i load it on the UI to the user..

 using System; using System.ComponentModel; using System.Collections.ObjectModel; using System.Windows.Media.Imaging; using System.Collections.Generic; using StirLibrary.com.mportal.data.bean; using com.mportal.utils; using StirLibrary.com.mportal.utils; 
 
\n\n
 namespace StirLibrary.com.UI { public class UIManager : INotifyPropertyChanged { private static UIManager instance = null;  private static string TAG = "UIManager";  
 BitmapImage arrowImage = Utils.returnImage(ImageUtils.ARROW);  
\n\n
  public List<ItemList> data = new List<ItemList>(); public static UIManager getInstance() { if (instance == null) { instance = new UIManager(); } return instance; } private ObservableCollection<ItemList> _displayItem = new ObservableCollection<ItemList>(); public ObservableCollection<ItemList> DisplayItem { get { return _displayItem; } } private UIManager() { } public event PropertyChangedEventHandler PropertyChanged; private void NotifyPropertyChanged(String PropertyName) { if (null != PropertyChanged) { PropertyChanged(this, new PropertyChangedEventArgs(PropertyName)); } } public WidgetBean[] serviceBeanList = null; public WidgetBean[] wheelBeanList = null; public WidgetBean getServiceWidgetBean(int selectedIndex) { try { if (serviceBeanList != null) { return serviceBeanList[selectedIndex]; } } catch (Exception e) { Logger.log(TAG, e.Message); } return null; } public WidgetBean getWheelWidgetBean(int selectedIndex) { try { if (wheelBeanList != null) { return wheelBeanList[selectedIndex]; } } catch (Exception e) { Logger.log(TAG, e.Message); } return null; } public void DisplayCatalog(string[] ServiceDisplayName, string[] WheelDisplayName, BitmapImage[] ServiceIcons, WidgetBean[] ServiceBeanList, WidgetBean[] WheelBeanList) { try { DisplayItem.Clear(); string disp1 = string.Empty; string name = ServiceDisplayName[0]; wheelBeanList = WheelBeanList; serviceBeanList = ServiceBeanList; for (int i = 0; i < ServiceDisplayName.Length; i++) { WidgetBean bean = serviceBeanList[i]; if (bean.isCategory()) { DisplayItem.Add(new ItemList { WidgetName = ServiceDisplayName[i], Icon = ServiceIcons[i], arrow = arrowImage }); } else { DisplayItem.Add(new ItemList { WidgetName = ServiceDisplayName[i], Icon = ServiceIcons[i] }); } } NotifyPropertyChanged("UI"); } catch (Exception e) { Logger.log(TAG,e.Message); } } public void DisplayCatalog(string[] displayName, BitmapImage[] icons, WidgetBean[] beanArray) { try { serviceBeanList = beanArray; DisplayItem.Clear(); for (int i = 0; i < displayName.Length; i++) { WidgetBean bean = serviceBeanList[i]; if (bean.isCategory()) { DisplayItem.Add(new ItemList { WidgetName = displayName[i], Icon = icons[i], arrow = arrowImage }); } else { DisplayItem.Add(new ItemList { WidgetName = displayName[i], Icon = icons[i] }); } } NotifyPropertyChanged("UI"); } catch (Exception e) { Logger.log(TAG,e.Message); } } } 
\n\n
 }  
\n\n