ComponentOne Scheduler for WPF and Silverlight
C1Scheduler Task-Based Help / C1Scheduler Tasks / Customizing the Time Column
In This Topic
    Customizing the Time Column
    In This Topic

    To customize the time column of a C1Scheduler control, you can edit the built-in C1Scheduler_TimeRuler_Template. In the following examples, we will edit the TimeRuler datatemplate to change the way the time appears in the time column and to change the background color of the time column.

    Changing the layout of the time column

    1. In the Visual Studio Solution Explorer, right-click the project name and select Add > Resource Dictionary.
    2. Name your resource dictionary and click Add.
    3. Add the C1Scheduler namespace so it looks like the following:

      XAML
      Copy Code
      <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:c1="clr-namespace:C1.Silverlight.C1Schedule;assembly=C1.Silverlight.C1Schedule"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
      

    4. Find and open Default.xml installed with the product to C:\Program Files\ComponentOne\WPF Edition\C1Schedule\XAML\themes\SchedulerThemes\Office2007 or C:\Program Files\ComponentOne\Silverlight Edition\C1Schedule\XAML\themes\SchedulerThemes\Office2007.
    5. Find the datatemplate with the C1Scheduler_TimeRuler_Template key.

      XAML
      Copy Code
      <!-- determines the template used for one hour of a time ruler in a Day view -->
            <DataTemplate x:Key="C1Scheduler_TimeRuler_Template">
                  <Grid Name="OneHourGrid">
                        <Grid.ColumnDefinitions>
                              <ColumnDefinition Width="Auto" />
                              <ColumnDefinition MinWidth="20" SharedSizeGroup="Minutes" />
                        </Grid.ColumnDefinitions>
                        <ItemsControl Grid.Column="1" x:Name="IntervalMarkersList" ItemsSource="{Binding Items}">
                              <ItemsControl.ItemTemplate>
                                    <DataTemplate>
                                          <Border BorderThickness="0,1px,0,0" Margin="0,0,4,0" SnapsToDevicePixels="True"
                                                      BorderBrush="{DynamicResource C1Scheduler_ControlAreaLines_Brush}" />
                                    </DataTemplate>
                              </ItemsControl.ItemTemplate>
                              <ItemsControl.ItemsPanel>
                                    <ItemsPanelTemplate>
                                          <UniformGrid Rows="{Binding ElementName=IntervalMarkersList, Path=Items.Count}" />
                                    </ItemsPanelTemplate>
                              </ItemsControl.ItemsPanel>
                        </ItemsControl>
                        <Border BorderThickness="0,1px,0,0" Margin="4,0,0,0" Grid.Column="0" SnapsToDevicePixels="True"
                                    BorderBrush="{DynamicResource C1Scheduler_ControlAreaLines_Brush}"
                                    HorizontalAlignment="Right" VerticalAlignment="Top" MinWidth="25">
                              <TextBlock
                                          FontSize="16" Foreground="{DynamicResource C1Scheduler_ControlAreaText_Brush}"
                                          HorizontalAlignment="Right" Padding="3,0,3,0" >
                                    <TextBlock.Text>
                                          <MultiBinding Converter="{x:Static c1sched:DateTimeInfoToStringConverter.Default}">
                                                <Binding Path="StartTimeInfo"/>
                                                <Binding Source="hh" />
                                          </MultiBinding>
                                    </TextBlock.Text>
                              </TextBlock>
                        </Border>
                        <TextBlock FontSize="11" Grid.Column="1"
                                    Foreground="{DynamicResource C1Scheduler_ControlAreaText_Brush}"
                                    HorizontalAlignment="Right" Padding="3,2,2,0" Margin="0,0,4,0">
                                    <TextBlock.Text>
                                          <Binding Converter="{x:Static c1sched:TimeRulerConverter.Default}"
                                                      Path="VisualIntervals[0].StartTimeInfo" />
                                    </TextBlock.Text>
                        </TextBlock>
                  </Grid>
            </DataTemplate>
      

    6. Copy and paste the datatemplate into your resource dictionary.
    7. Change the following XAML:
      <TextBlock Text="{Binding VisualIntervals[0].StartTimeInfo.FormattedDate[hh]}"
      

      So that it looks like this:

      <TextBlock Text="{Binding VisualIntervals[0].StartTimeInfo.FormattedDate[%h]}"
      
    8. In the Solution Explorer, double-click Window1.xaml or the main window/page of your project.
    9. Add a resource to point to your resource dictionary:

      XAML
      Copy Code
      <Window.Resources>
      <ResourceDictionary>
      <ResourceDictionary x:Key="{ComponentResourceKey TypeInTargetAssembly={x:Type my:C1Scheduler},
      ResourceId=custom_theme}" Source="MyResourceDictionary.xaml" />
      </ResourceDictionary>
      </Window.Resources>
      

    Here is an example of what the time column looked like before changing the datatemplate as well as what it looks like once the custom format string is changed:

    hh Format String

    %h Format String

     

    Changing the color of the time column

    1. In the Visual Studio Solution Explorer, right-click the project name and select Add > Resource Dictionary.
    2. Name your resource dictionary and click Add.
    3. Add the C1Scheduler namespace so it looks like the following:

      XAML
      Copy Code
      <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:c1="clr-namespace:C1.Silverlight.C1Schedule;assembly=C1.Silverlight.C1Schedule"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
      

    4. Find and open Default.xml installed with the product to C:\Program Files\ComponentOne\WPF Edition\C1Schedule\XAML\themes\SchedulerThemes\Office2007 or C:\Program Files\ComponentOne\Silverlight Edition\C1Schedule\XAML\themes\SchedulerThemes\Office2007.
    5. Find the datatemplate with the C1Scheduler_TimeRuler_Template key.

      XAML
      Copy Code
      <!-- determines the template used for one hour of a time ruler in a Day view -->
      <DataTemplate x:Key="C1Scheduler_TimeRuler_Template">
      <Grid Name="OneHourGrid">
      <Grid.ColumnDefinitions>
      <ColumnDefinition Width="Auto" />
      <ColumnDefinition MinWidth="20" SharedSizeGroup="Minutes" />
      </Grid.ColumnDefinitions>
      <ItemsControl Grid.Column="1" x:Name="IntervalMarkersList" ItemsSource="{Binding Items}">
      <ItemsControl.ItemTemplate>
      <DataTemplate>
      <Border BorderThickness="0,1px,0,0" Margin="0,0,4,0" SnapsToDevicePixels="True"
      BorderBrush="{DynamicResource C1Scheduler_ControlAreaLines_Brush}" />
      </DataTemplate>
      </ItemsControl.ItemTemplate>
      <ItemsControl.ItemsPanel>
      <ItemsPanelTemplate>
      <UniformGrid Rows="{Binding ElementName=IntervalMarkersList, Path=Items.Count}" />
      </ItemsPanelTemplate>
      </ItemsControl.ItemsPanel>
      </ItemsControl>
      <Border BorderThickness="0,1px,0,0" Margin="4,0,0,0" Grid.Column="0" SnapsToDevicePixels="True"
      BorderBrush="{DynamicResource C1Scheduler_ControlAreaLines_Brush}"
      HorizontalAlignment="Right" VerticalAlignment="Top" MinWidth="25">
      <TextBlock Text="{Binding VisualIntervals[0].StartTimeInfo.FormattedDate[hh]}"
      FontSize="16"
      Foreground="{DynamicResource C1Scheduler_ControlAreaText_Brush}"
      HorizontalAlignment="Right" Padding="3,0,3,0" />
      </Border>
      <TextBlock FontSize="11" Grid.Column="1"
      Foreground="{DynamicResource C1Scheduler_ControlAreaText_Brush}"
      HorizontalAlignment="Right" Padding="3,2,2,0" Margin="0,0,4,0">
      <TextBlock.Text>
      <Binding Converter="{x:Static c1sched:TimeRulerConverter.Default}"
      Mode="OneWay" Path="VisualIntervals[0].StartTimeInfo" />
      </TextBlock.Text>
      </TextBlock>
      </Grid>
      </DataTemplate>
      

    6. Copy and paste the datatemplate into your resource dictionary.
    7. Edit the Grid Name to include a background color:
      <Grid Name="OneHourGrid" Background="Orange">
      
    8. In the Solution Explorer, double-click Window1.xaml or the main window/page of your project.
    9. Add a resource to point to your resource dictionary:

      XAML
      Copy Code
      <Window.Resources>
      <ResourceDictionary>
      <ResourceDictionary x:Key="{ComponentResourceKey TypeInTargetAssembly={x:Type my:C1Scheduler},
      ResourceId=custom_theme}" Source="MyResourceDictionary.xaml" />
      </ResourceDictionary>
      </Window.Resources>
      

    This XAML creates a schedule that looks like the following image: