Customizing the User Interface

Scheduler for WPF and Silverlight provides a specific visual data model that is intended to help in creating a user interface (UI). The UI building concept for C1Scheduler is similar to a grouped System.Windows.Controls.ItemsControl with a special ItemsControl.ItemsSource collection.

For example, the C1Scheduler.VisualStartTime sets the first date to appear in the schedule. The C1Scheduler.VisualTimeSpan property defines the amount of time, or in most cases, the number of days shown in a view. The C1Scheduler.VisualIntervalScale property breaks the C1Scheduler.VisualTimeSpan even further into increments. To preserve custom scaling in the views, C1Scheduler class offers C1Scheduler.SmallVisualIntervalScale property. Refer to the topic Customizing Time Span for Different Views to know how you can preserve custom scaling while switching from one view to another.

Using the Working Week View view style as an example, the C1Scheduler.VisualStartTime is the first Monday of the current week, by default. The C1Scheduler.VisualTimeSpan is 5:00:00:00, or five days, Monday through Friday which is a typical work week. The C1Scheduler.VisualIntervalScale is 00:15:00 which means that each hour of the schedule is shown broken down into 15 minute intervals.

Note: The C1Scheduler.VisualStartTime property value is determined automatically by the C1Scheduler.VisualTimeSpan and C1Scheduler.SelectedDateTime properties, so it should not be set in most cases; however, the C1Scheduler.VisualTimeSpan and C1Scheduler.SelectedDateTime properties must be set. This is important for week and month views where the current date is not always the first date to appear in the schedule.

For specified C1Scheduler.VisualStartTime, C1Scheduler.VisualTimeSpan, and C1Scheduler.VisualIntervalScale properties, the VisualIntervalCollection is filled with VisualInterval objects, each defining a period of time of the C1Scheduler.VisualIntervalScale length.

The items in the VisualIntervalCollection can be grouped; grouping criteria is defined in the VisualIntervalGroupDescriptions collection, which contains one item per grouping level. A UI for each group level, which consists of a Header, a Panel containing group items, the group item's UI, and a layout that gathers these parts together, is defined in the VisualIntervalGroupStyles collection, which contains one item per grouping level.

To define the VisualInterval's UI representation, the C1Scheduler.VisualIntervalTemplate property should be used. The C1Scheduler.VisualIntervalPanel property defines a Panel where the VisualInterval's items are placed.

To provide a group view for the VisualIntervalCollection, the C1Scheduler.VisualIntervalsView property should be used, which is a System.Windows.Data.PagedCollectionView derived object that has VisualInterval as the SourceCollection.

A DataContext for the VisualInterval's UI DataTemplate is the VisualInterval itself, so the construction {Binding property_name} in the DataTemplate XAML code means binding to the property_name property of VisualInterval.

A DataContext for the group item's UI DataTemplate is a VisualIntervalGroup object, which is derived from VisualInterval. A time period that is represented by this VisualIntervalGroup is a union of periods of child items (child groups or intervals). The only properties that it adds to the base class are:

Group of type System.Windows.Data.CollectionViewGroup; this is a data object that represents a group item in the VisualIntervalCollectionView.Groups collection.
VisualIntervals of type C1.WPF.C1Schedule.VisualIntervalCollection (a collection of child VisualInterval objects).

The VisualInterval class, among others, contains the Appointments collection that represents the appointments that intersect with the interval. This collection doesn’t contain Appointment instances directly; instead it holds the IntervalAppointment class instances, which in turn has a reference to an appointment they represent (the Appointment property), along with some helper properties for indication of whether this appointment starts in this interval, whether it’s finished here, and so on.

When the ControlTemplate for C1Scheduler is being created (C1Scheduler.Template), the C1SchedulerPresenter object should be used as a markup for a place where intervals and their groups will be shown.

For example, in order to define an Outlook-style Work Week view with 30-minute time intervals, you may use the following code:

Visual Basic	Copy Code
C1Scheduler1.ChangeStyle(C1Scheduler1.WorkingWeekStyle) C1Scheduler1.VisualIntervalScale = TimeSpan.FromMinutes(30) C1Scheduler1.VisualTimeSpan = TimeSpan.FromDays(5) Group Level1 PropertyNames = "StartTime.Day" (group by VisualInterval.StartTime.Day) GroupStyle = (Header: day name; Panel : some Panel with Horizontal orientation) Group Level2 PropertyNames = "StartTime.Hour" (group by VisualInterval.StartTime.Hour) GroupStyle = (Header: none; Panel : some Panel with Vertical orientation with a Border around)

Visual Basic

Copy Code

