Step 2 of 4: Creating the Resources and the C1Scheduler Control

In this step you will create your application resources and data bindings. You will also add and customize a C1Scheduler control.

Follow these steps:

Add <Window.Resources> </Window.Resources> beneath the namespace declarations.
Click between the <Window.Resources> tags and add a set of <ResourceDictionary> </ResourceDictionary> tags.

Click between the <ResourceDictionary> tags and add a Merged Dictionary:

XAML	Copy Code
<ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="/C1.WPF.Schedule;component/themes/SchedulerThemes/Office2007/Default.xaml" /> </ResourceDictionary.MergedDictionaries>

Directly after the Merged Dictionary, add a set of <DataTemplate> </DataTemplate> tags.

Click in the opening <DataTemplate> tag and add the following XAML markup:

XAML	Copy Code
x:Key="myCustomGroupHeaderTemplate" The opening tag should resemble the following: <DataTemplate x:Key="myCustomGroupHeaderTemplate">

Insert the following markup between the <DataTemplate> tags to add <DataTemplate.Resources>:

XAML	Copy Code
<DataTemplate.Resources> <ControlTemplate x:Key="looklessButton" TargetType="{x:Type Button}"> <Border> <ContentPresenter Margin="4,0" VerticalAlignment="Center"/> </Border> </ControlTemplate> </DataTemplate.Resources>

XAML

Copy Code

<DataTemplate.Resources>
                    <ControlTemplate x:Key="looklessButton" TargetType="{x:Type Button}">
                        <Border>
                            <ContentPresenter Margin="4,0" VerticalAlignment="Center"/>
                        </Border>
                    </ControlTemplate>
                </DataTemplate.Resources>

Beneath the <DataTemplate.Resources> markup, insert a set of <Grid> </Grid> tags. Click in the first <Grid> tag and add SnapsToDevicePixels="True" to the tag.

Use the following markup to add row and column definitions to the Grid component:

XAML	Copy Code
<Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="Auto"/> <ColumnDefinition/> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="Auto"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition /> </Grid.RowDefinitions>

XAML

Copy Code

<Grid.ColumnDefinitions>
     <ColumnDefinition Width="Auto"/>
     <ColumnDefinition Width="Auto"/>
     <ColumnDefinition/>
     <ColumnDefinition Width="Auto"/>
     <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
       <RowDefinition />
       <RowDefinition />
    </Grid.RowDefinitions>

Create the C1BrushBuilders and the Border control for the Grid component:

XAML	Copy Code
<c1:C1BrushBuilder x:Name="Background" Style="{StaticResource C1Scheduler_ControlArea_BrushStyle}" Input="{Binding Background}"/> <c1:C1BrushBuilder x:Name="BorderBrush" Input="{Binding Background}" Style="{StaticResource C1Scheduler_MonthHeaderForeground_BrushStyle}"/> <Border VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Grid.Column="2" Grid.RowSpan="2" BorderThickness="1,0,1,0" BorderBrush="{Binding Output, ElementName=BorderBrush}" Background="{Binding Output, ElementName=Background}"/>

XAML

Copy Code

<c1:C1BrushBuilder x:Name="Background" Style="{StaticResource C1Scheduler_ControlArea_BrushStyle}" Input="{Binding Background}"/>
                    <c1:C1BrushBuilder x:Name="BorderBrush" Input="{Binding Background}" Style="{StaticResource C1Scheduler_MonthHeaderForeground_BrushStyle}"/>
                    <Border VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Grid.Column="2" Grid.RowSpan="2"
                                             BorderThickness="1,0,1,0" BorderBrush="{Binding Output, ElementName=BorderBrush}"
                                             Background="{Binding Output, ElementName=Background}"/>

Add the ButtonTemplates and the TextBlocks to control the navigation and display for the Scheduler view:

