この手順では、アプリケーションのリソースとデータ連結を作成します。また、C1Scheduler コントロールを追加してカスタマイズします。

次の手順に従います。

1. 名前空間宣言の下に <Window.Resources> </Window.Resources> を追加します。

2. <Window.Resources> タグの間をクリックし、<ResourceDictionary> </ResourceDictionary> タグセットを追加します。

3. <ResourceDictionary> タグの間をクリックし、結合された辞書を追加します。

   XAML	コードのコピー
   <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="/C1.WPF.Schedule;component/themes/SchedulerThemes/Office2007/Default.xaml" /> </ResourceDictionary.MergedDictionaries>

4. 結合された辞書のすぐ後に、<DataTemplate> </DataTemplate> タグセットを追加します。

5. <DataTemplate> 開始タグをクリックし、次の XAML マークアップを追加します。

   XAML	コードのコピー
   x:Key="myCustomGroupHeaderTemplate" The opening tag should resemble the following: <DataTemplate x:Key="myCustomGroupHeaderTemplate">

6. <DataTemplate> タグの間に次のマークアップを挿入して、<DataTemplate.Resources> を追加します。

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

7. <DataTemplate.Resources> マークアップの下に、<Grid> </Grid> タグセットを追加します。最初の <Grid> タグをクリックし、タグに SnapsToDevicePixels="True" を追加します。

8. 次のマークアップを使用して、グリッドコンポーネントに行および列定義を追加します。

   XAML	コードのコピー
   <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="Auto"/> <ColumnDefinition/> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="Auto"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition /> </Grid.RowDefinitions>

9. この Grid コンポーネントに使用する C1BrushBuilder および Border コントロールを作成します。

   XAML	コードのコピー
   <c1:C1BrushBuilder x:Name="Background"> <c1:C1BrushBuilder x:Name="BorderBrush" Input="{Binding Background}"> <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. Scheduler ビューのナビゲーションと表示を制御するために、いくつかの ButtonTemplate と TextBlock を追加します。

    XAML

    コードのコピー

    <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}}"/> <!-- 前のグループに移動します --> <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}}"/> <!-- 次のグループに移動します --> <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}}"/> <!-- 最後のグループに移動します --> <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"/> <!-- 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. TimeLine スタイルのグループヘッダーを制御するために、別の <DataTemplate> を作成します。

    XAML

    コードのコピー

    <DataTemplate x:Key="myCustomTimeLineGroupHeaderTemplate"> <Grid IsHitTestVisible="False"> <c1:C1BrushBuilder x:Name="Background"> <c1:C1BrushBuilder x:Name="BorderBrush"> <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"/> <!-- EmployeesRow から追加情報を表示します --> <TextBlock TextWrapping="Wrap" Foreground="{Binding Path=Scheduler.Foreground}" Margin="2" Text="{Binding Path=Tag[Title]}" HorizontalAlignment="Center"/> </StackPanel> </Border> </Grid> </DataTemplate>

12. </Window.Resources> 終了タグの下に、<Grid> </Grid> タグセットを追加します。

13. 次のマークアップを <Grid> タグの間に挿入します。

    XAML	コードのコピー
    <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="196"/> <ColumnDefinition MinWidth="200"/> </Grid.ColumnDefinitions>

14. <Grid> タグ内で次のコードを使用して、アプリケーションのツールバーを作成します。

    XAML

    コードのコピー

    <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. 最後に、C1Calendar および C1Scheduler コントロールと、アプリケーションとの連結を作成します。

    XAML

    コードのコピー

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

この手順では、アプリケーションのデータ連結とリソースを作成しました。また、C1Scheduler コントロールと C1Calendar コントロールを作成し、いくつかのスケジューラ設定をカスタマイズしました。次の手順では、アプリケーションを制御するコードを追加します。