c# - Best method to draw schedule grid on window -

i have viewmodel entirely setup using observable collections , able drill down in interface specified schedule , want display each day of week , each day want able display 96 different time slots (15 minute increments 24 hours). below viewmodel code view code.

my question best way use user control. want user control each day, have 7 controls of same kind per schedule, need someway data-bound data user control. need make custom dependency properties , pass 96 variables in?

if once inside control hard code out grid 96 columns , 3 rows , type each data piece corresponding rectangle?

my goal have re-sizable schedule control has day of week text, hours on bottom , color representation of each 15 minute. each segment can red, blue, or green, example. before grid , rectangles re-size window nice. there better way draw shapes on screen? canvas?

thanks, wesley

public class schedulevm {     public observablecollection<schedule> schedules { get; set; }      private static schedulevm viewmodel = null;      public static schedulevm getinstance()     {         if (viewmodel == null)             viewmodel = new schedulevm();          return viewmodel;     }      private schedulevm()     {         schedules = new observablecollection<schedule>();          (byte = 0; < 32; i++)             schedules.add(new schedule());     } }  public class schedule {     public observablecollection<day> days { get; set; }      public schedule()     {         days = new observablecollection<day>();          (byte = 0; < 8; i++)         {             observablecollection<int> values = new observablecollection<int>();              (byte j = 0; j < 96; j++)                 values.add(3);              days.add(new day() { data = values });         }     } }  public class day : basevm {     private observablecollection<int> _data;     public observablecollection<int> data     {                 {             return _data;         }         set         {             _data = value;             onpropertychanged("data");         }     } } 

below current xaml

<itemscontrol name="schedule">         <itemscontrol.resources>             <converters:onoffcolorconverter x:key="colorconverter"/>         </itemscontrol.resources>         <itemscontrol.itemtemplate>             <datatemplate>                 <controls:day data="{binding}" />             </datatemplate>         </itemscontrol.itemtemplate>     </itemscontrol> 

are talking this: bind itemscontrol schedules, in template, build out custom listbox item source "days" , make listbox's itemtemplate day control? haven't tested out or know if arrangement meant, here quick draft.

    <itemscontrol name="schedule"                   itemssource="{binding schedules}">         <itemscontrol.resources>             <converters:onoffcolorconverter x:key="colorconverter"/>         </itemscontrol.resources>         <itemscontrol.itemtemplate>             <datatemplate>                 <listbox itemssource="{binding days}">                     <listbox.itemspanel>                         <itemspaneltemplate>                             <stackpanel orientation="horizontal"/>                         </itemspaneltemplate>                     </listbox.itemspanel>                     <listbox.itemtemplate>                         <datatemplate>                             <controls:day data="{binding}" />                         </datatemplate>                     </listbox.itemtemplate>                 </listbox>             </datatemplate>         </itemscontrol.itemtemplate>     </itemscontrol>