XAML	Copy Code
<Button Template="{StaticResource looklessButton}" Content="\|<<" Grid.Column="0" Grid.RowSpan="2" VerticalAlignment="Center" FontSize="12" Command="c1sched:C1Scheduler.NavigateToPreviousGroupCommand" CommandParameter="Home" CommandTarget="{Binding Scheduler}" Visibility="{Binding ShowPreviousButton, Converter={x:Static c1sched:BooleanToVisibilityConverter.Default}}"/> <!-- navigate to the previous group --> <Button Template="{StaticResource looklessButton}" Content="<" Grid.Column="1" Grid.RowSpan="2" VerticalAlignment="Center" FontSize="12" Command="c1sched:C1Scheduler.NavigateToPreviousGroupCommand" CommandTarget="{Binding Scheduler}" Visibility="{Binding ShowPreviousButton, Converter={x:Static c1sched:BooleanToVisibilityConverter.Default}}"/> <!-- navigate to the next group --> <Button Template="{StaticResource looklessButton}" Content=">" Grid.Column="3" Grid.RowSpan="2" VerticalAlignment="Center" FontSize="12" Command="c1sched:C1Scheduler.NavigateToNextGroupCommand" CommandTarget="{Binding Scheduler}" Visibility="{Binding ShowNextButton, Converter={x:Static c1sched:BooleanToVisibilityConverter.Default}}"/> <!-- navigate to the last group --> <Button Template="{StaticResource looklessButton}" Content=">>\|" Grid.Column="4" Grid.RowSpan="2" VerticalAlignment="Center" FontSize="12" Command="c1sched:C1Scheduler.NavigateToNextGroupCommand" CommandParameter="End" CommandTarget="{Binding Scheduler}" Visibility="{Binding ShowNextButton, Converter={x:Static c1sched:BooleanToVisibilityConverter.Default}}"/> <TextBlock Foreground="{Binding Path=Scheduler.Foreground}" Margin="10,3" Grid.Column="2" Visibility="{Binding IsSelected, Converter={x:Static c1sched:BooleanToVisibilityConverter.Default}, ConverterParameter=Invert}" Text="{Binding DisplayName}" VerticalAlignment="Center" HorizontalAlignment="Center"/> <TextBlock Foreground="{Binding Path=Scheduler.Foreground}" Margin="10,3" Grid.Column="2" FontWeight="Bold" Visibility="{Binding IsSelected, Converter={x:Static c1sched:BooleanToVisibilityConverter.Default}}" Text="{Binding DisplayName}" VerticalAlignment="Center" HorizontalAlignment="Center"/> <!-- show additional info from the EmployeesRow --> <TextBlock Foreground="{Binding Path=Scheduler.Foreground}" Margin="10,3" Grid.Column="2" Grid.Row="1" Text="{Binding Path=Tag.Title}" VerticalAlignment="Center" HorizontalAlignment="Center"/>

XAML

Copy Code

