Scheduler for WPF and Silverlight | ComponentOne
Scheduler for Silverlight Tutorials / Creating a Custom View / Step 2 of 4: Creating the Data Templates and Adding C1Scheduler
In This Topic
    Step 2 of 4: Creating the Data Templates and Adding C1Scheduler
    In This Topic

    In this step you will create the Data Templates for the different C1Scheduler views and the C1Schedule and C1Calendar controls that will make up your main view.

    1. Add the following markup after the style and brush resources to create the C1Scheduler Converter and the Data Template for displaying a single day:

      XAML
      Copy Code 
      <!-- C1Scheduler converters -->
    <c1:DateTimeToStringConverter x:Key="DateTimeToStringConverter"/>
    <c1:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
    <c1:VisualIntervalToStringConverter x:Key="VisualIntervalToStringConverter"/>

    <!-- determines the style used for displaying single day (selects different styles for current day and other days -->
    <c1:DayIntervalStyleSelector x:Key="DayStyleSelector">
        <c1:DayIntervalStyleSelector.Resources>
            <ResourceDictionary>

            <DataTemplate x:Key="DayHeaderTemplate">
                <Button HorizontalContentAlignment="Stretch" VerticalContentAlignment="Center"
                               c1:CommandExtensions.CommandParameter="{Binding Path=Scheduler.OneDayStyle}"
                             c1:CommandExtensions.Command="c1:C1Scheduler.ChangeStyleCommand"
                               c1:CommandExtensions.CommandTarget="{Binding Path=Scheduler}">
                        <Button.Style>
                            <Style TargetType="Button">
                                <Setter Property="Template">
                                    <Setter.Value>
                                        <ControlTemplate TargetType="Button">
                                            <Grid>
                                                <VisualStateManager.VisualStateGroups>
                                                   <VisualStateGroup x:Name="CommonStates">
                                                       <VisualState x:Name="Normal" />
                                                         <VisualState x:Name="MouseOver">
                                                            <Storyboard>
                                                                <ObjectAnimationUsingKeyFrames BeginTime="00:00:00"
                                                                            Duration="00:00:00.0010000"
                                                                            Storyboard.TargetName="DayHeaderBorder"
                                                                            Storyboard.TargetProperty="Background">
                                                                        <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{StaticResource DayHeader_HoverBrush}"/>
                                                                    </ObjectAnimationUsingKeyFrames>
                                                                </Storyboard>
                                                            </VisualState>
                                                        </VisualStateGroup>
                                                    </VisualStateManager.VisualStateGroups>
                            <Border x:Name="DayHeaderBorder" BorderBrush="#FF5A8ECE" VerticalAlignment="Stretch"  BorderThickness="0,0,0,1" Margin="0">
                                <Border.Background>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="#FFE7EEF7" Offset="0"/>
                                        <GradientStop Color="#FFD9E5F4" Offset="0.5"/>
                                        <GradientStop Color="#FFC9D9EE" Offset="0.5"/>
                                        <GradientStop Color="#FFE6EDF7" Offset="1"/>
                                    </LinearGradientBrush>
                                </Border.Background>
                                <ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
                                                    </Border>
                                                </Grid>
                                            </ControlTemplate>
                                        </Setter.Value>
                                    </Setter>
                                </Style>
                            </Button.Style>
                        <c1:C1DockPanel>
                        <TextBlock c1:C1DockPanel.Dock="Right" Margin="2" FontWeight="Semibold" Text="{Binding Converter={StaticResource VisualIntervalToStringConverter},
                        ConverterParameter='ddd MMMM d, yyy'}"/>                                                   
            <!-- Add empty block to fill panel (it's needed for command) -->
                        <TextBlock />
                       </c1:C1DockPanel>
        </Button>
    </DataTemplate>

    2. Insert the following XAML to create the Data Template for the Today Header:

      XAML
      Copy Code 
      <DataTemplate x:Key="TodayHeaderTemplate">
        <Button HorizontalContentAlignment="Stretch" VerticalContentAlignment="Center"
               c1:CommandExtensions.CommandParameter="{Binding Path=Scheduler.OneDayStyle}"
               c1:CommandExtensions.Command="c1:C1Scheduler.ChangeStyleCommand"
               c1:CommandExtensions.CommandTarget="{Binding Path=Scheduler}">
                <Button.Style>
                    <Style TargetType="Button">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="Button">
                                    <Grid>
                                        <VisualStateManager.VisualStateGroups>
                                            <VisualStateGroup x:Name="CommonStates">
                                                <VisualState x:Name="Normal" />
                                                    <VisualState x:Name="MouseOver">
                                                        <Storyboard>
                                                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00"
                                                                                Duration="00:00:00.0010000"
                                                                                Storyboard.TargetName="DayHeaderBorder"
                                                                                Storyboard.TargetProperty="Background">
                                                            <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{StaticResource TodayHeader_HoverBrush}"/>
                                                            </ObjectAnimationUsingKeyFrames>
                                                        </Storyboard>
                                                    </VisualState>
                                                </VisualStateGroup>
                                            </VisualStateManager.VisualStateGroups>
                                            <Border BorderThickness="0,0,0,1" x:Name="DayHeaderBorder"
                                                                      BorderBrush="Orange" Background="{StaticResource C1Scheduler_TodayHeader_Brush}"
                                                   VerticalAlignment="Stretch" Margin="0">
                                                <ContentPresenter Content="{TemplateBinding Content}"
                                                                             HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
                                                    </Border>
                                                </Grid>
                                            </ControlTemplate>
                                        </Setter.Value>
                                    </Setter>
                                </Style>
                            </Button.Style>
                            <c1:C1DockPanel>
                                <TextBlock c1:C1DockPanel.Dock="Right" Margin="2" FontWeight="Semibold"
                                       Text="{Binding Converter={StaticResource VisualIntervalToStringConverter},
                                       ConverterParameter='ddd MMMM d, yyy'}"/>
    <!-- Add empty block to fill panel (it's needed for command) -->
                                <TextBlock />
                            </c1:C1DockPanel>
                        </Button>
                    </DataTemplate>

    3. The XAML below will create the styles for the Day Header and the Today Header:

      XAML
      Copy Code 
      <!-- determines the style of the day header. It is used in all Office 2007 views -->
                    <Style x:Key="C1Scheduler_Day_Style" TargetType="c1:C1ListBoxItem">
                        <Setter Property="BorderThickness" Value="0,0,1,1" />
                        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                        <Setter Property="VerticalContentAlignment" Value="Stretch" />
                        <Setter Property="UseLayoutRounding" Value="true" />
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="c1:C1ListBoxItem">
                                    <Border x:Name="DayBorder"
                                       BorderThickness="{TemplateBinding BorderThickness}"
                                       BorderBrush="{TemplateBinding BorderBrush}">
                                        <c1:C1DockPanel >
                                            <ContentPresenter Content="{TemplateBinding Content}"
                                                         c1:C1DockPanel.Dock="Top"
                                                         ContentTemplate="{StaticResource DayHeaderTemplate}" />
                                            <ContentPresenter Content="{TemplateBinding Content}"
                                                         ContentTemplate="{TemplateBinding ContentTemplate}"    
                                                                    HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
                                        </c1:C1DockPanel>
                                    </Border>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>

    <!-- determines the style of the today header. It is used in all Office 2007 views -->
                    <Style x:Key="C1Scheduler_Today_Style" TargetType="c1:C1ListBoxItem">
                        <Setter Property="BorderThickness" Value="1,0,1,1" />
                        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                        <Setter Property="VerticalContentAlignment" Value="Stretch" />
                        <Setter Property="BorderBrush" Value="Orange" />
                        <Setter Property="UseLayoutRounding" Value="true" />
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="c1:C1ListBoxItem">
                                    <Border x:Name="DayBorder"
                                       BorderThickness="{TemplateBinding BorderThickness}"
                                       BorderBrush="{TemplateBinding BorderBrush}" Margin="-1 0 0 1">
                                        <c1:C1DockPanel>
                                            <ContentPresenter Content="{TemplateBinding Content}"
                                                         c1:C1DockPanel.Dock="Top"
                                                         ContentTemplate="{StaticResource TodayHeaderTemplate}" />
                                            <ContentPresenter Content="{TemplateBinding Content}"
                                                       ContentTemplate="{TemplateBinding ContentTemplate}"    
                                                                  HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
                                        </c1:C1DockPanel>
                                    </Border>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </ResourceDictionary>
            </c1:DayIntervalStyleSelector.Resources>
        </c1:DayIntervalStyleSelector>

    4. Insert the following XAML markup to set the styles for the Week Style, the Two Week Style, and the Work Week Style:

      XAML
      Copy Code 
      <!-- Custom Week Style -->
        <Style x:Key="CustomWeekStyle" TargetType="c1:C1Scheduler" >
            <Setter Property="c1:C1Scheduler.VisualTimeSpan" Value="7" />
            <Setter Property="c1:C1Scheduler.VisualIntervalScale" Value="1" />
            <Setter Property="FontSize" Value="11" />
            <Setter Property="FontFamily" Value="Segoe UI"/>
            <Setter Property="Background" Value="#FFBDD7F2"/>
            <Setter Property="BorderBrush" Value="Violet"/>
            <Setter Property="AppointmentForeground" Value="Navy"/>
            <Setter Property="SmallStartTimeChange" Value="7" />
            <Setter Property="LargeStartTimeChange" Value="7" />
            <Setter Property="c1:C1Scheduler.Template">
                <Setter.Value>
                    <ControlTemplate TargetType="c1:C1Scheduler">
                        <Border BorderBrush="{TemplateBinding BorderBrush}"
                                           BorderThickness="{TemplateBinding BorderThickness}">
    <!-- set DataContext to the first visible group item -->
                            <Grid Name="grid" DataContext="{Binding VisibleGroupItems[0], RelativeSource={RelativeSource TemplatedParent}}">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition />
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>
    <!-- nested setters should present in the visual tree, in other case bindings might not work for them -->
                                <ItemsControl ItemsSource="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=NestedSetters}" IsHitTestVisible="False"/>
                                <c1:C1UniformGrid Grid.Column="0" Rows="4" Columns="2" Background="{TemplateBinding Background}" >
                                    <Border Background="#FFE7EFFF" BorderBrush="#FF6392CE" BorderThickness="0 0 1 1">
                                        <c1:C1WrapPanel Margin="2,10,2,2"
                                                        VerticalAlignment="Center" HorizontalAlignment="Center">
                                            <TextBlock FontSize="12"
                                                Text="{Binding VisualIntervals[0],
                                                Converter={StaticResource VisualIntervalToStringConverter},
                                                ConverterParameter=D}" Margin="2"/>
                                            <TextBlock FontSize="12" Text=" - " Margin="2"/>
                                            <TextBlock FontSize="12"
                                                Text="{Binding Path=VisualIntervals[6],
                                                Converter={StaticResource VisualIntervalToStringConverter},
                                                ConverterParameter=D}" Margin="2"/>
                                        </c1:C1WrapPanel>
                                    </Border>
                                </c1:C1UniformGrid>
                                <c1:C1SchedulerPresenter Grid.Column="0"
                                     ItemContainerStyleSelector="{StaticResource DayStyleSelector}"/>
                                <c1:AppointmentsCoverPane Grid.Column="0"
                                                   IsDragDropDisabled="{Binding RelativeSource={RelativeSource TemplatedParent},
                                                   Path=IsDragDropDisabled}" CoverElementsMargin="10" />
                                <ScrollBar x:Name="PART_C1SchedulerScrollBar" Grid.Column="1" Orientation="Vertical"/>
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="c1:C1Scheduler.VisualIntervalPanel">
                <Setter.Value>
                    <DataTemplate>
                        <c1:C1UniformGrid Rows="4" Columns="2" FirstColumn="1" />
                    </DataTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="c1:C1Scheduler.VisualIntervalTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <Grid>
                            <Border Name="DayContentBorder" UseLayoutRounding="True"
                                               c1:AppointmentsCoverPane.KeepTimesAtDrop="True"
                                               c1:CoverElementsPane.Orientation="Horizontal"
                                    Background="White">
                                <Border Name="highlightStatusBorder" Background="{Binding Path=StatusBrush}" Opacity="0.1"/>
                            </Border>
                            <Border Background="#4090b3de"
                                Visibility="{Binding IsSelected, Converter={StaticResource BooleanToVisibilityConverter}}">
                            </Border>
                        </Grid>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    <!-- Two Week Style -->
        <Style x:Key="TwoWeekStyle" TargetType="c1:C1Scheduler" >
            <Setter Property="c1:C1Scheduler.VisualTimeSpan" Value="14" />
            <Setter Property="c1:C1Scheduler.VisualIntervalScale" Value="1" />
            <Setter Property="FontSize" Value="11" />
            <Setter Property="FontFamily" Value="Segoe UI"/>
            <Setter Property="AppointmentForeground" Value="Navy"/>
            <Setter Property="Background" Value="#FFBDD7F2"/>
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Setter Property="SmallStartTimeChange" Value="7" />
            <Setter Property="LargeStartTimeChange" Value="14" />
            <Setter Property="c1:C1Scheduler.Template">
                <Setter.Value>
                    <ControlTemplate TargetType="c1:C1Scheduler">
                        <Border BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}"
                                           BorderThickness="{TemplateBinding BorderThickness}">
    <!-- set DataContext to the first visible group item -->
                            <Grid Name="grid" DataContext="{Binding VisibleGroupItems[0], RelativeSource={RelativeSource TemplatedParent}}">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition />
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>
                                <!-- nested setters should present in the visual tree, in other case bindings might not work for them -->
                                <ItemsControl ItemsSource="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=NestedSetters}" IsHitTestVisible="False"/>
                                <c1:C1SchedulerPresenter Grid.Column="0"
                                     ItemContainerStyleSelector="{StaticResource DayStyleSelector}"/>
                                <c1:AppointmentsCoverPane Grid.Column="0"
                                                   IsDragDropDisabled="{Binding RelativeSource={RelativeSource TemplatedParent},
                                                   Path=IsDragDropDisabled}" CoverElementsMargin="10" />
                                <ScrollBar x:Name="PART_C1SchedulerScrollBar" Grid.Column="1" Orientation="Vertical"/>
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="c1:C1Scheduler.VisualIntervalPanel">
                <Setter.Value>
                    <DataTemplate>
                        <c1:C1UniformGrid Rows="2" Columns="7" Background="{Binding Scheduler.Background}" />
                    </DataTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="c1:C1Scheduler.VisualIntervalTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <Grid>
                            <Border Name="DayContentBorder" UseLayoutRounding="True"
                                               c1:AppointmentsCoverPane.KeepTimesAtDrop="True"
                                               c1:CoverElementsPane.Orientation="Horizontal"
                                    Background="White">
                                <Border Name="highlightStatusBorder" Background="{Binding Path=StatusBrush}" Opacity="0.1"/>
                            </Border>
                            <Border Background="#4090b3de"
                                Visibility="{Binding IsSelected, Converter={StaticResource BooleanToVisibilityConverter}}">
                            </Border>
                        </Grid>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    <!-- Custom Working Week Style -->
        <Style x:Key="CustomWorkingWeekStyle" TargetType="c1:C1Scheduler" >
            <Setter Property="c1:C1Scheduler.VisualTimeSpan" Value="7" />
            <Setter Property="c1:C1Scheduler.VisualIntervalScale" Value="1" />
            <Setter Property="Background" Value="#FFBDD7F2"/>
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Setter Property="FontSize" Value="11" />
            <Setter Property="AppointmentForeground" Value="Navy"/>
            <Setter Property="FontFamily" Value="Segoe UI"/>
            <Setter Property="SmallStartTimeChange" Value="7" />
            <Setter Property="LargeStartTimeChange" Value="7" />
            <Setter Property="c1:C1Scheduler.Template">
                <Setter.Value>
                    <ControlTemplate TargetType="c1:C1Scheduler">
                        <Border BorderBrush="{StaticResource BorderBrush}" Background="#FF91BAEE"
                                           BorderThickness="{TemplateBinding BorderThickness}">
    <!-- set DataContext to the first visible group item -->
                            <Grid Name="grid" DataContext="{Binding VisibleGroupItems[0], RelativeSource={RelativeSource TemplatedParent}}">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition />
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>
                                <!-- nested setters should present in the visual tree, in other case bindings might not work for them -->
                                <ItemsControl ItemsSource="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=NestedSetters}" IsHitTestVisible="False"/>
                                <c1:C1SchedulerPresenter Grid.Column="0"
                                     ItemContainerStyleSelector="{StaticResource DayStyleSelector}"/>
                                <c1:AppointmentsCoverPane Grid.Column="0"
                                                   IsDragDropDisabled="{Binding RelativeSource={RelativeSource TemplatedParent},
                                                   Path=IsDragDropDisabled}" CoverElementsMargin="10" />
                                <ScrollBar x:Name="PART_C1SchedulerScrollBar" Grid.Column="1" Orientation="Vertical"/>
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="c1:C1Scheduler.VisualIntervalPanel">
                <Setter.Value>
                    <DataTemplate>
                        <c1:C1UniformGrid Rows="1"/>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="c1:C1Scheduler.VisualIntervalTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <Grid>
                            <Border Name="DayContentBorder" UseLayoutRounding="True"
                                               c1:AppointmentsCoverPane.KeepTimesAtDrop="True"
                                               c1:CoverElementsPane.Orientation="Horizontal" BorderBrush="#FFBDD7F2"  BorderThickness="0,0,0,10"
                                    Background="White">
                                <Border Name="highlightStatusBorder" Background="{Binding Path=StatusBrush}" Opacity="0.1"/>
                            </Border>
                            <Border Background="#4090b3de"
                                Visibility="{Binding IsSelected, Converter={StaticResource BooleanToVisibilityConverter}}">
                            </Border>
                        </Grid>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>

    5. Add the following XAML below the ending </UserControl.Resources> tag to create the C1Scheduler control and the C1Calendar controls:

      XAML
      Copy Code 
      <Grid x:Name="LayoutRoot">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <c1:C1Menu Grid.Row="0" FontFamily="Segoe UI" FontSize="12" BorderThickness="1">
            <c1:C1MenuItem x:Name="btnToday" Header="Today"
                           ToolTipService.ToolTip="Navigate to the current date."
                           Click="btnToday_Click" />
            <c1:C1Separator Style="{StaticResource Separator}"/>
            <c1:C1MenuItem Header="View"
                           ToolTipService.ToolTip="Change current view.">
                <c1:C1MenuItem x:Name="btnDay" Header="Day"
                               Click="btnDay_Click"/>
                <c1:C1MenuItem x:Name="btnWorkWeek" Header="Working Week"
                               Click="btnWorkWeek_Click"/>
                <c1:C1MenuItem x:Name="btnWeek" Header="Week"
                               Click="btnWeek_Click"/>
                <c1:C1MenuItem x:Name="btn2Week" Header="Two Weeks"
                               Click="btn2Week_Click">
                </c1:C1MenuItem>
                <c1:C1MenuItem x:Name="btnMonth" Header="Month"
                               Click="btnMonth_Click"/>
                <c1:C1MenuItem x:Name="btnTimeLine" Header="Time Line"
                               Click="btnTimeLine_Click"/>
            </c1:C1MenuItem>
            <c1:C1Separator Style="{StaticResource Separator}" />
            <c1:C1MenuItem x:Name="btnImport" Header="Import..."
                           ToolTipService.ToolTip="Import data from the local file."
                           Click="btnImport_Click" />
            <c1:C1MenuItem x:Name="btnExport" Header="Export..."
                           ToolTipService.ToolTip="Export data to the local file."
                           Click="btnExport_Click" />
        </c1:C1Menu>
        <Grid Grid.Row="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="192"/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <c1:C1Calendar x:Name="cal1" Grid.Column="0"                          
                            CalendarHelper="{Binding CalendarHelper, ElementName=sched1, Mode=OneWay}"
                                 SelectedDates="{Binding VisibleDates, ElementName=sched1, Mode=OneWay}"
                                       BoldedDates="{Binding BoldedDates, ElementName=sched1, Mode=OneWay}"
                            MaxSelectionCount="42" GenerateAdjacentMonthDays="True" />
            <c1:C1Scheduler x:Name="sched1"
                            BeforeViewChange="sched1_BeforeViewChange"
                            BorderThickness="1" Grid.Column="1"
                            BorderBrush="{StaticResource BorderBrush}"
                            WorkingWeekStyle="{StaticResource CustomWorkingWeekStyle}"
                            WeekStyle="{StaticResource CustomWeekStyle}"/>
        </Grid>
    </Grid>
</UserControl>

     

     

    Copyright © 2020 GrapeCity, Inc. All rights reserved.

    Product Support Forum | Print this page