ComponentOne Scheduler for WPF and Silverlight
Scheduler for WPF Tutorials / Creating a Custom Grouping View / Step 1 of 4: Creating the Application
In This Topic
    Step 1 of 4: Creating the Application
    In This Topic

    In this step you will create the main Scheduler application using XAML markup and Code.

    1. Create a new WPF application and add the following references by right-clicking References in the Solution Explorer and selecting Add Reference from the list:
      • C1.WPF.dll
      • C1.WPF.Schedule.dll
      • C1.WPF.DateTimeEditors.dll
    2. Add the following XAML namespaces to your project in the <Window> tag:
      • xmlns:c1="clr-namespace:C1.WPF;assembly=C1.WPF"
      • xmlns:c1sched="clr-namespace:C1.WPF.Schedule;assembly=C1.WPF.Schedule"
      • xmlns:c1datetime="clr-namespace:C1.WPF.DateTimeEditors;assembly=C1.WPF.DateTimeEditors"

      The <Window> tag should resemble the following:

      XAML
      Copy Code
      <Window x:Class="CustomGroupingView.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Custom Grouping View"
        xmlns:c1sched="http://schemas.componentone.com/wpf/Schedule"   xmlns:c1datetime="http://schemas.componentone.com/wpf/DateTimeEditors"
      xmlns:c1="http://schemas.componentone.com/wpf/Basic"
        Width="1024" Height="800">
      

       

    3. Add a set of <Window.Resources>  </Window.Resources> tags above the <Grid> tags.
    4. Insert the following markup between the <Window.Resources> </Window.Resources> tags to create your Resource Dictionary:
      XAML
      Copy Code
      <ResourceDictionary>
                   <ResourceDictionary x:Key="{ComponentResourceKey TypeInTargetAssembly={x:Type c1sched:C1Scheduler},
                                 ResourceId=custom_theme}" Source="CustomViews.xaml" />
              </ResourceDictionary>
      

       

    5. Insert the following XAML after the <Window.Resources> </Window.Resources> tags to create the schedule view and the C1Scheduler control:

      XAML
      Copy Code
      <Grid>
              <Grid.RowDefinitions>
                  <RowDefinition Height="Auto"/>
                  <RowDefinition />
              </Grid.RowDefinitions>
              <Grid.ColumnDefinitions>
                  <ColumnDefinition Width="192"/>
                  <ColumnDefinition />
              </Grid.ColumnDefinitions>
              <ToolBar Grid.Row="0" Grid.ColumnSpan="2">
                  <TextBlock HorizontalAlignment="Left" VerticalAlignment="Center" TextWrapping="NoWrap" Margin="4,2" Text="Contacts navigation:" />
                  <Button Content="|&lt;&lt;" Margin="2"
                                    Command="c1sched:C1Scheduler.NavigateToPreviousGroupCommand"
                                    CommandParameter="Home" CommandTarget="{Binding ElementName=c1Scheduler1}"/>
                  <Button Content="&lt;&lt;" Margin="2"
                                    Command="c1sched:C1Scheduler.NavigateToPreviousGroupCommand"
                                    CommandParameter="Page" CommandTarget="{Binding ElementName=c1Scheduler1}"/>
                  <Button Content="&lt;" Margin="2"
                                    Command="c1sched:C1Scheduler.NavigateToPreviousGroupCommand" CommandTarget="{Binding ElementName=c1Scheduler1}"/>
                  <Button Content="&gt;" Margin="2"
                                    Command="c1sched:C1Scheduler.NavigateToNextGroupCommand" CommandTarget="{Binding ElementName=c1Scheduler1}"/>
                  <Button Content="&gt;&gt;" Margin="2"
                                    Command="c1sched:C1Scheduler.NavigateToNextGroupCommand"
                                    CommandParameter="Page" CommandTarget="{Binding ElementName=c1Scheduler1}"/>
                  <Button Content="&gt;&gt;|" Margin="2"
                                    Command="c1sched:C1Scheduler.NavigateToNextGroupCommand"
                                    CommandParameter="End" CommandTarget="{Binding ElementName=c1Scheduler1}"/>
                  <Separator/>
                  <TextBlock HorizontalAlignment="Left" VerticalAlignment="Center" TextWrapping="NoWrap" Margin="4,2" Text="Contacts per page:" />
                  <c1:C1NumericBox Margin="2" Value="{Binding GroupPageSize, ElementName=c1Scheduler1, Mode=TwoWay}" Minimum="2" Maximum="5" MinWidth="35"/>
              </ToolBar>
              <c1sched:C1Calendar x:Name="cal1" Grid.Row="1" Grid.Column="0"
                                  CalendarHelper="{Binding CalendarHelper, ElementName=c1Scheduler1, Mode=OneWay}"
                                          SelectedDates="{Binding VisibleDates, ElementName=c1Scheduler1, Mode=OneWay}"
                                                BoldedDates="{Binding BoldedDates, ElementName=c1Scheduler1, Mode=OneWay}"
                                  MaxSelectionCount="42" />
              <c1sched:C1Scheduler x:Name="c1Scheduler1" Grid.Row="1" Grid.Column="1" Style="{Binding WorkingWeekStyle, ElementName=c1Scheduler1}"
                   Theme="{DynamicResource {ComponentResourceKey TypeInTargetAssembly=c1sched:C1Scheduler, ResourceId=custom_theme}}">
                  <c1sched:C1Scheduler.Settings>
                      <c1sched:C1SchedulerSettings FirstVisibleTime="7:00:00" />
                  </c1sched:C1Scheduler.Settings>
              </c1sched:C1Scheduler>
          </Grid>
      

     

    In this step you created a the markup that will call the Resource Dictionary and created a custom Scheduler view. In the next step, you will add code to your project to handle adding contacts and returning the VisualIntervalCollection for specified days.