ComponentOne Scheduler for WPF and Silverlight
Scheduler for WPF Tutorials / Creating a Multi-User Schedule / Step 2 of 4: Creating the Resources and the C1Scheduler Control
In This Topic
    Step 2 of 4: Creating the Resources and the C1Scheduler Control
    In This Topic

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

    Follow these steps:

    1. Add <Window.Resources> </Window.Resources> beneath the namespace declarations.
    2. Click between the <Window.Resources> tags and add a set of <ResourceDictionary> </ResourceDictionary> tags.
    3. 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>
      

       

    4. Directly after the Merged Dictionary, add a set of <DataTemplate> </DataTemplate> tags.
    5. 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">
      

       

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

       

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

    9. 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}"/>
      

       

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

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

       

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

       

    12. Beneath the closing </Window.Resources> tag, insert a set of <Grid> </Grid> tags.
    13. 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>
      

       

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

       

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

        

      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.