C1Scheduler1.ChangeStyle(C1Scheduler1.WorkingWeekStyle)
C1Scheduler1.VisualIntervalScale = TimeSpan.FromMinutes(30)
C1Scheduler1.VisualTimeSpan = TimeSpan.FromDays(5)
Group Level1
PropertyNames = "StartTime.Day" (group by VisualInterval.StartTime.Day)
GroupStyle = (Header: day name; Panel : some Panel with Horizontal orientation)
Group Level2
PropertyNames = "StartTime.Hour" (group by VisualInterval.StartTime.Hour)
GroupStyle = (Header: none; Panel : some Panel with Vertical orientation with a Border around)

VisualIntervalTemplate = something that reacts on double-click and calls a Command that brings an appointment creation dialog (NewAppointmentDialogCommand, see below).

The following XAML is an example of how to define groups:

XAML	Copy Code
<!—- Group descriptions --> <Setter Property="c1sched:C1Scheduler.VisualIntervalGroupDescriptions"> <Setter.Value> <c1sched:IntervalGroupDescriptionCollection> <c1sched:VisualIntervalGroupDescription PropertyName="StartTime.Day" /> <c1sched:VisualIntervalGroupDescription PropertyName="StartTime.Hour" /> </c1sched:IntervalGroupDescriptionCollection> </Setter.Value> </Setter> <!-- Group styles definition --> <Setter Property="VisualIntervalGroupStyles"> <Setter.Value> <c1sched:IntervalGroupStyleCollection> <c1sched:GroupStyle ContainerStyleSelector="{StaticResource DayGroupStyleSelector}"> <c1sched:GroupStyle.Panel> <DataTemplate> <c1:C1UniformGrid Rows="1" /> </DataTemplate> </c1sched:GroupStyle.Panel> </c1sched:GroupStyle> <c1sched:GroupStyle ContainerStyleSelector="{StaticResource TimeSlotGroupStyleSelector}"> <c1sched:GroupStyle.Panel> <DataTemplate> <c1:C1UniformGrid Rows="24" Columns="1" /> </DataTemplate> </c1sched:GroupStyle.Panel> </c1sched:GroupStyle> </c1sched:IntervalGroupStyleCollection> </Setter.Value> </Setter>

XAML

Copy Code

<!—- Group descriptions -->
<Setter Property="c1sched:C1Scheduler.VisualIntervalGroupDescriptions">
 <Setter.Value>
   <c1sched:IntervalGroupDescriptionCollection>
     <c1sched:VisualIntervalGroupDescription PropertyName="StartTime.Day" />
     <c1sched:VisualIntervalGroupDescription PropertyName="StartTime.Hour" />
   </c1sched:IntervalGroupDescriptionCollection>
 </Setter.Value>
</Setter>

<!-- Group styles definition -->
<Setter Property="VisualIntervalGroupStyles">
 <Setter.Value>
   <c1sched:IntervalGroupStyleCollection>
      <c1sched:GroupStyle ContainerStyleSelector="{StaticResource DayGroupStyleSelector}">
         <c1sched:GroupStyle.Panel>
            <DataTemplate>
               <c1:C1UniformGrid Rows="1" />
            </DataTemplate>
         </c1sched:GroupStyle.Panel>
      </c1sched:GroupStyle>
      <c1sched:GroupStyle ContainerStyleSelector="{StaticResource TimeSlotGroupStyleSelector}">
         <c1sched:GroupStyle.Panel>
            <DataTemplate>
              <c1:C1UniformGrid Rows="24" Columns="1" />
            </DataTemplate>
         </c1sched:GroupStyle.Panel>
       </c1sched:GroupStyle>
   </c1sched:IntervalGroupStyleCollection>
 </Setter.Value>
</Setter>

To provide a custom look for the C1Scheduler control:

To define a general layout model for a C1Scheduler control, the C1Scheduler.Template property should be assigned. This is usually done through the Setter property of a Style. The template may contain any UI elements, but in some places of the template's visual tree, the following placeholder elements should appear:
- VisualIntervalGroupsPresenter - to designate a place where the collection of VisualIntervalGroup objects will appear;
- AppointmentsCoverPane – to provide a surface for drawing appointment boxes;
- C1SchedulerPresenter – to define a place where a pane representing schedule time intervals will appear.
  Note that each of the placeholders enumerated above is optional.
To define grouping:
- Set VisualIntervalGroupDescriptions to define grouping criteria applied to the items of the VisualIntervalCollection;
- Set C1Scheduler.VisualIntervalGroupStyles to define a UI for each group level;
To define a layout of elements representing VisualInterval objects from the VisualIntervalCollection, set the C1Scheduler.VisualIntervalPanel property.
To define the VisualInterval representation, either set the C1Scheduler.VisualIntervalTemplate property or use the TimeSlotTemplateSelector.