<Button Template="{StaticResource looklessButton}" Content="|&lt;&lt;" Grid.Column="0" Grid.RowSpan="2" VerticalAlignment="Center"
                                                FontSize="12"
                                                Command="c1sched:C1Scheduler.NavigateToPreviousGroupCommand" CommandParameter="Home" CommandTarget="{Binding Scheduler}"
                                                Visibility="{Binding ShowPreviousButton, Converter={x:Static c1sched:BooleanToVisibilityConverter.Default}}"/>
                    <!-- navigate to the previous group -->
                    <Button Template="{StaticResource looklessButton}" Content="&lt;" Grid.Column="1" Grid.RowSpan="2" VerticalAlignment="Center"
                                                FontSize="12"
                                                Command="c1sched:C1Scheduler.NavigateToPreviousGroupCommand" CommandTarget="{Binding Scheduler}"
                                                Visibility="{Binding ShowPreviousButton, Converter={x:Static c1sched:BooleanToVisibilityConverter.Default}}"/>
                    <!-- navigate to the next group -->
                    <Button Template="{StaticResource looklessButton}" Content="&gt;" Grid.Column="3" Grid.RowSpan="2" VerticalAlignment="Center"
                                                FontSize="12"
                                                Command="c1sched:C1Scheduler.NavigateToNextGroupCommand" CommandTarget="{Binding Scheduler}"
                                                Visibility="{Binding ShowNextButton, Converter={x:Static c1sched:BooleanToVisibilityConverter.Default}}"/>
                    <!-- navigate to the last group -->
                    <Button Template="{StaticResource looklessButton}" Content="&gt;&gt;|" Grid.Column="4" Grid.RowSpan="2" VerticalAlignment="Center"
                                                FontSize="12"
                                                Command="c1sched:C1Scheduler.NavigateToNextGroupCommand" CommandParameter="End" CommandTarget="{Binding Scheduler}"
                                                Visibility="{Binding ShowNextButton, Converter={x:Static c1sched:BooleanToVisibilityConverter.Default}}"/>
                    <TextBlock Foreground="{Binding Path=Scheduler.Foreground}" Margin="10,3" Grid.Column="2"
                                             Visibility="{Binding IsSelected, Converter={x:Static c1sched:BooleanToVisibilityConverter.Default}, ConverterParameter=Invert}"
                                             Text="{Binding DisplayName}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                    <TextBlock Foreground="{Binding Path=Scheduler.Foreground}" Margin="10,3" Grid.Column="2"
                                             FontWeight="Bold" Visibility="{Binding IsSelected, Converter={x:Static c1sched:BooleanToVisibilityConverter.Default}}"
                                             Text="{Binding DisplayName}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
       <!-- show additional info from the EmployeesRow -->
                    <TextBlock Foreground="{Binding Path=Scheduler.Foreground}" Margin="10,3" Grid.Column="2" Grid.Row="1"
                                             Text="{Binding Path=Tag.Title}" VerticalAlignment="Center" HorizontalAlignment="Center"/>

Create another <DataTemplate> to control the group header for the TimeLine style:

XAML	Copy Code
<DataTemplate x:Key="myCustomTimeLineGroupHeaderTemplate"> <Grid IsHitTestVisible="False"> <c1:C1BrushBuilder x:Name="Background" Style="{StaticResource C1Scheduler_ControlArea_BrushStyle}" Input="{Binding Background}"/> <c1:C1BrushBuilder x:Name="BorderBrush" Style="{StaticResource C1Scheduler_MonthHeaderForeground_BrushStyle}" Input="{Binding Background}"/> <Border VerticalAlignment="Stretch" HorizontalAlignment="Stretch" BorderThickness="4,1,0,1" BorderBrush="{Binding Output, ElementName=BorderBrush}" Background="{Binding Output, ElementName=Background}"> <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center"> <TextBlock TextWrapping="Wrap" Foreground="{Binding Path=Scheduler.Foreground}" Margin="2" Text="{Binding DisplayName}" HorizontalAlignment="Center"/> <!-- show additional info from the EmployeesRow --> <TextBlock TextWrapping="Wrap" Foreground="{Binding Path=Scheduler.Foreground}" Margin="2" Text="{Binding Path=Tag[Title]}" HorizontalAlignment="Center"/> </StackPanel> </Border> </Grid> </DataTemplate>

XAML

Copy Code

<DataTemplate x:Key="myCustomTimeLineGroupHeaderTemplate">
                <Grid IsHitTestVisible="False">
                    <c1:C1BrushBuilder x:Name="Background" Style="{StaticResource C1Scheduler_ControlArea_BrushStyle}" Input="{Binding Background}"/>
                    <c1:C1BrushBuilder x:Name="BorderBrush" Style="{StaticResource C1Scheduler_MonthHeaderForeground_BrushStyle}" Input="{Binding Background}"/>
                    <Border VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
                                   BorderThickness="4,1,0,1" BorderBrush="{Binding Output, ElementName=BorderBrush}"
                                   Background="{Binding Output, ElementName=Background}">
                        <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
                            <TextBlock TextWrapping="Wrap" Foreground="{Binding Path=Scheduler.Foreground}" Margin="2"
                                               Text="{Binding DisplayName}" HorizontalAlignment="Center"/>
                            <!-- show additional info from the EmployeesRow -->
                            <TextBlock TextWrapping="Wrap" Foreground="{Binding Path=Scheduler.Foreground}" Margin="2"
                                                  Text="{Binding Path=Tag[Title]}" HorizontalAlignment="Center"/>
                        </StackPanel>
                    </Border>
                </Grid>
            </DataTemplate>

