Step 1 of 4: Creating the Application

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

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

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

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

Add a set of <Window.Resources> </Window.Resources> tags above the <Grid> tags.

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>

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="\|<<" Margin="2" Command="c1sched:C1Scheduler.NavigateToPreviousGroupCommand" CommandParameter="Home" CommandTarget="{Binding ElementName=c1Scheduler1}"/> <Button Content="<<" Margin="2" Command="c1sched:C1Scheduler.NavigateToPreviousGroupCommand" CommandParameter="Page" CommandTarget="{Binding ElementName=c1Scheduler1}"/> <Button Content="<" Margin="2" Command="c1sched:C1Scheduler.NavigateToPreviousGroupCommand" CommandTarget="{Binding ElementName=c1Scheduler1}"/> <Button Content=">" Margin="2" Command="c1sched:C1Scheduler.NavigateToNextGroupCommand" CommandTarget="{Binding ElementName=c1Scheduler1}"/> <Button Content=">>" Margin="2" Command="c1sched:C1Scheduler.NavigateToNextGroupCommand" CommandParameter="Page" CommandTarget="{Binding ElementName=c1Scheduler1}"/> <Button Content=">>\|" 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>

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.