ComponentOne Scheduler for WPF and Silverlight
Scheduler Components and Controls / Scheduler for Silverlight Appearance / Customizing the User Interface
In This Topic
    Customizing the User Interface
    In This Topic

    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.VisualStartTimeC1Scheduler.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:

    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)
    

     

    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>
    

    To provide a custom look for the C1Scheduler control:

    1. 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.

    2. To define grouping:
    3. To define a layout of elements representing VisualInterval objects from the VisualIntervalCollection, set the C1Scheduler.VisualIntervalPanel property.
    4. To define the VisualInterval representation, either set the C1Scheduler.VisualIntervalTemplate property or use the TimeSlotTemplateSelector.