Beneath the closing </Window.Resources> tag, insert a set of <Grid> </Grid> tags.

Insert the following markup between the <Grid> tags:

XAML	Copy Code
<Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="196"/> <ColumnDefinition MinWidth="200"/> </Grid.ColumnDefinitions>

XAML

Copy Code

<Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="196"/>
            <ColumnDefinition MinWidth="200"/>
        </Grid.ColumnDefinitions>

Use the following code within the <Grid> tags to create the ToolBar for your application:

XAML	Copy Code
<ToolBar Grid.Row="0" Grid.ColumnSpan="2"> <RadioButton x:Name="btnDay" Content="Day" CommandTarget="{Binding ElementName=Scheduler}" Command="c1sched:C1Scheduler.ChangeStyleCommand" CommandParameter="{Binding Path=OneDayStyle, ElementName=Scheduler}"/> <RadioButton x:Name="btnWorkWeek" Content="Work Week" CommandTarget="{Binding ElementName=Scheduler}" Command="c1sched:C1Scheduler.ChangeStyleCommand" CommandParameter="{Binding Path=WorkingWeekStyle, ElementName=Scheduler}"/> <RadioButton x:Name="btnWeek" Content="Week" CommandTarget="{Binding ElementName=Scheduler}" Command="c1sched:C1Scheduler.ChangeStyleCommand" CommandParameter="{Binding Path=WeekStyle, ElementName=Scheduler}"/> <RadioButton x:Name="btnMonth" Content="Month" CommandTarget="{Binding ElementName=Scheduler}" Command="c1sched:C1Scheduler.ChangeStyleCommand" CommandParameter="{Binding Path=MonthStyle, ElementName=Scheduler}"/> <RadioButton x:Name="btnTimeLine" Content="Time Line" CommandTarget="{Binding ElementName=Scheduler}" Command="c1sched:C1Scheduler.ChangeStyleCommand" CommandParameter="{Binding Path=TimeLineStyle, ElementName=Scheduler}"/> </ToolBar>

XAML

Copy Code

<ToolBar Grid.Row="0" Grid.ColumnSpan="2">
            <RadioButton x:Name="btnDay" Content="Day"
                             CommandTarget="{Binding ElementName=Scheduler}"
                             Command="c1sched:C1Scheduler.ChangeStyleCommand"
                             CommandParameter="{Binding Path=OneDayStyle, ElementName=Scheduler}"/>
            <RadioButton x:Name="btnWorkWeek" Content="Work Week"
                             CommandTarget="{Binding ElementName=Scheduler}"
                             Command="c1sched:C1Scheduler.ChangeStyleCommand"
                             CommandParameter="{Binding Path=WorkingWeekStyle, ElementName=Scheduler}"/>
            <RadioButton x:Name="btnWeek" Content="Week"
                             CommandTarget="{Binding ElementName=Scheduler}"
                             Command="c1sched:C1Scheduler.ChangeStyleCommand"
                             CommandParameter="{Binding Path=WeekStyle, ElementName=Scheduler}"/>
            <RadioButton x:Name="btnMonth" Content="Month"
                             CommandTarget="{Binding ElementName=Scheduler}"
                             Command="c1sched:C1Scheduler.ChangeStyleCommand"
                             CommandParameter="{Binding Path=MonthStyle, ElementName=Scheduler}"/>
            <RadioButton x:Name="btnTimeLine" Content="Time Line"
                                        CommandTarget="{Binding ElementName=Scheduler}"
                                        Command="c1sched:C1Scheduler.ChangeStyleCommand"
                                        CommandParameter="{Binding Path=TimeLineStyle, ElementName=Scheduler}"/>
        </ToolBar>

