Customizing the Time Column

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

In the Visual Studio Solution Explorer, right-click the project name and select Add > Resource Dictionary.
Name your resource dictionary and click Add.

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">

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">

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.

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>

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>

Copy and paste the datatemplate into your resource dictionary.

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]}"

In the Solution Explorer, double-click Window1.xaml or the main window/page of your project.

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>

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

In the Visual Studio Solution Explorer, right-click the project name and select Add > Resource Dictionary.
Name your resource dictionary and click Add.

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">

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">

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.

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>

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>

Copy and paste the datatemplate into your resource dictionary.

Edit the Grid Name to include a background color:

<Grid Name="OneHourGrid" Background="Orange">

In the Solution Explorer, double-click Window1.xaml or the main window/page of your project.

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>

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: