c# - How to group ListBox items by date -

im trying simple task app. have tasks due date , want display this:

i know how display data in listbox, dont know how group them duedate , display duedates headers (as in image below).

this xml file tasks (tasks.xml):

<?xml version="1.0" encoding="utf-8"?> <tasks>   <task>     <name>first task</name>     <duedate>05/03/2013 00:00:00</duedate>     <created>03/27/2013 01:24:08</created>   </task>   <task>     <name>second task</name>     <duedate>05/17/2013 00:00:00</duedate>     <created>03/27/2013 01:24:19</created>   </task>   <task>     <name>third task</name>     <duedate>05/17/2013 00:00:00</duedate>     <created>03/27/2013 01:24:38</created>   </task> </tasks> 

and data model (mainviewmodel.cs):

public class mainviewmodel : inotifypropertychanged {     public observablecollection<task> tasks { get; private set; }      public mainviewmodel()     {         this.tasks = new observablecollection<task>();     }      public bool isdataloaded     {         get;         private set;     }      public void loaddata()     {         try         {             tasks.clear();              var file = isolatedstoragefile.getuserstoreforapplication();             xelement xelem;              using (isolatedstoragefilestream read = file.openfile("tasks.xml", filemode.open))             {                 xelem = xelement.load(read);             }              var tasks = task in xelem.elements("task")                         select task;              foreach (xelement xelemitem in tasks)             {                 string duedate = "";                 datetime converteddate;                  if (datetime.tryparse(xelemitem.element("duedate").value.tostring(), out converteddate))                 {                     duedate = converteddate.toshortdatestring();                 }                  tasks.add(new task                 {                     name = xelemitem.element("name").value.tostring(),                     duedate = duedate,                     created = xelemitem.element("created").value.tostring()                 });             }         }         catch (exception ex)         {             messagebox.show(ex.message);         }          this.isdataloaded = true;     }      public event propertychangedeventhandler propertychanged;     private void notifypropertychanged(string propertyname)     {         propertychangedeventhandler handler = propertychanged;         if (null != handler)         {             handler(this, new propertychangedeventargs(propertyname));         }     } } 

how can it?

personally use longlistselector control in silverlight toolkit windows phone.

here great introduction , guide on databinding , grouping looking for.