Finally, create the C1Calendar and C1Scheduler controls and their bindings for your application:

XAML	Copy Code
<c1sched:C1Calendar x:Name="Calendar" VerticalAlignment="Stretch" Grid.Column="0" Grid.Row="1" MaxSelectionCount="42" SelectedDates="{Binding VisibleDates, ElementName=Scheduler}" CalendarHelper="{Binding CalendarHelper, ElementName=Scheduler}" BoldedDates="{Binding BoldedDates, ElementName=Scheduler}" GenerateAdjacentMonthDays="true" Margin="2"/> <ListBox Grid.Column="0" Grid.Row="2" x:Name="lstUsers" MinHeight="100" Margin="2" ItemsSource="{Binding GroupItems, ElementName=Scheduler}"> <ListBox.ItemTemplate> <DataTemplate> <CheckBox Margin="2" Content="{Binding}" Tag="{Binding}" IsChecked="{Binding IsChecked}"/> </DataTemplate> </ListBox.ItemTemplate> </ListBox> <c1sched:C1Scheduler x:Name="Scheduler" GroupBy="Owner" GroupHeaderTemplate="{StaticResource myCustomGroupHeaderTemplate}" GroupPageSize="2" Grid.Column="1" Grid.Row="1" Grid.RowSpan="2" Style="{DynamicResource {ComponentResourceKey ResourceId=OneDayStyle, TypeInTargetAssembly=c1sched:C1Scheduler}}"> <c1sched:C1Scheduler.Settings> <c1sched:C1SchedulerSettings FirstVisibleTime="07:00:00" AllowContactsEditing="False" AllowCategoriesEditing="False" AllowCategoriesMultiSelection="False" /> </c1sched:C1Scheduler.Settings> </c1sched:C1Scheduler>

XAML

Copy Code

<c1sched:C1Calendar x:Name="Calendar" VerticalAlignment="Stretch" Grid.Column="0" Grid.Row="1"
                                 MaxSelectionCount="42" SelectedDates="{Binding VisibleDates, ElementName=Scheduler}"
                                 CalendarHelper="{Binding CalendarHelper, ElementName=Scheduler}"
                                 BoldedDates="{Binding BoldedDates, ElementName=Scheduler}"
                                 GenerateAdjacentMonthDays="true" Margin="2"/>
        <ListBox Grid.Column="0" Grid.Row="2" x:Name="lstUsers" MinHeight="100" Margin="2"
                      ItemsSource="{Binding GroupItems, ElementName=Scheduler}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <CheckBox Margin="2" Content="{Binding}" Tag="{Binding}" IsChecked="{Binding IsChecked}"/>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
        <c1sched:C1Scheduler x:Name="Scheduler"
                                        GroupBy="Owner" GroupHeaderTemplate="{StaticResource myCustomGroupHeaderTemplate}" GroupPageSize="2"
                                        Grid.Column="1" Grid.Row="1" Grid.RowSpan="2"
                                        Style="{DynamicResource {ComponentResourceKey ResourceId=OneDayStyle, TypeInTargetAssembly=c1sched:C1Scheduler}}">
            <c1sched:C1Scheduler.Settings>
                <c1sched:C1SchedulerSettings FirstVisibleTime="07:00:00" AllowContactsEditing="False" AllowCategoriesEditing="False" AllowCategoriesMultiSelection="False" />
            </c1sched:C1Scheduler.Settings>
        </c1sched:C1Scheduler>

In this step you created the application databindings and resources. You also created the C1Scheduler and C1Calendar controls and customized some of the scheduler settings. In the next step, you will add the code to control your application.