Scheduler for WPF/Silverlight · 様に、予定を1回だけ発生させたり、設定した時間が過ぎるまで何回も発生させることができます。また、予定を忘れな

Scheduler for WPF/Silverlight2018.04.11 更新

グレープシティ株式会社グレープシティ株式会社

目次

製品の概要 6

ComponentOne for WPF/Silverlight のヘルプ 6

主な特長 7

Scheduler for WPF クイックスタート 8

手順 1：データソースの設定 8-9

手順 2：データソースへの C1Scheduler の連結 9-12

手順 3：データビューとテーマの選択 12-13

手順 4：アプリケーションの実行 13-15

Scheduler for Silverlight クイックスタート 16

手順 1：アプリケーションの作成 16

手順 2：データビューの設定 16-17

手順 3：ナビゲーションボタンの追加 17

手順 4：アプリケーションの実行 17

XAML クイックリファレンス 18

例：ネストされたプロパティに値を割り当てる 18

例：稼働日ビューの曜日を設定する 18

例：C1Scheduler を C1Calendar に連結する 18-19

コントロールとコンポーネント 20-21

C1Scheduler コントロールを使用する 21-22

レイアウトおよび外観 22

C1Scheduler のデータビュー 22-23

C1Scheduler データビューのキーと外観 23-26

C1Scheduler のデフォルトのスタイルとテンプレート 27

デフォルトテンプレートの使用 27-28

ClearStyle 技術 28

C1Scheduler for WPF のテーマ 28-31

C1Scheduler のテーマの設定 31-34

デフォルトの C1Scheduler のテーマリソース 34-35

カスタムのスタイルとテンプレートを作成するためのヒント 35-36

カスタムテーマの作成 36-37

テーマパックの作成 38-39

Scheduler for WPF/Silverlight

1 Copyright © GrapeCity, Inc. All rights reserved.

テーマパックのテスト 39-40

Blend でのテーマの作成 40

C1Scheduler for Silverlight のテーマ 40-41

デフォルトのテーマ 41-42

カスタムテーマの作成 42

ユーザーインターフェイスのカスタマイズ 42-46

ユーザーインターフェイス作成の簡略化 46

複数の日の予定を表示する 46-47

Visual Intervals のスタイルとテンプレートの選択 47-49

Scheduler のコマンド 49-52

ネストされたプロパティへの値の割り当て 52

WPF を使用してC1Scheduler の連結 52

データソースへの C1Scheduler の連結 52-56

PropertyBridge クラスを使用したデータ連結 56-57

Silverlight を使用して C1Scheduler の連結 57

予定データの連結 57-59

データ中心型アーキテクチャ (Silverlight のみ) 59-60

サンプルアプリケーション 60

アプリケーションの作成 60

参照の追加 60-61

UI の作成 61

サーバー側の実装 61

データベースアクセスインフラストラクチャの追加 61-62

Web サービスの実装 62-65

クライアント側の実装 65

Web サービスへの参照の追加 65-66

Web サービスを使ったデータの取得 66-68

サーバーへの変更のコミット 69-70

ローカライズしたリソースのプロジェクトへの追加 70-71

カレンダーの設定 71-72

C1Calendar コントロールの使い方 73-74

C1Calendar の要素 74

カレンダー日のセル（スロット） 74-75



日スロットの生成 75

曜日 75

C1Calendar の外観 75-76

C1Calendar のプロパティ 76

色のプロパティ 76-79

テキストのプロパティ 79

C1Calendar のテーマ (WPF のみ) 79-81

カレンダーのテーマの設定 81-82

デフォルトのカレンダーテーマのリソース 82

カレンダーのテンプレート 82-83

C1Calendar のレイアウト 83

C1Calendar レイアウトのプロパティ 83-84

複数月カレンダーの表示 84-85

C1Calendar の配置 85

C1Calendar の動作 85

C1Calendar のナビゲーション 85-86

C1Calendar の選択 86

設定 86-88

カレンダーコントロールへのスケジュールの連結 88-90

予定 91

ラベル 91-92

公開方法 92-93

アラーム 93-94

連絡先 94

連絡先リストの追加 94-95

予定への連絡先の割り当て 95

分類 95-96

分類リストの追加 96-97

予定への分類の割り当て 97

リソース 97

リソースリストの追加 97-98

実行時における予定の操作 98-99

予定の追加と保存 99



予定の編集 99-100

予定の削除 100

予定の繰り返し 100-102

Scheduler for WPF チュートリアル 103

カスタムグループ化ビューの作成 103

手順１：アプリケーションの作成 103-105

手順２：アプリケーションへのコードの追加 105-109

手順３：リソースディクショナリの作成 109-120

手順４：アプリケーションの完成 120-121

複数ユーザースケジュールの作成 121


手順２：リソースと C1Scheduler コントロールの作成。 122-127

手順３：アプリケーションへのコードの追加 127-129

手順４：アプリケーションの実行 129-130

Scheduler for Silverlight チュートリアル 131

カスタムデータを使用するカスタムアプリケーションの作成 131

手順１：アプリケーションの作成 131

手順２：カスタムデータ構造の定義 131-139

手順３：カスタム予定ダイアログの作成 139-149

手順４：アプリケーションメインページへの機能の追加 149-153

手順５：アプリケーションの完成 153-154

カスタムビューの作成 154


手順２：データテンプレートの作成と C1Schedule コントロールの追加 156-162

手順３：アプリケーションを制御するコードの追加 162-166


複数ユーザースケジュールの作成 167


手順２：リソースと C1Scheduler コントロールの作成 172-185

手順３：アプリケーションへのコードの追加 185-194


タスク別ヘルプ 196



C1Scheduler のタスク 196

スケジューラとカレンダーのリンク 196-197

時間列のカスタマイズ 197-202

さまざまなビューの時間間隔のカスタマイズ 202-203

ナビゲーションペインのテキストの変更 203-204

ContactStorage のマッピングとデータソースの設定 204

［稼働日］ビューの曜日の設定 204-205

C1Scheduler への休日の追加 205-206

グループ化 206-207

C1Calendar のタスク 207

カレンダーの月または年の変更 207-208

最大/最小日付の設定 208

月領域の前月および翌月の日付の表示 208-209

C1Calendar で選択可能な最大日数の指定 209-210



製品の概要製品の概要

Scheduler for WPF/Silverlightを使用すると、Outlook 形式のスケジュール機能をWPF/Silverlightアプリケーションに簡単

に組み込むことができます。カスタマイズ可能なダイアログボックス、組み込みデータビュー、インポート/エクスポート機能など

のオプションにより、スケジュールアプリケーションの設計が今までになく容易になっています。

メモ：メモ：説明内に含まれるクラスおよびメンバーに対するリファレンスへのリンクは、原則としてWPF版のリファレンスペー

ジを参照します。Silverlight版については、目次から同名のメンバーを参照してください。

ComponentOne for WPF/Silverlight のヘルプのヘルプ

ComponentOne for WPF/Silverlight のインストール、ライセンス、テクニカルサポート、名前空間、およびコントロールを含

むプロジェクトの作成方法については、「ComponentOne for WPF/Silverlight ユーザーガイド」を参照してください。



http://docs.grapecity.com/help/c1/xaml/xaml_gettingstarted/ComponentOneStudioforWPFSilverlightUserGuide .html

主な特長主な特長

Scheduler for WPF/Silverlight が備える便利な主要機能の一部を以下に示します。

複数の組み込みデータビューから選択する複数の組み込みデータビューから選択する

C1Scheduler コントロールには、5つの組み込みデータビューがあります。このデータビューを使用することで、スケ

ジュールをさまざまな方法で表示する機能をユーザーに提供できます。スケジュールを日、週、週間勤務日、または月

単位で表示できます。

カスタムビューを作成するカスタムビューを作成する

カスタムスケジュールビューを作成して使用することができます。

任意のデータソースにスケジュールを連結する任意のデータソースにスケジュールを連結する

Scheduler for WPF には、標準の ADO.NET データ連結を使用する方法と、組み込みデータソースを使用する方法が

あります。C1ScheduleStorage コンポーネントと連携するデータソース設定を使用することで、テーブル内の各列に

データソースをマップし、予定、カテゴリ、連絡先、ラベル、リソース、予定の状態などを保存したりロードすることができ

ます。

カスタマイズされたダイアログボックスの作成カスタマイズされたダイアログボックスの作成

Scheduler for WPF では、［予定］、［繰り返し］、［アラーム］などのダイアログボックスに対して、独自の外観を設定でき

ます。それには、Scheduler for WPF に付属するデフォルトのテンプレートをコピーし、目的の要素をカスタマイズしま

す。空のテンプレートを作成したり、［予定］などのダイアログボックスを最初から設計することもできます。Schedulerfor WPF テンプレートの詳細については、「C1Scheduler のデフォルトのスタイルとテンプレート」を参照してください。

Outlook 形式の予定の作成形式の予定の作成

C1Scheduler コントロール内で新しい予定の追加や既存の予定の編集を簡単に行えます。Microsoft Outlook と同

様に、予定を１回だけ発生させたり、設定した時間が過ぎるまで何回も発生させることができます。また、予定を忘れな

いためにアラームを設定できます。さらに、C1Scheduler は、ユーザーが予定を管理しやすいように、12 個の組み込

みラベルと４つの空き状況オプションのほか、カスタムラベルを作成する機能も提供しています。予定はカテゴリに分け

て整理でき、各予定にリソースや連絡先を指定できます。

複数の書式のインポートとエクスポート複数の書式のインポートとエクスポート

組み込みデータソースを使用する場合は、サポートされている書式（バイナリ、XML、iCal）の中からアプリケーションに

適した書式でデータを保存またはロードできます。それには、C1ScheduleStorage の Export メソッドと Import メソッ

ドを使用するか、C1Scheduler ルーティングコマンドの ExportCommand と ImportCommand を使用します。

Office 2007 形式のテーマ形式のテーマ

Scheduler for WPF には、C1Scheduler とカレンダーコントロールのための 7 個の定義済みテーマのほか、カスタマイ

ズされたテーマを作成する機能もあります。組み込みテーマの詳細については、「C1Scheduler WPF のテー

マ」C1Scheduler Silverlight Themes または「C1Calendar のテーマ」を参照してください。



Scheduler for WPF クイックスタートクイックスタート

このクイックスタートは、Scheduler for WPF を初めて使用するユーザーのために用意されています。このクイックスタートで

は、新しい Expression Blend プロジェクトを作成し、C1Scheduler をアプリケーションに追加します。次に、データソースに連

結してスケジュールをカスタマイズします。

メモ：このクイックスタートでは、Schedule.mdb データベースを使用します。このデータベースは、デフォルトでは

C:\Users\<ユーザー名>\Documents\ComponentOne Samples\Common にインストールされます。

手順手順 1：データソースの設定：データソースの設定

この手順では、最初に Visual Studio 2010 で新しいプロジェクトを作成し、データソースを設定します。

Visual Studio 2010 でデータソースを設定するにはでデータソースを設定するには

1. Microsoft Visual Studio 2010で新しい WPF プロジェクトを作成します。

2. ［プロジェクトプロジェクト］メニューから、［ページの追加ページの追加］を選択します。［新しい項目の追加新しい項目の追加］ウィンドウが表示されます。［カテゴ

リ］で［Visual C#］］が選択され、［テンプレート］ペインに［ページ（ページ（WPF）］）］が追加されます。

3. ［名前［名前］テキストボックスを Page1.xaml のままにし、［追加追加］をクリックします。新しい Page1.xaml が開きます。

4. 開かない場合は、ソリューションエクスプローラで［Page1.xaml］ノードの Page1.xaml.cs をダブルクリックします。

5. C1.WPF.Schedule への参照を追加します。

［プロジェクト］→［参照の追加］を選択します。

C1.WPF.4.dll および C1.WPF.Schedule アセンブリファイルの場所を探します。このファイルは、

ComponentOne のインストール時に、デフォルトでは <インストールフォルダ>\Bin\WPF にインストールされま

す。カスタムインストールを実行した場合は、場所が異なる可能性があります。

次の using ステートメントを Page1.xaml.cs m iページに追加します。

CS

using C1.C1Schedule;using MYProjectNAME.ScheduleDataSetTableAdapters;

using ステートメントを正確に動作させるためには、プロジェクトの名前を指定する必要があります。データセッ

トのテーブルアダプタの設定に使用されます。Visual Basic プロジェクトでは、Imports ステートメントを使用す

る必要があります。

6. 連結するデータソースを追加します。

［データデータ］→［新しいデータソースの追加新しいデータソースの追加］を選択します。［データソース設定ウィザードデータソース設定ウィザード］が表示されます。

［データベースデータベース］を選択し、［次へ次へ］をクリックします。

［新しい接続新しい接続］ボタンをクリックし、［データソース］グループボックスから［Microsoft Access データベースファイデータベースファイ

ルル］を選択し、［続行続行］をクリックします。

［参照参照］をクリックし、Scheduler for Silverlight /WPF と共にインストールされた Schedule.mdb データベースを

参照します。このファイルは、インストール時に Common フォルダに置かれています。

［接続の追加接続の追加］ダイアログボックスで［OK］をクリックし、［データソース設定ウィザードデータソース設定ウィザード］ダイアログボックスで［次次

へへ］をクリックします。プロジェクトにファイルをコピーするかどうかを質問されたら、［いいえ］をクリックします。接



続には名前が付けられます。

新しい接続を作成したら、［次へ次へ］を再度クリックします。

［次へ次へ］をクリックして接続文字列を保存します。

［テーブルテーブル］ノードを選択し、［データセット名］を［ScheduleDataSet］のままにして、［完了完了］をクリックします。

7. Page1.xaml.cs Page1 クラスに次の C# コードを追加します。次のようになります。このコードは、データセットのデー

タを使ってスケジュールに値を挿入します。

C#

public partial class Page1 : System.Windows.Controls.Page { private ScheduleDataSet _schedulerDataSet = null; public Page1() { InitializeComponent(); // データセットを使ってデータを値を挿入する。

FillData(SchedulerDataSet); }

public ScheduleDataSet SchedulerDataSet { get { if (_schedulerDataSet == null) { _schedulerDataSet = Resources["dataSet"] as ScheduleDataSet; } return _schedulerDataSet; } }

private void FillData(ScheduleDataSet ds) { if (ds == null) return; AppointmentsTableAdapter appAd = new AppointmentsTableAdapter(); appAd.Fill(ds.Appointments); } }

8. プロジェクトを保存して閉じます。

手順手順 2：データソースへの：データソースへの C1Scheduler の連結の連結

C1Scheduler コントロールを Blend プロジェクトに追加し、データソースに連結できるようになりました。

Blend プロジェクトに新しいデータセットをリソースとして追加するにはプロジェクトに新しいデータセットをリソースとして追加するには

1. Microsoft Expression Blend 4 を開き、メニューから［ファイルファイル］→［プロジェクトプロジェクト/ソリューションを開くソリューションを開く］を選択して、Visual Studio2010で作成したプロジェクト（.sln）を開きます。



2. ［プロジェクトプロジェクト］パネルの Page1.xaml をダブルクリックしてページを開き、必要に応じて、［デザインデザイン］タブをクリックしてデザイデザイ

ンンビューにアクセスします。

3. C1Scheduler コントロールをページに追加します。Visual Studio 2010でプロジェクトを作成したときに C1.WPF.C1Schedule アセ

ンブリへの参照を既に追加しているので、必要な作業は、［アセット］パネルから C1Scheduler を追加するだけです。

Blend の［ツール］パネルにある［アセットアセット］ボタンをクリックします。

［アセットアセット］パネルで、［カテゴリカテゴリ］タブをクリックします。

C1Scheduler を選択します。このコンポーネントは、［ツール］パネルの［アセットアセット］ボタンの下に表示されます。

［ツール］パネルの［C1Scheduler］ボタンをダブルクリックして、ページに追加します。

4. ［XAML］タブをクリックして XAML ビューに切り替えます。

5. Page タグ内の名前空間のリストに次の XAML コードを追加して、CLR 名前空間を作成します。clr-namespace の値には、VisualStudio 2010プロジェクトの名前を使用します。

XAML は、次のようになります。

XAML

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="MYProjectName.Page1" Title="Page1" xmlns:c1sched="http://schemas.componentone.com/wpf/Schedule" x:Class=”WpfScheduleQuickStart.Page1” xmlns:local="clr-namespace:MYProjectName">

6. ［プロジェクトプロジェクト］パネルの Page1.xaml を右クリックし、［起動起動］を選択します。これで、Page1 が最初のウィンドウに設定されます。

7. ［プロジェクトプロジェクト］→［プロジェクトのビルドプロジェクトのビルド］を選択してプロジェクトを実行します。

8. 引き続き XAML ビューで、上の XAML の直後に次の XAML を入力して、ScheduleDataSet をリソースとして追加します。

XAML

<Page.Resources> <local:ScheduleDataSet x:Key="dataSet" /></Page.Resources>

Scheduler for WPF データストレージにマップするにはデータストレージにマップするには

1. Blend プロジェクトで、［デザインデザイン］タブをクリックして Page1.xaml のデザインデザインビューに戻ります。

2. プロジェクトの Page1.xaml の C1Scheduler コントロールを選択します。

3. ［プロパティプロパティ］パネルの［Data］で、［DataStorage］省略符ボタンをクリックします。［Data Source settings］ダイアログボックスが

表示されます。



4. [DataSource] プロパティの隣にある [詳細オプション詳細オプション] ボタンをクリックし、［ローカルリソース］を選択し、［dataSet］をオンにしま

す。このプロパティが ScheduleDataSet に設定されます。

5. DataMember プロパティの隣に「Appointments」と入力します。C1Scheduler が Appointments テーブルにマップされ、その

データに基づいてスケジュールに値が挿入されます。

6. 次に、プロパティと Appointments テーブルの対応するデータフィールドとのマッピングマッピングを設定します。各［Property Mappings］項目に次のテキストを入力します。

プロパティテキスト

Body Body

End End

Location Location

Start Start

Subject Subject

AppointmentProperties Properties

IdMapping Id

IndexMapping



7. ［OK］をクリックして、［Data Source settings］ダイアログボックスを閉じます。データベースは Appointment Storageにマップさ

れました。マップするための XAML コードは、次のようになります。

XAML

<c1:C1Scheduler HorizontalAlignment="Left" Height="400" VerticalAlignment="Top" Width="480"> <c1sched:NestedPropertySetter PropertyName="DataStorage.AppointmentStorage.DataMember" Value="Appointments"/> <c1:NestedPropertySetter PropertyName="DataStorage.AppointmentStorage.DataSource" Value="{DynamicResource dataSet}"/> <c1:NestedPropertySetter PropertyName="DataStorage.AppointmentStorage.Mappings.Body.MappingName" Value="Body"/> <c1:NestedPropertySetter PropertyName="DataStorage.AppointmentStorage.Mappings.End.MappingName" Value="End"/> <c1:NestedPropertySetter PropertyName="DataStorage.AppointmentStorage.Mappings.Location.MappingName" Value="Location"/> <c1:NestedPropertySetter PropertyName="DataStorage.AppointmentStorage.Mappings.Start.MappingName" Value="Start"/> <c1:NestedPropertySetter PropertyName="DataStorage.AppointmentStorage.Mappings.Subject.MappingName" Value="Subject"/> <c1:NestedPropertySetter PropertyName="DataStorage.AppointmentStorage.Mappings.AppointmentProperties.MappingName" Value="Properties"/> <c1:NestedPropertySetter PropertyName="DataStorage.AppointmentStorage.Mappings.IdMapping.MappingName" Value="Id"/> <c1:C1Scheduler>

C1Scheduler をデータソースに連結することに成功しました。これでスケジュールをカスタマイズできます。

手順手順 3：データビューとテーマの選択：データビューとテーマの選択

この手順では、定義済みのデータビューとテーマから、それぞれ１つを選択します。

データビューを選択するにはデータビューを選択するには

1. C1Scheduler が選択されたままになっていることを確認します。

2. ［プロパティプロパティ］パネルの［ビュービュー］で、Style プロパティプロパティの隣にあるドロップダウン矢印をクリックし、［リセットリセット］をクリックしま



す。

3. ドロップダウン矢印を再度クリックし、［週ビュー週ビュー］を選択します。

テーマを選択するにはテーマを選択するには

［ビュービュー］ノードを展開し、Theme の隣にあるドロップダウン矢印をクリックし、Office 2007 Black を選択します。

手順手順 4：アプリケーションの実行：アプリケーションの実行

これで、スケジュールアプリケーションを作成し、スケジュールをデータソースに連結し、スケジュールの外観を Blend でカスタ

マイズできたので、最後にアプリケーションを実行してみます。

スケジュールアプリケーションを実行して、スケジュールアプリケーションを実行して、Scheduler for WPF の実行時の動作を確認するにはの実行時の動作を確認するには

1. ［F5］キーを押すか、［デバッグ］メニューから［デバッグの開始］を選択します。スケジュールと［アラーム］ダイアログ

ボックスが表示されます。［すべてのアラームを消す］をクリックします。

2. 目的の日時の下にある予定の時刻をダブルクリックして予定を設定します。この例では、6月9日水曜日の午前8時に

予定を作成します。［予定］ダイアログボックスが開きます。



3. ［件名］に「医者との予定」、［場所］に「病院」、［終了時刻］に「9:00AM」と入力します。

4. ［ラベル］の隣にあるドロップダウン矢印をクリックして、［個人用］を選択します。



5. ［保存して閉じる］ボタンをクリックします。スケジュールに新しい予定が表示されます。

おめでとうございます。これで、Scheduler for WPF のクイックスタートは完了です。Scheduler for WPF アプリケーションを

作成し、データソースにスケジュールを連結し、新しい予定を作成しました。

おめでとうございます。



Scheduler for Silverlight クイックスタートクイックスタート

このクイックスタートは、Scheduler for Silverlight を初めて使用するユーザーのために用意されています。このクイックス

タートでは、新しい Silverlight アプリケーションプロジェクトを作成し、C1Scheduler をアプリケーションに追加します。次に、

データビューを設定し、スケジュールにナビゲーションボタンを追加します。

手順手順 1：アプリケーションの作成：アプリケーションの作成

最初に、次の手順に従って、Visual Studio で Silverlight アプリケーションを作成します。

［ファイルファイル］→［新しいプロジェクト新しいプロジェクト］を選択します。［新しいプロジェクト新しいプロジェクト］ダイアログボックスが開きます。

左ペインから使用する言語を選択します。

右ペインの［テンプレート］のリストから［Silverlight アプリケーションアプリケーション］を選択します。

［名前］名前］フィールドにアプリケーションの名前を入力し、［OK］をクリックします。

［新しい Silverlight アプリケーション］ダイアログボックスで、もう一度［OK］をクリックします。新しいプロジェクトが作成

されます。

手順手順 2：データビューの設定：データビューの設定

この手順では、定義済みのデータビューのいずれかを選択します。

1. Visual Studio で、［プロジェクトプロジェクト］メニューの［参照の追加参照の追加］を選択します。

2. C1.Silverlight.dll および C1.Silverlight.Schedule.dll を見つけます。これらの .dll を選択したら、［OK］をクリックし

ます。

3. Visual Studio のソリューションエクスプローラで、MainPage.xaml ファイルをダブルクリックします。

4. Scheduler コントロールをツールボックスから MainPage.xaml に追加します。

5. XAMLは、次のようになります。

XAML

<UserControl xmlns:c1="clr-namespace:C1.Silverlight.Schedule;assembly=C1.Silverlight.Schedule" x:Class="SchedulerQuickStart.MainPage" xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml xmlns:c1="clr-namespace:C1.Silverlight;assembly=C1.Silverlight" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc=http://schemas.openxmlformats.org/markup-compatibility/2006 mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480"> <Grid x:Name="LayoutRoot"> <c1:C1Scheduler x:Name="sched1" Style="{Binding OneDayStyle, RelativeSource={RelativeSource Self}}"/> </Grid></UserControl>



プロジェクトを実行すると、スケジュールが日ビューに表示されます。次の手順では、ナビゲーションボタンを追加します。

手順手順 3：ナビゲーションボタンの追加：ナビゲーションボタンの追加

このステップでは、C1Scheduler ビューを切り替えるナビゲーションボタンを追加します。次のマークアップをタグの間の、前

の手順で追加したタグの上に追加します。

XAML

Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition /></Grid.RowDefinitions><StackPanel Grid.Row="0" Orientation="Horizontal"> <Button Content="日" c1:CommandExtensions.CommandTarget="{Binding ElementName=sched1}" c1:CommandExtensions.Command="sched:C1Scheduler.ChangeStyleCommand" c1:CommandExtensions.CommandParameter="{Binding Path=OneDayStyle, ElementName=sched1}"/> <Button Content="稼働日" c1:CommandExtensions.CommandTarget="{Binding ElementName=sched1}" c1:CommandExtensions.Command="sched:C1Scheduler.ChangeStyleCommand" c1:CommandExtensions.CommandParameter="{Binding Path=WorkingWeekStyle, ElementName=sched1}"/> <Button Content="週" c1:CommandExtensions.CommandTarget="{Binding ElementName=sched1}" c1:CommandExtensions.Command="sched:C1Scheduler.ChangeStyleCommand" c1:CommandExtensions.CommandParameter="{Binding Path=WeekStyle, ElementName=sched1}"/> <Button Content="月" c1:CommandExtensions.CommandTarget="{Binding ElementName=sched1}" c1:CommandExtensions.Command="sched:C1Scheduler.ChangeStyleCommand" c1:CommandExtensions.CommandParameter="{Binding Path=MonthStyle, ElementName=sched1}"/></StackPanel>

C1.Silverlight.CommandExtensions クラスの添付プロパティによってボタンクリックが処理され、対応する C1Scheduler コマンドが実行されます。

手順手順 4：アプリケーションの実行：アプリケーションの実行

アプリケーションを実行してスケジュールを表示します。

1. ［F5］キーを押します。スケジュールが表示されます。

2. スケジュールビューを変更するには、［日日］、［稼働日稼働日］、［週週］、または［月］ボタンをクリックします。

おめでとうございます。これで、Scheduler for Silverlight クイックスタートは終了です。ここでは、Scheduler for Silverlightのアプリケーションを作成しました。



XAML クイックリファレンスクイックリファレンス

このセクションでは、XAML コードのみを使用して、C1Scheduler コントロールを使用する方法を示すいくつかの例を提供しま

す。

例：ネストされたプロパティに値を割り当てる例：ネストされたプロパティに値を割り当てる

XAML では、ネストされたプロパティに値を割り当てることはできません。ただし、DataStorage のオブジェクトモデルは、その

特性上、ネストされたプロパティを含んでいます。この制限に対処するには、NestedPropertySetter クラスを使用します。

メモ：メモ：NestedPropertySetter クラスは、C1Scheduler と共に使用する場合にのみ機能します。

XAML で C1Scheduler 要素の子として配置されるこのクラスの要素は、Property/Value ペアで表されるセッターで

す。Property には、親 C1Scheduler 要素からプロパティへの相対パスを指定します。次の例で

は、 C1BindingSource.DataMember プロパティがデータベースの Appointments テーブルに割り当てられます。

C1BindingSource.DataSource は、次のようにプロジェクト内のデータセットリソースに設定されます。

XAML

<c1:C1Scheduler >  <c1:NestedPropertySetter PropertyName="DataStorage.AppointmentStorage.DataMember" Value="予定"/> <c1:NestedPropertySetter PropertyName="DataStorage.AppointmentStorage.DataSource" Value="{StaticResource dataSet}"/></c1:C1Scheduler >

例：稼働日ビューの曜日を設定する例：稼働日ビューの曜日を設定する

次の XAML は、稼働日ビューの曜日を設定します。

XAML

<c1:C1Scheduler x:Name="scheduler1" Theme="{DynamicResource {ComponentResourceKey TypeInTargetAssembly=c1sched:C1Scheduler, ResourceId=Office2007.Default}}" Style="{DynamicResource {ComponentResourceKey TypeInTargetAssembly=c1sched:C1Scheduler, ResourceId=WorkingWeekStyle}}" <c1:C1Scheduler.CalendarHelper> <c1:CalendarHelper Culture="English " WeekStart="Sunday" EndDayTime="18:20:00" StartDayTime="09:20:00" WorkDays="Tuesday,Wednesday,Thursday,Friday,Saturday"> </c1:CalendarHelper> </c1:C1Scheduler.CalendarHelper></c1:C1Scheduler>

例：例：C1Scheduler をを C1Calendar に連結するに連結する

次の XAML は、C1Scheduler を C1Calendar コントロールに連結します。



XAML

<c1:C1Calendar HorizontalAlignment="Left" Margin="34,51,0,0" Name="c1Calendar1" VerticalAlignment="Top" SelectedDate="{Binding Path=SelectedDateTime, ElementName=C1Scheduler1, Mode=TwoWay}" />



コントロールとコンポーネントコントロールとコンポーネント

Scheduler for WPF/Silverlight は、次のコントロールとコンポーネントで構成されています。スケジュールアプリケーションの

すべての機能は、これらのコントロールとコンポーネントによって提供されます。

C1Scheduler コントロールコントロール

C1Scheduler コントロールは、予定を追加、編集、管理するために必要な機能を完全に備えたスケジュールです。このコント

ロールは、主に次の２つの部分で構成されます。

予定、連絡先などのビジネスデータを格納する記憶領域。このデータを DataSet などのデータベースストレージに連結

する機能があります。また、このデータのビジネスロジックを提供します。このストレージは DataStorage プロパティに

よって参照され、C1ScheduleStorage ルートクラスによって表されます。C1ScheduleStorage のオブジェクトモデル

は、Windows フォームや ASP.NET などの異なるプラットフォーム用のすべての ComponentOne スケジュールツール

に共通です。

デフォルトの C1Scheduler インターフェイス。これは、C1Scheduler によって管理するデータ向けに任意のユーザー

インターフェイスを構築する際に役立ちます。

C1Calendar コントロールコントロール

C1Calendar コントロールは C1.WPF.Schedule または C1.Silverlight.Schedule アセンブリに含まれます。

これは、以前の C1MultiMonthCalendar コントロールのリファクタリングバージョンです。このコントロールは、XAML で複数

の月を表示するカレンダーを作成するために使用します。ユーザーは、ここから特定の日付を対話式に選択できま

す。C1Calendar からは、Time、DateTime などのプロパティが削除されています。Date プロパティの名前は SelectedDate



に変更されています。

C1CalendarItem コントロールは C1Calendar コントロール内でのみ使用でき、単独のコントロールとしては機能しません。

C1ScheduleStorage コンポーネントコンポーネント

C1ScheduleStorage コンポーネントは、C1Scheduler コントロールのすべてのデータ操作を処理します。

C1ScheduleStorage コンポーネントは C1Scheduler コントロールによって自動的に作成されるため、コードによって作成する

必要はありません。

C1ScheduleStorage コンポーネントには、予定、リソース、連絡先、ラベル、および状態の特定のデータストレージが格納さ

れます。このデータストレージは、データレイヤで動作し、データをスケジュールアプリケーションに提供しま

す。C1ScheduleStorage コンポーネントには、次の表に示すようないくつかのデータストレージが格納されます。

データストレージデータストレージ説明説明

AppointmentStorage 予定データのストレージ。

CategoryStorage 分類データのストレージ。

ContactStorage 連絡先データのストレージ。

OwnerStorage カレンダーオーナーのデータのストレー

ジ。

LabelStorage ラベルデータのストレージ。

StatusStorage 状態データのストレージ。

ResourceStorage リソースデータのストレージ。

データをこれらのストレージに提供する際は、データソース内のデータフィールドと、ストレージ内でのデータフィールドの解釈

との間のマッピングを指定する必要があります。

すべてのストレージは、BaseStorage クラスから継承されます。このクラスは、データ連結に必要なすべての基本機能を提供

します。ストレージを特定のデータテーブルまたは別のデータオブジェクトに連結するには、ストレージの DataSource プロパ

ティとDataMember プロパティを設定し、これらのプロパティについて、連結するデータソース内の対応するデータフィールド

へのマッピングを設定する必要があります。たとえば、連結されるデータソースに EmployeeName という名前のフィールドが

含まれている場合は、ContactStorage.Mappings.TextMapping.MappingName プロパティをこのフィールドの名前に設定

する必要があります。

BaseStorage コンポーネントの機能は、System.Windows.Forms 名前空間に依存しないという点を除い

て、System.Windows.Forms.BindingSource コンポーネントの機能とほぼ同じです。

メモ：メモ：CategoryStorage,LabelStorage,および StatusStorageの各ストレージには、定義済みの標準項目が格納され

ます。

C1Scheduler コントロールを使用するコントロールを使用する

C1Scheduler コントロールを XAML ウィンドウに配置すると、コントロールは、予定を追加、編集、管理するために必要な機能

を備えたスケジュールになります。ただし、初期のスケジュールではデフォルトのインターフェイスが使用されます。これをユー

ザーのスケジュールのニーズに合わせて詳細にカスタマイズできます。Microsoft Blend のデザインデザインビューでは、デフォルトの

ユーザーインターフェイスは次の図のようになります。



レイアウトおよび外観レイアウトおよび外観

C1Scheduler の外観をカスタマイズするには、いくつかの方法があります。次のトピックでは、データビュー、テンプレート、

テーマなどに関する一部のカスタマイズ技術について説明します。

C1Scheduler のデータビューのデータビュー

Scheduler for WPF は、DataStorage 内のデータを４つのビューで表示します。

データビューデータビュー説明説明

［日］ビュー特定の日の予定を表示する詳細ビューを表示します。

［月］ビュー１つ以上の月の予定を表示します。これがデフォルトのビューです。

［週］ビュー指定された週の予定を表示します。

［稼働日］ビュー指定された毎週の期間の予定を表示します。デフォルトは月曜日から金曜日までです。

［タイムライン］ビュータイムラインを表示します。

各ビューは１つのスタイルで表され、それぞれが XAML で定義されています。これらのスタイルは C1Scheduler に適用で

き、C1SchedulerResources クラスの静的フィールド（OneDayStyle、WorkingWeekStyle、WeekStyle、MonthStyle）を使ってア

クセスできます。インターフェイスのデフォルトのビューは MonthStyle であり、現在の日付が表示されます。

たとえば、［日］ビューを指定するには、次に示すように,C1Scheduler.OneDayStyle フィールド値を使用して、スケジューラ

の C1Scheduler.ChangeStyle メソッドを割り当てます。

Visual Basic

Projects\MoveAcross\MoveAcross\MoveAcross

C#



Scheduler1.ChangeStyle(C1SchedulerResources.OneDayStyle);

XAML

<c1sched:C1Scheduler Style="{DynamicResource {ComponentResourceKey TypeInTargetAssembly=c1sched:C1Scheduler, ResourceId=OneDayStyle}}"/>

設計時にデータビューを設定するには、次のように、Visual Studio のコンテキストメニューを使用します。

1. C1Scheduler コントロールを右クリックします。

2. ［ビュービュー］を選択し、［日日］、［稼働日稼働日］、［週週］、または［月月］を選択します。

メモ：メモ：［プロパティ］ウィンドウで、プロパティの隣にあるドロップダウンリストからオプションを選択して、ビューを変更する

こともできます。

スタイルは、Microsoft Blend のデザインビューでも設定できます。Microsoft Blend プロジェクトで、ビジュアルな Style を変

更するには、次の手順に従います。

1. XAML のウィンドウまたはページで C1Scheduler コントロールを選択します。

2. ［プロパティ］パネルの［View］で、C1Scheduler.Style プロパティの隣にあるドロップダウン矢印をクリックします。

3. いずれかのビュースタイルを選択します。

C1Scheduler は、これらのプロパティを使用することにより、関連するカレンダーコントロールによって表示可能な日付の範囲

が変更された場合、または C1Scheduler コマンドによって表示可能な日付の範囲やビューの種類が変更された場合、使用

するスタイルを自動的に変更します。ユーザーは、BeforeViewChange イベントを処理するか、C1Scheduler のViewStyleSelector プロパティをカスタム StyleSelector オブジェクトに設定することにより、デフォルトの動作を変更できま

す。

C1Scheduler が使用するスタイル全体を変更するには、スタイルプロパティを定義済みのカスタムスタイルに変更します。次

に例を示します。

C#

// C1Scheduler のスタイルをカスタムスタイルに設定します。

scheduler1.OneDayStyle = customOneDayStyle;scheduler1.WorkingWeekStyle = customWorkingWeekStyle;scheduler1.WeekStyle = customWeekStyle;scheduler1.MonthStyle = customMonthStyle;

C1Scheduler データビューのキーと外観データビューのキーと外観

デフォルトのビュースタイルは、次の ComponentResourceKey で定義されます。

WPF ComponentResourceKey Silverlight Resource Key 説明説明

x:Key="{ComponentResourceKey TypeInTargetAssembly={Type x:Key="OneDayStyle" ［日］



local:C1Scheduler}, ResourceId=OneDayStyle}" TargetType="{x:Typelocal:C1Scheduler}"

TargetType="c1sched:C1Scheduler" ビュー

x:Key="{ComponentResourceKey TypeInTargetAssembly={x:Typelocal:C1Scheduler}, ResourceId=WorkingWeekStyle}" TargetType="{x:Type local:C1Scheduler}"

x:Key="WorkingWeekStyle"TargetType="c1sched:C1Scheduler"

［稼働

日］

ビュー

x:Key="{ComponentResourceKey TypeInTargetAssembly={x:Typelocal:C1Scheduler}, ResourceId=WeekStyle}" TargetType="{x:Typelocal:C1Scheduler}"

x:Key="WeekStyle"TargetType="c1sched:C1Scheduler"

［週］

ビュー

x:Key="{ComponentResourceKey TypeInTargetAssembly={x:Typelocal:C1Scheduler}, ResourceId=MonthStyle}" TargetType="{x:Typelocal:C1Scheduler}"

x:Key="MonthStyle"TargetType="c1sched:C1Scheduler"

［月］

ビュー

x:Key="{ComponentResourceKey TypeInTargetAssembly={x:Typelocal:C1Scheduler}, ResourceId=TimeLineStyle}" TargetType="{x:Typelocal:C1Scheduler}"

x:Key=”TimeLineStyleTargetType=”c1sched:C1Scheduler”

［タイ

ムライ

ン］

ビュー

次の図に、使用可能な各データビューの外観の例を示します。

［日］ビュー［日］ビュー

［稼働日］ビュー［稼働日］ビュー



［週］ビュー［週］ビュー

［月］ビュー［月］ビュー



［タイムライン］ビュー［タイムライン］ビュー



C1Scheduler のデフォルトのスタイルとテンプレートのデフォルトのスタイルとテンプレート

デフォルトのスタイルは、C1Scheduler の各部分のスタイルやテンプレートを使って定義されます。次の表に、デフォルト

の C1Scheduler のスタイルとテンプレートの詳細をそれぞれのキーと共に示します。

WPF

リソースキーリソースキー説明説明

PART_C1SchedulerScrollBar スクロールバーのスタイルを決定します。

PART_C1Scheduler_WorkHour_Style ［日］ビューでの１つの勤務時間グループのスタイルを決定します。

PART_C1Scheduler_FreeHour_Style ［日］ビューでの１つの空き時間グループのスタイルを決定します。

PART_C1Scheduler_WorkSlot_Template ［日］ビューでの１つの空き時間スロットのテンプレートを決定します。

PART_C1Scheduler_FreeSlot_Template ［日］ビューでの１つの空き時間スロットのテンプレートを決定します。

C1Scheduler_AllDayArea_Template ［日］ビューに全日の領域を表示する際に使用されるテンプレートを決定しま

す。

C1Scheduler_TimeRuler_Template ［日］ビューのタイムルーラーの１時間を表示する際に使用されるテンプレートを

決定します。

C1Scheduler_MonthHeader_Style 月のグリッドヘッダー（曜日の名前）のスタイルを決定します。

C1Scheduler_OneMonthDay_Template ［月］ビューで１日（日付ヘッダーと日付コンテンツも含む）を表示する際に使用

するテンプレートを決定します。

C1Scheduler_OverflowJumper_Template 使用可能な日付領域に入らない予定要素がある場合に、［月］ビューと Office2003 の［週］ビューにオーバーフロージャンパーを表示する際のテンプレートを

決定します。

PART_GroupNavigationScrollBar PART_GroupNavigationScrollBar がコントロールテンプレート内にある場合、

C1Scheduler はこれを使用してグループナビゲーションを行います。このパーツ

は、デフォルトの TimeLine スタイルに含まれます。

これらの ComponentResourceKey の使用は必須ではありません。任意のキーを使用して、対応する C1Scheduler プロパ

ティにカスタムスタイルを割り当てることができます。次に例を示します。

XAML

<my:C1Scheduler MonthStyle="{DynamicResource customOneDayStyle}}"WeekStyle="{DynamicResource customWeekStyle}}"/>

C1Scheduler のデフォルトのインターフェイスには、デフォルトの DataTemplate オブジェクトがいくつか含まれています。このテンプレートに、カスタムユーザーインターフェイスを DataTemplate オブジェクトとして提供することができます。そのよう

なオブジェクトは、適切な C1Scheduler プロパティに割り当てる必要があります。デフォルトの DataTemplate には、

ComponentResourceKey からアクセスできます。次の表に、DataTemplate およびデフォルトの DataTemplateComponentResourceKey を定義する C1Scheduler プロパティを示します。

C1Scheduler プロパティプロパティデフォルトのデフォルトの DataTemplate 説明説明

IntervalAppointmentTemplate x:Key="{ComponentResourceKey TypeInTargetAssembly={x:Type local:C1Scheduler},ResourceID=IntervalAppointmentTemplate}"

Appointmentelementtemplate.



デフォルトテンプレートの使用デフォルトテンプレートの使用

C1Scheduler のデフォルトのインターフェイスには、［予定予定］、［編集編集］、［アラームアラーム］の各ダイアログボックスなど、いくつかのデ

フォルトの DataTemplate オブジェクトが含まれています。これらのテンプレートに、カスタムユーザーインターフェイス

を DataTemplate オブジェクトとして提供することができます。そのようなオブジェクトは、適切な C1Scheduler プロパティに

割り当てる必要があります。次の表に、DataTemplate およびデフォルトの DataTemplate を定義する C1Scheduler プロ

パティを示します。

C1Scheduler プロパティデフォルトの DataTemplate 説明

EditAppointmentTemplate <DataTemplate> <c1:EditAppointmentControl/></DataTemplate>

［編集/新規予定］ダイアログボックスのテンプレート。

EditRecurrenceTemplate <DataTemplate> <c1:EditRecurrenceControl/></DataTemplate>

［繰り返しの編集］ダイアログボックスのテンプレート。

SelectFromListTemplate <DataTemplate> <c1:SelectFromListScene /></DataTemplate>

［リソースの選択］、［カテゴリの選択］、［連絡先の選択］ダ

イアログボックスのテンプレート。

ShowRemindersTemplate <DataTemplate> <c1:ShowRemindersControl/></DataTemplate>

［アラーム］ウィンドウのテンプレート。

ClearStyle 技術技術

C1Scheduler は、コントロールのテンプレートを変更することなくコントロールの色を簡単に変更できる ComponentOne のClearStyle 技術をサポートします。色のプロパティをいくつか設定するだけで、コントロール全体の外観を簡単に設定できま

す。次の表では、コントロールの外観のカスタマイズに使用できる一般的な C1Scheduler プロパティをリストします。

プロパティ説明

Background 個々の日付とタイムスロットのパレットの基本色として使用されるブラシを取得または設定しま

す。

Foreground 日付ヘッダー、週のタブ、およびナビゲーションパネルのテキスト色であるブラシを取得または

設定します。

ControlBackground コントロール（タイムルーラー、月ビューのヘッダーなど）の表示色であるブラシを取得または

設定します。

ControlForeground コントロール（タイムルーラー、月ビューのヘッダーなど）のテキスト色であるブラシを取得また

は設定します。

AppointmentForeground 予定要素の前景に使用されるブラシを取得または設定します。

AlternatingBackground 交互表示月の勤務時間数/日数の背景に使用されるブラシを取得または設定します。

SelectedBackground 現在選択されている日付を強調表示するために使用されるブラシを取得または設定します。

TodayBackground 現在の日付に色を付けるために使用されるブラシオブジェクトを取得または設定します。



C1Scheduler for WPF のテーマのテーマ

C1Scheduler のテーマを設定する方法には、多くの選択肢があります。設計時にテーマを設定するには、XAML でResourceID を使用するか、コードで C1SchedulerResources 静的フィールドを使用するか、Page、Window、または

Application リソースで ResourceDictionary および DefaultTheme キーを定義します。罫線や背景ブラシ、デフォルトスタ

イルなどの最も一般的な C1Scheduler コントロールのユーザーインターフェイスのプロパティは、テーマ ResourceDictionaryで定義します。

C1Scheduler には、７つの定義済みのテーマがあります。

C1Scheduler のテーマのテーマ例

Dusk Blue

Dusk Green

Media Player

Office 2007 Default（Office 2007 Blue）

Office 2007 Black

Office 2007 Blue



Office 2007 Silver

Vista

次の表に、テーマ定義を含む .xaml ファイルの名前、テーマの設定に使用できる C1SchedulerResource の静的フィールド、

テーマの設定に使用できる ResourceID、各テーマの説明を示します。

メモ：デフォルトでは、テーマは、、<インストールフォルダインストールフォルダ>\Misc\Xaml\C1WPFScheduler フォルダ内の以下のフォル

ダにインストールされます。

Office 2007 テーマテーマ

次のテーマは、Office2007 フォルダに置かれています。

テーマファイテーマファイ

ルル

C1SchedulerResourceクラスの静的フィールドクラスの静的フィールド

ResourceID 説明説明

Default.xaml Default.xaml Office2007.Default Office 2007 Default テーマ。半透明色が使用されます。

Background プロパティを変更することによってコントロール

のパレットを変更できます。このファイルには、他の Office2007 テーマで使用される Office 2007 スタイルとテンプレー

トのすべての定義が含まれます。

Black.xaml Office2007Black Office2007.Black Office 2007 Black テーマ。

Blue.xaml Office2007Blue Office2007.Blue Office 2007 Blue テーマ。このファイルには、他の Office2007 テーマで使用される Office 2007 スタイルとテンプレー

トのすべての定義が含まれます。

Silver.xaml Office2007Silver Office2007.Silver Office 2007 Silver テーマ。

Dusk テーマテーマ

次のテーマは、Dusk フォルダに置かれています。

テーマファイル C1SchedulerResource クラスの静的フィールド ResourceID 説明

Blue.xaml DuskBlue Dusk.Blue Dusk Blue テーマ。

Green.xaml DuskGreen Dusk.Green Dusk Green テーマ。

Media Player テーマテーマ

次のテーマは、Media Player フォルダに置かれています。


MediaPlayer.xaml MediaPlayer MediaPlayer Media Player テーマ。



Vista テーマテーマ

次のテーマは、Vista フォルダに置かれています。


Vista.xaml Vista Vista Vista テーマ。

メモ：メモ：このセクションの内容は、ComponentOne for WPF にのみ適用されます。

C1Scheduler のテーマの設定のテーマの設定

最初にプロジェクトに C1Scheduler を追加したときは、Office 2007 Default テーマで書式設定されます。別のテーマを使用する場合

は、新しいテーマを選択する方法がいくつかあります。

Visual Studio の設計時にテーマを設定するには、次の手順に従います。の設計時にテーマを設定するには、次の手順に従います。

1. C1Scheduler コントロールを右クリックします。

2. ［テーマテーマ］を選択し、７つの定義済みテーマから１つを選択します。

メモ：メモ：［プロパティ］ウィンドウで,Themeプロパティの隣にあるドロップダウンリストからオプションを選択して、テーマを変更することも

できます。

Microsoft Blend でテーマを設定する場合は、設計時にでテーマを設定する場合は、設計時に C1Scheduler.Theme プロパティを変更します。プロパティを変更します。

1. XAML のウィンドウまたはページで C1Scheduler コントロールを選択します。

2. ［プロパティ］パネルの［View］で、Theme プロパティの隣にあるドロップダウン矢印をクリックし、［リセットリセット］をクリックします。

3. ［Theme］ドロップダウン矢印を再度クリックして、定義済みのテーマを１つ選択します。

ResourceID を使ってテーマを設定する場合は、次のを使ってテーマを設定する場合は、次の XAML を使用します。を使用します。

XAML

<c1sched:C1Scheduler x:Name="scheduler1" Theme="{DynamicResource{ComponentResourceKey ResourceId=Office2007.Silver,TypeInTargetAssembly={x:Type c1sched:C1Scheduler}}}"/>

C1SchedulerResources 静的フィールドを使ってテーマを設定するには、プロジェクトに次のコードを追加します。静的フィールドを使ってテーマを設定するには、プロジェクトに次のコードを追加します。

Visual Basic

Scheduler1.Theme = C1SchedulerResources.Office2007Silver

C#

Scheduler1.Theme = C1SchedulerResources.Office2007Silver;

Page、、Window、または、または Application リソースでリソースで ResourceDictionary とと DefaultThemeKey を定義してテーマを設定するを定義してテーマを設定する

には、次のには、次の XAML を使用します。を使用します。

XAML

<Page.Resources> <ResourceDictionary><ResourceDictionary x:Key="{x:Static my:C1Scheduler.DefaultThemeKey}"Source="/C1.WPF.Schedule;component/themes/SchedulerThemes/Office2007/Blue.xaml" /> </ResourceDictionary>



</Page.Resources>

これにより、現在のスコープのすべてのコントロールに影響が及ぶことに注意してください。

独自のテーマの ResourceDictionary を作成して C1Scheduler で使用することもできます。

定義済みテーマをカスタマイズする最善の方法は、カスタム ResourceDictionary にデフォルトのテーマ定義を入れ、テーマブラシなど

のリソースを必要に応じて再定義することです。

メモ：メモ：カスタマイズ中も引き続きすべてのデフォルトのスタイルとテンプレートが正しく動作するように、リソースキーをデフォルト設

定から変更しないことをお勧めします。

XAML

<Page x:Class="C1WPFSchedulerSamples.ThemedSchedulerWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:c1sched="clr-namespace:C1.WPF.Schedule;assembly=C1.WPF.Schedule" xmlns:PresentationOptions="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options" xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="PresentationOptions" xmlns:local="clr-namespace:C1WPFSchedulerSamples" Title="Themed Scheduler" KeepAlive="True" Name="rootWindow"> <Page.Resources> <ResourceDictionary> <!—-define theme resource dictionary --> <ResourceDictionary x:Key="custom_theme"> <!—- include definition of default theme --> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="/C1.WPF.Schedule;component/themes/SchedulerThemes/Office2007/Blue.xaml" /> </ResourceDictionary.MergedDictionaries> <!—- redefine some resources --> <Thickness x:Key="C1Scheduler_TimeBorder_Thickness">0</Thickness> <sys:Boolean x:Key="C1Scheduler_ShowNavigationPanels">True</sys:Boolean> <Thickness x:Key="C1Scheduler_AllDayAreaBorder_Thickness">1px,0,1px,2px</Thickness><SolidColorBrush x:Key="C1Scheduler_AlternateMonth_Brush" Color="#88FFFFFF"PresentationOptions:Freeze="true"/> <SolidColorBrush x:Key="C1Scheduler_AllDayArea_Brush" Color="#88FFFFFF"PresentationOptions:Freeze="true"/> <SolidColorBrush x:Key="C1Scheduler_Background" Color="#FF5A8ECE"PresentationOptions:Freeze="true"/> <SolidColorBrush x:Key="C1Scheduler_Border_Brush" Color="#FF000080"PresentationOptions:Freeze="true"/> <SolidColorBrush x:Key="C1Scheduler_WorkHourBrush" Color="GhostWhite"PresentationOptions:Freeze="true"/> <SolidColorBrush x:Key="C1Scheduler_WorkHourBorder_Brush" Color="#98FFFFFF"PresentationOptions:Freeze="true"/> <SolidColorBrush x:Key="C1Scheduler_WorkHourLightBorder_Brush"Color="#C8FFFFFF" PresentationOptions:Freeze="true"/> <SolidColorBrush x:Key="C1Scheduler_FreeHour_Brush" Color="#D2FFFFFF"



PresentationOptions:Freeze="true"/> <SolidColorBrush x:Key="C1Scheduler_FreeHourBorder_Brush" Color="#98FFFFFF"PresentationOptions:Freeze="true"/> <SolidColorBrush x:Key="C1Scheduler_FreeHourLightBorder_Brush"Color="#A8FFFFFF" PresentationOptions:Freeze="true"/> <LinearGradientBrush x:Key="C1Scheduler_Day_SelectedBrush" StartPoint="0,1"EndPoint="1,0" PresentationOptions:Freeze="true"> <GradientStop Color="WhiteSmoke" Offset="0" /> <GradientStop Color="Navy" Offset="1" /> </LinearGradientBrush> <LinearGradientBrush x:Key="C1Scheduler_TimeSlot_SelectedBrush"StartPoint="0,0" EndPoint="1,0" PresentationOptions:Freeze="true"> <GradientStop Color="WhiteSmoke" Offset="0" /> <GradientStop Color="Navy" Offset="1" /> </LinearGradientBrush> <SolidColorBrush x:Key="C1Scheduler_ControlArea_Brush" Color="#FFE7EFFF"PresentationOptions:Freeze="true"/> <SolidColorBrush x:Key="C1Scheduler_ControlAreaLines_Brush"Color="#FF000080" PresentationOptions:Freeze="true"/> <SolidColorBrush x:Key="C1Scheduler_ControlAreaText_Brush" Color="Navy"PresentationOptions:Freeze="true"/> <RadialGradientBrush x:Key="C1Scheduler_DayHeader_HoverBrush"GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.5" RadiusY="1"PresentationOptions:Freeze="true"> <GradientStop Color="#FFF79494" Offset="0" /> <GradientStop Color="Navy" Offset="1" /> </RadialGradientBrush> <LinearGradientBrush x:Key="C1Scheduler_DayHeader_Brush" EndPoint="0.5,1"StartPoint="0.5,0" SpreadMethod="Pad"MappingMode="RelativeToBoundingBox" PresentationOptions:Freeze="true"> <GradientStop Color="#FFB7C3D5" Offset="0"/> <GradientStop Color="#FF000080" Offset="1"/> </LinearGradientBrush> <SolidColorBrush x:Key="C1Scheduler_DayHeaderText_Brush" Color="White"PresentationOptions:Freeze="true"/> <SolidColorBrush x:Key="C1Scheduler_DayHeaderBorder_Brush" Color="#00000000"PresentationOptions:Freeze="true"/> <LinearGradientBrush x:Key="C1Scheduler_AppointmentBgMask_Brush"StartPoint="0,0" EndPoint="0,1" PresentationOptions:Freeze="true"> <GradientStop Color="#CCFFFFFF" Offset="0" /> <GradientStop Color="#10FFFFFF" Offset="1" /> </LinearGradientBrush> </ResourceDictionary> </ResourceDictionary> </Page.Resources><Grid> <!—- set scheduler’s theme to the custom_theme --> <c1:C1Scheduler Name="scheduler1" Theme="{StaticResource custom_theme}"Background="CornflowerBlue" FontSize="12" FontWeight="Bold"/> </Grid>



</Page>

すべてのブラシ定義に PresentationOptions:Freeze="true" があることに注目してください。この手法を使用することにより、パフォー

マンスを向上させることができます。

デフォルトのデフォルトの C1Scheduler のテーマリソースのテーマリソース

次の表に、デフォルトの C1Scheduler のテーマリソースの詳細と、そのキーを示します。

すべてのデフォルトテーマで使用されるキーすべてのデフォルトテーマで使用されるキー


C1Scheduler_AllDayAreaBorder_Thickness ［全日］領域（［日］ビュー、［稼働日］ビュー、および［Office 2007 の週］

ビューで使用）の境界線の太さを決定します。

C1Scheduler_AllDayArea_Brush ［全日］領域の背景色を指定する際に使用されるブラシ。

C1Scheduler_AllDayArea_SelectedBrush 現在選択されている日の［全日］領域の背景色を指定する際に使用され

るブラシ。

C1Scheduler_AlternateMonthDay_Brush 別の月日（［月］ビューで使用）の背景を表示する際に使用されるブラ

シ。

C1Scheduler_AlternateMonthDayHeader_Brush 別の月日（［月］ビューで使用）の日付ヘッダーを表示する際に使用され

るブラシ。

C1Scheduler_AppointmentBgMask_Brush 予定の背景色を指定する際にマスクとして使用されるブラシ。

C1Scheduler_Border C1Scheduler.Background プロパティにローカル値がない場合に、コン

トロールの背景として使用されるブラシ。

C1Scheduler_Border_Brush 日付間の境界線の色を指定する際に使用されるブラシ。

C1Scheduler_ControlArea_Brush タイムルーラーなどのコントロール領域の背景色を指定する際に使用さ

れるブラシ。

C1Scheduler_ControlAreaLines_Brush タイムルーラーなどのコントロール領域の境界線の色を指定する際に使

用されるブラシ。

C1Scheduler_ControlAreaText_Brush タイムルーラーなどのコントロール領域のテキストの色を指定する際に

使用されるブラシ。

C1Scheduler_DayHeader_Brush 日付ヘッダーの色を指定する際に使用されるブラシ。

C1Scheduler_DayHeader_HoverBrush マウスポインタを合わせたときの日付ヘッダーの色を指定する際に使用

されるブラシ。

C1Scheduler_DayHeaderBorder_Brush 日付ヘッダーの境界線の色を指定する際に使用されるブラシ。

C1Scheduler_DayHeaderText_Brush 日付ヘッダーテキストの色を指定する際に使用されるブラシ。

C1Scheduler_FreeHourBorder_Brush 空き時間の水平境界線（暗）を表示する際に使用されるブラシ。

C1Scheduler_FreeHour_Brush 勤務時間の背景を表示する際に使用されるブラシ。

C1Scheduler_FreeHourLightBorder_Brush 空き時間の水平境界線（明）を表示する際に使用されるブラシ。

C1Scheduler_TimeSlot_SelectedBrush 選択されているタイムスロットの色を指定する際に使用されるブラシ。

C1Scheduler_WorkHourBorder_Brush 勤務時間の水平境界線（暗）を表示する際に使用されるブラシ。

C1Scheduler_WorkHour_Brush 勤務時間の背景を表示する際に使用されるブラシ。



C1Scheduler_WorkHourLightBorder_Brush 勤務時間の水平境界線（明）を表示する際に使用されるブラシ。

Office 2007 固有のキー固有のキー

リソースキー説明

C1Scheduler_AllDayAreaTodayBorder_Thickness

現在の日付の［全日］領域（［日］ビュー、［稼働日］ビュー、および［Office2007 の週］ビューで使用）の境界線の太さを決定します。

C1Scheduler_AllDayAreaTodayBorder_Brush 現在の日付の［全日］領域（［日］ビュー、［稼働日］ビュー、および［Office2007 の週］ビューで使用）の境界線ブラシを決定します

C1Scheduler_NavPane_Brush ナビゲーションペインの色を指定する際に使用されるブラシ。

C1Scheduler_NavPane_HoverBrush マウスポインタを合わせたときのナビゲーションペインの色を指定する際に

使用されるブラシ。

C1Scheduler_NavPaneBorder_Brush ナビゲーションペインの境界線の色を指定する際に使用されるブラシ。

C1Scheduler_NavPaneText_Brush ナビゲーションペインのテキストの色を指定する際に使用されるブラシ。

C1Scheduler_ShowNavigationPanels 前/次の予定に移動するためのナビゲーションパネルをコントロールに表示

するかどうかを決定します。

C1Scheduler_Day_SelectedBrush ［月］ビューで、選択した日の背景色を指定する際に使用されるブラシ。

C1Scheduler_TodayBorder_Brush 現在の日付の境界線の色を指定する際に使用されるブラシ。

C1Scheduler_TodayHeader_Brush 現在の日付のヘッダーの色を指定する際に使用されるブラシ。

C1Scheduler_TodayHeader_HoverBrush マウスポインタを合わせたときの、現在の日付ヘッダーの色を指定する際

に使用されるブラシ。

C1Scheduler_TodayHeaderBorder_Brush 現在の日付のヘッダー境界線の色を指定する際に使用されるブラシ。

C1Scheduler_TodayHeaderText_Brush 現在の日付のヘッダーテキストの色を指定する際に使用されるブラシ。

C1Scheduler_WeekTab_Brush 週のタブの色を指定する際に使用されるブラシ。

C1Scheduler_WeekTab_HoverBrush マウスポインタを合わせたときの週のタブの色を指定する際に使用される

ブラシ。

C1Scheduler_WeekTabBorder_Brush 週のタブの境界線の色を指定する際に使用されるブラシ。

C1Scheduler_WeekTabText_Brush 週のタブのテキストの色を指定する際に使用されるブラシ。

C1Scheduler のスタイルとテンプレートの ThemeResources プロパティは、すべて XAML で定義されています。C1Schedulerの UI に関して独自のスタイルとテンプレートを構築するには、次のいずれかの方法を検討します。

C1Scheduler のデフォルトのスタイルおよびテンプレートと同じ方法でリソースを使用する

独自のロジックを使って UI を構築する

カスタムのスタイルとテンプレートを作成するためのヒントカスタムのスタイルとテンプレートを作成するためのヒント

次のリストは、カスタムのスタイルとテンプレートを作成するためのヒントです。

可能な限りビジュアルツリーを簡潔にする

一部の要素で IsHittestVisible="false" に設定するとパフォーマンスが向上する場合がある

CoverElementsPane.Orientaion プロパティが設定されている要素では上の設定を行わない



可能な限りビジュアルツリーの上部で C1BrushBuilder を使用する。C1BrushBuilder を多く使用するほど、パフォーマ

ンスが悪くなります。

カスタムテーマの作成カスタムテーマの作成

テーマは、WPF コントロールを対象とするブラシ、スタイル、データテンプレートなどのさまざまなリソースが集められた

ResourceDictionary です。C1Scheduler コントロールおよび C1Calendar コントロールは多数の小さなパーツから構成され

ており、これらのパーツは実行時に動的に作成されます。これらのパーツはすべて、再利用可能なリソースとしてテーマ辞書

に記述されています。たとえば、すべてのビューで使用される Day Header の Style 定義は１つしかありません。

ブラシリソースの場合は、すべてのブラシを１回ずつ定義し、一意のキーを割り当てて、後からスタイルとテンプレートのテーマ

プロパティとして使用することをお勧めします。この XAML の例では、ブラシを定義し、その後、スタイルセッターと境界線の背

景で使用します。

XAML

<!—- ブラシをフリーズに決定します（パフォーマンスの向上のため） --><LinearGradientBrush x:Key="DayHeaderBrush" StartPoint="0,0" EndPoint="0,1"PresentationOptions:Freeze="true"> <GradientStop Color="#DDFFFFFF" Offset="0" /> <GradientStop Color="#CAFFFFFF" Offset="0.5" /> <GradientStop Color="#AAFFFFFF" Offset="0.6" /> <GradientStop Color="#DDFFFFFF" Offset="1" /></LinearGradientBrush><!—- スタイルセッターでブラシを使用します --><Setter Property="Background" Value="{Binding Path=Scheduler.Theme[DayHeaderBrush]}" /><!—- ブラシを境界線の背景に使用します --><Border Name="gradBrushRect"Background="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:C1Scheduler}}, Path=Theme[DayHeaderBrush]}" />

ここで、C1Scheduler を構成する「小さなパーツ」とは何でしょうか？この例では、VisualInterval がキーです。［月］ビュー［月］ビューで

は、これは通常１日間隔です。［日］ビュー［日］ビューでは、数分間という最小時間スロットです。これらの間隔は、大きなパーツにグルー

プ化できます。たとえば、［月］ビューでは、間隔は週にグループ化され、［日］ビュー［日］ビューでは、分は時間に、時間は日にグループ

化されます。そのため、C1Scheduler の外観を決定するには、各パーツのすべての外観を決定する必要があります。

次の２つの図は、デフォルトのテーマで使用されるリソースキーと UI 表現との対応を示しています。１番目の例は、［月］［月］

ビュービューのスケジュールです。



２番目の例は、［週］ビュー［週］ビューのスケジュールです。

新しいテーマを作成する最初の手順は、全体をどのように小さなパーツに分割するかを理解することです。次に、その小さな

パーツのリソース、スタイル、およびテンプレートを作成し、それを使用して、コントロール全体に適用される新しいスタイルを作

成します。基本的に、C1Scheduler のソース XAML で使用されるものと同じリソースキーを保持する場合は、デフォルトのス

タイルで自動的に使用される小さなパーツの一部についてのみテンプレートを作り直します。



テーマパックの作成テーマパックの作成

独自のテーマパックを作成するには、新しい Visual Studio 2008 プロジェクトを作成し、１つ以上のテーマ ResourceDictionary を追加します。

1. Visual Studio2008 の［ファイルファイル］メニューから、［新しいプロジェクト新しいプロジェクト］を選択します。［新しいプロジェクト新しいプロジェクト］ダイアログボックスが表示されま

す。

2. テンプレートのリストから、［WPF ユーザーコントロールライブラリユーザーコントロールライブラリ］を選択します。このオプションは、［プロジェクトの種類プロジェクトの種類］の Visual Basicまたは Visual C# の［Windows］ノードに表示されます。

3. プロジェクトの位置と C1SchedulerThemePack などの名前を入力し、［OK］をクリックします。

4. ソリューションエクスプローラで、UserControl1.xaml ファイルを右クリックし、メニューから［削除削除］を選択し、［OK］をクリックします。

5. C1.WPF.Schedule.4.dll アセンブリへの参照を追加します。

6. ソリューションエクスプローラで、プロジェクト名を右クリックし、［追加追加］→［新しいフォルダ新しいフォルダ］をクリックし、このフォルダに themes と名前を

付けます。

7. themes フォルダを右クリックし、［追加追加］→［リソースリソースディクショナリディクショナリ］を選択します。

8. ［名前名前］テキストボックスに「generic.xaml」と入力し、［追加追加］をクリックします。

9. もう一度 themes フォルダを右クリックし、［追加追加］→［リソースリソースディクショナリディクショナリ］を選択します。

10. ［名前名前］テキストボックスに「MyTheme.xaml」と入力し、［追加追加］をクリックします。

11. MyTheme.xaml ファイルを開き、ResourceDictionary の開始タグの中に名前空間宣言を追加します。次のようになります。

XAML

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:C1.WPF.Schedule;assembly=C1.WPF.Schedule"xmlns:storage="clr-namespace:C1.C1Schedule;assembly=C1.WPF.Schedule"xmlns:PresentationOptions="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"xmlns:sys="clr-namespace:System;assembly=mscorlib"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"mc:Ignorable="PresentationOptions">

12. デフォルトのテーマの一部のみを再定義する場合は、次の XAML のようにソーステーマ定義を

ReourceDictionary.MergedDictionaries コレクションに追加します。

XAML

ResourceDictionary.MergedDictionaries><ResourceDictionarySource="/C1.WPF.C1Schedule;component/themes/SchedulerThemes/Office2007/Blue.xaml" /></ResourceDictionary.MergedDictionaries>

13. 再定義するブラシ定義を追加します。たとえば、次の XAML を使用します。

XAML

<SolidColorBrush x:Key="AlternateMonthBrush" Color="#08FFFFFF"PresentationOptions:Freeze="true"/><SolidColorBrush x:Key="AllDayAreaBrush" Color="#11FFFFFF"PresentationOptions:Freeze="true"/><SolidColorBrush x:Key="Background" Color="#FF111111" PresentationOptions:Freeze="true"/><SolidColorBrush x:Key="BorderBrush" Color="#000B0B0B" PresentationOptions:Freeze="true"/><SolidColorBrush x:Key="WorkHourBrush" Color="#FF303030" PresentationOptions:Freeze="true"/>

14. 含まれる辞書に定義されるスタイルとテンプレートをオーバーライドします。たとえば、次の XAML を使用します。

XAML



<Style x:Key="{ComponentResourceKey TypeInTargetAssembly={x:Type local:C1Scheduler}, ResourceId=MonthHeaderStyle}" TargetType="{x:Type ContentControl}"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type ContentControl}"> <Grid> <Border BorderThickness="0,0,1px,0"BorderBrush="{Binding RelativeSource={RelativeSourceAncestorType={x:Type local:C1Scheduler}}, Path=Theme[ControlAreaLinesBrush]}"SnapsToDevicePixels="True"Background="{Binding RelativeSource={RelativeSourceAncestorType={x:Type local:C1Scheduler}}, Path=Theme[ControlAreaBrush]}" /> <ContentPresenter TextBlock.Foreground="Red" Margin="0,2,0,2" Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center" /> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style>

15. 変更を保存します。この XAML が正しく動作するためには、次の手順で新しいテーマの ComponentResourceKey を generic.xaml ファ

イルに追加する必要があります。

16. generic.xaml ファイルを開き、ResourceDictionary の開始タグの中に次の名前空間宣言を追加します。

xmlns:local="clr-namespace:C1.WPF.Schedule;assembly=C1.WPF.Schedule"

17. 次の XAML を使用して、generic.xaml ファイルに新しいテーマの ComponentResourceKey を追加します。

XAML

<ResourceDictionary x:Key="{ComponentResourceKeyTypeInTargetAssembly={x:Type local:C1Scheduler}, ResourceId=MyTheme}"Source="/C1SchedulerThemePack;component/themes/MyTheme.xaml" />

18. すべての変更を保存し、［ビルドビルド］→［C1SchedulerThemePack のビルド］をクリックして選択し、テーマアセンブリをビルドします。

Office 2007 Blue、Silver、Black など複数の色でテーマを作成する場合は、１つのファイルにテーマ定義全体を配置し、これを１つ

の色で使用します。次に、マージされるリソース辞書として、このファイルを他の色の ResourceDictionary に追加し、色（Brush リソース）のみを再定義します。generic.xamlファイルで各色の ComponentResourceKey を作成します。

テーマパックのテストテーマパックのテスト

最初のテーマパックを作成したので、そのテストアプリケーションを作成します。

1. ［ファイルファイル］→［新しいプロジェクト新しいプロジェクト］を順に選択します。

2. ［テンプレートテンプレート］のリストから［WPF アプリケーションアプリケーション］を選択し、名前を指定し、［OK］をクリックします。

3. ソリューションエクスプローラで、C1.WPF.Schedule.dll アセンブリへの参照を追加します。

4. C1SchedulerThemePack プロジェクトによってここで生成されたアセンブリへの参照を追加します。アセンブリ

は、bin\Debug: C1SchedulerThemePack.dll 内の C1SchedulerThemePack プロジェクトフォルダにあります。

5. デザインデザインビューで Window1.xaml ファイルを開き、ツールボックスから C1Scheduler コントロールを追加します。

6. Application.xaml ファイルを開き、次の XAML を使用して、C1SchedulerThemePack プロジェクトから



generic.xaml ファイルへの参照をアプリケーションリソースに追加します。

XAML

<Application.Resources> <ResourceDictionary Source="/C1SchedulerThemePack;component/themes/generic.xaml" /></Application.Resources>

7. Window1.xaml ファイルに戻り、次の XAML を使用して、C1Scheduler コントロールの Theme プロパティを

MyTheme に変更します。グリッドタグを削除します。

XAML

<my:C1Scheduler Name="c1Scheduler1" Theme="{DynamicResource {ComponentResourceKey TypeInTargetAssembly=my:C1Scheduler,ResourceId=MyTheme}}"></my:C1Scheduler>

8. ソリューションエクスプローラで、新しい WPF アプリケーションプロジェクトの名前を右クリックし、［スタートアップスタートアッププロプロ

ジェクトに設定ジェクトに設定］を選択します。

9. アプリケーションをビルドし、デザイナで結果を表示します。

Blend でのテーマの作成でのテーマの作成

Microsoft Expression Blend は、設計時に外部リソースの参照を検出できません。しかし、デザイナが Blend で作業する必要

がある場合は、次の手順によってデザイナからテーマリソースを操作できます。

1. Blend で WPF アプリケーション（アプリケーション（.exe））を作成します。

2. デフォルトの C1Scheduler テーマの一部のみを再定義する場合は、すべてのソース XAML ファイルとテーマ定義をア

プリケーションフォルダにコピーし、プロジェクトに追加します。これらのファイルは、デフォルトでは、ComponentOne と共に＜インストールフォルダ＞\Misc\Xaml\C1WPFSchedule にインストールされます。ComponentOne をマシンの別

の場所にインストールした場合は、違う場所に置かれている場合もあります。

3. 同じプロジェクトで新しいテーマリソース辞書を作成し、その中で、マージされたリソース辞書としてソース XAML を使

用します。

4. Theme プロパティをリソース辞書に設定します。

5. テーマリソース辞書を編集します。デザイナで結果を表示できるはずです。

6. 終了後、アプリケーション間でテーマを共有する場合は、前に説明したように別のアセンブリにパックし直します。

C1Scheduler for Silverlight のテーマのテーマ

C1Scheduler は、C1.Silverlight.Theming テーマと共に使用できます。他のコントロールと比較した場合、C1Scheduler では

次の点にのみ制限があります。

C1Scheduler.Theme プロパティをテーマ ResourceDictionary に明示的に設定する必要があります。次に例を示します。

C#

C1Theme theme = _new C1.Silverlight.Theming.WhistlerBlue.C1ThemeWhistlerBlue();ResourceDictionary themeDictionary = C1Theme.GetCurrentThemeResources(theme);



sched1.Theme = themeDictionary;

メモ：メモ：このセクションの内容は、ComponentOne for Silverlight にのみ適用されます。

デフォルトのテーマデフォルトのテーマ

次の表に、デフォルトの C1Scheduler のテーマリソースの詳細と、そのキーを示します。

すべてのデフォルトテーマで使用されるキーすべてのデフォルトテーマで使用されるキー


C1Scheduler_Background このブラシは、コントロールの Background プロパティのデフォルト値とし

て使用されます。

C1Scheduler_Border_Brush このブラシは、コントロールの BorderBrush プロパティのデフォルト値とし


C1Scheduler_Border_Style ナビゲーションペイン、日付ヘッダー、週タブの境界の色を指定する際に

使用される C1BrushBuilder スタイル。

C1Scheduler_Foreground_Brush このブラシは、コントロールの Foreground プロパティのデフォルト値とし


C1Scheduler_Selected_Brush C1Scheduler.SelectedBackground プロパティのデフォルト値として使用さ

れるブラシ。これは、月ビューで、選択した日の背景色を指定する際に使

用されます。

C1Scheduler_ControlArea_Brush C1Scheduler.ControlBackground プロパティのデフォルト値として使用さ

れるブラシ。これは、タイムルーラーなどのコントロール領域の背景色を指

定する際に使用されます。

C1Scheduler_ControlAreaText_Brush C1Scheduler.ControlForeground プロパティのデフォルト値として使用さ

れるブラシ。これは、タイムルーラーなどのコントロール領域のテキストと

線の色を指定する際に使用されます。

C1Scheduler_NavPane_Brush ナビゲーションペインの色を指定する際に使用されるブラシ。

C1Scheduler_NavPane_Style ナビゲーションパネルの色を指定する際に使用される C1BrushBuilder スタイル。

C1Scheduler_NavPane_HoverBrush マウスポインタを合わせたときのナビゲーションペインの色を指定する際


C1Scheduler_NavPane_HoverStyle マウスポインタを合わせたときのナビゲーションパネルの色を指定する際

に使用される C1BrushBuilder スタイル。

C1Scheduler_DayHeader_Brush 日付ヘッダーの色を指定する際に使用されるブラシ。

C1Scheduler_DayHeader_Style 日付ヘッダーの色を指定する際に使用される C1BrushBuilder スタイル。

C1Scheduler_DayHeader_HoverBrush マウスポインタを合わせたときの日付ヘッダーの色を指定する際に使用さ

れるブラシ。

C1Scheduler_DayHeader_HoverStyle マウスポインタを合わせたときの日付ヘッダーの色を指定する際に使用さ

れる C1BrushBuilder スタイル。

C1Scheduler_Today_Brush C1Scheduler.TodayBackground プロパティのデフォルト値として使用され

るブラシ。現在の日付要素の色を指定する際の基本色として使用されま

す。



C1Scheduler_TodayHeader_Brush 現在の日付のヘッダーの色を指定する際に使用されるブラシ。

C1Scheduler_TodayHeader_HoverBrush マウスポインタを合わせたときの、現在の日付ヘッダーの色を指定する際


C1Scheduler_AllDayAreaBorder_Thickness ［全日］領域（日ビュー、週間勤務日ビュー、および［Office 2007 の週］

ビューで使用）の境界線の太さを決定します。

C1Scheduler_AllDayAreaTodayBorder_Thickness

現在の日付の［全日］領域（日ビュー、週間勤務日ビュー、および［Office2007 の週］ビューで使用）の境界線の太さを決定します。

C1Scheduler_AllDayArea_Brush ［全日］領域の背景色を指定する際に使用されるブラシ。

C1Scheduler_AllDayArea_SelectedBrush 現在選択されている日の［全日］領域の背景色を指定する際に使用される

ブラシ。

C1Scheduler_AllDayArea_Style ［全日］領域の色を指定する際に使用される C1BrushBuilder スタイル。

C1Scheduler_WorkHour_Brush 勤務時間の背景を表示する際に使用されるブラシ。

C1Scheduler.AlternatingBackground プロパティのデフォルト値として使

用されます。

C1Scheduler_WorkHourBorder_Brush 勤務時間の水平境界線（暗）を表示する際に使用されるブラシ。

C1Scheduler_WorkHourLightBorder_Brush 勤務時間の水平境界線（明）を表示する際に使用されるブラシ。

C1Scheduler_FreeHour_Brush 勤務時間の背景を表示する際に使用されるブラシ。

C1Scheduler_FreeHourBorder_Brush 空き時間の水平境界線（暗）を表示する際に使用されるブラシ。

C1Scheduler_FreeHourLightBorder_Brush 空き時間の水平境界線（明）を表示する際に使用されるブラシ。

C1Scheduler_WeekTab_Brush 週のタブの色を指定する際に使用されるブラシ。

C1Scheduler_WeekTab_BrushStyle 週のタブの色を指定する際に使用される C1BrushBuilder スタイル。

C1Scheduler_WeekTab_HoverBrush マウスポインタを合わせたときの週のタブの色を指定する際に使用される

ブラシ。

C1Scheduler_WeekTab_HoverBrushStyle マウスポインタを合わせたときの週のタブの色を指定する際に使用される

C1BrushBuilder スタイル。

C1Scheduler_AlternateMonthDay_Brush 別の月日（月ビューで使用）の背景を表示する際に使用されるブラシ。

C1Scheduler_AppointmentBgMask_Brush 予定の背景色を指定する際にマスクとして使用されるブラシ。

C1Scheduler_AppointmentForeground_Brush C1Scheduler.AppointmentForeground プロパティのデフォルト値として

使用されるブラシ。予定のテキストを表示する際に使用されます。

C1Scheduler_TimeSlot_SelectedBrush 選択されているタイムスロットの色を指定する際に使用されるブラシ。

カスタムテーマの作成カスタムテーマの作成

C1Scheduler のカスタムテーマを作成する最も簡単な方法は、デフォルトの C1 テーマの１つから継承し、いくつかのデフォル

トリソースを MyCustomTheme サンプルに示されているように再定義するというものです。このサンプルは、ComponentOnefor Silverlight のインストールフォルダにあります。

ユーザーインターフェイスのカスタマイズユーザーインターフェイスのカスタマイズ

Scheduler for WPF/Silverlightには、ユーザーインターフェイス（UI）の作成を支援するための特殊な映像データモデルが用

意されています。C1Scheduler の UI 構築の概念は、System.Windows.Controls.ItemsControl をグループ化



し、ItemsControl.ItemsSource の特別なコレクションと組み合わせたものとほぼ同じです。

たとえば、VisualStartTime では、スケジュールの先頭に表示する日付が設定されます。VisualTimeSpan プロパティでは、

時間の長さ、つまりほとんどの場合はビューに表示される日数が定義されます。VisualIntervalScale プロパティ

は、VisualTimeSpan をさらに細かく分割する単位です。ビューにてカスタムスケーリングを保持するには、C1Schedulerクラ

スにC1Scheduler.SmallVisualIntervalScaleプロパティが提供されています。ビューを切り替える際に、カスタムスケーリン

グを保持する方法の詳細について、「さまざまなビューの時間間隔のカスタマイズ」を参照してください。

たとえば、［稼働日］ビューのビュースタイルでは、VisualStartTime はデフォルトで現在の週の最初の月曜日になっていま

す。VisualTimeSpan は 5:00:00:00、つまり一般的な稼働日である月曜から金曜の５日間です。VisualIntervalScale は00:15:00 です。つまり、スケジュールでは１時間が 15 分単位に分割されて表示されます。

メモ：VisualStartTime プロパティ値は、VisualTimeSpan プロパティと SelectedDateTime プロパティによって自動的

に決定されます。このため、ほとんどの場合は VisualStartTime プロパティ値を設定する必要はありません。ただ

し、VisualTimeSpan プロパティと SelectedDateTime プロパティは設定する必要があります。これは、スケジュール

の先頭に表示される日付が現在の日付であるとは限らない週や月のビューで重要です。

指定された VisualStartTime、VisualTimeSpan、VisualIntervalScale のプロパティでは、VisualIntervalCollection はVisualInterval オブジェクトによって値を挿入され、期間の定義は VisualIntervalScale の長さです。

VisualIntervalCollection 内の項目はグループ化することができます。グループ化の基準は

VisualIntervalGroupDescriptions コレクションで定義され、各グループレベルに１つの項目が格納されます。各グループレ

ベル（ヘッダー、グループ項目を含むパネル、グループ項目の UI、これらの部分が集められたレイアウト）の UIは、VisualIntervalGroupStyles コレクションで定義され、各グループレベルに１つの項目が格納されます。

VisualInterval の UI 表現を定義するには、VisualIntervalTemplate プロパティを使用する必要がありま

す。VisualIntervalPanel プロパティでは、VisualInterval の項目を配置するパネルが定義されます。



VisualIntervalCollection のグループビューを提供するには、the VisualIntervalsView プロパティを使用する必要がありま

す。これは System.Windows.Data.ListCollectionView から派生したオブジェクトで、VisualInterval を SourceCollectionとして格納しています。

VisualInterval の UI DataTemplate の DataContext は、それ自体が VisualInterval です。このため、DataTemplate XAMLコード内の構造 {Binding property_name} は、VisualInterval の property_name プロパティへの結合を意味します。

グループ項目の UI DataTemplate の DataContext は VisualIntervalGroup オブジェクトであり、VisualInterval から継承

されます。この VisualIntervalGroup によって表される期間は、子項目（子グループまたは間隔）の期間が結合されたもので

す。これにより、基本クラスには次のプロパティのみが追加されます。

System.Windows.Data.CollectionViewGroup 型のグループ。これは、VisualIntervalCollectionView.Groups コレクション内のグループ項目を表すデータオブジェクトです。

C1.WPF.C1Schedule.VisualIntervalCollection 型の VisualIntervals（子 VisualInterval オブジェクトのコレクショ

ン）。

VisualInterval クラスは、間隔と重なり合う予定を表す Appointments コレクションなどを格納します。このコレクション

は、Appointment インスタンスは直接格納せず、代わりに IntervalAppointment クラスのインスタンスを保持します。この

インスタンスには、インスタンスが表す予定（Appointment プロパティ）への参照と、予定がこの期間中に開始するかどうか、

終了するかどうかなどを表すいくつかのヘルパープロパティへの参照が含まれています。

C1Scheduler の ControlTemplate が作成される際に（C1Scheduler.Template）、間隔およびそのグループが表示される場

所のマークアップとして C1SchedulerPresenter オブジェクトが使用される必要があります。

たとえば、30 分間隔で区切った Outlook 形式の［稼働日］ビューを定義するには、次のコードを使用します。

Visual Basic

C1Scheduler1.ChangeStyle(C1Scheduler1.WorkingWeekStyle)C1Scheduler1.VisualIntervalScale = TimeSpan.FromMinutes(30)C1Scheduler1.VisualTimeSpan = TimeSpan.FromDays(5)Group Level1PropertyNames = "StartTime.Day" (group by VisualInterval.StartTime.Day)GroupStyle = (Header: day name; Panel : some Panel with Horizontal orientation)Group Level2PropertyNames = "StartTime.Hour" (group by VisualInterval.StartTime.Hour)GroupStyle = (Header: none; Panel : some Panel with Vertical orientation with a Border around)

次の XAML は、グループの定義方法の例を示しています。

XAML

<!—- グループの説明 --><Setter Property="VisualIntervalGroupDescriptions"> <Setter.Value> <local:IntervalGroupDescriptionCollection> <!—- グループレベル１ – 日でグループ化 --> <local:VisualIntervalGroupDescription PropertyNames="StartTime.Day" /> <!—- グループレベル２ – 時間でグループ化 --> <local:VisualIntervalGroupDescription PropertyNames="StartTime.Hour" /> </local:IntervalGroupDescriptionCollection> </Setter.Value></Setter>



<Setter Property="local:VisualIntervalGroupStyles"> <Setter.Value> <local:IntervalGroupStyleCollection> <!—- グループレベル１ – 日でグループ化 --> <GroupStyle ContainerStyleSelector="{StaticResource DayGroupStyleSelector}"> <GroupStyle.HeaderTemplate> <DataTemplate> <Border Visibility="Collapsed" />  </DataTemplate> </GroupStyle.HeaderTemplate> <!—- 日を１行に並べてグループを作成 --> <GroupStyle.Panel> <ItemsPanelTemplate> <UniformGrid SnapsToDevicePixels="True" Rows="1" /> </ItemsPanelTemplate> </GroupStyle.Panel> </GroupStyle> <!—- グループレベル２ – 時間でグループ化 --> <GroupStyle ContainerStyleSelector="{StaticResource TimeSlotGroupStyleSelector}"> <GroupStyle.HeaderTemplate> <DataTemplate> <Border Visibility="Collapsed" /> </DataTemplate> </GroupStyle.HeaderTemplate> <!—- 24 時間を１列に並べてグループを作成 --> <GroupStyle.Panel> <ItemsPanelTemplate> <UniformGrid Rows="24" /> </ItemsPanelTemplate> </GroupStyle.Panel> </GroupStyle> </local:IntervalGroupStyleCollection> </Setter.Value></Setter>

C1Scheduler コントロールの外観をカスタマイズするにはコントロールの外観をカスタマイズするには

1. C1Scheduler コントロールの一般的なレイアウトモデルを定義するには、C1Scheduler.Template プロパティを割り当

てる必要があります。通常、この操作はスタイルの Setter プロパティで行います。テンプレートには任意の UI 要素を

含めることができます。ただし、テンプレートのビジュアルツリーの数箇所に、次のプレースホルダ要素が存在する必要

があります。

VisualIntervalGroupsPresenter - VisualIntervalGroup オブジェクトのコレクションが表示される場所を指

定します。

AppointmentsCoverPane – 予定ボックスを描画する面を提供します。

C1SchedulerPresenter – スケジュールの時間間隔を示すペインを表示する場所を定義します。

上記の各プレースホルダはオプションです。



2. グループ化を定義するには、次の手順に従います。

VisualIntervalGroupDescriptions を設定して、VisualIntervalCollection の項目に適用されるグループ化

の基準を定義します。

C1Scheduler.VisualIntervalGroupStyles を設定して、各グループレベルの UI を定義します。

3. VisualIntervalCollection に属する VisualInterval オブジェクトを表す要素のレイアウトを定義するに

は、VisualIntervalPanel プロパティを設定します。

4. VisualInterval の表現を定義するには、 C1Scheduler.VisualIntervalTemplate プロパティを設定する

か TimeSlotTemplateSelector を使用します。

ユーザーインターフェイス作成の簡略化ユーザーインターフェイス作成の簡略化

C1Scheduler for WPF/Silverlight ビジュアルデータモデルに基づくユーザーインターフェイスの作成を簡略化するため

に、AutoDistributionGrid グリッドが作成されました。これは、System.Windows.Controls.Grid コントロールから派生さ

れ、新しい機能が追加されています。次に例を示します。

1. 子要素は、OrientationProperty プロパティ値（Horizontal または Vertical）に従って、いくつかの行または列に分け

られます。

2. 設定可能で連結可能な RowCount/ColumnCount プロパティ（DependencyProperty など）を使用する

と、Grid.RowDefinitions/ColumnDefinitions コレクション内の項目を追加または削除しなくても、行数/列数を数値

で定義できます。連結可能な VisualChildCount プロパティと共に、子と同じ数の行を持つ機能も提供します。

3. 特定の子要素に対してグリッド固有の特性（位置や結合など）を定義できます。 AutoDistributionGrid には、DistributionInfo オブジェクトの ChildrenDistributionInfo コレクションがあります。各 DistributionInfo オブ

ジェクトは、インデックス ElementIndex にあるグリッドの子オブジェクトを Row インデックスと Column インデックス

のセルに配置し（オプション）、セル範囲 RowSpan および ColumnSpan を占めるようにグリッドに指示します。特定

の要素の位置が再定義される場合は、指定された OrientationProperty に応じて、次の要素がこの要素の隣のセル

に配置されます。結合が定義され、その結合の方向が OrientationProperty に準拠している場合、次の要素は結合

を越えて配置されます。各 DistributionInfo 項目の情報は、Propagate プロパティで指定される数（固定または無

限）の次の要素まで継承されます。

複数の日の予定を表示する複数の日の予定を表示する

AppointmentsCoverPane コントロールは、現在のビューに公開される時間範囲に含まれる一連の予定をビジュアルに表現

します。また、予定と重なる部分の VisualIntervals を表すユーザーインターフェイス（UI）要素を基準にして、予定ボックスを描

画します。このコントロールを C1Scheduler ビジュアルツリー内のいずれかの場所（通常は C1Scheduler のControlTemplate 内）に配置すると、VisualIntervals の UI を基準に予定ボックスを描画するための面が提供されま

す。AppointmentsCoverPane コントロールでは、予定ボックスを２つ以上のビジュアルボックスに分割する必要がある場合

が認識されます。たとえば、［月］ビューで予定が３日間にまたがる場合、AppointmentsCoverPane は自動的に、予定が含

まれる各日に３つのボックスを描画します。

AppointmentsCoverPane 予定ボックスの内容は、IntervalAppointmentTemplate プロパティで定義される

DataTemplate によって表されます。

AppointmentsCoverPane コントロールは、VisualIntervals を表す任意の UI に対して機能を提供します。それには、

VisualInterval UI の表現として扱うことができる各要素（通常は VisualIntervalTemplate 定義内の外側の（ルート）要素）に

添付 OrientationProperty フィールドが割り当てられている必要があります。CoverElementsPaneは AppointmentsCoverPane クラスの基本クラスであることに注意してください。割り当てられる値は、間隔要素の時間の方

向を示しており、値は Horizontal または Vertical です。たとえば、［稼働日］ビュー内の間隔要素ではこの値に Vertical を割

り当て、［月］ビューの要素ではこの値に Horizontal を割り当てます。

C1Scheduler ビジュアルツリーには、複数の AppointmentsCoverPanes を格納できます。たとえば、デフォルトの

DayView テンプレートには、日付ヘッダーに全日のイベントを表示する AppointmentsCoverPane と、短い予定をタイムス

ロットに表示する AppointmentsCoverPane があります。AppointmentsCoverPane で表示する必要がある予定をフィルタ



処理するには、AppointmentsCoverPane.Appointmentfilter 添付プロパティと CoverElementsPane.PaneName 添付

プロパティを VisualIntervalTemplate 定義に割り当てます。AppointmentsCoverPane.Appointmentfilter 添付プロパ

ティは、AppointmentFilterEnum.Event（全日および複数の日にまたがる予定のみを表

示）、AppointmentFilterEnum.Appointment（長さが 24 時間以内である予定のみを表示）、または

AppointmentFilterEnum.All の各値に設定することができます。CoverElementsPane.PaneName プロパティは、予定を

表示する必要がある AppointmentsCoverPane オブジェクトの名前に設定する必要があります。次に例を示します。

Silverlilght

XAML

<Setter Property="c1sched:C1Scheduler.VisualIntervalTemplate"> <Setter.Value> <DataTemplate> <Border Background="{Binding Path=StatusBrush}" Opacity="0.3" c1sched:AppointmentsCoverPane.AppointmentFilter="Appointment" c1sched:CoverElementsPane.Orientation="Vertical" c1sched:CoverElementsPane.PaneName="appPane" MinHeight="20"/> </DataTemplate> </Setter.Value></Setter>

WPF

XAML

<Setter Property="local:C1Scheduler.VisualIntervalTemplate"> <Setter.Value> <DataTemplate> <Border x:Name="IntervalBorder" SnapsToDevicePixels="True" Background="{Binding Path=Scheduler.Theme.WorkHourBrush}" BorderBrush="{Binding Path=Scheduler.Theme.WorkHourLightBorderBrush}" BorderThickness="0,1px,0,0" local:AppointmentsCoverPane.AppointmentFilter="Appointment" local:CoverElementsPane.Orientation="Vertical" local:CoverElementsPane.PaneName="appPane" MinHeight="20"> <Border.InputBindings> <MouseBinding MouseAction="LeftDoubleClick" Command="local:C1Scheduler.NewAppointmentDialogCommand"/> </Border.InputBindings> </Border> <DataTemplate.Triggers> <DataTrigger Binding="{Binding Path=IsSelected}" Value="True"> <Setter TargetName="IntervalBorder" Property="Background" Value="{Binding Path=Scheduler.Theme.SelectedSlotBrush}" /> </DataTrigger> </DataTemplate.Triggers> </DataTemplate> </Setter.Value> </Setter>



Visual Intervals のスタイルとテンプレートの選択のスタイルとテンプレートの選択

C1Scheduler.VisualIntervals の適切なスタイルとテンプレートをすばやく簡単に選択できるように、C1Scheduler コントロールに

は、TimeSlotGroupStyleSelector、DayGroupStyleSelector、TimeSlotTemplateSelector, DayIntervalStyleSelector and TimeSlotStyleSelector.

TimeSlotGroupStyleSelector クラスを使用すると、［日］ビュー［日］ビューおよび［稼働日稼働日］ビューモードで、勤務時間と空き時間にタイムスロットグループのスタイル

を適用できます。このクラスを使用するには、次の手順に従います。

1. テーブルに多くのデータが表示されている場合、先頭のヘッダ行などを固定することができます。

マークアップ

<local:TimeSlotGroupStyleSelector x:Key="TimeSlotGroupStyleSelector"/>

2. 次の２つのグループスタイルを定義します。

勤務時間にはキー「PART_WorkHourStyle」を使用。

空き時間にはキー「PART_FreeHourStyle」を使用。

3. グループ定義で、次のスタイルセレクタを指定します。

マークアップ

<GroupStyle ContainerStyleSelector="{StaticResource TimeSlotGroupStyleSelector}">

DayGroupStylesSelector クラスを使用すると、［日］ビュー［日］ビューおよび［稼働日稼働日］ビューモードで、Office 2003/2007 形式の表示に日付グループのスタイルを

適用できます。このクラスを使用するには、次の手順に従います。

1. クラスのインスタンスを作成します。

マークアップ

<local:DayGroupStyleSelector x:Key="DayGroupStyleSelector"/>

2. 次の２つのグループスタイルを定義します。

Office 2003 の外観を使用するにはキー「PART_Day2003Style」を使用。

Office 2007 の外観を使用するにはキー「PART_Day2007Style」を使用。


マークアップ

<GroupStyle ContainerStyleSelector="{StaticResource DayGroupStyleSelector}">

TimeSlotTemplateSelector クラスを使用すると、［日］ビュー［日］ビューおよび［稼働日稼働日］ビューモードで、単独のタイムスロットを示す VisualInterval オブジェクトに

DataTemplate を選択できます。このクラスを使用するには、次の手順に従います。


マークアップ

<local:TimeSlotTemplateSelector x:Key="TimeSlotTemplateSelector"/>

2. 次の２つの DataTemplate を定義します。

空き時間にはキー「PART_FreeSlotTemplate」を使用。

勤務時間にはキー「PART_WorkSlotTemplate」を使用。

3. C1SchedulerPresenter オブジェクトに ItemTemplateSelector を指定します。

マークアップ

<local:C1SchedulerPresenter ItemTemplateSelector="{StaticResource TimeSlotTemplateSelector}" />

この方法で VisualInterval DataTemplate を選択する場合は、VisualIntervalTemplate プロパティを設定しないでください。

DayIntervalStyleSelectorクラスを使用すると、平日または当日に対してグループスタイルを適用することができます。このクラスを使用するには、次の手

順に従います。




マークアップ

<local:DayIntervalStyleSelector x:Key=”DayIntervalStyleSelector"/>

2. DayIntervalStyleSelector リソースには、次の２つのグループスタイルを定義します。

平日にはキー「C1Scheduler_Day_Style」を使用。

当日にはキー「C1Scheduler_Today_Style」を使用。


マークアップ

<GroupStyle ContainerStyleSelector="{StaticResource DayIntervalStyleSelector}">

TimeSlotStyleSelector TimeSlotStyleSelectorクラスを使用すると、［日］［日］ビューおよび［稼働日］［稼働日］ビューモードで、勤務時間と空き時間にタイムスロットグ

ループのスタイルを適用できます。このクラスを使用するには、次の手順に従います。


マークアップ

<local:TimeSlotStyleSelector x:Key="TimeSlotStyleSelector"/>

2. TimeSlotStyleSelector リソースには、次の２つのグループスタイルを定義します。

勤務時間にはキー「C1Scheduler_WorkSlot_Style」を使用。

空き時間にはキー「C1Scheduler_FreeSlot_Style」を使用。

3. C1SchedulerPresenterオブジェクトにItemContainerStyleSelectorを指定します。

マークアップ

<local:C1SchedulerPresenter ItemContainerStyleSelector="{StaticResource TimeSlotTemplateSelector}" />

Scheduler のコマンドのコマンド

一部の種類の C1Scheduler 機能を XAML で宣言的に使用する機能を提供するために、C1Scheduler には ButtonBase または InputBinding 派生クラスのインスタンスを使って発行できるコマンドがいくつか用意されています。

次の表は、ナビゲーションナビゲーションのコマンドについて説明しています。

ナビゲーションのコマンド（このコマンドの送信元の例：ナビゲーションのコマンド（このコマンドの送信元の例：C1SchedulerScrollBar コントロール）コントロール）

DecrementStartTimeSmallCommand SmallStartTimeChange プロパティで指定された量だ

け VisualStartTime プロパティ値をデクリメントします。

DecrementStartTimeLargeCommand LargeStartTimeChange プロパティで指定された量だ

け VisualStartTime プロパティ値をデクリメントします。

IncrementStartTimeSmallCommand SmallStartTimeChange プロパティで指定された量だ

け VisualStartTime プロパティ値をインクリメントします。

IncrementStartTimeLargeCommand LargeStartTimeChange プロパティで指定された量だけ

VisualStartTime プロパティ値をインクリメントします。

SetRelativeStartTimeCommand 指定された率に基づいて、VisualStartTime プロパティを Start プロパ

ティ値と End プロパティ値の間の値に設定します。コマンドパラメータ：０

～１の浮動小数点数またはその文字列表現。

NavigateToPreviousAppointmentCommand SelectedDateTime 直前の予定をコントロール UI に表示します。

NavigateToNextAppointmentCommand SelectedDateTime 直後の予定をコントロール UI に表示します。



次の表は、ダイアログダイアログのコマンドについて説明しています。

ダイアログのコマンドダイアログのコマンド

EditAppointmentDialogCommand 既存の予定についての［予定の編集予定の編集］ダイアログボックスを開きます。コマンドパラ

メータは次のいずれかの値になります。

編集対象の予定

編集する Appointment オブジェクトの IList。

親予定を編集する必要がある Reminder オブジェクトの IList。

パラメータ値が指定されていない場合、コントロールは送信元の DataContext から予定を取得しようとします。

NewAppointmentDialogCommand 新しい予定を追加して、その予定についての［予定の編集］ダイアログボックスを開

きます。予定を作成する時間間隔は、送信元の DataContext によって決定されま

す。

EditRecurrenceDialogCommand 予定の繰り返しに関する［繰り返しの編集繰り返しの編集］ダイアログボックスを開きます。コマンド

パラメータ：RecurrencePattern を編集する対象の予定。パラメータ値が指定され

ていない場合、コントロールは送信元の DataContext から予定を取得しようとしま

す。

SelectFromListDialogCommand ［リソースの選択］、［カテゴリの選択］、［連絡先の選択連絡先の選択］などのダイアログボックス

を開きます。

コマンドパラメータは、４～５個の値の配列です。

1. 選択肢を含むマスターリスト。たとえば、Resources などです。

2. 選択した項目を配置する結果のリストです。たとえば、

Appointment.Resources リストなどです。

3. 両方のリストに含まれる項目の種類を指定する System.Type 値。

4. 所有ウィンドウへの参照（存在する場合）。

5. ダイアログウィンドウのタイトルとして表示する String 値。このパラメータは

オプションです。

次の表は、インポートインポート/エクスポートエクスポートのコマンドについて説明しています。

インポートインポート/エクスポートのコマンドエクスポートのコマンド

ImportCommand C1Scheduler データをファイルからインポートします。このコマンドを実行すると［ファイルを開く］ダイア

ログボックスが開き、選択したファイルからのデータのインポートが試行されます。

ExportCommand C1Scheduler データをファイルにエクスポートします。このコマンドを実行すると［ファイルの保存］ダイ

アログが開き、ファイルにデータがエクスポートされます。

コマンドパラメータは次のいずれかの値になります。

1. 保存する予定。

2. 保存する Ilist<Appointment>。



3. null – すべての Scheduler データがエクスポートされます。

次の表は、アラームアラームのコマンドについて説明しています。

アラームのコマンドアラームのコマンド

DismissCommand アラームを終了します。

コマンドパラメータは次のいずれかの値になります。

1. 終了する Reminder オブジェクトの IList。

2. 終了する Reminder オブジェクト。

コマンドパラメータが指定されていない場合は、すべてのアクティブなアラームが終了します。

SnoozeCommand アラームを停止します。

コマンドパラメータには、２個の値の配列を含めることができます。

1. 停止に使用する時間間隔を指定する TimeSpan 値。

2. 次のいずれかの値です。

停止する Reminder オブジェクトの IList。

停止する Reminder オブジェクト。

この項目はオプションです。これが指定されていない場合は、すべてのアクティブなアラームが停止し

ます。

次の表では、追加コマンドについて説明しています。

その他のコマンドその他のコマンド

DeleteSelectedAppointmentCommand.ユーザーインターフェイスで選択されるおよび

C1Scheduler.SelectedAppointment プロパティに参照される予定を削除し

ます。

ChangeStyleCommand 指定された Style、または特定の ResourceDictionary キーで参照されるスタ

イルを使用して、Style プロパティを変更します。コマンドパラメータ：Style、また

はスタイルを表す ResourceDictionary キー。

NavigateToPreviousGroupCommand C1Scheduler UI を前の SchedulerGroupItem オブジェクトに移動するコマ

ンドを定義します。

オプションのコマンドパラメータは次のいずれかの値になります。

ページ移動する場合は "Page"。ページサイズは、GroupPageSize プロパティ値によって決定されます。

最初のグループに移動する場合は "Home"。

NavigateToNextGroupCommand C1Scheduler UI を次の SchedulerGroupItem オブジェクトに移動するコマ

ンドを定義します。

オプションのコマンドパラメータは次のいずれかの値になります。



ページ移動する場合は "Page"。ページサイズは、GroupPageSize プロパティ値によって決定されます

最後のグループに移動する場合は "End"。

HideGroupCommand 指定された SchedulerGroupItem オブジェクトを非表示にするコマンドを定

義します。コマンドパラメータで、非表示にする SchedulerGroupItem オブ

ジェクトを指定します。

ネストされたプロパティへの値の割り当てネストされたプロパティへの値の割り当て

XAML では、ネストされたプロパティに値を割り当てることはできません。ただし,DataStorage のオブジェクトモデルは、その

特性上、ネストされたプロパティを含んでいます。この制限に対処するには、NestedPropertySetter クラスを使用します。

メモ：NestedPropertySetter クラスは、C1Scheduler と共に使用する場合にのみ機能します。

XAML で C1Scheduler 要素の子として配置されるこのクラスの要素は、Property/Value ペアで表されるセッターで

す。Property には、親 C1Scheduler 要素からプロパティへの相対パスを指定します。次の例では、DataMember プロパ

ティがデータベースの Appointments テーブルに割り当てられます。DataSource は、次のようにプロジェクト内のデータセッ

トリソースに設定されます。

XAML

<c1sched:C1Scheduler >  <c1sched:NestedPropertySetter PropertyName="DataStorage.AppointmentStorage.DataMember" Value="Appointments"/> <c1sched:NestedPropertySetter PropertyName="DataStorage.AppointmentStorage.DataSource" Value="{StaticResource dataSet}"/></c1sched:C1Scheduler >

WPF を使用してを使用してC1Scheduler の連結の連結

以下のトピックでは、C1Scheduler コントロールをデータソースに連結し、PropertyBridge クラスを使って非依存プロパティを

連結する手順を説明します。

メモ：メモ：このセクションの内容は、ComponentOne for WPF にのみ適用されます。

データソースへのデータソースへの C1Scheduler の連結の連結

このトピックでは、デフォルトで Scheduler for WPF と共にインストールされる Schedule.mdb データベースに C1Scheduler を連結しま

す。最初にデータソースを設定します。次に、Blend プロジェクトでデータセットをリソースとして追加し、C1Scheduler データストレージに

マップします。

Visual Studio 2008 でデータソースを設定するにはでデータソースを設定するには

1. Microsoft Visual Studio で新しい WPF プロジェクトを作成します。

a. ［ファイルファイル］→［新しいプロジェクト新しいプロジェクト］を順に選択します。

b. ［Visual C#］ノードを展開し、［NET Framework 3.0］（またはそれ以降）を選択します。［Visual C#］を指定するには、［そ



の他の言語］ノードを展開する必要があることに注意してください。

c. ［テンプレート］ペインから［WPF アプリケーションアプリケーション］を選択します。

d. ［名前名前］テキストボックスにプロジェクトの名前を入力し、［OK］をクリックします。新しいプロジェクトが作成されます。

2. ［プロジェクトプロジェクト］メニューから、［ページの追加ページの追加］を選択します。［新しい項目の追加新しい項目の追加］ウィンドウが表示されます。［カテゴリ］で［VisualC#］］が選択され、［テンプレート］ペインに［ページページ（WPF）］が追加されます。

3. ［名前名前］テキストボックスを Page1.xaml のままにし、［追加追加］をクリックします。

4. 開かない場合は、ソリューションエクスプローラで［Page1.xaml］ノードの Page1.xaml.cs をダブルクリックします。

5. C1.WPF.Schedule への参照を追加します。

a. ［プロジェクトプロジェクト］→［参照の追加参照の追加］を選択します。

b. アセンブリファイルの場所を参照して見つけます。このファイルは、ComponentOne のインストール時に、デフォルトでは

<インストールフォルダインストールフォルダ>\Bin\WPF にインストールされます。カスタムインストールを実行した場合は、場所が異なる可能

性があります。

c. 次の using ステートメントをページに追加します。

XAML

using C1.WPF.Schedule;using C1.Schedule;using MYProjectNAME.ScheduleDataSetTableAdapters;

この最後の using ステートメントを正確に動作させるためには、プロジェクトの名前を指定する必要があります。データセットの

テーブルアダプタの設定に使用されます。

6. 次に、連結するデータソースを追加します。

a. ［データデータ］→［新しいデータソースの追加新しいデータソースの追加］を選択します。［データソース設定ウィザードデータソース設定ウィザード］が表示されます。

b. ［データベースデータベース］を選択し、［次へ次へ］をクリックします。

c. ［新しい接続新しい接続］ボタンをクリックして、データベースを参照して見つけます。この例では、ComponentOne と共にインストー

ルされた Schedule.mdb データベースを使用します。このファイルは、インストール時に Common フォルダに置かれてい

ます。

d. 新しい接続を作成したら、［次へ次へ］を再度クリックします。プロジェクトにこのファイルをコピーする必要がないので、コピーす

るかどうかを質問するダイアログボックスが表示されたら［いいえいいえ］をクリックします。接続には名前が付けられます。

e. ［次へ次へ］をクリックして接続文字列を保存します。

f. データセットで使用するデータベースオブジェクトを選択し、［完了完了］をクリックします。

7. Page1.xaml.cs Page1 クラスに次の C# コードを追加します。次のようになります。このコードは、データセットのデータを使ってス

ケジュールに値を挿入します。

XAML

public partial class Page1 : System.Windows.Controls.Page { private ScheduleDataSet _schedulerDataSet = null; public Page1() { InitializeComponent(); // データセットを使ってデータを値を挿入する。

FillData(SchedulerDataSet); } public ScheduleDataSet SchedulerDataSet



{ get { if (_schedulerDataSet == null) { _schedulerDataSet = Resources["dataSet"] as ScheduleDataSet; } return _schedulerDataSet; } } private void FillData(ScheduleDataSet ds) { if (ds == null) return; AppointmentsTableAdapter appAd = new AppointmentsTableAdapter(); appAd.Fill(ds.Appointments); } }

8. プロジェクトを保存して閉じます。

Blend プロジェクトに新しいデータセットをリソースとして追加するにはプロジェクトに新しいデータセットをリソースとして追加するには

1. Blend で、Visual Studio 2008で作成したプロジェクト（.sln）を開きます。

2. ［プロジェクト］パネルの Page1.xaml をダブルクリックしてページを開き、必要に応じて、［デザイン］タブをクリックしてデザイン

ビューにアクセスします。

3. C1Scheduler コントロールをページに追加します。

4. ［XAML］タブをクリックして XAML ビューに切り替えます。

5. Page タグ内の名前空間のリストに次の XAML コードを追加して、CLR 名前空間を作成します。clr-namespace の値には、プロ

ジェクトの名前を使用します。

マークアップ

xmlns:local="clr-namespace:MYProjectNAME"

XAML コードは、次のようになります。

XAML

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="WpfApplication1.Page1" xmlns:local="clr-namespace:WpfApplication1" Title="Page1" xmlns:c1sched="http://schemas.componentone.com/wpf/Schedule">

6. ［プロジェクトプロジェクト］→［プロジェクトのビルドプロジェクトのビルド］を選択します。

7. <Page> の開始タグの後に次のコードを入力して、ScheduleDataSet をリソースとして追加します。

XAML

<Page.Resources> <local:ScheduleDataSet x:Key="dataSet" /></Page.Resources>

C1Scheduler データストレージにマップするにはデータストレージにマップするには



1. Blend プロジェクトで、［デザインデザイン］タブをクリックして Page1.xaml のデザインデザインビューに戻ります。

2. プロジェクトの Page1.xaml の C1Scheduler コントロールを選択します。

3. ［プロパティプロパティ］パネルの［Data］で、［DataStorage］ボタンをクリックします。［Data Source settings］ダイアログボックスが表示さ

れます。

4. [DataSource] プロパティの隣にある [詳細オプション詳細オプション] ボタンをクリックし、［ローカルリソースローカルリソース］を選択し、［dataSet］をオンにしま

す。このプロパティが ScheduleDataSet に設定されます。

5. DataMember プロパティの隣に「Appointments」と入力します。C1Scheduler が Appointments テーブルにマップされ、その

データに基づいてスケジュールに値が挿入されます。

6. 次に、プロパティと Appointments テーブルの対応するデータフィールドとのマッピンマッピングを設定します。各［Property Mappings］項目に次のテキストを入力します。

プロパティプロパティテキストテキスト

Body Body

End End

Location Location

Start Start

Subject Subject

AppointmentProperties Properties

IdMapping Id

IndexMapping N/A

7. ［OK］をクリックして、［Data Source settings］を閉じます。データベースは Appointment Storageにマップされました。マップす

るための XAML コードは、次のようになります。

XAML

<c1sched:C1Scheduler Margin="0,0,-80,-80" Theme="{DynamicResource {ComponentResourceKey ResourceId=Office2007.Blue, TypeInTargetAssembly={x:Type c1sched:C1Scheduler}}}"> <c1sched:NestedPropertySetter PropertyName="DataStorage.AppointmentStorage.DataMember" Value="Appointments"/>



<c1sched:NestedPropertySetter PropertyName="DataStorage.AppointmentStorage.DataSource" Value="{DynamicResource dataSet}"/> <c1sched:NestedPropertySetter PropertyName="DataStorage.AppointmentStorage.Mappings.Body.MappingName" Value="Body"/> <c1sched:NestedPropertySetter PropertyName="DataStorage.AppointmentStorage.Mappings.End.MappingName" Value="End"/> <c1sched:NestedPropertySetter PropertyName="DataStorage.AppointmentStorage.Mappings.Location.MappingName" Value="Location"/> <c1sched:NestedPropertySetter PropertyName="DataStorage.AppointmentStorage.Mappings.Start.MappingName" Value="Start"/> <c1sched:NestedPropertySetter PropertyName="DataStorage.AppointmentStorage.Mappings.Subject.MappingName" Value="Subject"/> <c1sched:NestedPropertySetter PropertyName="DataStorage.AppointmentStorage.Mappings.AppointmentProperties.MappingName" Value="Properties"/> <c1sched:NestedPropertySetter PropertyName="DataStorage.AppointmentStorage.Mappings.IdMapping.MappingName" Value="Id"/> <c1sched:NestedPropertySetter PropertyName="DataStorage.AppointmentStorage.Mappings.IndexMapping.MappingName" Value="N/A"/> </c1sched:C1Scheduler>

PropertyBridge クラスを使用したデータ連結クラスを使用したデータ連結

PropertyBridge クラスは、System.Object 型の Source と Target という２つの依存プロパティを公開し、２つの値が等しくな

るように保ちます。つまり、１つのプロパティの値が変更されると、他方のプロパティの値も同じ値に設定されます。この単純な

仕組みにより、DependencyProperty であるプロパティのみを使用するように設計された WPF メカニズムで、

DependencyProperty でないプロパティを使用できるようになります。次の例では、PropertyBridge クラスを使用する方法を

示します。

２つの非依存プロパティを連結する：２つの非依存プロパティを連結する：

ソースとして１つの非依存プロパティを持つ TwoWay 連結を Source プロパティに割り当て、ソースとして別の非依存

プロパティを持つ TwoWay 連結を Target プロパティに割り当てます。これによって非依存プロパティが連結プロパティ

として動作します。これは、INotifyPropertyChanged インターフェイスをサポートする非依存プロパティを公開してい

るクラスでのみ動作します。C1ScheduleStorage オブジェクトモデルの大部分のクラスがこれに当てはまります。

トリガ内から非依存プロパティ値を設定する：トリガ内から非依存プロパティ値を設定する：

ソースとして１つの非依存プロパティを持つ TwoWay または OneWayToSource 連結を Source プロパティに割り当

て、Trigger の Setter を使って値を PropertyBridge の Target プロパティに割り当てます。この値は、Source に連結

される非依存プロパティに割り当てられます。

多対多連結：多対多連結：

MultiBinding 連結を Source と Target に割り当てて、多対多連結を実現します。

ネストされたプロパティに値を割り当てる：ネストされたプロパティに値を割り当てる：

ネストしているプロパティを参照する Path で、ターゲットを TwoWay または OneWayToSource に設定します。次に、

Source を割り当てます（直接、または Setter 内から）。ネストしているプロパティに、この値が割り当てられます。

直接アクセスできないオブジェクトのプロパティを割り当てる：直接アクセスできないオブジェクトのプロパティを割り当てる：

ネストしているプロパティへの値の割り当てと同様に、Target への連結で RelativeSource を使用し



て、TemplatedParent やビジュアルツリーの一部の親要素などの XAML で直接参照できない要素にプロパティの値

を割り当てます。

PropertyBridge クラスは FrameworkElement から派生されます。また、これが正しく動作するには、やり取りする必要があ

る他の要素と共にビジュアルツリー内に配置される必要があります。FrameworkElement からの派生は意図的です。

PropertyBridge をビジュアルツリーに含めることができ、これにより、連結が正しいコンテキストでプロパティに確立されます。

たとえば、理論的には ResourceDictionary に PropertyBridge を置く選択肢もありますが、この場合は連結が動作しませ

ん。

PropertyBridge.Visibility プロパティは、デフォルトで Collapsed に設定されています。したがって、このオブジェクトは画面

に表示されず、レイアウトの測定および配置処理の対象になりません。つまり、このプロパティは、配置先のビジュアルツリー

のビジュアル表現を変更しません。

Silverlight を使用してを使用して C1Scheduler の連結の連結

次のトピックでは、C1Scheduler コントロールをデータソースに連結する方法について説明します。

Scheduler for Silverlight では、カスタムデータソースへの連結がサポートされています。次に、カスタムデータソースの使用

例をいくつか示します。

C1.Silverlight.Data.DataSet、C1.Silverlight.Data.DataView、または C1.Silverlight.Data.DataTable クラスのインスタ

ンス。双方向連結がサポートされています。

INotifyCollectionChanged インターフェイスを実装するカスタムコレクション。コレクションにオブジェクトを保持

し、INotifyPropertyChanged インターフェイスを実装する場合は、双方向連結がサポートされます。

IList インターフェイスまたは IEnumerable インターフェイスを実装するカスタムコレクション。

メモ：メモ：このセクションの内容は、ComponentOne for Silverlight にのみ適用されます。

予定データの連結予定データの連結

1. 新しい Silverlight アプリケーションを作成し、C1Scheduler のインスタンスをページに追加します。

2. 新しいコードファイルをアプリケーションに追加し、カスタムビジネスオブジェクトクラスを定義します。次の定義では、このクラスの

パブリックインターフェイスのみを示していることに注意してください。完全な定義は、この製品に付属している

C1Scheduler_BusinessObjectsBinding サンプルに含まれています。

C#

// ビジネスオブジェクトでは、INotifyPropertyChanged インターフェイスを実装する必要があります。

public class AppointmentBORow : INotifyPropertyChanged{ public AppointmentBORow(); public string Subject { get; set; } public DateTime Start { get; set; } public DateTime End { get; set; } public string Body { get; set; } public string Location { get; set; } public string Properties { get; set; } public Guid Id { get; set; } public bool IsDeleted { get; set; } public event PropertyChangedEventHandler PropertyChanged;}

3. AppointmentBORow オブジェクトのコレクションを保持するクラスを追加します。



C#

// ビジネスオブジェクトコレクションでは、

// INotifyCollectionChanged インターフェイスを実装する必要があります。

public class AppointmentBOList : ObservableCollection<AppointmentBORow>{}

4. カスタムデータソースクラスを追加します。

C#

public class AppointmentsBO{ AppointmentBOList _list = new AppointmentBOList(); public AppointmentsBO(){ } public AppointmentBOList Appointments { get { return _list; } set { _list = value; } }}

5. C1Scheduler オブジェクトを含むページで、AppointmentsBO クラスのインスタンスを作成します。

XAML

<UserControl x:Class="C1Scheduler_BusinessObjectsBinding.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:local="clr-namespace:C1Scheduler_BusinessObjectsBinding" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" Loaded="UserControl_Loaded" mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480" FontFamily="Segoe UI"> <UserControl.Resources>  <local:AppointmentsBO x:Key="_ds" /></UserControl.Resources>

6. NestedPropertySetters を使用して、AppointmentBORow オブジェクトのプロパティと AppointmentStorage の間にマッピ

ングを設定し、AppointmentStorage.DataSource プロパティを設定します。

XAML

<c1:C1Scheduler x:Name="sched1" >  <c1:NestedPropertySetter PropertyName="DataStorage.AppointmentStorage.Mappings.AppointmentProperties.MappingName" Value="Properties"/>



<c1:NestedPropertySetter PropertyName="DataStorage.AppointmentStorage.Mappings.Body.MappingName" Value="Body"/> <c1:NestedPropertySetter PropertyName="DataStorage.AppointmentStorage.Mappings.End.MappingName" Value="End"/> <c1: PropertyName="DataStorage.AppointmentStorage.Mappings.IdMapping.MappingName" Value="Id"/> <c1: PropertyName="DataStorage.AppointmentStorage.Mappings.Location.MappingName" Value="Location"/> <c1: PropertyName="DataStorage.AppointmentStorage.Mappings.Start.MappingName" Value="Start"/> <c1: PropertyName="DataStorage.AppointmentStorage.Mappings.Subject.MappingName" Value="Subject"/> <c1:NestedPropertySetter PropertyName="DataStorage.AppointmentStorage.DataSource" Value="{Binding Path=Appointments, Mode=TwoWay, Source={StaticResource _ds}}" /></c1:C1Scheduler>

必要な操作はこれだけです。実行時には、AppointmentBOList に加えられたすべての変更が C1Scheduler に反映され、逆方向の反

映も行われます。

データ中心型アーキテクチャデータ中心型アーキテクチャ (Silverlight のみのみ)Silverlight を使用して、事業別などのデータ中心型アプリケーションを構築できます。このようなアプリケーションでは、一般に

次の手順が実行されます。

1. サーバーからデータを取得します。

2. クライアント側でデータを表示および編集します。

3. サーバーに変更を送信します。

手順 1と３では、通常、データを転送するために Web サービスが使用され、データベースをクエリーおよび更新するために従

来のデータアクセス方法が使用されます。手順 2では、通常、Silverlight データ連結コントロールが使用されます。

Microsoft は、サーバー側のジョブを実行するために多くのツールを提供しています。最新のツールとして、ADO.NET DataServices があります。これは、Web アクセス可能なエンドポイントをデータモデルに提供し、Silverlight ライブラリ

（System.Data.Services.Client.dll）の ADO.NET Data Services を介して Silverlight と統合されます。最近では、この新技術に

関する記事が多く掲載されています（MSDN 2008 年９月、volume 23、no. 10 の「Data Services」など）。

ADO.NET Data Services は、さまざまなデータ中心型アプリケーションの標準になる可能性が高い強力な新技術です。ただ

し、この技術が唯一の選択肢というわけではありません。サーバー側でデータを取得および更新するために、従来の

ADO.NET データクラス（DataSet、DataTable、DataAdapters など）も使用できます。これらのクラスは、.NET 1.0 以来、開

発者に使用されており、堅牢で強力な使いやすいクラスです。さらに、多くの開発者は、長期に渡って使用およびテストされて

きたコードとして、これらのクラスに多くの投資を行ってきています。

Data for Silverlight は、従来の ADO.NET を使ってサーバーとデータをやり取りするために Silverlight クライアントから使用

できるクラスの一式です。一般的な手順は次のとおりです。

1. サーバーからデータを取得します。サーバーからデータを取得します。

サーバーは従来の方法で DataSet オブジェクトにデータを挿入します（通常は、DataAdapter オブジェクトを

使用して、SqlServer データベースからデータを取得します）。

サーバーは、DataSet.WriteXml を呼び出して DataSet をストリームにシリアライズし、そのストリームをクラ

イアントに送信します。

クライアントは、DataSet.ReadXml メソッドを使用して、そのストリームをデシリアライズします。



2. クライアント側でデータを表示および編集します。クライアント側でデータを表示および編集します。

クライアントは DataSet 内のテーブルをコントロールに連結します（通常は LINQ クエリーを使用）。

ユーザーは、コントロールを操作して、データ項目を表示、編集、追加、および削除します。

3. サーバーに変更を送信します。サーバーに変更を送信します。

クライアントは、DataSet.GetChanges および DataSet.WriteXml を呼び出して、変更をストリームにシリアラ

イズし、そのストリームをサーバーに送信します。

サーバーは、DataSet.ReadXml を呼び出して変更をデシリアライズし、次に DataAdapter オブジェクトを使っ

て変更をデータベースに保存します。

このシナリオにおける C1Data の役割は２つあります。１つめは、クライアント側とサーバー側の DataSet オブジェクト間の

データ転送を容易にする対称型のシリアライズメカニズムを提供します。２つめは、クライアント側でデータを操作するための

使い慣れたオブジェクトモデルを提供します。

メモメモ：C1Data は、は、ADO.NET Data Services に対抗するものではありません。 C1Data は、既に蓄えてある ADO.NETの知識や資産を活用できるようにします。あらゆる情報や資産を最小限の作業で Silverlight に転送することができま

す。また、必要に応じて、徐々に ADO.NET Data Services に移行することもできます。

C1Data はレガシー技術ではありません。たとえば、C1Data は LINQ と共に使用できます。実際、C1Data では、デス

クトップでは使用できるが、Silverlight アプリケーションでは使用できない LINQ 機能が有効になります（一部匿名クラ

ス）。

以下のセクションでは、上の手順に従う単純なアプリケーションの実装について説明します。このアプリケーションは単純です

が、ほとんどのデータ中心型アプリケーションで必要になる４つの CRUD（Create、Read、Update、Delete）操作の実行方法を

示します。

メモ：メモ：このセクションの内容は、ComponentOne for Silverlight にのみ適用されます。ComponentOne for WPF ではア

センブリ名が異なります。

サンプルアプリケーションサンプルアプリケーション

このサンプルアプリケーションは、スケジュールで構成されます。データは、アプリケーションの起動時に Web サービスを使っ

てサーバーから取得されます。次に、スケジュールにデータが挿入され、ユーザーがデータを参照および編集できるようになり

ます。最後に、アプリケーションは、データベースを更新するためにすべての変更をサーバーに送信します。

アプリケーションの作成アプリケーションの作成

まず、「Scheduler」という名前の新しい Silverlight アプリケーションを作成します。次の手順に従います。

1. Visual Studio2008 で、［ファイルファイル］→［新しいプロジェクト新しいプロジェクト］を選択し、［新しいプロジェクト新しいプロジェクト］ダイアログボックスを開きま

す。

2. プロジェクト型リストで、Visual BasicまたはVisual C＃ノードのいずれかを展開し、Silverlightを選択します。

3. テンプレートリストから［Silverlight アプリケーションアプリケーション］を選択します。

4. プロジェクト名を「Scheduler」とし、プロジェクトの場所を指定して、［OK］をクリックします。次に、Visual Studio から、新

しいプロジェクトで使用するホスティングのタイプを入力するように指示されます。

5. ［新しい新しい Silverlight アプリケーションアプリケーション］ダイアログボックスで、［OK］を選択してデフォルトの名前（Scheduler.Web）と設

定を受け入れ、プロジェクトを作成します。



参照の追加参照の追加

このプロジェクトでは、C1.Silverlight.Data.dll（C1Data クラスを含む）と System.Windows.Controls.Data.dll（Microsoftの DataGrid コントロールを含む）の２つの追加アセンブリを使用します。ここでは、C1Data クラスが他の ComponentOne コントロールにまったく関連付けられていないことを示すために、ComponentOne グリッドではなく、Microsoft グリッドを使用す

ることにします。実際、C1Data クラスは任意の Silverlight コントロールに対して使用できます。

アセンブリを追加するには、次の手順に従います。

1. ソリューションエクスプローラで Scheduler プロジェクトを右クリックし、［参照の追加参照の追加］を選択します。

2. ［参照の追加参照の追加］ダイアログボックスで、以下のアセンブリを見つけて選択し、［OK］をクリックしてプロジェクトに参照を追

加します。

C1.Silverlight.dllC1.Silverlight.Data.dllC1.Silverlight.DateTimeEditors.dllC1.Silverlight.Schedule.dll

UI の作成の作成

ユーザーインターフェイスにはスケジュールが含まれています。

ユーザーインターフェイスを作成するには、MainPage.xaml ファイルを開き、ソースビューで次の XAML をページにコピーし

ます。

XAML

<UserControl x:Class="BindingScheduler.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:c1sched="clr-namespace:C1.Silverlight.Schedule;assembly=C1.Silverlight.Schedule" xmlns:c1="clr-namespace:C1.Silverlight;assembly=C1.Silverlight" mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480"> <Grid x:Name="LayoutRoot"> <c1sched:C1Scheduler></c1sched:C1Scheduler> </Grid></UserControl>

これまでの作業に問題がないことを確認するため、ここでアプリケーションを実行してみます。空のスケジュールが表示されま

す。

サーバー側の実装サーバー側の実装

この手順では、アプリケーションのサーバー側を実装します。サーバー側は、２つのメソッド（GetData と UpdateData）を含む

１つの Web サービスで構成されます。GetData は、Schedule.mdb データベースからデータを取得し、そのデータをクライア

ントに返します。UpdateData は、クライアントで行われた変更をデータベースに戻して保存します。データベースは、この製

品と共にインストールされる C1Scheduler_DataBinding サンプルに含まれています。



データベースアクセスインフラストラクチャの追加データベースアクセスインフラストラクチャの追加

Web サービスを実装する前に、データベース自体をプロジェクトに追加します。この手順はオプションです。接続文字列を使っ

てデータベースの場所を指定するため、この MDB ファイルはシステム内のどこにあってもかまいません。ここでは、展開を容

易にするためと、オリジナルのデータベースが変更されないようにするために、ローカルコピーを作成します。

データベースをプロジェクトに追加するには、次の手順に従います。

1. Scheduler.Web プロジェクト内の App_Data ノードを右クリックし、［追加追加］→［既存の項目既存の項目］を選択します。

2. ダイアログボックスで Schedule.MDB ファイルを見つけ、そのファイルをプロジェクトに追加します。

3. ［プロパティ］ウィンドウで、.MDB ファイルの［ビルドアクションビルドアクション］プロパティを［なしなし］に設定します。

データベースファイルに加えて、データベースとの間でデータをやり取りするためのメカニズムも必要です。このサンプルで

は、SmartDataSet という名前のユーティリティクラスを使用してこのメカニズムを作成します。SmartDataSet は、標準の

ADO.NET DataSet クラスを拡張して、次の項目を追加しています。

データベースの種類と場所を指定する ConnectionString プロパティ。

選択されたテーブルからデータをロードする Load メソッド。

変更をデータベースに戻して保存する Update メソッド。

SmartDataSet は便利ですが、必須ではありません。このクラスは、データのロードと保存に使用される DataAdapter オブ

ジェクトを内部的に作成および設定しますが、標準の ADO.NET コードを記述して同じ処理を行うこともできます。その場合は、

標準の ADO.NET 技術のみを使用するため、ここでは省略します。

SmartDataSet.cs ファイルをプロジェクトに追加するには、次の手順に従います。

1. ソリューションエクスプローラで Scheduler.Web ノードを右クリックし、［追加追加］→［既存の項目既存の項目］を選択します。

2. ［既存項目の追加既存項目の追加］ダイアログボックスで、C1.Silverlight 配布パッケージ内の SmartDataSet.cs ファイルを見つけ、

［追加追加］をクリックしてプロジェクトに追加します。

Web サービスの実装サービスの実装

アプリケーションのサーバー側は、データベースからデータをロードし、それをサーバーに返したり、クライアントから変更のリ

ストを受け取り、それをデータベースに適用する Web サービスで構成されます。

サーバー側は、汎用のハンドラクラス（ashx）、Web サービス（asmx）、または Silverlight 対応の WCF サービス（SVC）として

実装できます。このサンプルではどれでも実装できますが、ここでは標準的な Web サービスを選択します。

サービスを作成するには、次の手順に従います。

1. Scheduler.Web プロジェクトを右クリックします。

2. ［追加追加］→［新しい項目新しい項目］を選択します。

3. ［新しい項目の追加新しい項目の追加］ダイアログボックスで、左ペインの［インストールされたテンプレートインストールされたテンプレート］リストから［Web］を選択しま

す。

4. 右ペインのリストから［Web Service］テンプレートを選択します。

5. 新しいサービス名として「DataService.asmx」を指定します。

6. ［追加追加］ボタンをクリックして、新しい Web サービスを作成します。

［追加追加］ボタンをクリックすると、新しく作成された DataService.asmx.cs（または DataService.asmx.vb）ファイルが VisualStudio で開かれます。このファイルには、１つの HelloWorld メソッドのみがあります。



このファイルを次のように編集します。

1. ファイルの先頭にある文ブロックに、次の Imports 文または using 文を追加します。

C#

using System.IO;using System.Data;

2. Silverlight からサービスを呼び出せるように、次の行のコメントを外します。

マークアップ

[System.Web.Script.Services.ScriptService]

3. Visual Studio が作成した HelloWorld メソッドを削除し、次のコードに置き換えます。

C#

[WebMethod]public byte[] GetData(string tables){ // 接続文字列を使って DataSet を作成します

var ds = GetDataSet(); // DataSet にデータをロードします

ds.Fill(tables.Split(',')); // ストリームに保存します

var ms = new System.IO.MemoryStream(); ds.WriteXml(ms, XmlWriteMode.WriteSchema); // ストリームデータを返します

return ms.ToArray();}

このメソッドでは、最初に SmartDataSet を作成し、そこに tables パラメータで指定されたテーブルのデータを挿入し

ます。その後、WriteXml メソッドを使って DataSet をストリームに保存し、そのストリームをバイト配列に変換して、そ

の結果を返します。

このコードは、サーバー側で実行されることを思い出してください。C1.Zip などのデータ圧縮ライブラリを使ってストリー

ムを圧縮し、ストリームのサイズを大幅に縮小してからクライアントに返すこともできます。ただし、ここでは、サンプルを

できるだけ単純にするため、あえて圧縮しませんでした。

4. 次に、以下のコードを使用して、変更をデータベースに保存し直すメソッドを追加します。

C#

[WebMethod]public string UpdateData(byte[] dtAdded, byte[] dtModified, byte[] dtDeleted){ try { UpdateData(dtAdded, DataRowState.Added); UpdateData(dtModified, DataRowState.Modified); UpdateData(dtDeleted, DataRowState.Deleted); return null;



} catch (Exception x) { return x.Message; }}

このメソッドは、３つのパラメータを受け取ります。各パラメータは、それぞれ異なるタイプの変更（レコードの追加、変

更、削除）をデータベースに適用するために使用されます。このメソッドは、UpdateData ヘルパーメソッドを呼び出し

てそれぞれの変更セットを適用し、すべての変更が正しく適用された場合に null を返します。エラーが発生した場合

は、例外について説明したメッセージを返します。

5. UpdateData ヘルパーメソッドに以下のコードを追加します。

C#

void UpdateData(byte[] data, DataRowState state){ // 変更がない場合は何もしません

if (data == null) return; // DataSet にデータをロードします

var ds = GetDataSet(); var ms = new MemoryStream(data); ds.ReadXml(ms); ds.AcceptChanges(); // 変更された行の状態を更新します

foreach (DataTable dt in ds.Tables) { foreach (DataRow dr in dt.Rows) { switch (state) { case DataRowState.Added: dr.SetAdded(); break; case DataRowState.Modified: dr.SetModified(); break; case DataRowState.Deleted: dr.Delete(); break; } } } // データベースを更新します

ds.Update();}

このメソッドは、最初に SmartDataSet を作成し、そこにすべての変更をロードします。次に、各行の RowState プロ

パティを変更して、行に適用された変更のタイプ（追加、変更、削除）を識別します。最後に、SmartDataSet.Updateメソッドを呼び出して、変更をデータベースに書き込みます。



6. これで、サーバー側のコードは大部分準備できました。後は、SmartDataSet を作成して設定するメソッドを追加する

だけです。この実装に以下のコードを追加します。

C#

SmartDataSet GetDataSet(){ // mdb ファイルの物理的な場所を取得します

string mdb = Path.Combine( Context.Request.PhysicalApplicationPath, @"App_Data\Schedule.mdb"); // このファイルの存在を確認します

if (!File.Exists(mdb)) { string msg = string.Format("Cannot find database file {0}.", mdb); throw new FileNotFoundException(msg); } // ファイルが読み取り専用でないことを確認します（ソースコントロールによって読み取り専用にされる場合があ

ります）

FileAttributes att = File.GetAttributes(mdb); if ((att & FileAttributes.ReadOnly) != 0) { att &= ~FileAttributes.ReadOnly; File.SetAttributes(mdb, att); } // SmartDataSet を作成および初期化します

var dataSet = new SmartDataSet(); dataSet.ConnectionString = "provider=microsoft.jet.oledb.4.0;data source=" + mdb; return dataSet;}

このメソッドは、最初にデータベースファイルを見つけ、その存在を確認し、そのファイルが読み取り専用でないことを確認しま

す（読み取り専用である場合は、更新が失敗します）。その後、新しい SmartDataSet を作成し、ConnectionString プロパ

ティを初期化して、新しく作成した SmartDataSet を呼び出し元に返します。

クライアント側の実装クライアント側の実装

アプリケーションのクライアント側に戻ります。以下のセクションでは、クライアント側を実装します。

Web サービスへの参照の追加サービスへの参照の追加

まず、クライアントから Web サービスを呼び出すことができるように、先ほど作成した Web サービスへの参照を追加します。

次の手順に従います。

1. Scheduler プロジェクト内の［参照設定参照設定］ノードを右クリックし、［サービス参照の追加サービス参照の追加］を選択します。

2. 表示されるダイアログボックスで、［探索探索］ボタンをクリックします。前の手順で追加したサービスが Visual Studio によっ

て検出されます。



3. ［名前空間名前空間］フィールドに、「DataService」と入力します。

ダイアログボックスは次の図のようになります。

4. ［OK］をクリックして参照を追加します。

Web サービスを使ったデータの取得サービスを使ったデータの取得

最後に、データを取得してユーザーに表示します。次の手順に従います。

1. MainPage.xaml.cs ファイルを開き、ファイルの先頭にあるブロックに次の using 文を追加します。

C#

using System.IO;using C1.Silverlight.Data;using Scheduler.DataService;using C1.Silverlight.Schedule;using C1.C1Schedule;



2. 次に、Page コンストラクタを次のように編集します。

C#

private DataSet _ds = null;private DataTable _dtAppointments = null; public Page(){ InitializeComponent(); // AppointmentStorage のマッピングを設定します

// （AppointmentStorage と Appointment テーブルの列との間でマッピングを

// 設定します）

AppointmentMappingCollection mappings = sched1.DataStorage.AppointmentStorage.Mappings; mappings.IdMapping.MappingName = "Id"; mappings.Subject.MappingName = "Subject"; mappings.Body.MappingName = "Body"; mappings.End.MappingName = "End"; mappings.Start.MappingName = "Start"; mappings.Location.MappingName = "Location"; mappings.AppointmentProperties.MappingName = "Properties"; // サーバーから実際のデータをロードします

LoadData();}

3. 次のコードを追加して LoadData メソッドを実装します。このメソッドは、Web サービスを呼び出してデータを取得し、そ

れを DataSet オブジェクトに格納します。次に、このオブジェクトをページ内のコントロールに連結します。

C#

DataSet _ds = null;void LoadData(){ // Web サービスを呼び出します

var svc = new GetDataService(); svc.GetDataCompleted += svc_GetDataCompleted; svc.GetDataAsync("Appointments");}void svc_GetDataCompleted(object sender, GetDataCompletedEventArgs e){ // エラーを処理します

if (e.Error != null) { tbStatus.Text = "データのダウンロードにエラーが発生しました..."; return; } // サーバーからのデータストリームを解析します（DataSet は XML） tbStatus.Text = string.Format( "Got data, {0:n0} kBytes", e.Result.Length / 1024); var ms = new MemoryStream(e.Result);



ds = new DataSet(); ds.ReadXml(ms); // データを取得し、テーブルを検索します

dtAppointments = _ds.Tables["Appointments"]; // C1Scheduler データソースをサーバーからロードされた DataTable に設定します

sched1.DataStorage.AppointmentStorage.DataSource = _dtAppointments;}

4. 次の GetDataService メソッドの実装を追加します。

C#

// 現在のホスト/ドメインに関連するデータサービスを取得します

DataServiceSoapClient GetDataService(){ // バッファサイズを増やします

var binding = new System.ServiceModel.BasicHttpBinding(); binding.MaxReceivedMessageSize = 2147483647; // int.MaxValue binding.MaxBufferSize = 2147483647; // int.MaxValue // サービスの絶対アドレスを取得します

Uri uri = GetAbsoluteUri("DataService.asmx"); var address = new System.ServiceModel.EndpointAddress(uri); // 新しいサービスクライアントを返します

return new DataServiceSoapClient(binding, address);}public static Uri GetAbsoluteUri(string relativeUri){ Uri uri = System.Windows.Browser.HtmlPage.Document.DocumentUri; string uriString = uri.AbsoluteUri; int ls = uriString.LastIndexOf('/'); return new Uri(uriString.Substring(0, ls + 1) + relativeUri);}

GetDataService メソッドは、新しい DataServiceSoapClient オブジェクトをインスタンス化して返します。デフォルトコンストラ

クタは開発環境（http://localhost など）を参照するため、ここでは使用しません。デフォルトコンストラクタは開発マシンでは正

常に機能しても、アプリケーションの展開時には機能しません。また、デフォルトコンストラクタは 65 KB バッファを使用している

ため、データ転送には小さすぎます。上の GetDataService メソッドの実装は、この２つの問題を解決します。

上の LoadData メソッドは、サービスをインスタンス化し、GetDataAsync メソッドを呼び出します。このメソッドは、実行の終

了時に svc_DataCompleted デリゲートを呼び出します。このデリゲートは、DataSet オブジェクトをインスタンス化

し、ReadXml メソッドを使用して、サーバーから提供されたデータをデシリアライズします。次に、AppointmentStorage のデータソースを設定します。Page コンストラクタで AppointmentStorage のマッピングが設定されているた

め、AppointmentStorage.DataSource プロパティを設定すると、データが C1Scheduler コントロールに連結されます。これ

は、双方向連結になります。つまり、_dtAppointments に加えられた変更は C1Scheduler にも反映され、逆方向にも反映さ

れます。

メモメモ：これは、C1.Silverlight.Data DataSet クラスの最も重要な機能の１つです。この機能は、ADO.NET DataSet オブジェクトと同じ XML スキーマを使用します。これにより、アプリケーションはクライアントでデータをシリアライズし、サー

バーでそのデータをデシリアライズできます。この逆も可能です。また、オブジェクトモデルがよく似ているので、開発者

にとってもわかりやすく、好都合です。



サーバーへの変更のコミットサーバーへの変更のコミット

ほとんど完成に近づきました。この後は、ユーザーが行った変更がデータベースに適用されるように、変更をサーバーに送信

するコードを追加します。

最初に、変更をサーバーにコミットするボタンを追加します。このボタンのイベントハンドラにより、データがサーバーに戻され

て保存されます。

C#

// 変更をサーバーにコミットします

private void _btnCommit_Click(object sender, RoutedEventArgs e){ SaveData();}

次は、実際の作業を行う SaveData メソッドの実装です。

C#

// データベースにデータを戻して保存します

void SaveData(){ if (_ds != null) { // 各タイプの変更を取得します

byte[] dtAdded = GetChanges(DataRowState.Added); byte[] dtModified = GetChanges(DataRowState.Modified); byte[] dtDeleted = GetChanges(DataRowState.Deleted); // サービスを呼び出します

var svc = new GetDataService(); svc.UpdateDataCompleted += svc_UpdateDataCompleted; svc.UpdateDataAsync(dtAdded, dtModified, dtDeleted); }}void svc_UpdateDataCompleted(object sender, UpdateDataCompletedEventArgs e){ if (!string.IsNullOrEmpty(e.Result)) { throw new Exception("サーバーへデータを更新時にエラーが発生しました：" + e.Result); } _tbStatus.Text = "変更点がサーバーに承認されました。"; _ds.AcceptChanges();}

このメソッドは、最初に GetChanges メソッドを呼び出して３つのバイト配列を作成します。各バイト配列は、サーバーからデー

タがダウンロードされてから、追加、変更、または削除された行を含む DataSet を表します。次に、前に実装した Web サービ

スを呼び出して、その結果を待ちます。サーバーの更新中にエラーが検出された場合は、例外をスローします（実際のアプリ

ケーションでは、エラーはもう少し丁寧に処理されます）。

残りは GetChanges メソッドです。次にコードを示します。

C#



byte[] GetChanges(DataRowState state){ DataSet ds = _ds.GetChanges(state); if (ds != null) { MemoryStream ms = new MemoryStream(); ds.WriteXml(ms); return ms.ToArray(); } return null;}

このメソッドは、DataSet.GetChanges メソッドを使用して、呼び出し元で指定された DataRowState を持つ行のみを含む新

しい DataSet オブジェクトを取得します。このメソッドは、ADO.NET DataSet クラスにあるメソッドと同じです。

次に、このメソッドは、変更を含む DataSet を MemoryStream にシリアライズし、ストリームコンテンツをバイト配列として返

します。

ここでアプリケーションを実行してみてください。いくつかの変更を行ったら、［Commit Changes］ボタンをクリックして、サー

バーに変更を送信します。アプリケーションを終了して再起動すると、実際に、それらの変更がデータベースに保存されている

ことを確認できます。

ローカライズしたリソースのプロジェクトへの追加ローカライズしたリソースのプロジェクトへの追加

Scheduler for WPF/Silverlight プロジェクトはローカライズ可能です。

ローカライズしたリソースをプロジェクトに追加するには、次の手順に従います。

1. Scheduler for WPF/Silverlight に含まれている .resx ファイルのコピーを作成します。デフォルトでは、これらのリ

ソースファイルは、<インストールフォルダインストールフォルダ>\Misc\Resources\C1WPFScheduler または <インストールフォルダインストールフォルダ

>\Misc\Xaml\Silverlight\themes.zip にインストールされます。

2. 次のファイル命名規則に従って、コピーされたリソースファイルの名前を変更します。

マークアップ

base_filename[.optional RFC 1766 culture info string].resx

次に例を示します。

TimeStrings.de.resx

TimeStrings.fr.resx

メモ：ファイル名の base_filename の部分は変更しないでください。この部分を変更すると、コントロールがリ

ソースを検出できなくなります。

3. リソースファイル内の文字列値を翻訳します。

4. ローカライズしたリソースをプロジェクトのResources フォルダに追加します。テキストエディタで .csproj ファイルを開

き、サポートされているカルチャのリストにカルチャを追加します。

マークアップ

<SupportedCultures>de;fr </SupportedCultures>

プロジェクトの再構築後、生成される .xap ファイルにサテライトアセンブリが追加されます。



C1.Silverlight.Schedule.5 アセンブリでは、次のリソースファイルが使用されます。

リソースファイル説明

C1.Schedule.Categories.resx デフォルトの予定分類のローカライズ可能な名前を含みます。

C1.Schedule.EditAppointment.resx デフォルトの EditAppointmentTemplate のローカライズ可能な文字列を含みま

す。

C1.Schedule.EditRecurrence.resx デフォルトの EditRecurrenceTemplate のローカライズ可能な文字列を含みます。

C1.Schedule.Exceptions.resx エンドユーザーに表示されるローカライズ可能なエラーメッセージを含みます。

C1.Schedule.Labels.resx デフォルトの予定ラベルのローカライズ可能な名前を含みます。

C1.Schedule.MiscStrings.resx 繰り返しパターンの説明に使用されるローカライズ可能な文字列を含みます。

C1.Schedule.RecChoice.resx ［Open recurrence］および［Remove recurrence］の各ダイアログのローカライズ

可能な文字列を含みます。

C1.Schedule.SelectFromListScene.resx SelectFromListScene コントロールのローカライズ可能な文字列を含みます。

C1.Schedule.ShowReminders.resx デフォルトの ShowRemindersTemplate のローカライズ可能な文字列を含みま

す。

C1.Schedule.Statuses.resx デフォルトの公開方法のローカライズ可能な名前を含みます。

C1.Schedule.TimeStrings.resx C1TimeSpanPicker コントロールのローカライズ可能な文字列を含みます。

Silverlight.resx C1MessageBox コントロールのローカライズ可能な文字列を含みます。

メモ：ローカライズできるのは、これらのファイルの一部です。たとえば、customEditAppointmentTemplate を使用する

場合、C1.Schedule.EditAppointment のリソースは不要です。

カレンダーの設定カレンダーの設定

C1Scheduler は、CalendarHelper クラスの該当プロパティで定義されたカレンダー設定を使用します。たとえ

ば、CalendarHelper クラスで稼働日を指定することにより、週間勤務日を作成できます。CalendarHelper クラス用のXAMLは三つのコントロールとも、同じものが使用されていることにご注意ください。

C1Scheduler 用の用のXAML

XAML

<my:C1Scheduler x:Name="scheduler1"> <my:C1Scheduler.CalendarHelper> <my:CalendarHelper WeekStart="Sunday" EndDayTime="18:20:00" StartDayTime="09:20:00" WorkDays="Tuesday,Wednesday,Thursday,Friday,Saturday"> </my:CalendarHelper> </my:C1Scheduler.CalendarHelper></my:C1Scheduler>



使用可能なカレンダー設定は以下のようになります:

CalendarHelper プロ

パティ説明

WeekStart 週の初めの日を決定する DayOfWeek 値を取得または設定します。デフォルトはシステム設定で

す。

WorkDays １週間の勤務日を含む WorkDays オブジェクトを取得または設定します。

StartDayTime 勤務時間の開始を指定する TimeSpan 値を取得または設定します。

EndDayTime 勤務時間の終了を指定する TimeSpan 値を取得または設定します。

Holidays 休日（勤務日以外の日と週末）のリストを保持する ObservableCollection(T) オブジェクトを取得ま

たは設定します。

WeekendExceptions 働く必要がある週末の日のリストを保持する ObservableCollection (T) オブジェクトを取得または

設定します。

FullMonthNames カルチャ固有の月の完全名の配列を取得します。



C1Calendar コントロールの使い方コントロールの使い方

C1Scheduler には、C1Calendar という補助的なカレンダーコントロールがあります。

C1Calendar コントロールは、１つの月または複数の月を表示するカレンダーユーザーインターフェイスの作成します。このコ

ントロールを使用して、１つまたは複数の日付を対話式に選択できます。

カレンダーコントロールの目的は、特定の日付を対話式に選択する機能を持つカレンダーユーザーインターフェイスを（コード

を使用せずに XAML だけで）作成するためのデータを提供することです。そのために次のプロパティがあります。

主なカレンダープロパティ主なカレンダープロパティ


SelectedDate DateTimeSelectedDate {get; set;}

カレンダーで選択されている現在の日付を定義します。

Year int Year {get; set;} C1.WPF.Schedule.CalendarBase.SelectedDate または

C1.Silverlight.Schedule.CalendarBase.SelectedDate プロパティの年の部分を定義します。

Month int Month {get; set;} カレンダーが表す１か月を定義します。

MaxDate DateTime MaxDate{get; set;}

使用できる最大の日付を取得または設定します。デフォルト値は、12/31/9998 です。

MinDate TimeSpan MinDate{get; set;}

使用できる最小の日付を取得または設定します。デフォルト値は、01/01/1753 です。

これらのプロパティは同期が維持されます。したがって、SelectedDate を変更すると Year と Month がそれに応じて変更さ

れ、Year や Month を変更すると SelectedDate が変更されます。

その他のカレンダープロパティその他のカレンダープロパティ


CalendarHelper, publicC1.WPF.Schedule.CalendarHelperCalendarHelper {get; set;}

カレンダーに依存するプロパティを提供します。

MaxSelectionCount, public intMaxSelectionCount {get; set;}

コントロールで選択できる最大の日数を定義します。

SelectedDates, publicC1.WPF.Schedule.DateList SelectedDates {get;set;}

選択中の日付のリストです。

BoldedDates, public C1.WPF.Schedule.DateList 太字の日付のリストです。



BoldedDates {get; set;}

DaysPanel, publicSystem.Windows.Controls.ItemsPanelTemplateDaysPanel {get; set;}

１か月の日付を表す要素をレイアウトするパネルを定義する

ItemsPanelTemplate です。デフォルトでは、７列６行の

AutoDistributionGrid パネルが使用されます。

DaySlotTemplate, publicSystem.Windows.DataTemplateDaySlotTemplate {get; set;}

月内の１日の UI 表現を定義する DataTemplate です。このテンプレート

の DataContext は、DaySlot オブジェクトです。

DaySlotStyle, public System.Windows.StyleDaySlotStyle {get; set;}

月内の１日を表すビジュアルツリーのルート要素である

DaySlotPresenter 要素の Style です。

DaysOfWeekPanel, publicSystem.Windows.Controls.ItemsPanelTemplateDaysOfWeekPanel {get; set;}

曜日を表す要素をレイアウトするパネルを定義する

ItemsPanelTemplate です。デフォルトでは、水平方向の StackPanel が使用されます。

DayOfWeekSlotTemplate, publicSystem.Windows.DataTemplateDayOfWeekSlotTemplate {get; set;}

１つの曜日の UI 表現を定義する DataTemplate です。このテンプレート

の DataContext は、DayOfWeekSlot オブジェクトです。

MonthFullName, public string MonthFullName{ get; }

現在のカルチャを考慮して、カレンダーに表示されている現在の月の完

全名を取得します。

Theme, publicSystem.Windows.ResourceDictionary Theme{get; set;}

カレンダーテーマのリソースを含む ResourceDictionary オブジェクトを

取得または設定します。

すべてのコントロールは次の RoutedEvent を公開します。

イベント説明

SelectedDateChanged C1.WPF.Schedule.CalendarBase.SelectedDate または

C1.Silverlight.Schedule.CalendarBase.SelectedDate プロパティ値が変更されたときに発生しま

す。

C1Calendar の要素の要素

C1Calendar のユーザーインターフェイスは、次の３つの主要部分を抽象化して示します。

1. 月内の日付を一覧表示するペイン

2. 曜日名を一覧表示するペイン

3. 現在の年/月の選択を管理する UI を表すコマンドペイン

日付のリストは、ListBox クラスを継承するC1CalendarItemPresenter オブジェクトによって表されま

す。C1CalendarItemPresenter クラスのインスタンスは、C1Calendar のテンプレートビジュアルツリー内で、カレンダー日の

パネルを表示する場所を定義するために使用されます。

C1Calendar は、Year プロパティと Month プロパティに対応するカレンダー日のセルを表す（DaySlotPresenter クラスの）

UI 要素を生成します。これらの DaySlotPresenter 要素の実際の UI は、DaySlotTemplate プロパティで定義されます。こ

れらの要素は、DaysPanel プロパティで UI が定義されるパネルの子要素になります。

メモ：通常のカレンダーは６週間の行で構成され、各行は７日間で構成されます。つまり、6 * 7 = 42 日分のセル（スロッ

ト）があります。一部のセルは空のセルで、日付は表しません。



カレンダー日のセル（スロット）カレンダー日のセル（スロット）

各DaySlotPresenter 要素は、DataContext として DaySlot型のオブジェクトを受け取ります。これによ

り、DaySlotPresenter の UI を DaySlotオブジェクトに簡単に連結できます。DaySlotは、特定の日のセルの情報を提供しま

す。それには、次の読み取り専用プロパティが含まれます。

bool Empty - スロットが日を表すか、空のセルを表すかを示す

DateTime Date - DaySlot が表す日を取得する。DaySlot が空の場合は null 値

DayOfWeek DayOfWeek - このスロットに対応する曜日を取得する

bool IsWeekEnd - この日が週末かどうかを示す

bool IsSelected - この日スロットが現在選択されているかどうかを示す

bool IsAdjacent - DaySlot が、現在 C1Calendar によって表されている月ではなく、前後の月の日を表すかどうかを

示す

bool IsBolded - この DaySlot によって表される日が C1Calendar の UI で太字になっているかどうかを示す

日スロットの生成日スロットの生成

日スロットは、カルチャ固有の曜日順序に基づいて生成されます。たとえば、米国のカルチャでは日曜日が週の初日になるの

で、月の初日が火曜日の場合、対応する日スロットはリストの３番目になり、その前の２つのスロットは空になります。一方、ロ

シアのカルチャでは月曜日が週の初日になるので、リストの２番目になります。表示されるカルチャ

は、C1Calendar CalendarHelper プロパティによって制御されます。

上記の日付のパネルがカレンダーコントロールの UI ツリー（C1Calendar.Template で定義される）内に配置される場所を指

定するには、C1CalendarPresenter型のインスタンスを使用する必要があります。

曜日曜日

曜日のリストは、ItemsControl から派生される DaysOfWeekPresenter クラスによって表されます。曜日ペインを配置する場

所を指定するには、C1Calendar.Template ビジュアルツリー内のプレースホルダとして DaysOfWeekPresenter のインスタ

ンスを使用する必要があります。DaysOfWeekPresenter は、テンプレートが DaysOfWeekPanel で定義されるパネルの子

要素として、７つの DayOfWeekSlotPresenter オブジェクトを生成します。各 DayOfWeekSlotPresenter オブジェクトは、１

つの曜日を表します。各 DayOfWeekSlotPresenter の UI は、DayOfWeekSlotTemplate プロパティで定義されます。

各 DayOfWeekSlotPresenter は、DataContext として DayOfWeekSlot オブジェクトを受け取ります。DayOfWeekSlot には、次のように、DayOfWeekSlotPresenter の UI を簡単に連結するためのプロパティがあります。

DayOfWeek DayOfWeek – DayOfWeekSlot が表す曜日を取得する

string DayFullName – カルチャ固有の曜日の完全名

string DayShortName – カルチャ固有の曜日の省略名

string DayShortestName – DayOfWeek のカルチャ固有の最短名

bool IsWeekEnd – この曜日が週末かどうかを示す

リストに表示される曜日の順序はカルチャ固有です。たとえば、週の初日は米国のカルチャでは日曜日、ロシアのカルチャで

は月曜日です。

C1Calendar の外観の外観



C1Calendar の外観をカスタマイズするには、いくつかの方法があります。以下のトピックでは、ブラシのプロパティ、テーマ、テ

ンプレートを含む、さまざまなカスタマイズテクニックについて説明します。

C1Calendar のプロパティのプロパティ

Scheduler for WPF/Silverlight には、カレンダーカレンダーコントロールの外観をカスタマイズするためのプロパティが含まれます。コ

ントロールの色、境界、および高さを変更できます。以下のトピックでは、これらの外観プロパティの一部について説明します。

色のプロパティ色のプロパティ

以下のプロパティを使用すると、前後の月の日、曜日、月ヘッダー、選択中の日、週末、現在の日付など、カレンダーコント

ロールの月領域や月ヘッダーの各部で使用する色をカスタマイズできます。さらに、コントロール自体の前景と背景の色プロ

パティもあります。


AdjacentMonthDayBrush 前後の月の日の表示に使用する Brush オブジェクトを取得または設定します。これは依存プ

ロパティです。

Background コントロールの背景を描画するブラシを取得または設定します。これは依存プロパティです。

DaysOfWeekBorderBrush 曜日に下線を引くために使用する Brush オブジェクトを取得または設定します。これは依存

プロパティです。

Foreground 前景色を描画するブラシを取得または設定します。これは依存プロパティです。

MonthHeaderBackground 月ヘッダーに色を付けるために使用する Brush オブジェクトを取得または設定します。これ

は依存プロパティです。

MonthHeaderForeground 月ヘッダーのテキストに色を付けるために使用する Brush オブジェクトを取得または設定し

ます。これは依存プロパティです。

NavigationButtonBrush ナビゲーションボタンに色を付けるために使用する Brush オブジェクトを取得または設定しま

す。これは依存プロパティです。

SelectedDayBrush 選択中の日付の強調表示に使用する Brush オブジェクトを取得または設定します。これは

依存プロパティです。

TodayBrush 現在の日付の強調表示に使用する Brush オブジェクトを取得または設定します。これは依

存プロパティです。

WeekendBrush 週末の表示に使用する Brush オブジェクトを取得または設定します。これは依存プロパティ

です。

プロパティ例

AdjacentMonthDayBrush



Background

DaysOfWeekBorderBrush

Foreground このプロパティは、勤務日（月曜日

から金曜日）の曜日の省略形と日付に影響しま

す。

MonthHeaderBackground このプロパティ

は、月ヘッダーの背景色に影響します。



MonthHeaderForeground このプロパティは、

月ヘッダーに表示される年と月名に影響します。

NavigationButtonBrush

SelectedDayBrush

TodayBrush



WeekendBrush

テキストのプロパティテキストのプロパティ

以下のプロパティを使用すると、カレンダーカレンダーコントロールのテキストの外観をカスタマイズできます。

プロパティプロパティ説明説明

FontFamily コントロールのフォントファミリを取得または設定します。これは依存プロパティです。

FontSize フォントサイズを取得または設定します。これは依存プロパティです。

FontStretch フォントを画面上で伸縮する比率を取得または設定します。これは依存プロパティです。

FontStyle フォントスタイルを取得または設定します。これは依存プロパティです。

FontWeight 指定されたフォントの太さを取得または設定します。これは依存プロパティです。

MonthHeaderFontFamily 月ヘッダーのテキストの表示に使用する FontFamily オブジェクトを取得または設定します。

これは依存プロパティです。

MonthHeaderFontSize 月ヘッダーのフォントサイズを指定する Double 値を取得または設定します。これは依存プロ

パティです。

MonthHeaderFontWeight 月ヘッダーのテキストの表示に使用する FontWeight オブジェクトを取得または設定します。

これは依存プロパティです。

C1Calendar のテーマのテーマ (WPF のみのみ)カレンダーコントロールには、７つの定義済みテーマがあります。

C1Scheduler のテーマ例

Office 2007 Blue



http://msdn.microsoft.com/en-us/library/ms592513




Office 2007 Black

Office 2007 Silver

Media Player

Dusk Blue

Dusk Green

Vista

テーマの ResourceDictionary では、カレンダーコントロールでよく使用されるユーザーインターフェイスプロパティが定義されています。次の表

に、デフォルトのカレンダーテーマを示します。

テーマフォルダテーマフォルダテーマファイルテーマファイル C1CalendarResources クク ResourceID 説明説明



ラスの静的フィールドラスの静的フィールド

Office2007 Black.xaml Office2007Black Office2007.Black Office 2007 Black テーマ。

Blue.xaml Office2007Blue Office2007.Blue Office 2007 Blue テーマ。

Silver.xaml Office2007Silver Office2007.Silver Office 2007 Silver テーマ。

Dusk Blue.xaml DuskBlue Dusk.Blue Dusk Blue テーマ。

Green.xaml DuskGreen Dusk.Green Dusk Green テーマ。

Media Player MediaPlayer.xaml MediaPlayer MediaPlayer Media Player テーマ。

Vista Vista.xaml Vista Vista Vista テーマ。

C1CalendarResources クラスの静的フィールドクラスの静的フィールド

デフォルトでは、カレンダーのテーマは、<インストールフォルダインストールフォルダ>\Misc\Xaml\C1WPFCalendar フォルダ内の上記のテーマフォルダテーマフォルダにインス

トールされます。

メモ：このセクションの内容は、ComponentOne for WPF にのみ適用されます。ComponentOne for Silverlight ではアセンブリ名が異なり

ます。

カレンダーのテーマの設定カレンダーのテーマの設定

すべてのカレンダーコントロールは、デフォルトで現在のシステムテーマを使用します。別のテーマを使用する場合は、新しいテー

マを選択する方法がいくつかあります。

Visual Studio の設計時にテーマを設定するには、次の手順に従います。の設計時にテーマを設定するには、次の手順に従います。

1. コントロールを右クリックします。

2. ［テーマテーマ］を選択し、７つの定義済みテーマから１つを選択します。

メモメモ：［プロパティ］ウィンドウで、Theme プロパティの隣にあるドロップダウンリストからオプションを選択して、テーマ

を変更することもできます。

Microsoft Blend でテーマを設定する場合は、設計時にでテーマを設定する場合は、設計時にTheme プロパティを変更します。プロパティを変更します。

1. XAML のウィンドウまたはページで C1Calendar コントロールを選択します。

2. ［プロパティプロパティ］パネルの［View］で、CalendarBase.Theme プロパティの横にあるドロップダウン矢印をクリックし、定義済み

テーマを選択します。

ResourceID を使ってテーマを設定する場合は、次のを使ってテーマを設定する場合は、次の XAML を使用します。を使用します。

XAML

<my:C1Calendar x:Name="calendar1" MaxSelectionCount="14"Theme="{DynamicResource {ComponentResourceKeyTypeInTargetAssembly=my:CalendarBase, ResourceId= MediaPlayer}}"/>

C1CalendarResources 静的フィールドを使ってテーマを設定するには、プロジェクトに次のコードを追加します。静的フィールドを使ってテーマを設定するには、プロジェクトに次のコードを追加します。

Visual Basic

calendar.Theme = C1CalendarResources.MediaPlayer

C#



calendar.Theme = C1CalendarResources.MediaPlayer;

Page、、Window、または、または Application リソースでリソースで ResourceDictionary とと DefaultThemeKey を定義してテーマを設を定義してテーマを設

定するには：定するには：

XAML

<Page.Resources> <ResourceDictionary><ResourceDictionary x:Key="{x:Static my:CalendarBase.DefaultThemeKey}"Source="/C1.WPF.C1Schedule;component/themes/CalendarThemes/MediaPlayer/MediaPlayer.xaml" /> </ResourceDictionary.MergedDictionaries> </Page.Resources>

これにより、現在のスコープのすべてのコントロールに影響が及ぶことに注意してください。

独自のテーマの ResourceDictionary を作成してカレンダーコントロールで使用することもできます。

定義済みテーマをカスタマイズする最善の方法は、カスタム ResourceDictionary にデフォルトのテーマ定義を入れ、テーマブラシ

などのリソースを必要に応じて再定義することです。

メモ：カスタマイズ中も引き続きすべてのデフォルトのスタイルとテンプレートが正しく動作するように、リソースキーをデフォ

ルト設定から変更しないことをお勧めします。

デフォルトのカレンダーテーマのリソースデフォルトのカレンダーテーマのリソース

次の表に、デフォルトのカレンダーテーマのリソースの詳細およびキーを示します。


C1Calendar_AdjucentDateText_Brush 前後の日のテキストの表示に使用されるブラシ。

C1Calendar_Background カレンダーコントロールの背景として使用されるブラシ。

C1Calendar_DaysOfWeekBorder_Brush 曜日の下線の色を指定する際に使用されるブラシ。

C1Calendar_Font カレンダーコントロールで使用されるフォントファミリ。

C1Calendar_FontSize コントロールで使用されるフォントサイズを指定する倍精度値。

C1Calendar_MonthHeader_Font 月ヘッダーの表示に使用されるフォントファミリ。

C1Calendar_MonthHeaderFont_Size 月ヘッダーの表示に使用されるフォントサイズを指定する倍精度値。

C1Calendar_MonthHeader_Brush 月ヘッダーの背景色を指定する際に使用されるブラシ。

C1Calendar_MonthHeaderText_Brush 月ヘッダーの背景色を指定する際に使用されるブラシ。

C1Calendar_NavArrow_Brush ナビゲーション矢印の色を指定する際に使用されるブラシ。

C1Calendar_SelectedDate_Brush 選択中の日の背景色を指定する際に使用されるブラシ。

C1Calendar_TodayBorder_Brush 現在の日付の境界線の色を指定する際に使用されるブラシ。

C1Calendar_TodayBorder_Thickness 現在の日付の境界線の太さ。

C1Calendar_WeekendText_Brush 週末日の色を指定する際に使用されるブラシ。

カレンダーのテンプレートカレンダーのテンプレート



C1Calendar コントロールの外観をカスタマイズするには

1. カレンダーの汎用レイアウトモデルを定義するには、C1Calendar.Template プロパティを割り当てる必要があります。

通常は、Style の Setter を使って行います。テンプレートには、StackPanel を含むグリッド、境界線などの任意の UI 要素を含めることができますが、テンプレートツリーの一部の領域には、カレンダーの次のプレースホルダ要素を配置し

ます。

C1CalendarPresenter- 日付ペインを表示する場所を指定します。

DaysOfWeekPresenter - 曜日ペインを表示する場所を指定します。

上記のプレースホルダはオプションです。

2. 日付ペインの UI を定義するには、テンプレートを次のプロパティに割り当てます。

C1Calendar DaysPanel – 日付項目をレイアウトするパネルを定義します。

C1Calendar DaySlotTemplate – 各日付を表す UI を定義します。"{Binding Path=DaySlot_Property}" マー

クアップ拡張を使用して、UI をこのテンプレートに連結します。ここで、DaySlot_Property は DaySlot クラスの

任意のプロパティ名です。

C1Calendar DaySlotStyle – 個々の日を表す UI ツリーのルートオブジェクトのプロパティを定義できます。この

ルートオブジェクトは、DaySlotPresenter 型です。

3. 曜日ペインの UI を定義するには、テンプレートを次のプロパティに割り当てます。

C1Calendar DaysOfWeekPanel – 曜日項目をレイアウトするパネルを定義します。

C1Calendar DayOfWeekSlotTemplate – 各曜日を表す UI を定義します。"{BindingPath=DayOfWeekSlot_Property}" マークアップ拡張を使用して、UI をこのテンプレートに連結します。ここで、

DayOfWeekSlot Property は DayOfWeekSlot クラスの任意のプロパティです。

C1Calendar DayOfWeekSlotStyle – 個々の日を表す UI ツリーのルートオブジェクトのプロパティを定義でき

ます。このオブジェクトは、DayOfWeekSlotPresenter 型です。

C1Calendar のレイアウトのレイアウト

C1Calendar のレイアウトをカスタマイズするには、いくつかの方法があります。以下のトピックでは、レイアウトのプロパティ、

複数のカレンダーの表示、カレンダーのレイアウトなどのカスタマイズテクニックについて説明します。

C1Calendar レイアウトのプロパティレイアウトのプロパティ

Calendar for WPF/Silverlight には、カレンダーコントロールのレイアウトをカスタマイズするためのプロパティが含まれま

す。コントロールに表示するカレンダー月の幅、高さ、配置、および月数を変更できます。次のプロパティを使用して、コント

ロールのレイアウトをカスタマイズできます。

プロパティプロパティ説明説明

Width 要素の幅を取得または設定します。

Height 要素の高さを取得または設定します。

HorizontalAlignment パネルや項目コントロールなどの親要素内に置かれる要素に適用される水平配置の特性

を取得または設定します。

VerticalAlignment パネルや項目コントロールなどの親要素内に置かれる要素に適用される垂直配置の特性

を取得または設定します。



Margin 要素の外側の余白を取得または設定します。

Padding コントロールの内側のパディングを取得または設定します。

MinWidth 要素の最小幅制約を取得または設定します。

MinHeight 要素の最小高さ制約を取得または設定します。

MaxWidth 要素の最大幅制約を取得または設定します。

MaxHeight 要素の最大高さ制約を取得または設定します。

HorizontalContentAlignment コントロールのコンテンツの水平方向の配置を取得または設定します。これは依存プロパ

ティです。

VerticalContentAligment コントロールのコンテンツの垂直方向の配置を取得または設定します。これは依存プロパ

ティです。

MonthCount カレンダーに表示される月の数を取得または設定します。デフォ

MonthHeight カレンダーの各月スロットの高さを決定します。

MonthWidth カレンダーの各月スロットの幅を決定します。

複数月カレンダーの表示複数月カレンダーの表示

C1Calendar コントロールでは、複数の月を表示し、月の間を対話式に移動したり、特定の DateTime または日時コンポーネ

ントを選択することができます。C1Calendar は、必要な数の C1Calendar コントロールを作成して UI を構築します。

この UI の作成において重要なプロパティは、次のとおりです。

int MonthCount – カレンダーに表示される月の数。

Style MonthCalendarStyle – １つの月を表す子 C1Calendar にそれぞれ適用されるスタイル。

Style MonthSlotStyle – １つの月を表すビジュアルツリーのルート要素である C1CalendarPresenter要素のスタイ

ル。

ItemsPanelTemplate MonthsPanel – 個々の月を表す要素をレイアウトするパネルを定義する

ItemsPanelTemplate。

C1Calendar の外観をカスタマイズするには、次の手順に従います。

1. カレンダーの汎用レイアウトモデルを定義するには、C1Calendar.Template プロパティを割り当てる必要があります。

通常は、Style の Setter を使って行います。テンプレートのビジュアルツリーには、月のカレンダーを含むパネルを表示

する場所を指定するために C1CalendarPresenterを入れる必要があります。

2. 月ペインの UI を定義するには、MonthsPanel プロパティにテンプレートを割り当てます。このテンプレートで、月の項

目をレイアウトするパネルを定義します。








3. １つの月の UI を定義するには、MonthSlotStyle プロパティに Style を割り当てます。

C1Calendar の配置の配置

カレンダーをページに表示する位置は、HorizontalAligment プロパティと VerticalAlignment プロパティを使って指定でき

ます。HorizontalAlignment プロパティは、Left、Center、Right、または Stretch から選択できます。VerticalAlignment プロパティは、Top、Center、Bottom、または Stretch から選択できます。これらのプロパティを使用して、カレンダーコントロール

のレイアウトを柔軟に制御できます。

C1Calendar の動作の動作

以下のトピックでは、C1Calendar コントロールの動作を制御するために使用する動作プロパティについて説明します。

C1Calendar のナビゲーションのナビゲーション

C1Calendar には、カレンダーの月や日の間を対話式に移動できるシンプルなナビゲーション機能があります。 C1Calendarコントロールの BoldedDates プロパティと SelectedDates プロパティを使って C1Scheduler コントロールに移動することも

できます。

C1Calendar では、次の方法でカレンダーの月の間を移動できます。

前月ボタンと翌月ボタン前月ボタンと翌月ボタン – 前月または翌月のボタンイメージをクリックして前後の月に移動します。

月と年のポップアップカレンダーセレクタ月と年のポップアップカレンダーセレクタ – カレンダーの月名をクリックすると、月名のリストボックスが表示され、１月

から 12 月までの任意の月を選択できます。カレンダーの年をクリックすると、年のリストボックスが表示され、任意の

年を選択できます。

項目の UI を表示するためにどのようなパネルや日付が使用されているかに関係なく、マウスまたはキーボードを使って対話

式に日付を選択できます。

前月と翌月のナビゲーションボタン前月と翌月のナビゲーションボタン

左矢印ボタンをクリックすると前月に移動でき、右矢印ボタンをクリックすると翌月に移動できます。

月と年のポップアップカレンダーセレクタ月と年のポップアップカレンダーセレクタ

クイック月セレクタを使用すると、ナビゲーションボタンを連続してクリックしなくても、目的のカレンダー月に移動できます。これ

は、カレンダー月を何か月も飛ばして移動する場合に役立ちます。

カレンダー月を１回クリックするだけで複数のカレンダー月を表示できます。カレンダータイトルの月名を１回クリックすると、い

くつかのカレンダー月の名前がポップアップリストボックスに表示されます。移動先の月を選択すると、カレンダー月が現在の

月から選択した月に変更されます。



カレンダー年を表示するには、月タイトルバーのカレンダー年を１回クリックします。カレンダータイトルの年を１回クリックする

と、いくつかのカレンダー年がポップアップリストボックスに表示されます。移動先の年を選択すると、カレンダー年が現在の年

から選択した年に変更されます。

C1Calendar の選択の選択

デフォルトでは、一度に選択できる日付は１つです。MaxSelectionCount プロパティの値を増やすと、複数の日付を選択でき

ます。実行時には、MaxSelectionCount プロパティの値に基づいて、［Ctrl］キーを押しながら複数の日付をクリックして選択

できます。選択中の日付は、デフォルトでオレンジの背景色で表示されます。

選択可能な日付の最大数を設定する方法については、「C1Calendar で選択可能な最大日数の指定」を参照してください。

MaxDate プロパティと MinDate プロパティを使用すると、カレンダーで選択できる最大と最小の日付を指定できます。デフォ

ルトでは、最小値は 1/1/1753 で、最大値は 12/31/9998 です。最大と最小の日付が適用されると、これらの値の範囲外の日

付は選択できなくなります。その結果、ユーザーが指定された範囲外の日付を選択しようとしても、選択した色やアクションは

適用されなくなります。

設定設定

C1Scheduler コントロールと C1Calendar コントロールは、同じカレンダー設定を共有します。これらの設定に

は、CalendarHelper クラスの対応するプロパティを使ってアクセスできます。たとえば、稼働日のカレンダーを作成するに

は、CalendarHelper クラスを使って勤務日を指定します。CalendarHelper クラスの XAML は、２つのコントロールのどちら

でも同じであることがわかります。

C1Scheduler のの XAML

XAML

<my:C1Scheduler x:Name="scheduler1"> <my:C1Scheduler.CalendarHelper> <my:CalendarHelper Culture="English " WeekStart="Sunday"



EndDayTime="18:20:00" StartDayTime="09:20:00" WorkDays="Tuesday,Wednesday,Thursday,Friday,Saturday"> </my:CalendarHelper> </my:C1Scheduler.CalendarHelper></my:C1Scheduler>

C1Calendar のの XAML

XAML

<my:C1Calendar x:Name="scheduler1"> <my:C1MonthCalendar.CalendarHelper> <my:CalendarHelper Culture="English " WeekStart="Sunday" EndDayTime="18:20:00" StartDayTime="09:20:00" WorkDays="Tuesday,Wednesday,Thursday,Friday,Saturday"> </my:CalendarHelper> </my:C1MonthCalendar.CalendarHelper></my:C1MonthCalendar>



１つのコントロールで CalendarHelper のプロパティを設定したら、それらのプロパティを複数のコントロールで使用できます。

それには、対応するコントロールの CalendarHelper のプロパティを相互に連結します。たとえば、CalendarHelper のプロ

パティが既に指定されている C1Schedulerコントロールと、プロパティがまだ何も指定されていない C1Calendar コントロール

がウィンドウにあるとします。C1Calendar CalendarHelper のプロパティを次の XAML のように設定します。

XAML

<my:C1Calendar Name="calendar1" CalendarHelper="{Binding ElementName=scheduler1, Path=CalendarHelper, Mode=OneWay}"/>

C1Calendar には、C1Scheduler コントロールに指定されたCalendarHelper のすべてのプロパティが表示されます。

次のカレンダー設定を使用できます。

CalendarHelper プロプロ

パティパティ説明説明

Culture カルチャ固有の情報を保持する CultureInfo オブジェクトを取得または設定します。

WeekStart 週の初めの日を決定する DayOfWeek 値を取得または設定します。デフォルトはシステム設定に

よって決定されます。

WorkDays １週間の勤務日を含む WorkDays オブジェクトを取得または設定します。

StartDayTime 勤務時間の開始を指定する TimeSpan 値を取得または設定します。

EndDayTime 勤務時間の終了を指定する TimeSpan 値を取得または設定します。

Holidays 休日（勤務日以外の日と週末）のリストを保持する ObservableCollection オブジェクトを取得また

は設定します。

WeekendExceptions 働く必要がある週末の日のリストを保持する ObservableCollection オブジェクトを取得または設定

します。

FullMonthNames カルチャ固有の月の完全名の配列を取得します。

カレンダーコントロールへのスケジュールの連結カレンダーコントロールへのスケジュールの連結

C1Calendar コントロールは、C1Scheduler コントロールにナビゲーションと追加情報を提供するために使用されます。それ

には、コントロールのプロパティどうしを連結します。

C1MonthCalendar/C1MultiMonthCalendarのプロパティのプロパティ

C1Scheduler ププロパティロパティ

コメントコメント

CalendarHelper CalendarHelper これらのプロパティを連結すると、両方のコントロール

が使用するカルチャおよびカレンダーに依存するプロ

パティが同期されます。これは、デフォルトのナビゲー

ションにとって重要です。

VisibleDates SelectedDates これらのプロパティを連結すると、ユーザーがカレン

ダーで日付を選択したときに C1Scheduler コントロー

ルがナビゲートされます。たとえば、C1Calendar で４

日間を選択すると、その４日間が C1Scheduler コント

ロールに表示されます。

BoldedDates BoldedDates これらのプロパティを連結すると、カレンダーコントロー

ルで予定がある日付が太字で表示されます。



たとえば、次の XAML は、C1Scheduler を C1Calendar コントロールに連結します。

XAML

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:System="clr-namespace:System;assembly=mscorlib" x:Class="UntitledProject1.Window1" x:Name="Window" Title="Window1" Width="924" Height="480" xmlns:c1sched="http://schemas.componentone.com/wpf/Schedule">

<Grid> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition/> </Grid.ColumnDefinitions> <c1sched:C1Scheduler Name="scheduler1" Grid.Column="1"MonthStyle="{DynamicResource {ComponentResourceKeyTypeInTargetAssembly=c1sched:C1Scheduler, ResourceId=MonthStyle2007}}"WeekStyle="{DynamicResource {ComponentResourceKey TypeInTargetAssembly=c1sched:C1Scheduler, ResourceId=WeekStyle2007}}"WorkingWeekStyle="{DynamicResource {ComponentResourceKeyTypeInTargetAssembly=c1sched:C1Scheduler, ResourceId=WorkingWeekStyle2007}}"OneDayStyle="{DynamicResource {ComponentResourceKey TypeInTargetAssembly=c1sched:C1Scheduler, ResourceId=OneDayStyle2007}}"> <c1sched:C1Scheduler.CalendarHelper> <c1sched:CalendarHelper WeekStart="Sunday" EndDayTime="18:20:00" StartDayTime="09:20:00" WorkDays="Tuesday,Wednesday,Friday,Saturday"> <c1sched:CalendarHelper.Holidays> <System:DateTime>2011-04-05</System:DateTime> </c1sched:CalendarHelper.Holidays> </c1sched:CalendarHelper> </c1sched:C1Scheduler.CalendarHelper> </c1sched:C1Scheduler> <c1sched:C1Calendar Name="calendar1" Margin="10,10,10,0"Grid.Column="0" VerticalAlignment="Stretch" MaxSelectionCount="42" SelectedDates="{Binding ElementName=scheduler1, Path=VisibleDates, Mode=OneWay}" BoldedDates="{Binding ElementName=scheduler1, Path=BoldedDates, Mode=OneWay}" CalendarHelper="{Binding ElementName=scheduler1, Path=CalendarHelper, Mode=OneWay}"GenerateAdjacentMonthDays="true" > </c1sched:C1MultiMonthCalendar></Grid></Window>

C1Calendar でいくつかの日付を選択すると、選択した日付が C1Scheduler コントロールに表示されます。





予定予定

予定は、一定期間内に実行されるイベントに関する詳細な情報と、その期間を表します。予定は、30 分といった時間から複数

の日に渡るまで、指定した長さのイベントです。

新しい予定を追加するには、または既存の予定を編集するには、その予定の時刻をダブルクリックします。

［予定予定］ダイアログボックスを使用して、新しい予定のスケジュールを設定します。このとき、タイトル、場所、ラベル、開始時刻

と終了時刻、アラーム、公開方法、その予定が全日のイベントであるかどうか、指定された期間内に繰り返し実行されるもので

あるかどうかを指定できます。また、任意のリソース、分類、および連絡先も指定できます。



ラベルラベル

ラベルは、予定に追加できる色分けされたマーカーです。ラベルを設定したユーザーおよび他のユーザーは、予定の詳細を表

示することなく、その予定の種類を確認できます。

Scheduler for WPF/Silverlight には、12 個の定義済みラベルが用意されています。ラベルの色は、C1Scheduler コント

ロールのすべてのデータビューに表示されます。

定義済みのラベル定義済みのラベル

定義済みのラベルは次のとおりです。

ラベルラベル色色インデックス

なし 0

重要 1

ビジネス 2

個人用 3

休暇 4

締め切り 5

要出席 6

出張 7

要準備 8

誕生日 9

記念日 10

電話連絡 11

公開方法公開方法

公開方法を使用すると、予定がスケジュールされる際に自分が参加できるかどうかを全員に知らせることができま



す。Scheduler for WPF/Silverlight では、予定あり、空き時間、外出中、および仮の予定の４つの定義済み公開方法を使

用できます。公開方法は、次の色で指定されます。

状況状況色色インデックスインデックス

予定あり 0

空き時間 1

外出中 2

仮の予定 3

公開方法は、［公開方法公開方法］ドロップダウンリストで指定します。

公開方法の色は、スケジュールの OneDayStyle ビューおよび WorkingWeekStyle ビューでのみ表示されます。予定の色

は、予定の左側にある領域に表示されます。予定を選択すると、その予定は公開方法を表す色で強調表示されます。

アラームアラーム

予定のアラームを使用すると、予定が発生する時刻よりも指定した時間だけ前に［アラームアラーム］ダイアログボックスが表示されま

す。［アラームアラーム］ダイアログボックスでは、１つまたは複数の予定を取り消すオプション（複数の予定が設定されている場合）、予

定を開くオプション、またはアラームをリセットして設定した時間内に再表示するオプションを指定できます。



アラームは、予定を作成するときに設定できます。それには、［再通知再通知］チェックボックスをオンにし、予定のどれだけ前にア

ラームを表示するかを指定する時間を［アラームアラーム］ドロップダウンリストで指定します。

連絡先連絡先

通常、連絡先のリストには、頻繁に通信するすべてのユーザーが含まれています。予定には、その予定について知らせる必

要がある相手の連絡先を割り当てることができます。連絡先情報は ContactCollection クラスに格納されます。既存の連絡

先をデータソースから取得できます。また、実行時に連絡先連絡先を追加することもできます。連絡先の指定はオプションです。ま

た、予定には、１人または複数の連絡先を割り当てることができます。



連絡先リストの追加連絡先リストの追加

Scheduler for WPF/Silverlight では、実行時に［連絡先連絡先］ダイアログボックスを使って作成された連絡先がサポートされま

す。リストに追加した連絡先を予定に割り当てることができます。

実行時に連絡先を追加するには実行時に連絡先を追加するには

1. 新しい予定を追加するか、既存の予定を開きます。

2. ［予定予定］ダイアログボックスで、［連絡先連絡先］ボタンをクリックします。［連絡先連絡先］ダイアログボックスが表示されます。

3. ［利用可能な項目利用可能な項目］テキストボックスに名前を入力して［追加追加］をクリックします。

4. ［OK］をクリックして、［連絡先連絡先］ダイアログボックスを閉じます。

予定への連絡先の割り当て予定への連絡先の割り当て

実行時に連絡先（複数可）を予定に割り当てるには、［連絡先連絡先］ダイアログボックスを使用します。項目の追加方法について

は、「連絡先リストの追加」を参照してください。

実行時に連絡先を予定に割り当てるには実行時に連絡先を予定に割り当てるには

1. ［予定予定］ダイアログボックスで、［連絡先連絡先］ボタンをクリックします。

2. 対象の連絡先の横にあるチェックボックスをオンにし、［OK］をクリックします。

［連絡先連絡先］テキストボックスの横に、連絡先が表示されます。予定には複数の連絡先を追加できます。



分類分類

分類とは、予定を整理する際に使用するキーワードまたはフレーズです。Scheduler for WPF/Silverlightでは、20 個の定

義済み分類が用意されており、これらを予定に割り当てることができます。データベースの分類を使用することもできます。ま

た、ユーザーは、実行時に独自のカスタム分類を作成することができます。CategoryCollection クラスに格納される分類は

オプションです。１つの予定に複数の分類を割り当てることもできます。

定義済みの分類定義済みの分類

定義済みの分類は次のとおりです。

分類インデックス

VIP 0

アイディア 1

お気に入り 2

グリーティングカード 3

その他 4

個人用 5

友人 6

友人 7

取引先 8

国際的 9

待機中 10

戦略 11

時間と経費 12

業者 13

目標 14

祝日 15

競合相手 16

贈り物 17

進捗状況 18

重要顧客 19

電話連絡 20

分類リストの追加分類リストの追加

Scheduler for WPF/Silverlight では、実行時に［分類分類］ダイアログボックスを使って作成された分類がサポートされます。リスト

に追加した分類を予定に割り当てることができます。

実行時に分類を追加するには：実行時に分類を追加するには：




2. ［予定予定］ダイアログボックスで、［分類分類］ボタンをクリックします。［分類分類］ダイアログボックスが表示されます。

3. ［利用可能な項目利用可能な項目］テキストボックスに名前を入力して［追加追加］をクリックします。新しい分類がリストの最後に追加されま

す。

4. ［OK］をクリックして、［分類分類］ダイアログボックスを閉じます。

［予定予定］ダイアログボックスで［分類分類］ボタンをクリックすると、新しい分類が［分類分類］ダイアログボックスに表示されます。

予定への分類の割り当て予定への分類の割り当て

実行時に分類（複数可）を予定に割り当てるには、［分類分類］ダイアログボックスを使用します。デフォルトでは、20 個の定義済み

分類から成るリストが用意されています。分類を［分類分類］ダイアログボックスに追加する方法については、「分類リストの追加」を

参照してください。

実行時に分類を予定に割り当てるには実行時に分類を予定に割り当てるには

1. ［予定予定］ダイアログボックスで、［分類分類］ボタンをクリックします。

2. 対象の分類の横にあるチェックボックスをオンにし、［OK］をクリックします。［分類分類］テキストボックスの横に、分類が表

示されます。予定には複数の分類を割り当てることができます。

リソースリソース

リソースとは、特定のタスクをサポートするソースを定義するキーワードまたはフレーズです。ResourceCollection クラスに格

納されるリソースはオプションです。１つの予定に複数のリソースを割り当てることもできます。



リソースリストの追加リソースリストの追加

Scheduler for WPF/Silverlightでは、実行時に［リソースリソース］ダイアログボックスを使って作成されたリソースがサポートされま

す。リストに追加したリソースを予定に割り当てることができます。

実行時にリソースを追加するには：実行時にリソースを追加するには：


2. ［予定予定］ダイアログボックスで、［リソースリソース］ボタンをクリックします。［リソースリソース］ダイアログボックスが表示されます。

3. ［利用可能な項目利用可能な項目］テキストボックスにリソースを入力して［追加追加］をクリックします。新しいリソースがリストに追加されま

す。

4. ［OK］をクリックして、［リソースリソース］ダイアログボックスを閉じます。

［予定予定］ダイアログボックスで［リソースリソース］ボタンをクリックすると、新しいリソースが［リソースリソース］ダイアログボックスに表示されま

す。

実行時における予定の操作実行時における予定の操作

実行時に予定を作成するには、予定を開始する時刻をダブルクリックして［予定予定］ダイアログボックスを開きます。予定の詳細

については、「予定」を参照してください。



［予定予定］ダイアログボックスでキーを押したときに実行される処理を次に示します。

キーキー動作動作

Enter 選択状態にある［予定］の［予定］ダイアログボックスが開きます。または、新しい［予定］が作成されま

す。

Esc 変更を保存しないで［予定］ダイアログボックスが閉じます。

F2 選択状態にある［予定］が編集モードに移動します。

Tab(SHIFT+Tab)

タブの順番に従って、カーソルがフィールド間を移動します。

予定の追加と保存予定の追加と保存

予定をスケジュールに追加するには、［予定予定］ダイアログボックスを使用します。

1. 予定の時刻をダブルクリックして［予定予定］ダイアログボックスを開きます。または、単一［［Enter］］キーを押下して新しい

［予定予定］を作成します。

2. タイトルタイトル、場所場所、および予定に割り当てる追加情報を指定します。

3. ［保存して閉じる保存して閉じる］ボタンをクリックして、新しい予定をスケジュールに追加します。

予定の編集予定の編集

予定をスケジュールに変更して更新するには、［予定予定］ダイアログボックスを使用します。



1. [F2]キーを使用してタイトルタイトルを編集し、[Enter]キーで保存保存します。または[Esc]キーで変更を保存しないようにします。

2. 存在の[予定予定]ををダブルクリックして［予定予定］ダイアログボックスを開きます。または、[Enter]キーを押下して選択状態に

ある[予定予定]の［予定予定］ダイアログボックスを開きます。

3. ［予定予定］ダイアログボックス内様々のフィールドに編集を行って[予定予定]の右端にある[保存保存]ボタンまたは[Ctrl+S]キーで

スケジュールに[予定予定]をを更新します。

また、選択状態にある[予定予定]に[Tab (Shift+Tab)]キーを使用して現在のビュー内タブの順番に従って、カーソルがフィールド

間を移動できます。

予定の削除予定の削除

［予定の編集予定の編集］ダイアログボックスを使用して、選択した予定をスケジュールから簡単に削除することができます。

1. スケジュールから削除する予定を選択します。

2. キーボードの［Delete］キーを押します。その予定がスケジュールから削除されます。

予定の繰り返し予定の繰り返し

特定の間隔で予定が繰り返されるように設定することができます。予定は日、週、月、または年の単位で繰り返すことができま

す。

1. 予定の時刻をダブルクリックして新しい予定を追加するか、既存の予定をダブルクリックします。［予定予定］ダイアログボッ

クスが表示されます。

2. ［定期的な予定定期的な予定］ボタンをクリックします。［定期的な予定の設定定期的な予定の設定］ダイアログボックスが表示されます。

3. 繰り返しパターンを設定します。



時間の設定時間の設定

［時間の設定］グループ内のプロパティを指定して、予定の開始時刻、終了時刻、および予定の時間の長さを設定でき

ます。

パターンの設定パターンの設定

［パターンの設定パターンの設定］グループの設定は、予定を繰り返す間隔（日単位、週単位、月単位または年単位日単位、週単位、月単位または年単位）によって異なりま

す。

日［日日］を指定すると、指定した日数ごとに、または勤務日にのみ予定が繰り返されるように設定できます。

たとえば、予定が２日ごとに繰り返されるように設定した場合、その予定は１日おきに表示されます。予定が勤務

日に繰り返されるように設定した場合、デフォルトでは、予定は月曜日から金曜日にのみ表示されます。

週［週週］を指定すると、週単位で間隔を空けて、指定した日に予定が繰り返されるように設定できます。

たとえば、予定が２週間ごとに２週間ごとに繰り返されるように設定し、［火曜日火曜日］と［木曜日木曜日］を選択した場合、その予定は１週

間おきに火曜日と木曜日に繰り返されます。

月［月月］を指定すると、月単位で間隔を空けて、指定した日に、または指定した曜日に予定が繰り返されるように設

定できます。

たとえば、予定が２か月に１回、８日２か月に１回、８日に繰り返されるように設定した場合、その予定は１か月おきに８日に表示さ

れます。予定が２か月に１回、第３月曜日２か月に１回、第３月曜日に繰り返されるように設定した場合、その予定は１か月おきに第３月曜

日に表示されます。

年［年年］を指定すると、指定した月の指定した日、または曜日に予定が繰り返されるように設定できます。



たとえば、予定が１月２日１月２日に繰り返されるように設定した場合、その予定は毎年１月２日に表示されます。この設

定は、誕生日や記念日に最適です。予定が１月の第１金曜日に繰り返されるように設定した場合、その予定は毎

年１月の第１金曜日１月の第１金曜日に表示されます。

期間期間

［期間期間］グループを使用して、繰り返しの期間を設定できます。

［開始開始］ドロップダウンカレンダーを使用して、繰り返しを開始する日付を選択することができます。終了日を指定する際

は、以下の３つのオプションを使用できます。

［終了日未定終了日未定］を指定すると、予定が無期限に繰り返されます。

［反復回数反復回数］に 0 回を指定すると、指定された回数だけ予定が繰り返されます。たとえば、予定を毎日繰り返す

場合、［反復回数反復回数］に 25 回を設定すると、予定を 25 日間毎日繰り返すことができます。

［終了日終了日］を指定すると、予定は指定した日まで繰り返されます。

4. ［保存して閉じる保存して閉じる］をクリックして、［定期的な予定の設定、［定期的な予定の設定］ダイアログボックスを閉じます。



Scheduler for WPF チュートリアルチュートリアル

このチュートリアルは、読者が Visual Basic .NET または C# のプログラミングに精通していることを前提としています。ただ

し、Scheduler for WPF については、手順を追って説明されており、予備知識は特に必要ありません。このセクションに示さ

れる手順に従って作業を進めるだけで、Scheduler for WPF の機能を具体的に示すプロジェクトを作成できます。

チュートリアルプロジェクトを実行し、自分で変更してみてください。

メモ：メモ：このセクションの内容は、ComponentOne for WPF にのみ適用されます。ComponentOne for Silverlight ではア


カスタムグループ化ビューの作成カスタムグループ化ビューの作成

Scheduler for WPF を使用すると、グループビューをカスタマイズできます。このチュートリアルは、XAML マークアップおよび

コードを使用してカスタムビューを作成する手順を説明します。

手順１：アプリケーションの作成手順１：アプリケーションの作成

この手順では、XAML マークアップおよびコードを使用して、メインスケジューラアプリケーションを作成します。

1. 新しい WPF アプリケーションを作成します。次に、ソリューションエクスプローラで［参照参照］を右クリックし、リストから［参参

照の追加照の追加］を選択して、次の参照を追加します。

C1.WPF.4.dll

C1.WPF.Schedule.4.dll

C1.WPF.DateTimeEditors.4.dll

2. <Window> タグを使用して、プロジェクトに次の XAML 名前空間を追加します。

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"

<Window> タグは次のようになります。

XAML

<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. <Grid> タグの上部に <Window.Resources> </Window.Resources> タグセットを追加します。

4. <Window.Resources> </Window.Resources> タグの間に次のマークアップを追加して、リソースディクショナリを作

成します。



XAML

<ResourceDictionary> <ResourceDictionary x:Key="{ComponentResourceKey TypeInTargetAssembly={x:Type c1sched:C1Scheduler}, ResourceId=custom_theme}" Source="CustomViews.xaml" /> </ResourceDictionary>

5. <Window.Resources> </Window.Resources> タグの間に次の XAML を挿入して、スケジュールビュー

と C1Scheduler コントロールを作成します。

XAML

<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"> Theme="{DynamicResource {ComponentResourceKey TypeInTargetAssembly=c1sched:C1Scheduler, ResourceId=custom_theme}}"> <c1sched:C1Scheduler.Settings> <c1sched:C1SchedulerSettings FirstVisibleTime="7:00:00" /> </c1sched:C1Scheduler.Settings> </c1sched:C1Scheduler> </Grid>

この手順では、リソースディクショナリを呼び出すマークアップを作成し、カスタムスケジューラビューを作成しました。次の手順

では、連絡先を追加し、指定された日の VisualIntervalCollection を返すコードをプロジェクトに追加します。

手順２：アプリケーションへのコードの追加手順２：アプリケーションへのコードの追加

この手順では、アプリケーションにコードを追加して、連絡先の追加を処理し、指定された日の VisualIntervalCollection を返すように制御します。

1. MainPage.xaml を右クリックし、リストから［コードの表示コードの表示］を選択します。

2. 次の名前空間をアプリケーションに追加します。

Visual Basic

Imports C1.C1ScheduleImports C1.WPF.ScheduleImports C1.WPFImports System.Collections

C#

using C1.C1Schedule;using C1.WPF.Schedule;using C1.WPF;using System.Collections;

3. InitializeComponent() メソッドのすぐ下に、次のコードを挿入します。

Visual Basic

' 連絡先を追加します

Dim cnt As New Contact() cnt.Text = "Andy Garcia"



c1Scheduler1.DataStorage.ContactStorage.Contacts.Add(cnt) cnt = New Contact() cnt.Text = "Nancy Drew" c1Scheduler1.DataStorage.ContactStorage.Contacts.Add(cnt) cnt = New Contact() cnt.Text = "Robert Clark" c1Scheduler1.DataStorage.ContactStorage.Contacts.Add(cnt) cnt = New Contact() cnt.Text = "James Doe" c1Scheduler1.DataStorage.ContactStorage.Contacts.Add(cnt) c1Scheduler1.GroupBy = "Contact"

C#

// 連絡先を追加します

Contact cnt = new Contact(); cnt.Text = "Andy Garcia"; c1Scheduler1.DataStorage.ContactStorage.Contacts.Add(cnt); cnt = new Contact(); cnt.Text = "Nancy Drew"; c1Scheduler1.DataStorage.ContactStorage.Contacts.Add(cnt); cnt = new Contact(); cnt.Text = "Robert Clark"; c1Scheduler1.DataStorage.ContactStorage.Contacts.Add(cnt); cnt = new Contact(); cnt.Text = "James Doe"; c1Scheduler1.DataStorage.ContactStorage.Contacts.Add(cnt); c1Scheduler1.GroupBy = "Contact";

4. 次のコードは、指定された日の VisualIntervalCollection と SchedulerGroup を返します。

Visual Basic

''' <summary> ''' 指定された日の VisualIntervalCollection と、指定された SchedulerGroup を返します。こ

れは、VisualIntervalsPresenter ''' コントロールの ItemsSource として使用されます。

''' </summary> ''' <remarks> ''' コンバータパラメータが "Self" の場合は、全日領域を表すための ItemsSource として使用され

る、１つの VisualIntervalGroup から成るリストを返します。

''' その他の場合は、１日のタイムスロットを含む VisualItervalCollection を返します。

''' </remarks> Public Class GroupItemToVisualIntervalsConverter Implements IValueConverter Public Shared [Default] As New GroupItemToVisualIntervalsConverter() #Region "IValueConverter Members" Public Function Convert(ByVal value As Object, ByVal targetType As Type, ByVal parameter As Object, ByVal culture As System.Globalization.CultureInfo) As Object Implements IValueConverter.Convert Dim el As FrameworkElement = TryCast(value, FrameworkElement) If el IsNot Nothing Then Dim group As SchedulerGroupItem = TryCast(el.DataContext, SchedulerGroupItem)



Dim index As Integer = -1 If group IsNot Nothing Then Dim itm As ItemsControl = TryCast(VTreeHelper.GetParentOfType(el, GetType(ItemsControl)), ItemsControl) If itm IsNot Nothing Then Dim data As Object = itm.DataContext Dim itmParent As ItemsControl = TryCast(VTreeHelper.GetParentOfType(itm, GetType(ItemsControl)), ItemsControl) If itmParent IsNot Nothing Then index = itmParent.Items.IndexOf(data) Dim visualIntervalGroup As VisualIntervalGroup = TryCast(group.VisualIntervalGroups(index), VisualIntervalGroup) Dim param As String = CStr(parameter) If param.ToLower() = "self" Then ' １つの VisualIntervalGroup から成るリス

トを作成します

' (これを ItemsSource として使用する必要が

あります) Dim list As New List(Of Object)() list.Add(visualIntervalGroup) Return list Else Return visualIntervalGroup.VisualIntervals End If End If End If End If End If Return Nothing End Function Public Function ConvertBack(ByVal value As Object, ByVal targetType As Type, ByVal parameter As Object, ByVal culture As System.Globalization.CultureInfo) As Object Implements IValueConverter.ConvertBack Throw New NotImplementedException() End Function #End Region End ClassEnd Namespace

C#

/// <summary> /// 指定された日の VisualIntervalCollection と、指定された SchedulerGroup を返します。

これは、VisualIntervalsPresenter /// コントロールの ItemsSource として使用されます。

/// </summary> /// <remarks> /// コンバータパラメータが "Self" の場合は、全日領域を表すための ItemsSource として使用され

る、１つの VisualIntervalGroup から成るリストを返します。

/// その他の場合は、１日のタイムスロットを含む VisualItervalCollection を返します。

/// </remarks>



public class GroupItemToVisualIntervalsConverter : IValueConverter { public static GroupItemToVisualIntervalsConverter Default = new GroupItemToVisualIntervalsConverter(); #region IValueConverter Members public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { FrameworkElement el = value as FrameworkElement; if (el != null) { SchedulerGroupItem group = el.DataContext as SchedulerGroupItem; int index = -1; if (group != null) { ItemsControl itm = VTreeHelper.GetParentOfType(el, typeof(ItemsControl)) as ItemsControl; if (itm != null) { object data = itm.DataContext; ItemsControl itmParent = VTreeHelper.GetParentOfType(itm, typeof(ItemsControl)) as ItemsControl; if (itmParent != null) { index = itmParent.Items.IndexOf(data); VisualIntervalGroup visualIntervalGroup = group.VisualIntervalGroups[index] as VisualIntervalGroup; string param = (string)parameter; if (param.ToLower() == "self") { // １つの VisualIntervalGroup から成るリストを作成します

// (これを ItemsSource として使用する必要があります) List<object> list = new List<object>(); list.Add(visualIntervalGroup); return list; } else { return visualIntervalGroup.VisualIntervals; } } } } } return null; } public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { throw new NotImplementedException(); } #endregion



}}

この手順では、連絡先を作成し、指定された日の VisualIntervalCollections を返すコードを追加しました。次の手順では、リ

ソースディクショナリを作成します。

手順３：リソースディクショナリの作成手順３：リソースディクショナリの作成

この手順では、アプリケーションのリソースディクショナリを作成します。

1. リソースディクショナリを作成します。それには、アプリケーション名を右クリックし、リストから［追加追加］→［新しい項目新しい項目］を選択します。

2. インストール済みテンプレートのリストから［リソースディクショナリリソースディクショナリ］を選択し、CustomViews.xaml という名前を付けます。［OK］をクリック

します。

3. ページ内のマークアップを次の名前空間宣言で置き換えます。

XAML

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:c1="clr-namespace:C1.WPF;assembly=C1.WPF" xmlns:c1sched="clr-namespace:C1.WPF.Schedule;assembly=C1.WPF.Schedule" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:CustomGroupingView" xmlns:PresentationOptions="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"></ResourceDictionary>

4. 名前空間宣言の後に次の XAML を挿入します。

XAML

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

5. 次の XAML マークアップを使用して、データテンプレートを作成します。

XAML

 <DataTemplate x:Key="GroupHeaderTemplate"> <Grid SnapsToDevicePixels="True"> <c1:C1BrushBuilder x:Name="Background"> <c1:C1BrushBuilder x:Name="BorderBrush"> <Border VerticalAlignment="Stretch" HorizontalAlignment="Stretch" BorderThickness="0,0,1,0" BorderBrush="{Binding Output, ElementName=BorderBrush}" Background="{Binding Output, ElementName=Background}"> <TextBlock Foreground="{Binding Path=Scheduler.Foreground}" Margin="0" TextWrapping="Wrap" Text="{Binding DisplayName}" VerticalAlignment="Center" HorizontalAlignment="Center"/> </Border> </Grid> </DataTemplate>

6. データテンプレートの下に次の XAML を挿入して、１日ビューの日付グループのスタイルを決定します。

XAML



 <Style TargetType="ItemsControl" x:Key="DayGroup_Style"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="ItemsControl"> <Grid> <c1:C1BrushBuilder x:Name="BorderBrush"> Input="{Binding Path=DataContext.Scheduler.Background, RelativeSource={RelativeSource TemplatedParent}}"/> <Border BorderThickness="1,0,0,0" x:Name="border" BorderBrush="{Binding ElementName=BorderBrush, Path=Output}"> <ItemsPresenter /> </Border> </Grid> <ControlTemplate.Triggers> <DataTrigger Binding="{Binding Path=StartTime, Mode=OneTime, Converter={x:Static c1sched:IsTodayConverter.Default}}" Value="True"> <Setter TargetName="border" Property="BorderBrush" Value="{Binding Path=DataContext.Scheduler.TodayBackground, RelativeSource={RelativeSource TemplatedParent}}" /> <Setter TargetName="border" Property="BorderThickness" Value="2,0,1,0" /> </DataTrigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style>

7. 以下の XAML は、１日ビューに個別のタイムスロットを表示するために使用されるスタイルを作成します。

XAML

 <c1sched:TimeSlotStyleSelector x:Key="TimeSlotStyleSelector">  <c1sched:TimeSlotStyleSelector.Resources> <ResourceDictionary> <Style x:Key="C1Scheduler_WorkSlot_Style" TargetType="c1sched:VisualIntervalPresenter"> <Setter Property="BorderBrush" Value="{StaticResource C1Scheduler_WorkHourLightBorder_Brush}" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="c1sched:VisualIntervalPresenter"> <Grid> <c1:C1BrushBuilder x:Name="BorderBrush"> Input="{Binding Path=Scheduler.Background}"/> <Border BorderThickness="0,0,1,0" x:Name="border" IsHitTestVisible="False" BorderBrush="{Binding ElementName=BorderBrush, Path=Output}"> <Border Background="{Binding Path=Scheduler.AlternatingBackground}" BorderThickness="0,1,0,0" BorderBrush="{TemplateBinding BorderBrush}"> <Border Background="{Binding Tag, RelativeSource={RelativeSource AncestorType={x:Type c1sched:VisualIntervalsPresenter}}}" Visibility="{Binding IsSelected, Converter={x:Static c1sched:BooleanToVisibilityConverter.Default}}"/>



</Border> </Border> <ContentPresenter Content="{TemplateBinding Content}" Margin="0,1,1,0" ContentTemplate="{TemplateBinding ContentTemplate}" /> </Grid> <ControlTemplate.Triggers> <DataTrigger Binding="{Binding Path=StartTime, Mode=OneTime, Converter={x:Static c1sched:IsTodayConverter.Default}}" Value="True"> <Setter TargetName="border" Property="BorderBrush" Value="{Binding Path=Scheduler.TodayBackground}" /> </DataTrigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> <Style x:Key="C1Scheduler_TopWorkSlot_Style" BasedOn="{StaticResource C1Scheduler_WorkSlot_Style}" TargetType="c1sched:VisualIntervalPresenter"> <Setter Property="BorderBrush" Value="{StaticResource C1Scheduler_WorkHourBorder_Brush}" /> </Style> <Style x:Key="C1Scheduler_FreeSlot_Style" TargetType="c1sched:VisualIntervalPresenter"> <Setter Property="BorderBrush" Value="{StaticResource C1Scheduler_FreeHourLightBorder_Brush}" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="c1sched:VisualIntervalPresenter"> <Grid> <c1:C1BrushBuilder x:Name="BorderBrush"> Input="{Binding Path=Scheduler.Background}"/> <Border BorderThickness="0,0,1,0" x:Name="border" IsHitTestVisible="False" BorderBrush="{Binding ElementName=BorderBrush, Path=Output}"> <Border Background="{StaticResource C1Scheduler_FreeHour_Brush}" BorderThickness="0,1,0,0" BorderBrush="{TemplateBinding BorderBrush}"> <Border Background="{Binding Tag, RelativeSource={RelativeSource AncestorType={x:Type c1sched:VisualIntervalsPresenter}}}" Visibility="{Binding IsSelected, Converter={x:Static c1sched:BooleanToVisibilityConverter.Default}}"/> </Border> </Border> <ContentPresenter Content="{TemplateBinding Content}" Margin="0,1,1,0" ContentTemplate="{TemplateBinding ContentTemplate}" /> </Grid> <ControlTemplate.Triggers> <DataTrigger Binding="{Binding Path=StartTime, Mode=OneTime, Converter={x:Static c1sched:IsTodayConverter.Default}}" Value="True"> <Setter TargetName="border" Property="BorderBrush" Value="{Binding Path=Scheduler.TodayBackground}" />



</DataTrigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> <Style x:Key="C1Scheduler_TopFreeSlot_Style" BasedOn="{StaticResource C1Scheduler_FreeSlot_Style}" TargetType="c1sched:VisualIntervalPresenter"> <Setter Property="BorderBrush" Value="{StaticResource C1Scheduler_FreeHourBorder_Brush}" /> </Style> </ResourceDictionary> </c1sched:TimeSlotStyleSelector.Resources> </c1sched:TimeSlotStyleSelector>

8. １日ビューに全日領域を表示するために使用されるスタイルを決定します。

XAML

 <Style x:Key="C1Scheduler_AllDayInterval_Style" TargetType="c1sched:VisualIntervalPresenter"> <Setter Property="BorderThickness" Value="0,1,0,2" /> <Setter Property="SnapsToDevicePixels" Value="True"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="c1sched:VisualIntervalPresenter"> <Grid> <c1:C1BrushBuilder x:Name="BackgroundBrush"> Input="{Binding Path=OwnerGroup.Background}"/> <c1:C1BrushBuilder x:Name="SelectedBrush"> Input="{Binding Path=OwnerGroup.Background}"/> <c1:C1BrushBuilder x:Name="BorderBrush"> Input="{Binding Path=Scheduler.Background}"/> <Border x:Name="AllDayBorder" IsHitTestVisible="False" Background="{Binding ElementName=BackgroundBrush, Path=Output}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{Binding Tag, RelativeSource={RelativeSource AncestorType={x:Type c1sched:VisualIntervalsPresenter}}}"> <Border x:Name="AllDayBorder1" BorderThickness="0,0,1,0" BorderBrush="{Binding Path=Output, ElementName=BorderBrush}"> <Border Background="{Binding ElementName=SelectedBrush, Path=Output}" Visibility="{Binding IsSelected, Converter={x:Static c1sched:BooleanToVisibilityConverter.Default}}"/> </Border> </Border> <Border Background="{Binding Path=VisualIntervals[0].StatusBrush}" Opacity="0.2" Margin="{Binding BorderThickness, ElementName=AllDayBorder}" c1sched:CoverElementsPane.Orientation="Horizontal" c1sched:CoverElementsPane.PaneName="allDayPane" /> </Grid> <ControlTemplate.Triggers> <DataTrigger Binding="{Binding Path=StartTime, Mode=OneTime, Converter={x:Static c1sched:IsTodayConverter.Default}}" Value="True"> <Setter TargetName="AllDayBorder" Property="BorderBrush" Value="{Binding Path=Scheduler.TodayBackground}" /> <Setter TargetName="AllDayBorder1" Property="BorderBrush" Value="



{Binding Path=Scheduler.TodayBackground}" /> </DataTrigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style>

9. 次/前の予定ペインのスタイルを定義します。

XAML

 <Style x:Key="PrevNextAppPane_Style" TargetType="ContentControl"> <Setter Property="Focusable" Value="False" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="ContentControl"> <Grid x:Name="nextPrevAppGrid" SnapsToDevicePixels="True"> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition Height="Auto" /> <RowDefinition /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <c1:C1BrushBuilder x:Name="BackgroundBrush"> <c1:C1BrushBuilder x:Name="BorderBrush"> <c1:C1BrushBuilder x:Name="MouseOverBrush"> <Button Grid.Row="1" Grid.Column="0" Content="{Binding PreviousAppointmentText}" CommandTarget="{Binding DataContext, RelativeSource={RelativeSource TemplatedParent}}" Command="c1sched:C1Scheduler.NavigateToPreviousAppointmentCommand" Foreground="{Binding DataContext.Foreground, RelativeSource={RelativeSource TemplatedParent}}" Background="{Binding Output, ElementName=BackgroundBrush}" BorderBrush="{Binding Output, ElementName=BorderBrush}" Tag="{Binding Output, ElementName=MouseOverBrush}" > <Button.LayoutTransform> <RotateTransform Angle="-90" /> </Button.LayoutTransform> </Button> <Button Grid.Row="1" Grid.Column="2" Content="{Binding NextAppointmentText}" CommandTarget="{Binding DataContext, RelativeSource={RelativeSource TemplatedParent}}" Command="c1sched:C1Scheduler.NavigateToNextAppointmentCommand" Foreground="{Binding DataContext.Foreground, RelativeSource={RelativeSource TemplatedParent}}" Background="{Binding Output, ElementName=BackgroundBrush}" BorderBrush="{Binding Output, ElementName=BorderBrush}" Tag="{Binding Output, ElementName=MouseOverBrush}"



> <Button.LayoutTransform> <RotateTransform Angle="-90" /> </Button.LayoutTransform> </Button>  </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style>

10. 次の XAML は、アプリケーションがリソースディクショナリから取得するように設定します。

XAML

 <Style x:Key="{ComponentResourceKey TypeInTargetAssembly={x:Type c1sched:C1Scheduler}, ResourceId=OneDayStyle}" TargetType="c1sched:C1Scheduler" BasedOn="{StaticResource BaseViewStyle}"> <Style.Resources> <Style TargetType="{x:Type ListBoxItem}"> <Setter Property="ListBoxItem.Padding" Value="0" /> </Style> </Style.Resources> <Setter Property="c1sched:C1Scheduler.VisualIntervalScale" Value="00:30:00" /> <Setter Property="ShowWorkTimeOnly" Value="false" /> <Setter Property="c1sched:C1Scheduler.Template"> <Setter.Value> <ControlTemplate TargetType="c1sched:C1Scheduler"> <Border Background="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ControlBackground}" BorderBrush="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=BorderBrush}" BorderThickness="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=BorderThickness}"> <DockPanel SnapsToDevicePixels="True">  <Grid DockPanel.Dock="Top" > <Grid.ColumnDefinitions> <ColumnDefinition Width="57" /> <ColumnDefinition /> <ColumnDefinition Width="17"/> </Grid.ColumnDefinitions>  <ItemsControl Height="0" ItemsSource="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=VisibleGroupItems}"> <ItemsControl.ItemTemplate> <DataTemplate> <c1sched:C1SchedulerPresenter /> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl> <c1:C1BrushBuilder x:Name="DayHeaderBorderBrush" Style="{StaticResource C1Scheduler_Border_Style}" Input="{Binding Path=Scheduler.Background}"/> <ItemsControl Grid.Column="1" Tag="{Binding Output, ElementName=DayHeaderBorderBrush}"



ItemsSource="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=VisibleGroupItems[0].VisualIntervalGroups}"> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <UniformGrid Rows="1" /> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> <ItemsControl.ItemTemplate> <DataTemplate> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <Button x:Name="dayHeaderButton" Grid.Row="0" MinHeight="25" Padding="0,2,0,2" Content="{Binding Converter={x:Static c1sched:VisualIntervalToStringConverter.Default}, ConverterParameter=DayViewDayHeaderFormat}" > CommandParameter="{Binding Path=Scheduler.OneDayStyle}" Command="c1sched:C1Scheduler.ChangeStyleCommand"/> <ItemsControl x:Name="GroupHeaderList" Grid.Row="1" HorizontalAlignment="Stretch" Focusable="False" Style="{StaticResource DayGroup_Style}" Visibility="{Binding Path=Scheduler.IsGrouped, Converter={x:Static c1sched:BooleanToVisibilityConverter.Default}}" ItemsSource="{Binding Path=Scheduler.VisibleGroupItems}" Background="{Binding Path=OwnerGroup.Background}"> <ItemsControl.ItemTemplate> <DataTemplate>  <ContentControl MinHeight="25" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" ContentTemplate="{Binding Scheduler.GroupHeaderTemplate}" Content="{Binding}"/> </DataTemplate> </ItemsControl.ItemTemplate> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <UniformGrid Rows="1" /> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> </ItemsControl> </Grid> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl> <Border Grid.Column="2" /> </Grid>  <ScrollViewer DockPanel.Dock="Top" Height="54" BorderThickness="0" Padding="0"



Focusable="False" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Visible"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="57" /> <ColumnDefinition /> </Grid.ColumnDefinitions> <ItemsControl Grid.Column="1" ItemsSource="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=VisibleGroupItems[0].VisualIntervalGroups}"> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <UniformGrid Rows="1" /> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> <ItemsControl.ItemTemplate> <DataTemplate> <Grid> <ItemsControl ItemsSource="{Binding Path=Scheduler.VisibleGroupItems}" Style="{StaticResource DayGroup_Style}"> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <UniformGrid Rows="1"/> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> <ItemsControl.ItemTemplate> <DataTemplate> <Grid> <c1:C1BrushBuilder x:Name="AllDayBorderBrush" Style="{StaticResource C1Scheduler_Border_Style}" Input="{Binding Background}"/> <c1sched:VisualIntervalGroupsPresenter HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Tag="{Binding Output, ElementName=AllDayBorderBrush}" Background="{Binding Background}" ItemsSource="{Binding RelativeSource={RelativeSource Self}, Converter={x:Static local:GroupItemToVisualIntervalsConverter.Default}, ConverterParameter=Self}" ItemContainerStyle="{DynamicResource C1Scheduler_AllDayInterval_Style}"> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <UniformGrid Rows="1"/>



</ItemsPanelTemplate> </ItemsControl.ItemsPanel> </c1sched:VisualIntervalGroupsPresenter> <c1sched:AppointmentsCoverPane x:Name="allDayPane" Owner="{Binding Owner}" UseSimpleLayout="false" c1sched:AppointmentsCoverPane.AppointmentFilter="Event" IsDragDropDisabled="{Binding Path=Scheduler.IsDragDropDisabled}" ExtendOnOverflow="True" CoverElementsMargin="10"> <c1sched:AppointmentsCoverPane.Resources> <ResourceDictionary> <Thickness x:Key="TimeBorderThickness">0</Thickness> </ResourceDictionary> </c1sched:AppointmentsCoverPane.Resources> </c1sched:AppointmentsCoverPane> </Grid> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl> </Grid> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl> </Grid> </ScrollViewer>  <ScrollViewer x:Name="scrollViewer" BorderThickness="0" Padding="0" Focusable="False" MaxHeight="100000" VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Disabled"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="57" /> <ColumnDefinition /> </Grid.ColumnDefinitions> <ItemsControl Grid.Column="0" x:Name="HourMarkersList" ItemsSource="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=VisibleGroupItems[0].VisualIntervalGroups[0].VisualIntervals}" ItemTemplate="{DynamicResource C1Scheduler_TimeRuler_Template}"> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <UniformGrid Columns="1" /> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> </ItemsControl>



<ItemsControl Grid.Column="1" ItemsSource="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=VisibleGroupItems[0].VisualIntervalGroups}"> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <UniformGrid Rows="1" /> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> <ItemsControl.ItemTemplate> <DataTemplate> <Grid> <ItemsControl ItemsSource="{Binding Path=Scheduler.VisibleGroupItems}"> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <UniformGrid Rows="1"/> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> <ItemsControl.ItemTemplate> <DataTemplate> <Grid> <c1:C1BrushBuilder x:Name="selectedBackground" Style="{DynamicResource C1Scheduler_TimeSlotSelected_BrushStyle}" Input="{Binding Background}"/> <c1sched:VisualIntervalsPresenter x:Name="presenter" ItemContainerStyleSelector="{DynamicResource TimeSlotStyleSelector}" ItemsSource="{Binding RelativeSource={RelativeSource Self}, Converter={x:Static local:GroupItemToVisualIntervalsConverter.Default}, ConverterParameter=VisualIntervals}" ItemTemplate="{Binding Path=Scheduler.VisualIntervalTemplate}" Background="{Binding Background}" Tag="{Binding Output, ElementName=selectedBackground}"> <c1sched:VisualIntervalsPresenter.ItemsPanel> <ItemsPanelTemplate> <UniformGrid Columns="1"/> </ItemsPanelTemplate> </c1sched:VisualIntervalsPresenter.ItemsPanel> </c1sched:VisualIntervalsPresenter> <c1sched:AppointmentsCoverPane x:Name="appPane" Owner="{Binding Owner}" UseSimpleLayout="false" SizingType="Proportional"



c1sched:AppointmentsCoverPane.AppointmentFilter="Appointment" IsDragDropDisabled="{Binding Path=Scheduler.IsDragDropDisabled}" CoverElementsMargin="10"> <c1sched:AppointmentsCoverPane.Resources> <ResourceDictionary> <Thickness x:Key="TimeBorderThickness">5,0,0,0</Thickness> </ResourceDictionary> </c1sched:AppointmentsCoverPane.Resources> </c1sched:AppointmentsCoverPane> </Grid> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl> </Grid> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl>  <Canvas Grid.Column="1" x:Name="cnv" > <ContentControl Canvas.Left="0" Canvas.Top="{Binding VerticalOffset, ElementName=scrollViewer}" DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}" Width="{Binding ActualWidth, ElementName=cnv}" Height="{Binding ViewportHeight, ElementName=scrollViewer}" Background="{Binding Background, RelativeSource={RelativeSource TemplatedParent}}" > Visibility="{Binding HasVisibleAppointments, RelativeSource={RelativeSource TemplatedParent}, Converter={x:Static c1sched:BooleanToVisibilityConverter.Default}, ConverterParameter=Invert}"/> </Canvas> </Grid> </ScrollViewer> </DockPanel> </Border> </ControlTemplate> </Setter.Value> </Setter> <Setter Property="c1sched:C1Scheduler.VisualIntervalGroupDescriptions"> <Setter.Value> <c1sched:IntervalGroupDescriptionCollection> <c1sched:VisualIntervalGroupDescription PropertyName="StartTime.Day" /> </c1sched:IntervalGroupDescriptionCollection> </Setter.Value> </Setter> <Setter Property="c1sched:C1Scheduler.VisualIntervalPanel">



<Setter.Value> <ItemsPanelTemplate> <UniformGrid Columns="1" /> </ItemsPanelTemplate> </Setter.Value> </Setter> <Setter Property="c1sched:C1Scheduler.VisualTimeSpan" Value="1" /> <Setter Property="c1sched:C1Scheduler.VisualIntervalTemplate"> <Setter.Value> <DataTemplate DataType="{x:Type c1sched:VisualInterval}">  <Border Background="{Binding Path=StatusBrush}" Opacity="0.2" c1sched:CoverElementsPane.Orientation="Vertical" c1sched:CoverElementsPane.PaneName="appPane" MinHeight="20"/> </DataTemplate> </Setter.Value> </Setter> </Style> <Style x:Key="{ComponentResourceKey TypeInTargetAssembly={x:Type c1sched:C1Scheduler}, ResourceId=WeekStyle}" TargetType="c1sched:C1Scheduler" BasedOn="{StaticResource {ComponentResourceKey TypeInTargetAssembly={x:Type c1sched:C1Scheduler}, ResourceId=OneDayStyle}}"> <Setter Property="VisualTimeSpan" Value="7" /> </Style> <Style x:Key="{ComponentResourceKey TypeInTargetAssembly={x:Type c1sched:C1Scheduler}, ResourceId=WorkingWeekStyle}" TargetType="c1sched:C1Scheduler" BasedOn="{StaticResource {ComponentResourceKey TypeInTargetAssembly={x:Type c1sched:C1Scheduler}, ResourceId= OneDayStyle}}"> <Setter Property="VisualTimeSpan" Value="7" /> </Style></ResourceDictionary>

この手順では、アプリケーションのリソースディクショナリを作成しました。次の手順では、このアプリケーションを完成させます。

手順４：アプリケーションの完成手順４：アプリケーションの完成

この手順では、作成したアプリケーションを実行します。

1. ［F5］キーを押してアプリケーションを実行します。次の図のようになります



各ページに表示する連絡先の数を選択できます。また、ページの左側にある C1Calendar コントロールから、表示する日付を

選択できます。さらに、ページ上部にある矢印を使用して、連絡先のページを移動できます。

ここまでの成果ここまでの成果

C1Scheduler コントロールとカスタムのスケジュールビューを作成しました。アプリケーションのカスタムリソースディクショナリ

も作成しました。

複数ユーザースケジュールの作成複数ユーザースケジュールの作成

このチュートリアルでは、複数ユーザーのスケジュールを表示できるアプリケーションを作成します。インターフェイスの作成に

は、XAML マークアップとコードを使用します。また、データサービスと２つのコードファイルをアプリケーションのリソースとして

追加します。


この手順では、新しい WPF アプリケーションを作成し、適切な参照と名前空間を追加して、２つのコードファイルとデータサー

ビスをアプリケーションに追加します。


1. Visual Studio で新しい WPF アプリケーションを作成し、「MultiUser」という名前を付けます。

2. アプリケーションに次の参照を追加します。それには、ソリューションエクスプローラで［参照］フォルダを右クリックし、リ

ストから［参照の追加参照の追加］を選択します。参照先があるフォルダに移動し、次のアセンブリを選択します。

C1.WPF.4.dll

C1.WPF.DateTimeEditors.4.dll

C1.WPF.Schedule.4.dll



3. MultiUser.Web プロジェクトを右クリックし、リストから［追加追加］→［既存の項目既存の項目］を選択します。アプリケーションに適用

する SmartData ファイル（SmartData.cs ファイルまたは SmartData.vb ファイル）、およびアプリケーションに適用す

る PlatformUriTranslator ファイル（PlatformUriTranslator.cs ファイルまたは PlatformUriTranslator.vb ファイ

ル）を追加します。

4. アプリケーション名を右クリックし、リストから［既存の項目の追加既存の項目の追加］を選択します。Nwind.mdb データベースを見つけ

て選択し、［追加追加］をクリックします。データソース構成ウィザードデータソース構成ウィザードが開きます。［次へ次へ］をクリックします。

5. リストから［テーブルテーブル］を選択し、［完了完了］をクリックします。これで、アプリケーションにデータベースと

NwindDataSet.xsd ファイルが追加されます。

6. 次の名前空間を MainWindow.xaml ファイルに追加します。

xmlns:local="clr-namespace:MultiUser"

xmlns:c1="clr-namespace:C1.WPF;assembly=C1.WPF.Schedule"

xmlns:c1sched="clr-namespace:C1.WPF.Schedule;assembly=C1.WPF.Schedule

この手順では、新しい WPF アプリケーションを作成し、適切なアセンブリ参照を追加し、データベースを追加し、アプリケーショ

ンに適切な名前空間を追加しました。次の手順では、MultiUser アプリケーションに XAML を追加します。

手順２：リソースと手順２：リソースと C1Scheduler コントロールの作成コントロールの作成

この手順では、アプリケーションのリソースとデータ連結を作成します。また、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="|<<" 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="<" 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=">" 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=">>|" 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"/>  <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"/>  <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 コント

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

ます。

手順３：アプリケーションへのコードの追加手順３：アプリケーションへのコードの追加

この手順では、アプリケーションのコードを追加します。

1. アプリケーションを右クリックし、リストから［コードの表示コードの表示］を選択します。

2. 次の名前空間をインポートします。

Visual Basic

Imports C1.WPF.ScheduleImports C1.C1ScheduleImports System.ComponentModelImports System.Collections.Specialized

C#

using C1.WPF.Schedule;using System.Collections.Specialized;using C1.C1Schedule;

3. public MainWindow() メソッドの上に、次の Region を挿入します。

Visual Basic

#Region "** fields"Private appointmentsTableAdapter As MultiUser.NwindDataSetTableAdapters.AppointmentsTableAdapter = New NwindDataSetTableAdapters.AppointmentsTableAdapter()Private employeesTableAdapter As MultiUser.NwindDataSetTableAdapters.EmployeesTableAdapter = New NwindDataSetTableAdapters.EmployeesTableAdapter()Private customersTableAdapter As MultiUser.NwindDataSetTableAdapters.CustomersTableAdapter = New NwindDataSetTableAdapters.CustomersTableAdapter()Private dataSet As New NwindDataSet()#End Region

C#

#region ** fieldsprivate MultiUserCS2.NwindDataSetTableAdapters.AppointmentsTableAdapter appointmentsTableAdapter = new NwindDataSetTableAdapters.AppointmentsTableAdapter();private MultiUserCS2.NwindDataSetTableAdapters.EmployeesTableAdapter employeesTableAdapter = new NwindDataSetTableAdapters.EmployeesTableAdapter();private MultiUserCS2.NwindDataSetTableAdapters.CustomersTableAdapter customersTableAdapter = new NwindDataSetTableAdapters.CustomersTableAdapter();private NwindDataSet dataSet = new NwindDataSet();#endregion

4. InitializeComponent() メソッドのすぐ下に、次のハンドラと呼び出しを追加して、データベースからデータを取得しま



す。

Visual Basic

AddHandler Scheduler.ReminderFire, AddressOf scheduler_ReminderFire AddHandler Scheduler.GroupItems.CollectionChanged, AddressOf GroupItems_CollectionChanged ' データベースからデータを取得します

Me.employeesTableAdapter.Fill(dataSet.Employees) Me.customersTableAdapter.Fill(dataSet.Customers) Me.appointmentsTableAdapter.Fill(dataSet.Appointments)

C#

Scheduler.ReminderFire += new EventHandler<ReminderActionEventArgs>(scheduler_ReminderFire); Scheduler.GroupItems.CollectionChanged += new NotifyCollectionChangedEventHandler(GroupItems_CollectionChanged); // データベースからデータを取得します

this.employeesTableAdapter.Fill(dataSet.Employees); this.customersTableAdapter.Fill(dataSet.Customers); this.appointmentsTableAdapter.Fill(dataSet.Appointments);

5. AppointmentStorage のマッピングと DataSource を設定します。

Visual Basic

Dim storage As AppointmentStorage = Scheduler.DataStorage.AppointmentStorage storage.Mappings.AppointmentProperties.MappingName = "Properties" storage.Mappings.Body.MappingName = "Description" storage.Mappings.End.MappingName = "End" storage.Mappings.IdMapping.MappingName = "AppointmentId" storage.Mappings.Location.MappingName = "Location" storage.Mappings.Start.MappingName = "Start" storage.Mappings.Subject.MappingName = "Subject" storage.Mappings.OwnerIndexMapping.MappingName = "Owner" storage.DataSource = dataSet.Appointments

C#

AppointmentStorage storage = Scheduler.DataStorage.AppointmentStorage; storage.Mappings.AppointmentProperties.MappingName = "Properties"; storage.Mappings.Body.MappingName = "Description"; storage.Mappings.End.MappingName = "End"; storage.Mappings.IdMapping.MappingName = "AppointmentId"; storage.Mappings.Location.MappingName = "Location"; storage.Mappings.Start.MappingName = "Start"; storage.Mappings.Subject.MappingName = "Subject"; storage.Mappings.OwnerIndexMapping.MappingName = "Owner"; storage.DataSource = dataSet.Appointments;

6. OwnerStorage のマッピングと DataSource を設定します。

Visual Basic

Dim ownerStorage As ContactStorage = Scheduler.DataStorage.OwnerStorage



AddHandler(CType(ownerStorage.Contacts, INotifyCollectionChanged)).CollectionChanged, AddressOf Owners_CollectionChanged ownerStorage.Mappings.IndexMapping.MappingName = "EmployeeId" ownerStorage.Mappings.TextMapping.MappingName = "FirstName" ownerStorage.DataSource = dataSet.Employees

C#

ContactStorage ownerStorage = Scheduler.DataStorage.OwnerStorage; ((INotifyCollectionChanged)ownerStorage.Contacts).CollectionChanged += new NotifyCollectionChangedEventHandler(Owners_CollectionChanged); ownerStorage.Mappings.IndexMapping.MappingName = "EmployeeId"; ownerStorage.Mappings.TextMapping.MappingName = "FirstName"; ownerStorage.DataSource = dataSet.Employees;

7. ContactStorage のマッピングと DataSource を設定します。

Visual Basic

Dim cntStorage As ContactStorage = Scheduler.DataStorage.ContactStorage AddHandler(CType(cntStorage.Contacts, INotifyCollectionChanged)).CollectionChanged, AddressOf Contacts_CollectionChanged cntStorage.Mappings.IdMapping.MappingName = "CustomerId" cntStorage.Mappings.TextMapping.MappingName = "CompanyName" cntStorage.DataSource = dataSet.Customers btnDay.IsChecked = True AddHandler Scheduler.StyleChanged, AddressOf Scheduler_StyleChanged

C#

// ContactStorage のマッピングとデータソースを設定します

ContactStorage cntStorage = Scheduler.DataStorage.ContactStorage;((INotifyCollectionChanged)cntStorage.Contacts).CollectionChanged += new NotifyCollectionChangedEventHandler(Contacts_CollectionChanged); cntStorage.Mappings.IdMapping.MappingName = "CustomerId"; cntStorage.Mappings.TextMapping.MappingName = "CompanyName"; cntStorage.DataSource = dataSet.Customers; btnDay.IsChecked = true; Scheduler.StyleChanged += new System.EventHandler<RoutedEventArgs>(Scheduler_StyleChanged);

手順４：アプリケーションの実行手順４：アプリケーションの実行

この手順ではアプリケーションを実行します。

1. ［F5］キーを押してアプリケーションを実行します。アプリケーションは次の図のように表示されます。

左側のリストボックスに表示されるユーザーを制御できます。また、日付をダブルクリックすることで、任意のユーザー

のスケジュールに予定を追加できます。さらに、アプリケーション上部のボタンを使用して、ビューを制御することもでき

ます。




新しい Silverlight アプリケーションを作成し、コードファイルとデータサービスを追加しました。また、Access データベースをア

プリケーションのリソースとして追加しました。コードと XAML マークアップを使用して、アプリケーションのデザインと機能を作

成および制御しました。



Scheduler for Silverlight チュートリアルチュートリアル

このチュートリアルは、読者が Visual Basic .NET または C# のプログラミングに精通していることを前提としています。ただ

し、Scheduler for Silverlight については、手順を追って説明されており、予備知識は特に必要ありません。このセクションに

示される手順に従って作業を進めるだけで、Scheduler for Silverlight の機能を具体的に示すプロジェクトを作成できます。

チュートリアルプロジェクトを実行し、自分で変更してみてください。

メモ：メモ：このセクションの内容は、ComponentOne for Silverlight にのみ適用されます。ComponentOne for WPF ではア


カスタムデータを使用するカスタムアプリケーションの作成カスタムデータを使用するカスタムアプリケーションの作成

Scheduler for Silverlight を使用すると、各予定に多数のデータフィールドを関連付ける必要があるような状況に対応して、

データモデルをカスタマイズすることができます。各予定にカスタムビジネスオブジェクトをアタッチすることもできます。テキス

トとして保存可能ないくつかのデータフィールドを追加する必要がある場合は、CustomDataプロパティを使用します。Tag プロパティを使用すると、各予定に１つのビジネスオブジェクトを関連付けることができますが、それを予定と共にシリアライズす

ることはできません。このチュートリアルでは、MainPage.xaml ファイル、カスタム予定ダイアログを含むカスタム

EditAppointmentDialog.xaml ファイル、ビジネスオブジェクトクラスを定義する BusinessObjects.cs ファイルまたは

BusinessObjects.vb ファイルの３つの部分で構成されるアプリケーションを作成します。


この手順では、デザインビュー、XAML マークアップ、およびコードを使用して、メインスケジューラアプリケーションを作成しま

す。

1. 新しい Silverlight アプリケーションを作成します。次に、ソリューションエクスプローラで［参照参照］を右クリックし、リストか

ら［参照の追加参照の追加］を選択して、次の参照を追加します。

C1.Silverlight.dll

C1.Silverlight.Schedule.dll

C1.Silverlight.DateTimeEditors.dll

手順２：カスタムデータ構造の定義手順２：カスタムデータ構造の定義

この手順では、ビジネスオブジェクトクラス（BusinessObjects.cs ファイルまたは BusinessObjects.vb ファイル）を定義します。

1. アプリケーション名を右クリックし、［追加追加］→［新しい項目新しい項目］を選択します。インストール済みテンプレートのリストから

［コードファイルコードファイル］を選択します。使用するコードの原語に応じて、新しいコードファイルに BusinessObject.cs または

BusinessObjects.vb という名前を付けます。

2. 次の名前空間をページにインポートします。

Visual Basic

Imports SystemImports System.ComponentModelImports System.Collections.ObjectModel

C#

using System;



using System.ComponentModel;using System.Collections.ObjectModel;

3. 次のコードを追加して、ビジネスオブジェクトクラスを実装します。

Visual Basic

' ビジネスオブジェクトでは、INotifyPropertyChanged インターフェイスを実装する必要があります。

Public Class AppointmentBORow Implements INotifyPropertyChanged Private _subject As String = "" Private _body As String = "" Private _location As String = "" Private _properties As String = "" Private _start As DateTime = DateTime.Today Private _end As DateTime = (DateTime.Today + TimeSpan.FromDays(1)) Private _id As Guid = Guid.NewGuid Private _isDeleted As Boolean = False 'カスタムデータ

Private _BOProperty1 As String = "" Private _BOProperty2 As String = "" Public Sub New() MyBase.New() End Sub Public Property Subject As String Get Return _subject End Get Set(value As String) If (_subject <> value) Then _subject = value OnPropertyChanged("Subject") End If End Set End Property Public Property BOProperty1 As String Get Return _BOProperty1 End Get Set(value As String) If (_BOProperty1 <> value) Then _BOProperty1 = value OnPropertyChanged("BOProperty1") End If End Set End Property Public Property BOProperty2 As String Get Return _BOProperty2 End Get Set(value As String) If (_BOProperty2 <> value) Then _BOProperty2 = value



OnPropertyChanged("BOProperty2") End If End Set End Property Public Property Properties As String Get Return _properties End Get Set(value As String) If (_properties <> value) Then _properties = value OnPropertyChanged("Properties") End If End Set End Property Public Property Start As DateTime Get Return _start End Get Set(value As DateTime) If (_start <> value) Then _start = value OnPropertyChanged("Start") End If End Set End Property Public Property dt As DateTime Get Return _end End Get Set(value As DateTime) If (_end <> value) Then _end = value OnPropertyChanged("End") End If End Set End Property Public Property Body As String Get Return _body End Get Set(value As String) If (_body <> value) Then _body = value OnPropertyChanged("Body") End If End Set End Property Public Property Location As String Get Return _location End Get Set(value As String)



If (_location <> value) Then _location = value OnPropertyChanged("Location") End If End Set End Property Public Property Id As Guid Get Return _id End Get Set(value As Guid) If (_id <> value) Then _id = value OnPropertyChanged("Id") End If End Set End Property Public Property IsDeleted As Boolean Get Return _isDeleted End Get Set(value As Boolean) If (_isDeleted <> value) Then _isDeleted = value OnPropertyChanged("IsDeleted") End If End Set End Property Public Event PropertyChanged As PropertyChangedEventHandler Protected Overridable Sub OnPropertyChanged(ByVal propName As String) If PropertyChangedEvent IsNot Nothing Then RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(propName)) End If End Sub Public Event PropertyChanged1(sender As Object, e As System.ComponentModel.PropertyChangedEventArgs) Implements System.ComponentModel.INotifyPropertyChanged.PropertyChangedEnd Class

C#

// ビジネスオブジェクトでは、INotifyPropertyChanged インターフェイスを実装する必要があります。

public class AppointmentBORow : INotifyPropertyChanged { private string _subject = ""; private string _body = ""; private string _location = ""; private string _properties = ""; private DateTime _start = DateTime.Today; private DateTime _end = DateTime.Today + TimeSpan.FromDays(1); private Guid _id = Guid.NewGuid(); private bool _isDeleted = false;



//カスタムデータ

private string _BOProperty1 = ""; private string _BOProperty2 = ""; public AppointmentBORow() { } public string Subject { get { return _subject; } set { if (_subject != value) { _subject = value; OnPropertyChanged("Subject"); } } } public string BOProperty1 { get { return _BOProperty1; } set { if (_BOProperty1 != value) { _BOProperty1 = value; OnPropertyChanged("BOProperty1"); } } } public string BOProperty2 { get { return _BOProperty2; } set { if (_BOProperty2 != value) { _BOProperty2 = value; OnPropertyChanged("BOProperty2"); } } } public string Properties { get { return _properties; } set { if (_properties != value) { _properties = value; OnPropertyChanged("Properties"); } }



} public DateTime Start { get { return _start; } set { if (_start != value) { _start = value; OnPropertyChanged("Start"); } } } public DateTime End { get { return _end; } set { if (_end != value) { _end = value; OnPropertyChanged("End"); } } } public string Body { get { return _body; } set { if (_body != value) { _body = value; OnPropertyChanged("Body"); } } } public string Location { get { return _location; } set { if (_location != value) { _location = value; OnPropertyChanged("Location"); } } } public Guid Id { get { return _id; }



set { if (_id != value) { _id = value; OnPropertyChanged("Id"); } } } public bool IsDeleted { get { return _isDeleted; } set { if (_isDeleted != value) { _isDeleted = value; OnPropertyChanged("IsDeleted"); } } } public event PropertyChangedEventHandler PropertyChanged; protected virtual void OnPropertyChanged(string propName) { if (PropertyChanged != null) PropertyChanged(this, new PropertyChangedEventArgs(propName)); } }

4. 次のコードを挿入して、ビジネスオブジェクトコレクションクラスを実装します。

Visual Basic

' ビジネスオブジェクトコレクションは、INotifyCollectionChanged インターフェイスを実装する必要がありま

す。

Public Class AppointmentBOList Inherits ObservableCollection(Of AppointmentBORow) Protected Overrides Sub RemoveItem(ByVal index As Integer) Dim item As AppointmentBORow = Me(index) If (Not (item) Is Nothing) Then item.IsDeleted = True End If MyBase.RemoveItem(index) End SubEnd Class

C#

// ビジネスオブジェクトコレクションは、INotifyCollectionChanged インターフェイスを実装する必要があり

ます。

public class AppointmentBOList : ObservableCollection<AppointmentBORow> { protected override void RemoveItem(int index) {



AppointmentBORow item = this[index]; if (item != null) { item.IsDeleted = true; } base.RemoveItem(index); } }}

5. 次のパブリッククラスを名前空間宣言の下に挿入します。これで、ビジネスオブジェクトコレクションのインスタンスが作

成されて初期化されます。

Visual Basic

Public Class AppointmentsBO Private _list As AppointmentBOList = Nothing Public Sub New() MyBase.New() _list = New AppointmentBOList _list.Add(New AppointmentBORow) End Sub Public Property Appointments As AppointmentBOList Get Return _list End Get Set(value As AppointmentBOList) _list = value End Set End PropertyEnd Class

C#

public class AppointmentsBO { AppointmentBOList _list = null; public AppointmentsBO() { _list = new AppointmentBOList(); _list.Add(new AppointmentBORow()); } public AppointmentBOList Appointments { get { return _list; } set { _list = value; } } }



この手順では、ビジネスオブジェクトを作成しました。このオブジェクトは、この後の手順で、C1Scheduler コントロールにデータ

を提供します。

手順３：カスタム予定ダイアログの作成手順３：カスタム予定ダイアログの作成

この手順では、カスタム予定ダイアログを作成し、XAML マークアップとコードを使用して、このダイアログを制御するコードを設定します。

1. 新しい Silverlight ページを作成します。それには、アプリケーション名を右クリックし、リストから［追加追加］→［新しい項目新しい項目］を選択しま

す。

2. インストール済みテンプレートのリストから［新しい新しい Silverlight ページページ］を選択し、EditAppointmentDialog という名前を付けま

す。［OK］をクリックします。

3. <navigation:Page> </navigation:Page>タグおよび名前空間を次の <UserControl>ステートメントに置き換えます。

XAML

<UserControl x:Class="SchedulerCustomData.EditAppointmentDialog" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:c1sched="clr-namespace:C1.Silverlight.Schedule;assembly=C1.Silverlight.Schedule"xmlns:c1="clr-namespace:C1.Silverlight;assembly=C1.Silverlight"xmlns:local="clr-namespace:SchedulerCustomData"mc:Ignorable="d"d:DesignHeight="300" d:DesignWidth="400">

4. 次の XAML を名前空間宣言の後に挿入して、カスタム予定ダイアログを作成します。

XAML

<Grid x:Name="LayoutRoot" Background="White" BindingValidationError="LayoutRoot_BindingValidationError"> <Grid.Resources><res:C1_Schedule_EditAppointment x:Key="C1_Schedule_EditAppointment"/> </Grid.Resources> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="75" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions><TextBlock VerticalAlignment="Center" Margin="10,2,0,2" HorizontalAlignment="Left" Text="{Binding subject, Source={StaticResource C1_Schedule_EditAppointment}}" /><TextBox x:Name="subject" Grid.Column="1" TabIndex="0" Padding="2" Text="{Binding Subject, Mode=TwoWay}" TextChanged="subject_TextChanged" MaxLength="255" VerticalAlignment="Center" Margin="10,2,10,2" />



</Grid> <Grid Grid.Row="1"> <Grid.ColumnDefinitions> <ColumnDefinition Width="75" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <TextBlock VerticalAlignment="Center" Margin="10,2,0,2" HorizontalAlignment="Left" Text="{Binding location, Source={StaticResource C1_Schedule_EditAppointment}}" /><TextBox TabIndex="1" x:Name="location" Grid.Column="1" Text="{Binding Location, Mode=TwoWay}" MaxLength="255" VerticalAlignment="Center" Margin="10,2,10,2" /> </Grid> <Grid Grid.Row="2"> <Grid.ColumnDefinitions> <ColumnDefinition Width="75" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions><TextBlock VerticalAlignment="Center" Margin="10,2,0,2" HorizontalAlignment="Left" Text="{Binding startTime, Source={StaticResource C1_Schedule_EditAppointment}}"/><c1datetime:C1DateTimePicker x:Name="startCalendar" Grid.Column="1" VerticalAlignment="Center" Margin="10,2,10,2" Padding="1" IsTabStop="False" TimeFormat="ShortTime" DateFormat="Long" FirstDayOfWeek="{Binding Path=ParentCollection.ParentStorage.ScheduleStorage.Scheduler.CalendarHelper.WeekStart}" DateTime="{Binding Start, Mode=TwoWay}"/> </Grid> <Grid Grid.Row="3"> <Grid.ColumnDefinitions> <ColumnDefinition Width="75" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions><TextBlock VerticalAlignment="Center" Margin="10,2,0,2" HorizontalAlignment="Left" Text="{Binding endTime, Source={StaticResource C1_Schedule_EditAppointment}}"/><c1datetime:C1DateTimePicker x:Name="endCalendar" VerticalAlignment="Center" Margin="10,2,10,2" Padding="1" DateTimeChanged="endCalendar_DateTimeChanged" FirstDayOfWeek="{Binding Path=ParentCollection.ParentStorage.ScheduleStorage.Scheduler.CalendarHelper.WeekStart}" TimeFormat="ShortTime" DateFormat="Long" Grid.Column="1" c1:C1NagScreen.Nag="True" /> </Grid> <Grid Grid.Row="4" Background="Yellow"> <Grid.ColumnDefinitions> <ColumnDefinition Width="100" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions><TextBlock VerticalAlignment="Center" Text="カスタムデータ:" HorizontalAlignment="Left" Margin="10,2,0,2"/><TextBox Name="customDataTextBox" Grid.Column="1" Text="{Binding Path=CustomData, Mode=TwoWay}" Margin="10,2,10,2"/> </Grid> <Grid Grid.Row="5" Background="Orange"> <Grid.ColumnDefinitions> <ColumnDefinition Width="100" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions><TextBlock VerticalAlignment="Center" Text="BO プロパティ1:" HorizontalAlignment="Left" Margin="10,2,0,2"/><TextBox Name="BOTextBox1" Grid.Column="1" Text="{Binding Path=Tag.Tag.BOProperty1,



Mode=TwoWay}" Margin="10,2,10,2" /> </Grid> <Grid Grid.Row="6" Background="Orange"> <Grid.ColumnDefinitions> <ColumnDefinition Width="100" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions><TextBlock VerticalAlignment="Center" Text="BO プロパティ2:" HorizontalAlignment="Left" Margin="10,2,0,2"/><TextBox Name="BOTextBox2" Grid.Column="1" Text="{Binding Path=Tag.Tag.BOProperty2, Mode=TwoWay}" Margin="10,2,10,2"/> </Grid> <Grid Grid.Row="7"> <Grid.ColumnDefinitions> <ColumnDefinition Width="75" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions><TextBlock VerticalAlignment="Top" Text="メモ:" HorizontalAlignment="Left" Margin="10,2,0,2"/><TextBox x:Name="body" Text="{Binding Body, Mode=TwoWay}" AcceptsReturn="true" Grid.Column="1" Margin="10,2,10,2" /> </Grid><StackPanel Orientation="Horizontal" Grid.Row="8" HorizontalAlignment="Right"><Button Name="deleteButton" IsTabStop="False" Margin="0,0,5,0" c1:CommandExtensions.CommandTarget="{Binding ParentCollection.ParentStorage.ScheduleStorage.Scheduler}" c1:CommandExtensions.CommandParameter="{Binding Tag}" c1:CommandExtensions.Command="c1sched:C1Scheduler.DeleteAppointmentCommand" ToolTipService.ToolTip="{Binding deleteButton_ToolTip, Source={StaticResource C1_Schedule_EditAppointment}}"><StackPanel Orientation="Horizontal" VerticalAlignment="Center"><Image Height="16" Width="16" Source="/SchedulerCustomData;component/Images/Delete.png"></Image> <TextBlock Text="イベントを削除する" /> </StackPanel> </Button><Button x:Name="PART_DialogSaveButton" IsTabStop="False" Click="PART_DialogSaveButton_Click" ToolTipService.ToolTip="{Binding PART_DialogSaveButton_Tooltip, Source={StaticResource C1_Schedule_EditAppointment}}"><StackPanel Orientation="Horizontal" VerticalAlignment="Center"><Image Height="16" Width="16" Source="/SchedulerCustomData;component/Images/save.png"></Image><TextBlock Margin="3,0,0,0" Text="{Binding PART_DialogSaveButton_AccessText, Source={StaticResource C1_Schedule_EditAppointment}}" VerticalAlignment="Center"/> </StackPanel></Button> </StackPanel> </Grid></UserControl>

予定の編集ダイアログは、デザインビューで次の図のようになります。



5. ページを右クリックし、リストから［コードの表示コードの表示］を選択します。コードビューで、アプリケーションに次の名前空間を追加します。

Visual Basic

Imports C1.Silverlight.ScheduleImports C1.SilverlightImports C1.Silverlight.DateTimeEditorsImports C1.C1ScheduleImports System.Windows.Data

C#

using C1.Silverlight.Schedule;using C1.Silverlight;using C1.Silverlight.DateTimeEditors;using C1.C1Schedule;using System.Windows.Data;

6. 次の Region ディレクティブとパブリックメソッドをパブリックパーシャルクラスの下に追加します。

Visual Basic

#Region "fields" Dim _parentWindow As ContentControl = Nothing Dim _appointment As Appointment Dim _scheduler As C1Scheduler#End Region

C#

#region ** fields private ContentControl _parentWindow = null; private Appointment _appointment; //AppointmentBORow customBO; //使用しない

private C1Scheduler _scheduler; #endregion public EditAppointmentDialog()



7. UserControl_Loaded イベントハンドラを追加します。

Visual Basic

Private Sub UserControl_Loaded(ByVal sender As Object, ByVal e As RoutedEventArgs) _appointment = CType(DataContext, Appointment) 'Appointment sourceApp = _appointment.Tag As Appointment 'customBO = sourceApp.Tag As AppointmentBORow _parentWindow = CType(VTreeHelper.GetParentOfType(Me, GetType(C1Window)), ContentControl) If (Not (_parentWindow) Is Nothing) Then Dim bnd As Binding = New Binding("Header") bnd.Source = Me _parentWindow.SetBinding(C1Window.HeaderProperty, bnd) End If If (Not (_appointment) Is Nothing) Then AddHandler CType(_appointment, System.ComponentModel.INotifyPropertyChanged).PropertyChanged, AddressOf Me.appointment_PropertyChanged If (Not (_appointment.ParentCollection) Is Nothing) Then _scheduler = _appointment.ParentCollection.ParentStorage.ScheduleStorage.Scheduler End If Header = "イベントを編集する" UpdateEndCalendar() endCalendar.EditMode = C1DateTimePickerEditMode.DateTime startCalendar.EditMode = C1DateTimePickerEditMode.DateTime End If subject.Focus() End Sub

C#

private void UserControl_Loaded(object sender, RoutedEventArgs e) { _appointment = DataContext as Appointment; //Appointment sourceApp = _appointment.Tag as Appointment; //customBO = sourceApp.Tag as AppointmentBORow; _parentWindow = (ContentControl)VTreeHelper.GetParentOfType(this, typeof(C1Window)); if (_parentWindow != null) { Binding bnd = new Binding("Header"); bnd.Source = this; _parentWindow.SetBinding(C1Window.HeaderProperty, bnd); } if (_appointment != null) { ((System.ComponentModel.INotifyPropertyChanged)_appointment).PropertyChanged += new System.ComponentModel.PropertyChangedEventHandler(appointment_PropertyChanged); if (_appointment.ParentCollection != null) { _scheduler = _appointment.ParentCollection.ParentStorage.ScheduleStorage.Scheduler; } Header = "イベントを編集する"; UpdateEndCalendar(); startCalendar.EditMode = endCalendar.EditMode =



C1DateTimePickerEditMode.DateTime; } subject.Focus(); }

8. ボタンイベントとマウスイベントの一部を制御する次のコードを追加します。

Visual Basic

Protected Overrides Sub OnMouseEnter(ByVal e As MouseEventArgs) MyBase.OnMouseEnter(e) End Sub Protected Overrides Sub OnGotFocus(ByVal e As RoutedEventArgs) MyBase.OnGotFocus(e) End Sub Private Sub LayoutRoot_BindingValidationError(ByVal sender As Object, ByVal e As ValidationErrorEventArgs) If (e.Action = ValidationErrorEventAction.Added) Then PART_DialogSaveButton.IsEnabled = False PART_DialogSaveButton.IsEnabled = False Else PART_DialogSaveButton.IsEnabled = True End If End Sub Private Sub PART_DialogSaveButton_Click(ByVal sender As Object, ByVal e As RoutedEventArgs) SetAppointment() CType(_parentWindow, C1Window).DialogResult = MessageBoxResult.OK End Sub Private Sub subject_TextChanged(ByVal sender As Object, ByVal e As TextChangedEventArgs) subject.GetBindingExpression(TextBox.TextProperty).UpdateSource() End Sub

C#

protected override void OnMouseEnter(MouseEventArgs e) { base.OnMouseEnter(e); } protected override void OnGotFocus(RoutedEventArgs e) { base.OnGotFocus(e); } private void LayoutRoot_BindingValidationError(object sender, ValidationErrorEventArgs e) { if (e.Action == ValidationErrorEventAction.Added) { PART_DialogSaveButton.IsEnabled = false; } else { PART_DialogSaveButton.IsEnabled = true; } } private void PART_DialogSaveButton_Click(object sender, RoutedEventArgs e) { SetAppointment();



((C1Window)_parentWindow).DialogResult = MessageBoxResult.OK; } private void subject_TextChanged(object sender, TextChangedEventArgs e) { subject.GetBindingExpression(TextBox.TextProperty).UpdateSource(); }

9. SetAppointment メソッドを追加します。

Visual Basic

Private Sub SetAppointment() location.GetBindingExpression(TextBox.TextProperty).UpdateSource() body.GetBindingExpression(TextBox.TextProperty).UpdateSource() '追加データプロパティを更新します customDataTextBox.GetBindingExpression(TextBox.TextProperty).UpdateSource() BOTextBox1.GetBindingExpression(TextBox.TextProperty).UpdateSource() BOTextBox2.GetBindingExpression(TextBox.TextProperty).UpdateSource() End Sub Private Sub appointment_PropertyChanged(ByVal sender As Object, ByVal e As System.ComponentModel.PropertyChangedEventArgs) UpdateEndCalendar() End Sub

C#

private void SetAppointment() { location.GetBindingExpression(TextBox.TextProperty).UpdateSource(); body.GetBindingExpression(TextBox.TextProperty).UpdateSource(); //追加データプロパティを更新します

customDataTextBox.GetBindingExpression(TextBox.TextProperty).UpdateSource(); BOTextBox1.GetBindingExpression(TextBox.TextProperty).UpdateSource(); BOTextBox2.GetBindingExpression(TextBox.TextProperty).UpdateSource(); } void appointment_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e) { UpdateEndCalendar(); }

10. 次のオブジェクトモデルを EditAppointmentDialog クラスに追加します。

Visual Basic

#Region "Appointment Properties" Public Property Appointment As Appointment Get Return _appointment End Get Set(value As Appointment) _appointment = value If (Not (_parentWindow) Is Nothing) Then _parentWindow.DataContext = value _parentWindow.Content = value End If DataContext = value End Set End Property ''' <summary>



''' 予定ウィンドウのヘッダーとして使用される <see cref="String"/> 値を取得します。

''' </summary> Public Property Header As String Get Return CType(GetValue(HeaderProperty), String) End Get Set(value As String) SetValue(HeaderProperty, value) End Set End Property Private Shared HeaderProperty As DependencyProperty = DependencyProperty.Register("Header", GetType(System.String), GetType(EditAppointmentDialog), Nothing) ''' <summary> ''' 繰り返しパターンの説明を取得します。

''' </summary> Public Property PatternDescription As String Get Return CType(GetValue(PatternDescriptionProperty), String) End Get Set(value As String) SetValue(PatternDescriptionProperty, value) End Set End Property Public Shared PatternDescriptionProperty As DependencyProperty = DependencyProperty.Register("PatternDescription", GetType(System.String), GetType(EditAppointmentControl), New PropertyMetadata(String.Empty))#End Region

C#

#region ** object model /// <summary> /// 現在の DataContext を表す <see cref="Appointment"/> オブジェクトを取得します。

/// </summary> public Appointment Appointment { get { return _appointment; } set { _appointment = value; if (_parentWindow != null) { _parentWindow.Content = _parentWindow.DataContext = value; } DataContext = value; } } /// <summary> /// 予定ウィンドウのヘッダーとして使用される <see cref="String"/> 値を取得します。

/// </summary> public string Header { get { return (string)GetValue(HeaderProperty); }



private set { SetValue(HeaderProperty, value); } } private static readonly DependencyProperty HeaderProperty = DependencyProperty.Register("Header", typeof(string), typeof(EditAppointmentDialog), null); /// <summary> /// 繰り返しパターンの説明を取得します。

/// </summary> public string PatternDescription { get { return (string)GetValue(PatternDescriptionProperty); } private set { SetValue(PatternDescriptionProperty, value); } } public static readonly DependencyProperty PatternDescriptionProperty = DependencyProperty.Register("PatternDescription", typeof(string), typeof(EditAppointmentControl), new PropertyMetadata(string.Empty)); #endregion

11. 最後に、DateTimeChanged メソッドを制御するコードを挿入します。

Visual Basic

#Region "DateTime Picker logic" Private Sub endCalendar_DateTimeChanged(ByVal sender As Object, ByVal e As NullablePropertyChangedEventArgs(Of DateTime)) If (Not (_appointment) Is Nothing) Then Dim dt As DateTime = endCalendar.DateTime.Value If _appointment.AllDayEvent Then dt = dt.AddDays(1) End If If (dt < Appointment.Start) Then endCalendar.Background = New SolidColorBrush(Colors.Red) endCalendar.Foreground = New SolidColorBrush(Colors.Red) endCalendar.BorderBrush = New SolidColorBrush(Colors.Red) endCalendar.BorderThickness = New Thickness(2) ToolTipService.SetToolTip(endCalendar, C1.Silverlight.Schedule.Resources.C1_Schedule_Exceptions.StartEndValidationFailed) PART_DialogSaveButton.IsEnabled = False Else _appointment.End = dt If Not PART_DialogSaveButton.IsEnabled Then PART_DialogSaveButton.IsEnabled = True endCalendar.ClearValue(Control.BackgroundProperty) endCalendar.ClearValue(Control.ForegroundProperty) endCalendar.ClearValue(Control.BorderBrushProperty) endCalendar.ClearValue(Control.BorderThicknessProperty) endCalendar.ClearValue(ToolTipService.ToolTipProperty) End If End If End If End Sub Private Sub UpdateEndCalendar() Dim dt As DateTime = _appointment.End If _appointment.AllDayEvent Then dt = dt.AddDays(-1) End If endCalendar.DateTime = dt If Not PART_DialogSaveButton.IsEnabled Then



PART_DialogSaveButton.IsEnabled = True endCalendar.ClearValue(Control.BackgroundProperty) endCalendar.ClearValue(Control.ForegroundProperty) endCalendar.ClearValue(Control.BorderBrushProperty) endCalendar.ClearValue(Control.BorderThicknessProperty) endCalendar.ClearValue(ToolTipService.ToolTipProperty) End If End Sub#End Region

C#

#region "DateTime Picker logic" private void endCalendar_DateTimeChanged(object sender, NullablePropertyChangedEventArgs<DateTime> e) { if (_appointment != null) { DateTime end = endCalendar.DateTime.Value; if (_appointment.AllDayEvent) { end = end.AddDays(1); } if (end < Appointment.Start) { endCalendar.BorderBrush = endCalendar.Foreground = endCalendar.Background = new SolidColorBrush(Colors.Red); endCalendar.BorderThickness = new Thickness(2); ToolTipService.SetToolTip(endCalendar, C1.Silverlight.Schedule.Resources.C1_Schedule_Exceptions.StartEndValidationFailed); PART_DialogSaveButton.IsEnabled = false; } else { _appointment.End = end; if (!PART_DialogSaveButton.IsEnabled) { PART_DialogSaveButton.IsEnabled = true; endCalendar.ClearValue(Control.BackgroundProperty); endCalendar.ClearValue(Control.ForegroundProperty); endCalendar.ClearValue(Control.BorderBrushProperty); endCalendar.ClearValue(Control.BorderThicknessProperty); endCalendar.ClearValue(ToolTipService.ToolTipProperty); } } } } private void UpdateEndCalendar() { DateTime end = _appointment.End; if (_appointment.AllDayEvent) { end = end.AddDays(-1); } endCalendar.DateTime = end; if (!PART_DialogSaveButton.IsEnabled) { PART_DialogSaveButton.IsEnabled = true;



endCalendar.ClearValue(Control.BackgroundProperty); endCalendar.ClearValue(Control.ForegroundProperty); endCalendar.ClearValue(Control.BorderBrushProperty); endCalendar.ClearValue(Control.BorderThicknessProperty); endCalendar.ClearValue(ToolTipService.ToolTipProperty); } } #endregion }}

この手順では、カスタムの予定の編集ダイアログを作成し、予定のメソッドとイベントを制御するコードを設定しました。

手順４：アプリケーションメインページへの機能の追加手順４：アプリケーションメインページへの機能の追加

この手順では、C1Scheduler コントロールをアプリケーションメインページに追加します。さらに、予定の編集にはカスタム予定ダイア

ログを使用し、AppointmentStorage のデータソースにはカスタムビジネスオブジェクトコレクションを使用するように、コントロールの

プロパティを設定します。

1. MainPage.xaml ファイルを開き、次の XAML 名前空間を <UserControl> タグに追加します。

XAML

xmlns:c1="clr-namespace:C1.Silverlight;assembly=C1.Silverlight"xmlns:c1sched="clr-namespace:C1.Silverlight.Schedule;assembly=C1.Silverlight.Schedule"xmlns:local=" clr-namespace:SchedulerCustomData"

タグは次のようになります。

XAML

<UserControl x:Class="SchedulerCustomData.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc=http://schemas.openxmlformats.org/markup-compatibility/2006xmlns:local=" clr-namespace:SchedulerCustomData"xmlns:c1sched="clr-namespace:C1.C1Schedule;assembly=C1.Silverlight.Schedule.5"Loaded="UserControl_Loaded">

2. ページリソースで、予定の編集に使用するカスタムデータテンプレートを定義します。

XAML

<UserControl.Resources> <DataTemplate x:Key="customEditAppointmentTemplate"> <local:EditAppointmentDialog/> </DataTemplate> </UserControl.Resources>

3. C1Schedulerコントロールをアプリケーションに追加します。それには、ツールボックスでコントロールを探し、それをダブルク

リックします。

4. 次の XAML を <C1Schedule> タグに追加し、C1Scheduler のプロパティとイベントハンドラを設定します。

XAML

Height="300" HorizontalAlignment="Left" Name="c1Scheduler1" VerticalAlignment="Top" Width="400" Style="{Binding OneDayStyle, RelativeSource={RelativeSource Self}}"



EditAppointmentTemplate="{StaticResource customEditAppointmentTemplate}"UserAddingAppointment="c1Scheduler1_UserAddingAppointment"AppointmentAdded="c1Scheduler1_AppointmentAdded"UserEditingAppointment="c1Scheduler1_UserEditingAppointment"

5. アプリケーションを右クリックし、リストから［コードの表示コードの表示］を選択して、MainPage.xaml.cs または MainPage.xaml.vb を開き

ます。

6. 次の名前空間を追加します。

Visual Basic

Imports C1.Silverlight.ScheduleImports C1.SilverlightImports C1.Silverlight.DateTimeEditorsImports C1.C1ScheduleImports System.Windows.Data

C#

using C1.Silverlight.Schedule;using C1.Silverlight;using C1.Silverlight.DateTimeEditors;using C1.C1Schedule;using System.Windows.Data;

7. AppointmentBOList クラスインスタンスを MainPage クラス内のフィールドとして作成します。

Visual Basic

Dim myAppointments As AppointmentsBO = New AppointmentsBO

C#

AppointmentsBO myAppointments = new AppointmentsBO();

8. 次のコードを MainPage コンストラクタの InitializeComponent() メソッド呼び出しの直後に挿入して、サンプルの予定を作成

します。

Visual Basic

Dim app1 As AppointmentBORow = New AppointmentBORow app1.Body = "Test Body" app1.dt = (DateTime.Now + TimeSpan.FromHours(1)) app1.Start = DateTime.Now app1.Location = "Test Location" app1.Id = Guid.NewGuid app1.Subject = "Test Subject"

C#

//サンプルの予定を作成します

AppointmentBORow app1 = new AppointmentBORow();app1.Body = "Test Body";app1.End = DateTime.Now + TimeSpan.FromHours(1);app1.Start = DateTime.Now;app1.Location = "Test Location";app1.Id = Guid.NewGuid();app1.Subject = "Test Subject";

9. 次のコードを挿入して、ビジネスオブジェクトのカスタムプロパティを設定します。



Visual Basic

'カスタム BO プロパティ

app1.BOProperty1 = "New Property" app1.BOProperty2 = "Second Property" myAppointments.Add(app1)

C#

//カスタム BO プロパティ

app1.BOProperty1 = "New Property";app1.BOProperty2 = "Second Property";myAppointments.Add(app1);

10. 次に、AppointmentStorage をカスタムビジネスオブジェクトのプロパティにマップし、AppointmentStorage.DataSourceをビジネスオブジェクトコレクションインスタンスに設定します。

Visual Basic

'データ連結

c1Scheduler1.DataStorage.AppointmentStorage.Mappings.Body.MappingName = "Body" c1Scheduler1.DataStorage.AppointmentStorage.Mappings.Start.MappingName = "Start" c1Scheduler1.DataStorage.AppointmentStorage.Mappings.End.MappingName = "End" c1Scheduler1.DataStorage.AppointmentStorage.Mappings.Location.MappingName = "Location" c1Scheduler1.DataStorage.AppointmentStorage.Mappings.IdMapping.MappingName = "Id" c1Scheduler1.DataStorage.AppointmentStorage.Mappings.Subject.MappingName = "Subject" c1Scheduler1.DataStorage.AppointmentStorage.Mappings.AppointmentProperties.MappingName = "Properties" c1Scheduler1.DataStorage.AppointmentStorage.DataSource = myAppointments.Appointments End Sub

C#

//データ連結

c1Scheduler1.DataStorage.AppointmentStorage.Mappings.Body.MappingName = "Body";c1Scheduler1.DataStorage.AppointmentStorage.Mappings.Start.MappingName = "Start";c1Scheduler1.DataStorage.AppointmentStorage.Mappings.End.MappingName = "End";c1Scheduler1.DataStorage.AppointmentStorage.Mappings.Location.MappingName = "Location";c1Scheduler1.DataStorage.AppointmentStorage.Mappings.IdMapping.MappingName = "Id";c1Scheduler1.DataStorage.AppointmentStorage.Mappings.Subject.MappingName = "Subject";c1Scheduler1.DataStorage.AppointmentStorage.Mappings.AppointmentProperties.MappingName = "Properties";c1Scheduler1.DataStorage.AppointmentStorage.DataSource = myAppointments.Appointments;

11. 次のコードを挿入し、スケジューラの予定を設定します。

Visual Basic

Private Sub c1Scheduler1_UserAddingAppointment(ByVal sender As Object, ByVal e As C1.Silverlight.Schedule.AppointmentActionEventArgs) Dim newApp As AppointmentBORow = New AppointmentBORow e.Appointment.Tag = newApp End Sub



Private Sub c1Scheduler1_AppointmentAdded(ByVal sender As Object, ByVal e As C1.Silverlight.Schedule.AppointmentActionEventArgs) Dim newApp As AppointmentBORow = FindMyAppointment(CType(e.Appointment.Key(0), Guid)) Dim editedApp As AppointmentBORow = CType(e.Appointment.Tag, AppointmentBORow) If (Not (editedApp) Is Nothing) Then newApp.BOProperty1 = editedApp.BOProperty1 newApp.BOProperty2 = editedApp.BOProperty2 End If End Sub Private Sub c1Scheduler1_UserEditingAppointment(ByVal sender As Object, ByVal e As C1.Silverlight.Schedule.AppointmentActionEventArgs) Dim myApp As AppointmentBORow = FindMyAppointment(CType(e.Appointment.Key(0), Guid)) e.Appointment.Tag = myApp End Sub Private Function FindMyAppointment(ByVal id As Guid) As AppointmentBORow For Each app As AppointmentBORow In myAppointments.Appointments If (app.Id = id) Then Return app End If Next Return Nothing End Function

C#

//スケジュールの間隔を１時間に設定します

c1Scheduler1.VisualIntervalScale = TimeSpan.FromHours(1); } private void c1Scheduler1_UserAddingAppointment(object sender, C1.Silverlight.Schedule.AppointmentActionEventArgs e) { AppointmentBORow newApp = new AppointmentBORow(); e.Appointment.Tag = newApp; } private void c1Scheduler1_AppointmentAdded(object sender, C1.Silverlight.Schedule.AppointmentActionEventArgs e) { AppointmentBORow newApp = FindMyAppointment((Guid)e.Appointment.Key[0]); AppointmentBORow editedApp = e.Appointment.Tag as AppointmentBORow; if (editedApp != null) { newApp.BOProperty1 = editedApp.BOProperty1; newApp.BOProperty2 = editedApp.BOProperty2; } } private void c1Scheduler1_UserEditingAppointment(object sender, C1.Silverlight.Schedule.AppointmentActionEventArgs e) { AppointmentBORow myApp = FindMyAppointment((Guid)e.Appointment.Key[0]); e.Appointment.Tag = myApp; } AppointmentBORow FindMyAppointment(Guid id) { foreach (AppointmentBORow app in myAppointments.Appointments) {



if (app.Id == id) return app; } return null; } }}

この手順では、C1Scheduler コントロールをアプリケーションに追加し、カスタムダイアログとデータを使用するために必要なプロパティ

をすべて設定しました。

手順５：アプリケーションの完成手順５：アプリケーションの完成

この手順では、Scheduler for Silverlight アプリケーションの作成を完了して実行します。

1. アプリケーション名を右クリックし、リストから［追加追加］→［新規フォルダ新規フォルダ］を選択します。新しいフォルダ名を Images と指

定します。

2. ［Images］フォルダを右クリックし、リストから［追加追加］→［既存の項目既存の項目］を選択します。［保存して閉じる保存して閉じる］ボタンと［予定の予定の

キャンセルキャンセル］ボタンに使用する画像を探し、フォルダに追加します。

3. ［保存して閉じる保存して閉じる］ボタンで Image コントロールを選択します。［プロパティプロパティ］ウィンドウで、Source プロパティを見つけま

す。省略符ボタンをクリックして［イメージの選択イメージの選択］ダイアログを開き、［保存して閉じる保存して閉じる］ボタンに使用する画像を選択し

ます。この手順を繰り返して、［予定のキャンセル予定のキャンセル］ボタンの画像を設定します。

4. ［F5］キーを押すかデバッグを開始して、アプリケーションを実行します。初期状態のアプリケーションは次のように表示

されます。

5. 任意の予定の時刻をダブルクリックして、予定の編集ダイアログを開きます。




C1Scheduler コントロールとカスタムの予定の編集ダイアログを作成しました。予定の編集ダイアログのフィールドのデータ連

結を作成し、ダイアログのボタンに画像を追加しました。

カスタムビューの作成カスタムビューの作成

C1Scheduler コントロールのカスタムビューを簡単に作成することができます。このチュートリアルでは、新しい Silverlight アプリケーションを作成し、MainPage.xaml ファイルでブラシのスタイルとデータテンプレートを設定し、button_Click() イベント

を制御するコードを追加します。


この手順では、Silverlight アプリケーションを作成し、適切な参照と名前空間を追加します。また、MainPage.xaml ファイルで

ブラシのスタイルを設定します。


1. Visual Studio で新しい Silverlight アプリケーションを作成し、「CustomView」という名前を付けます。


ストから［参照の追加参照の追加］を選択します。参照先があるフォルダに移動し、次の項目を選択します。

C1.Silverlight

C1.Silverlight.Data

C1.Silverlight.DateTimeEditors

C1.Silverlight.Schedule



3. MainPage.xaml ファイルで、次の行を名前空間宣言に追加します。

XAML

xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml"

4. <UserControl.Resources> <UserControl.Resources/> タグを名前空間宣言の下に追加します。

5. <UserControl.Resources> タグの間をクリックし、次の XAML を挿入して、ページにスタイルとブラシのリソースを提供

します。

XAML

 <LinearGradientBrush x:Key="BorderBrush" EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FFA3AEB9" Offset="0"/> <GradientStop Color="#FF8399A9" Offset="0.375"/> <GradientStop Color="#FF718597" Offset="0.375"/> <GradientStop Color="#FF617584" Offset="1"/> </LinearGradientBrush>  <ControlTemplate TargetType="c1:C1Separator" x:Key="FirstLevelSeparatorTemplate"> <Grid x:Name="Root" Background="#FF3C688D" Opacity="0.2" Margin="2,5,5,8" Width="0.5"/> </ControlTemplate> <Style TargetType="c1:C1Separator" x:Key="Separator"> <Setter Property="FirstLevelTemplate" Value="{StaticResource FirstLevelSeparatorTemplate}"/> </Style>   <LinearGradientBrush x:Key="C1Scheduler_TodayHeader_Brush" EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FFF6CE71" Offset="0"/> <GradientStop Color="#FFF5C664" Offset="0.5"/> <GradientStop Color="#FFEF9F26" Offset="0.5"/> <GradientStop Color="#FFF4BE59" Offset="1"/> </LinearGradientBrush> <LinearGradientBrush x:Key="DayHeader_HoverBrush" EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FFFFFCDE" Offset="0"/> <GradientStop Color="#FFFFEAAC" Offset="0.5"/> <GradientStop Color="#FFFFD767" Offset="0.5"/> <GradientStop Color="#FFFFE59B" Offset="1"/> </LinearGradientBrush> <LinearGradientBrush x:Key="TodayHeader_HoverBrush" EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FFFFFCDE" Offset="0"/> <GradientStop Color="#FFFFEAAC" Offset="0.5"/> <GradientStop Color="#FFFFD767" Offset="0.5"/>



<GradientStop Color="#FFFFE59B" Offset="1"/> </LinearGradientBrush>

手順２：データテンプレートの作成と手順２：データテンプレートの作成と C1Schedule コントロールの追加コントロールの追加

この手順では、複数の C1Scheduler ビューのためのデータテンプレート、およびメインビューを構成する C1Schedule コントロールと C1Calendar コントロールを作成しま

す。

1. スタイルとブラシのリソースの後に次のマークアップを追加して、C1Schedule コンバータと、１日を表示するためのデータテンプレートを作成します。

XAML

 <c1:DateTimeToStringConverter x:Key="DateTimeToStringConverter"/> <c1:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/> <c1:VisualIntervalToStringConverter x:Key="VisualIntervalToStringConverter"/>  <c1:DayIntervalStyleSelector x:Key="DayStyleSelector"> <c1:DayIntervalStyleSelector.Resources> <ResourceDictionary> <DataTemplate x:Key="DayHeaderTemplate"> <Button HorizontalContentAlignment="Stretch" VerticalContentAlignment="Center" c1:CommandExtensions.CommandParameter="{Binding Path=Scheduler.OneDayStyle}" c1:CommandExtensions.Command="c1:C1Scheduler.ChangeStyleCommand" c1:CommandExtensions.CommandTarget="{Binding Path=Scheduler}"> <Button.Style> <Style TargetType="Button"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <Grid> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal" /> <VisualState x:Name="MouseOver"> <Storyboard> <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="DayHeaderBorder" Storyboard.TargetProperty="Background"> <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{StaticResource DayHeader_HoverBrush}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Border x:Name="DayHeaderBorder" BorderBrush="#FF5A8ECE" VerticalAlignment="Stretch" BorderThickness="0,0,0,1" Margin="0"> <Border.Background> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FFE7EEF7" Offset="0"/> <GradientStop Color="#FFD9E5F4" Offset="0.5"/> <GradientStop Color="#FFC9D9EE" Offset="0.5"/> <GradientStop Color="#FFE6EDF7" Offset="1"/> </LinearGradientBrush> </Border.Background> <ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" /> </Border> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> </Button.Style>



<c1:C1DockPanel> <TextBlock c1:C1DockPanel.Dock="Right" Margin="2" FontWeight="Semibold" Text="{Binding Converter={StaticResource VisualIntervalToStringConverter}, ConverterParameter='ddd MMMM d, yyy'}"/>  <TextBlock /> </c1:C1DockPanel> </Button> </DataTemplate>

2. 次の XAML を挿入して、Today ヘッダーのデータテンプレートを作成します。

XAML

<DataTemplate x:Key="TodayHeaderTemplate"> <Button HorizontalContentAlignment="Stretch" VerticalContentAlignment="Center" c1:CommandExtensions.CommandParameter="{Binding Path=Scheduler.OneDayStyle}" c1:CommandExtensions.Command="c1:C1Scheduler.ChangeStyleCommand" c1:CommandExtensions.CommandTarget="{Binding Path=Scheduler}"> <Button.Style> <Style TargetType="Button"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <Grid> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal" /> <VisualState x:Name="MouseOver"> <Storyboard> <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="DayHeaderBorder" Storyboard.TargetProperty="Background"> <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{StaticResource TodayHeader_HoverBrush}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Border BorderThickness="0,0,0,1" x:Name="DayHeaderBorder" BorderBrush="Orange" Background="{StaticResource C1Scheduler_TodayHeader_Brush}" VerticalAlignment="Stretch" Margin="0"> <ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" /> </Border> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> </Button.Style> <c1:C1DockPanel> <TextBlock c1:C1DockPanel.Dock="Right" Margin="2" FontWeight="Semibold" Text="{Binding Converter={StaticResource VisualIntervalToStringConverter}, ConverterParameter='ddd MMMM d, yyy'}"/>  <TextBlock /> </c1:C1DockPanel> </Button> </DataTemplate>

3. 次の XAML は、Day ヘッダーと Today ヘッダーのスタイルを作成します。

XAML





<Style x:Key="C1Scheduler_Day_Style" TargetType="c1:C1ListBoxItem"> <Setter Property="BorderThickness" Value="0,0,1,1" /> <Setter Property="HorizontalContentAlignment" Value="Stretch" /> <Setter Property="VerticalContentAlignment" Value="Stretch" /> <Setter Property="UseLayoutRounding" Value="true" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="c1:C1ListBoxItem"> <Border x:Name="DayBorder" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}"> <c1:C1DockPanel > <ContentPresenter Content="{TemplateBinding Content}" c1:C1DockPanel.Dock="Top" ContentTemplate="{StaticResource DayHeaderTemplate}" /> <ContentPresenter Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" /> </c1:C1DockPanel> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style>  <Style x:Key="C1Scheduler_Today_Style" TargetType="c1:C1ListBoxItem"> <Setter Property="BorderThickness" Value="1,0,1,1" /> <Setter Property="HorizontalContentAlignment" Value="Stretch" /> <Setter Property="VerticalContentAlignment" Value="Stretch" /> <Setter Property="BorderBrush" Value="Orange" /> <Setter Property="UseLayoutRounding" Value="true" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="c1:C1ListBoxItem"> <Border x:Name="DayBorder" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Margin="-1 0 0 1"> <c1:C1DockPanel> <ContentPresenter Content="{TemplateBinding Content}" c1:C1DockPanel.Dock="Top" ContentTemplate="{StaticResource TodayHeaderTemplate}" /> <ContentPresenter Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" /> </c1:C1DockPanel> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style> </ResourceDictionary> </c1:DayIntervalStyleSelector.Resources> </c1:DayIntervalStyleSelector>

4. 次の XAML マークアップを挿入して、Week Style、Two Week Style、および Work Week Style のスタイルを設定します。

XAML

 <Style x:Key="CustomWeekStyle" TargetType="c1:C1Scheduler" > <Setter Property="c1:C1Scheduler.VisualTimeSpan" Value="7" /> <Setter Property="c1:C1Scheduler.VisualIntervalScale" Value="1" /> <Setter Property="FontSize" Value="11" /> <Setter Property="FontFamily" Value="Segoe UI"/> <Setter Property="Background" Value="#FFBDD7F2"/> <Setter Property="BorderBrush" Value="Violet"/> <Setter Property="AppointmentForeground" Value="Navy"/> <Setter Property="SmallStartTimeChange" Value="7" /> <Setter Property="LargeStartTimeChange" Value="7" />



<Setter Property="c1:C1Scheduler.Template"> <Setter.Value> <ControlTemplate TargetType="c1:C1Scheduler"> <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">  <Grid Name="grid" DataContext="{Binding VisibleGroupItems[0], RelativeSource={RelativeSource TemplatedParent}}"> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions>  <ItemsControl ItemsSource="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=NestedSetters}" IsHitTestVisible="False"/> <c1:C1UniformGrid Grid.Column="0" Rows="4" Columns="2" Background="{TemplateBinding Background}" > <Border Background="#FFE7EFFF" BorderBrush="#FF6392CE" BorderThickness="0 0 1 1"> <c1:C1WrapPanel Margin="2,10,2,2" VerticalAlignment="Center" HorizontalAlignment="Center"> <TextBlock FontSize="12" Text="{Binding VisualIntervals[0], Converter={StaticResource VisualIntervalToStringConverter}, ConverterParameter=D}" Margin="2"/> <TextBlock FontSize="12" Text=" - " Margin="2"/> <TextBlock FontSize="12" Text="{Binding Path=VisualIntervals[6], Converter={StaticResource VisualIntervalToStringConverter}, ConverterParameter=D}" Margin="2"/> </c1:C1WrapPanel> </Border> </c1:C1UniformGrid> <c1:C1SchedulerPresenter Grid.Column="0" ItemContainerStyleSelector="{StaticResource DayStyleSelector}"/> <c1:AppointmentsCoverPane Grid.Column="0" IsDragDropDisabled="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsDragDropDisabled}" CoverElementsMargin="10" /> <ScrollBar x:Name="PART_C1SchedulerScrollBar" Grid.Column="1" Orientation="Vertical"/> </Grid> </Border> </ControlTemplate> </Setter.Value> </Setter> <Setter Property="c1:C1Scheduler.VisualIntervalPanel"> <Setter.Value> <DataTemplate> <c1:C1UniformGrid Rows="4" Columns="2" FirstColumn="1" /> </DataTemplate> </Setter.Value> </Setter> <Setter Property="c1:C1Scheduler.VisualIntervalTemplate"> <Setter.Value> <DataTemplate> <Grid> <Border Name="DayContentBorder" UseLayoutRounding="True" c1:AppointmentsCoverPane.KeepTimesAtDrop="True" c1:CoverElementsPane.Orientation="Horizontal" Background="White"> <Border Name="highlightStatusBorder" Background="{Binding Path=StatusBrush}" Opacity="0.1"/> </Border> <Border Background="#4090b3de" Visibility="{Binding IsSelected, Converter={StaticResource BooleanToVisibilityConverter}}"> </Border> </Grid> </DataTemplate> </Setter.Value> </Setter>



</Style>  <Style x:Key="TwoWeekStyle" TargetType="c1:C1Scheduler" > <Setter Property="c1:C1Scheduler.VisualTimeSpan" Value="14" /> <Setter Property="c1:C1Scheduler.VisualIntervalScale" Value="1" /> <Setter Property="FontSize" Value="11" /> <Setter Property="FontFamily" Value="Segoe UI"/> <Setter Property="AppointmentForeground" Value="Navy"/> <Setter Property="Background" Value="#FFBDD7F2"/> <Setter Property="BorderBrush" Value="Transparent"/> <Setter Property="SmallStartTimeChange" Value="7" /> <Setter Property="LargeStartTimeChange" Value="14" /> <Setter Property="c1:C1Scheduler.Template"> <Setter.Value> <ControlTemplate TargetType="c1:C1Scheduler"> <Border BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}">  <Grid Name="grid" DataContext="{Binding VisibleGroupItems[0], RelativeSource={RelativeSource TemplatedParent}}"> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions>  <ItemsControl ItemsSource="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=NestedSetters}" IsHitTestVisible="False"/> <c1:C1SchedulerPresenter Grid.Column="0" ItemContainerStyleSelector="{StaticResource DayStyleSelector}"/> <c1:AppointmentsCoverPane Grid.Column="0" IsDragDropDisabled="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsDragDropDisabled}" CoverElementsMargin="10" /> <ScrollBar x:Name="PART_C1SchedulerScrollBar" Grid.Column="1" Orientation="Vertical"/> </Grid> </Border> </ControlTemplate> </Setter.Value> </Setter> <Setter Property="c1:C1Scheduler.VisualIntervalPanel"> <Setter.Value> <DataTemplate> <c1:C1UniformGrid Rows="2" Columns="7" Background="{Binding Scheduler.Background}" /> </DataTemplate> </Setter.Value> </Setter> <Setter Property="c1:C1Scheduler.VisualIntervalTemplate"> <Setter.Value> <DataTemplate> <Grid> <Border Name="DayContentBorder" UseLayoutRounding="True" c1:AppointmentsCoverPane.KeepTimesAtDrop="True" c1:CoverElementsPane.Orientation="Horizontal" Background="White"> <Border Name="highlightStatusBorder" Background="{Binding Path=StatusBrush}" Opacity="0.1"/> </Border> <Border Background="#4090b3de" Visibility="{Binding IsSelected, Converter={StaticResource BooleanToVisibilityConverter}}"> </Border> </Grid> </DataTemplate> </Setter.Value> </Setter> </Style> 



<Style x:Key="CustomWorkingWeekStyle" TargetType="c1:C1Scheduler" > <Setter Property="c1:C1Scheduler.VisualTimeSpan" Value="7" /> <Setter Property="c1:C1Scheduler.VisualIntervalScale" Value="1" /> <Setter Property="Background" Value="#FFBDD7F2"/> <Setter Property="BorderBrush" Value="Transparent"/> <Setter Property="FontSize" Value="11" /> <Setter Property="AppointmentForeground" Value="Navy"/> <Setter Property="FontFamily" Value="Segoe UI"/> <Setter Property="SmallStartTimeChange" Value="7" /> <Setter Property="LargeStartTimeChange" Value="7" /> <Setter Property="c1:C1Scheduler.Template"> <Setter.Value> <ControlTemplate TargetType="c1:C1Scheduler"> <Border BorderBrush="{StaticResource BorderBrush}" Background="#FF91BAEE" BorderThickness="{TemplateBinding BorderThickness}">  <Grid Name="grid" DataContext="{Binding VisibleGroupItems[0], RelativeSource={RelativeSource TemplatedParent}}"> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions>  <ItemsControl ItemsSource="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=NestedSetters}" IsHitTestVisible="False"/> <c1:C1SchedulerPresenter Grid.Column="0" ItemContainerStyleSelector="{StaticResource DayStyleSelector}"/> <c1:AppointmentsCoverPane Grid.Column="0" IsDragDropDisabled="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsDragDropDisabled}" CoverElementsMargin="10" /> <ScrollBar x:Name="PART_C1SchedulerScrollBar" Grid.Column="1" Orientation="Vertical"/> </Grid> </Border> </ControlTemplate> </Setter.Value> </Setter> <Setter Property="c1:C1Scheduler.VisualIntervalPanel"> <Setter.Value> <DataTemplate> <c1:C1UniformGrid Rows="1"/> </DataTemplate> </Setter.Value> </Setter> <Setter Property="c1:C1Scheduler.VisualIntervalTemplate"> <Setter.Value> <DataTemplate> <Grid> <Border Name="DayContentBorder" UseLayoutRounding="True" c1:AppointmentsCoverPane.KeepTimesAtDrop="True" c1:CoverElementsPane.Orientation="Horizontal" BorderBrush="#FFBDD7F2" BorderThickness="0,0,0,10" Background="White"> <Border Name="highlightStatusBorder" Background="{Binding Path=StatusBrush}" Opacity="0.1"/> </Border> <Border Background="#4090b3de" Visibility="{Binding IsSelected, Converter={StaticResource BooleanToVisibilityConverter}}"> </Border> </Grid> </DataTemplate> </Setter.Value> </Setter> </Style> </UserControl.Resources>

5. 次の XAML を </UserControl.Resources> 終了タグの下に追加して、C1Scheduler コントロールと C1Calendar コントロールを作成します。

XAML



　<Grid x:Name="LayoutRoot"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition/> </Grid.RowDefinitions> <c1:C1Menu Grid.Row="0" FontFamily="Segoe UI" FontSize="12" BorderThickness="1"> <c1:C1MenuItem x:Name="btnToday" Header="今日" ToolTipService.ToolTip="Navigate to the current date." Click="btnToday_Click" /> <c1:C1Separator Style="{StaticResource Separator}"/> <c1:C1MenuItem Header="ビュー" ToolTipService.ToolTip="Change current view."> <c1:C1MenuItem x:Name="btnDay" Header="日" Click="btnDay_Click"/> <c1:C1MenuItem x:Name="btnWorkWeek" Header="稼働日" Click="btnWorkWeek_Click"/> <c1:C1MenuItem x:Name="btnWeek" Header="週" Click="btnWeek_Click"/> <c1:C1MenuItem x:Name="btn2Week" Header="2週間" Click="btn2Week_Click"> </c1:C1MenuItem> <c1:C1MenuItem x:Name="btnMonth" Header="月" Click="btnMonth_Click"/> <c1:C1MenuItem x:Name="btnTimeLine" Header="タイムライン" Click="btnTimeLine_Click"/> </c1:C1MenuItem> <c1:C1Separator Style="{StaticResource Separator}" /> <c1:C1MenuItem x:Name="btnImport" Header="インポート..." ToolTipService.ToolTip="Import data from the local file." Click="btnImport_Click" /> <c1:C1MenuItem x:Name="btnExport" Header="エクスポート..." ToolTipService.ToolTip="Export data to the local file." Click="btnExport_Click" /> </c1:C1Menu> <Grid Grid.Row="1"> <Grid.ColumnDefinitions> <ColumnDefinition Width="192"/> <ColumnDefinition/> </Grid.ColumnDefinitions> <c1:C1Calendar x:Name="cal1" Grid.Column="0" CalendarHelper="{Binding CalendarHelper, ElementName=sched1, Mode=OneWay}" SelectedDates="{Binding VisibleDates, ElementName=sched1, Mode=OneWay}" BoldedDates="{Binding BoldedDates, ElementName=sched1, Mode=OneWay}" MaxSelectionCount="42" GenerateAdjacentMonthDays="True" /> <c1:C1Scheduler x:Name="sched1" BeforeViewChange="sched1_BeforeViewChange" BorderThickness="1" Grid.Column="1" BorderBrush="{StaticResource BorderBrush}" WorkingWeekStyle="{StaticResource CustomWorkingWeekStyle}" WeekStyle="{StaticResource CustomWeekStyle}"/> </Grid> </Grid></UserControl>

手順３：アプリケーションを制御するコードの追加手順３：アプリケーションを制御するコードの追加

この手順では、アプリケーションを制御するための C# または Visual Basic コードを追加します。

1. アプリケーションを右クリックし、リストから［コードの表示コードの表示］を選択します。次の名前空間をページの先頭に追加します。

Visual Basic

Imports C1.Silverlight.Schedule

C#

using C1.Silverlight.Schedule;



2. 次の IDisposable 実装をパブリックパーシャルクラスに追加します。

Visual Basic

Partial Public Class MainPage Inherits UserControl Implements IDisposable

C#

public partial class MainPage : UserControl, IDisposable

3. InitializeComponent() メソッドの直後に、次のコードを挿入します。

Visual Basic

sched1.ChangeStyle(sched1.WeekStyle) End Sub Private Sub btnToday_Click(sender As Object, e As C1.Silverlight.SourcedEventArgs) sched1.VisibleDates.BeginUpdate() sched1.VisibleDates.Clear() sched1.VisibleDates.Add(DateTime.Today) sched1.VisibleDates.EndUpdate() End Sub ' ２週間分の日付が選択された場合は、月ビューモードから２週間

' ビューモードに変更します。

Private Sub sched1_BeforeViewChange(sender As Object, e As BeforeViewChangeEventArgs) If e.Dates.Length = 14 AndAlso e.Style Is sched1.MonthStyle Then Dim s As Style = DirectCast(Me.Resources("TwoWeekStyle"), Style) If s IsNot Nothing Then e.Style = s End If End If End Sub Private Sub btnDay_Click(sender As Object, e As C1.Silverlight.SourcedEventArgs) sched1.ChangeStyle(sched1.OneDayStyle) End Sub Private Sub btnWorkWeek_Click(sender As Object, e As C1.Silverlight.SourcedEventArgs) sched1.ChangeStyle(sched1.WorkingWeekStyle) End Sub Private Sub btnWeek_Click(sender As Object, e As C1.Silverlight.SourcedEventArgs) sched1.ChangeStyle(sched1.WeekStyle) End Sub Private Sub btn2Week_Click(sender As Object, e As C1.Silverlight.SourcedEventArgs) sched1.ChangeStyle(Resources("TwoWeekStyle")) End Sub Private Sub btnMonth_Click(sender As Object, e As



C1.Silverlight.SourcedEventArgs) sched1.ChangeStyle(sched1.MonthStyle) End Sub Private Sub btnTimeLine_Click(sender As Object, e As C1.Silverlight.SourcedEventArgs) sched1.ChangeStyle(sched1.TimeLineStyle) End Sub Private Sub btnImport_Click(sender As Object, e As C1.Silverlight.SourcedEventArgs) C1Scheduler.ImportCommand.Execute(Nothing, sched1) End Sub Private Sub btnExport_Click(sender As Object, e As C1.Silverlight.SourcedEventArgs) C1Scheduler.ExportCommand.Execute(Nothing, sched1) End Sub#Region "IDisposable Support" Private disposedValue As Boolean ' 冗長な呼び出しを検出

' IDisposable Protected Overridable Sub Dispose(disposing As Boolean) If Not Me.disposedValue Then If disposing Then ' TODO：マネージ状態（マネージオブジェクト）を破棄します。

End If ' TODO：アンマネージリソース（アンマネージオブジェクト）を解放し、次の Finalize() をオー

バーライドします。

' TODO：大きなフィールドを null に設定します。

End If Me.disposedValue = True End Sub

C#

sched1.ChangeStyle(sched1.WeekStyle); } private void btnToday_Click(object sender, C1.Silverlight.SourcedEventArgs e) { sched1.VisibleDates.BeginUpdate(); sched1.VisibleDates.Clear(); sched1.VisibleDates.Add(DateTime.Today); sched1.VisibleDates.EndUpdate(); } // ２週間分の日付が選択された場合は、月ビューモードから２週間

// ビューモードに変更します。

void sched1_BeforeViewChange(object sender, BeforeViewChangeEventArgs e) { if (e.Dates.Length == 14 && e.Style == sched1.MonthStyle) { Style s = (Style)this.Resources["TwoWeekStyle"]; if (s != null) { e.Style = s; }



} } private void btnDay_Click(object sender, C1.Silverlight.SourcedEventArgs e) { sched1.ChangeStyle(sched1.OneDayStyle); } private void btnWorkWeek_Click(object sender, C1.Silverlight.SourcedEventArgs e) { sched1.ChangeStyle(sched1.WorkingWeekStyle); } private void btnWeek_Click(object sender, C1.Silverlight.SourcedEventArgs e) { sched1.ChangeStyle(sched1.WeekStyle); } private void btn2Week_Click(object sender, C1.Silverlight.SourcedEventArgs e) { sched1.ChangeStyle(Resources["TwoWeekStyle"]); } private void btnMonth_Click(object sender, C1.Silverlight.SourcedEventArgs e) { sched1.ChangeStyle(sched1.MonthStyle); } private void btnTimeLine_Click(object sender, C1.Silverlight.SourcedEventArgs e) { sched1.ChangeStyle(sched1.TimeLineStyle); } private void btnImport_Click(object sender, C1.Silverlight.SourcedEventArgs e) { C1Scheduler.ImportCommand.Execute(null, sched1); } private void btnExport_Click(object sender, C1.Silverlight.SourcedEventArgs e) { C1Scheduler.ExportCommand.Execute(null, sched1); }

4. IDisposable 実装を処理する次のコードを追加します。Visual Basic のコードは、Visual Studio によって自動的に追加

されます。

Visual Basic

#Region "IDisposable Support" Private disposedValue As Boolean ' 冗長な呼び出しを検出

' IDisposable Protected Overridable Sub Dispose(disposing As Boolean) If Not Me.disposedValue Then



If disposing Then sched1.Dispose() End If ' TODO：アンマネージリソース（アンマネージオブジェクト）を解放し、次の Finalize() をオー

バーライドします。

' TODO：大きなフィールドを null に設定します。

End If Me.disposedValue = True End Sub ' TODO：前述の Dispose(ByVal disposing As Boolean) にアンマネージリソースを解放するコー

ドが含まれている場合は、Finalize() をオーバーライドします。

'Protected Overrides Sub Finalize() ' ' このコードは変更しないでください。前述の Dispose(ByVal disposing As Boolean) にク

リーンアップコードを挿入します。

' Dispose(False) ' MyBase.Finalize() 'End Sub ' Visual Basic によって追加されたこのコードは、IDisposable のパターンを正しく実装します。

Public Sub Dispose() Implements IDisposable.Dispose ' このコードは変更しないでください。前述の Dispose(ByVal disposing As Boolean) にク

リーンアップコードを挿入します。

Dispose(True) GC.SuppressFinalize(Me) End Sub

C#

public void Dispose() { sched1.Dispose(); }


この手順でチュートリアルは終了です。

1. ［［F5］］キーを押してアプリケーションを実行します。アプリケーションは次の図のようになります。




新しい Silverlight アプリケーションを作成し、XAML マークアップとコードを使用してカスタム Scheduler ビューを作成しまし

た。

複数ユーザースケジュールの作成複数ユーザースケジュールの作成

このチュートリアルでは、複数のスケジュールを表示できるアプリケーションを作成します。インターフェイスの作成には、

XAML マークアップとコードを使用します。また、データサービスと２つのコードファイルをアプリケーションのリソースとして追加

します。


この手順では、新しい Silverlight アプリケーションを作成し、適切な参照と名前空間を追加して、２つのコードファイルとデータ

サービスをアプリケーションに追加します。


1. Visual Studio で新しい Silverlight アプリケーションを作成し、「MultiUser」という名前を付けます。


ストから［参照の追加参照の追加］を選択します。参照先があるフォルダに移動し、次のアセンブリを選択します。

C1.Silverlight.5

C1.Silverlight.Data.5

C1.Silverlight.DateTimeEditors.5



C1.Silverlight.Schedule.5

3. MultiUser.Web プロジェクトを右クリックし、リストから［追加追加］→［既存の項目既存の項目］を選択します。アプリケーションに適用

する SmartData ファイル（SmartData.cs ファイルまたは SmartData.vb ファイル）、およびアプリケーションに適用す

る PlatformUriTranslator ファイル（PlatformUriTranslator.cs ファイルまたは PlatformUriTranslator.vb ファイル）

を追加します。

4. MultiUser.Web をもう一度右クリックし、リストから［追加追加］→［新しい項目新しい項目］を選択します。基本の Web サービスを追

加して、DataService.asmx という名前を付けます。

5. DataService.asmx ファイルの Web サービスの概要の下に、次のコードを追加します。

Visual Basic

Public Class DataService Inherits System.Web.Services.WebService <WebMethod()> _ Public Function GetData(tables As String) As Byte() ' 接続文字列を使って DataSet を作成します

Dim ds = GetDataSet() ' DataSet にデータをロードします

ds.Fill(tables.Split(","c)) ' ストリームに保存します

Dim ms = New System.IO.MemoryStream() ds.WriteXml(ms, XmlWriteMode.WriteSchema) ' ストリームデータを返します

Return ms.ToArray() End Function <WebMethod()> _ Public Function UpdateData(dtAdded As Byte(), dtModified As Byte(), dtDeleted As Byte()) As String Try UpdateData(dtAdded, DataRowState.Added) UpdateData(dtModified, DataRowState.Modified) UpdateData(dtDeleted, DataRowState.Deleted) Return Nothing Catch x As Exception Return x.Message End Try End Function Private Sub UpdateData(data As Byte(), state As DataRowState) ' 変更がない場合は何もしません

If data Is Nothing Then Return End If ' データセットにデータをロードします

Dim ds = GetDataSet() Dim ms = New MemoryStream(data) ds.ReadXml(ms) ds.AcceptChanges() ' 変更された行の状態を更新します

For Each dt As DataTable In ds.Tables For Each dr As DataRow In dt.Rows Select Case state



Case DataRowState.Added dr.SetAdded() Exit Select Case DataRowState.Modified dr.SetModified() Exit Select Case DataRowState.Deleted dr.Delete() Exit Select End Select Next Next ' データベースを更新します

ds.Update() End Sub Private Function GetDataSet() As SmartDataSet ' mdb ファイルの物理的な場所を取得します

Dim mdb As String = Path.Combine(Context.Request.PhysicalApplicationPath, "App_Data\Nwind.mdb") ' このファイルの存在を確認します

If Not File.Exists(mdb) Then Dim msg As String = String.Format("Cannot find database file {0}.", mdb) Throw New FileNotFoundException(msg) End If ' ファイルが読み取り専用でないことを確認します（ソースコントロールによって読み取り専用にされる場

合があります）

Dim att As FileAttributes = File.GetAttributes(mdb) If (att And FileAttributes.[ReadOnly]) <> 0 Then att = att And Not FileAttributes.[ReadOnly] File.SetAttributes(mdb, att) End If ' SmartDataSet を作成および初期化します

Dim dataSet = New SmartDataSet() dataSet.ConnectionString = "provider=microsoft.jet.oledb.4.0;data source=" & mdb ' SQL Server Express のサンプル接続文字列（Initial Catalog 値を有効なカタログ名に

置換します）

' dataSet.ConnectionString = "Provider=SQLOLEDB.1;Integrated Security=SSPI;Persist Security Info=False;Initial Catalog=test;Data Source=.\\SQLEXPRESS"; Return dataSet End FunctionEnd Class

C#

public class DataService : System.Web.Services.WebService { [WebMethod] public byte[] GetData(string tables) { // 接続文字列を使って DataSet を作成します

var ds = GetDataSet();



// DataSet にデータをロードします

ds.Fill(tables.Split(',')); // ストリームに保存します

var ms = new System.IO.MemoryStream(); ds.WriteXml(ms, XmlWriteMode.WriteSchema); // ストリームデータを返します

return ms.ToArray(); } [WebMethod] public string UpdateData(byte[] dtAdded, byte[] dtModified, byte[] dtDeleted) { try { UpdateData(dtAdded, DataRowState.Added); UpdateData(dtModified, DataRowState.Modified); UpdateData(dtDeleted, DataRowState.Deleted); return null; } catch (Exception x) { return x.Message; } } void UpdateData(byte[] data, DataRowState state) { // 変更がない場合は何もしません

if (data == null) { return; } // データセットにデータをロードします

var ds = GetDataSet(); var ms = new MemoryStream(data); ds.ReadXml(ms); ds.AcceptChanges(); // 変更された行の状態を更新します

foreach (DataTable dt in ds.Tables) { foreach (DataRow dr in dt.Rows) { switch (state) { case DataRowState.Added: dr.SetAdded(); break; case DataRowState.Modified: dr.SetModified(); break; case DataRowState.Deleted: dr.Delete(); break;



} } } // データベースを更新します

ds.Update(); } SmartDataSet GetDataSet() { // mdb ファイルの物理的な場所を取得します

string mdb = Path.Combine( Context.Request.PhysicalApplicationPath, @"App_Data\Nwind.mdb"); // このファイルの存在を確認します

if (!File.Exists(mdb)) { string msg = string.Format("Cannot find database file {0}.", mdb); throw new FileNotFoundException(msg); } // ファイルが読み取り専用でないことを確認します（ソースコントロールによって読み取り専用にさ

れる場合があります）

FileAttributes att = File.GetAttributes(mdb); if ((att & FileAttributes.ReadOnly) != 0) { att &= ~FileAttributes.ReadOnly; File.SetAttributes(mdb, att); } // SmartDataSet を作成および初期化します

var dataSet = new SmartDataSet(); dataSet.ConnectionString = "provider=microsoft.jet.oledb.4.0;data source=" + mdb; // SQL Server Express のサンプル接続文字列（Initial Catalog 値を有効なカタロ

グ名に置換します）

// dataSet.ConnectionString = "Provider=SQLOLEDB.1;Integrated Security=SSPI;Persist Security Info=False;Initial Catalog=test;Data Source=.\\SQLEXPRESS"; return dataSet; } }}

6. MultiUser.web をもう一度右クリックし、リストから［追加追加］→［フォルダフォルダ］を選択します。新しいフォルダ名を App_Dataと指定します。

7. App_Data フォルダを右クリックし、リストから［追加追加］→［既存の項目既存の項目］を選択します。Nwind.mdb データベースを見つ

けて選択します。

8. アプリケーション全体をリビルドし、メインの MultiUser アプリケーションを右クリックします。リストから［サービス参照

の追加］を選択します。次のような［サービス参照の追加サービス参照の追加］ダイアログボックスが表示されます。



9. ［探索探索］ボタンをクリックし、利用可能なサービス参照を検索して、次の手順に従います。

［サービスサービス］リストボックスで、利用可能なサービス参照を選択します。

サービス参照の名前を「DataService」に変更します。

［OK］をクリックして、サービス参照をアプリケーションに追加します。

この手順では、新しい Silverlight アプリケーションを作成し、適切なアセンブリ参照を追加して、サービス参照と２つのコード

ファイルを追加しました。次の手順では、MultiUser アプリケーションに XAML を追加します。

手順２：リソースと手順２：リソースと C1Scheduler コントロールの作成コントロールの作成

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

ズします。


1. 次の名前空間をメインの MultiUser アプリケーションに追加します。



XAML

xmlns:c1="clr-namespace:C1.Silverlight;assembly=C1.Silverlight"xmlns:c1sched="clr-namespace:C1.Silverlight.Schedule;assembly=C1.Silverlight.Schedule"Silverlight 5 の場合は、次の名前空間を追加します。

xmlns:c1="clr-namespace:C1.Silverlight;assembly=C1.Silverlight.5"xmlns:c1sched="clr-namespace:C1.Silverlight.Schedule;assembly=C1.Silverlight.Schedule.5"名前空間宣言全体は次のようになります。

<UserControl x:Class="MultipleUserTest.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:c1="clr-namespace:C1.Silverlight;assembly=C1.Silverlight"xmlns:c1sched="clr-namespace:C1.Silverlight.Schedule;assembly=C1.Silverlight.Schedule"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"mc:Ignorable="d"d:DesignHeight="300" d:DesignWidth="400">

2. <UserControl.Resources> </UserControl.Resources> タグを名前空間宣言の下に追加します。

3. タグの間をクリックして、次のリソースディクショナリを挿入します。

XAML

<ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="/C1.Silverlight.Schedule;component/themes/generic.xaml"/> </ResourceDictionary.MergedDictionaries>

4. 次の XAML をリソースディクショナリの後に追加して、コントロールテンプレートを作成します。

XAML

<ControlTemplate x:Key="looklessButton" TargetType="Button"> <Border> <ContentPresenter Margin="4,0" VerticalAlignment="Center"/> </Border> </ControlTemplate>

5. 次の XAML マークアップを使用して、２つのカスタムヘッダーテンプレートを作成します。これで、カスタムグループヘッ

ダーテンプレートとカスタムタイムライングループヘッダーテンプレートが作成されます。

XAML

 <DataTemplate x:Key="myCustomGroupHeaderTemplate"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="Auto"/> <ColumnDefinition/> <ColumnDefinition Width="Auto"/>



<ColumnDefinition Width="Auto"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition Height="25" /> </Grid.RowDefinitions> <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}"/>  <Button Template="{StaticResource looklessButton}" Content="|<<" Grid.Column="0" Grid.RowSpan="2" VerticalAlignment="Center" FontSize="12" c1:CommandExtensions.Command="c1sched:C1Scheduler.NavigateToPreviousGroupCommand" c1:CommandExtensions.CommandParameter="Home" c1:CommandExtensions.CommandTarget="{Binding Scheduler}" Visibility="{Binding ShowPreviousButton, Converter={StaticResource BooleanToVisibilityConverter}}"/>  <Button Template="{StaticResource looklessButton}" Content="<" Grid.Column="1" Grid.RowSpan="2" VerticalAlignment="Center" FontSize="12" c1:CommandExtensions.Command="c1sched:C1Scheduler.NavigateToPreviousGroupCommand" c1:CommandExtensions.CommandTarget="{Binding Scheduler}" Visibility="{Binding ShowPreviousButton, Converter={StaticResource BooleanToVisibilityConverter}}"/>  <Button Template="{StaticResource looklessButton}" Content=">" Grid.Column="3" Grid.RowSpan="2" VerticalAlignment="Center" FontSize="12" c1:CommandExtensions.Command="c1sched:C1Scheduler.NavigateToNextGroupCommand" c1:CommandExtensions.CommandTarget="{Binding Scheduler}" Visibility="{Binding ShowNextButton, Converter={StaticResource BooleanToVisibilityConverter}}"/>  <Button Template="{StaticResource looklessButton}" Content=">>|" Grid.Column="4" Grid.RowSpan="2" VerticalAlignment="Center" FontSize="12" c1:CommandExtensions.Command="c1sched:C1Scheduler.NavigateToNextGroupCommand" c1:CommandExtensions.CommandParameter="End" c1:CommandExtensions.CommandTarget="{Binding Scheduler}" Visibility="{Binding ShowNextButton, Converter={StaticResource BooleanToVisibilityConverter}}"/> <TextBlock Foreground="{Binding Path=Scheduler.Foreground}" Margin="10,3" Grid.Column="2" Visibility="{Binding IsSelected, Converter={StaticResource BooleanToVisibilityConverter}, 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={StaticResource BooleanToVisibilityConverter}}" Text="{Binding DisplayName}" VerticalAlignment="Center" HorizontalAlignment="Center"/>



 <TextBlock Foreground="{Binding Path=Scheduler.Foreground}" Margin="10,3" Grid.Column="2" Grid.Row="1" Text="{Binding Path=Tag[Title]}" VerticalAlignment="Center" HorizontalAlignment="Center"/> </Grid> </DataTemplate>  <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"/>  <TextBlock TextWrapping="Wrap" Foreground="{Binding Path=Scheduler.Foreground}" Margin="2" Text="{Binding Path=Tag[Title]}" HorizontalAlignment="Center"/> </StackPanel> </Border> </Grid> </DataTemplate>

6. 次の XAML マークアップを追加して、アプリケーションで使用するスタイルとデータ連結を作成します。

XAML

 <LinearGradientBrush x:Key="BorderBrush" EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FFA3AEB9" Offset="0"/> <GradientStop Color="#FF8399A9" Offset="0.375"/> <GradientStop Color="#FF718597" Offset="0.375"/> <GradientStop Color="#FF617584" Offset="1"/> </LinearGradientBrush>  <SolidColorBrush x:Key="commandBaseBorderBrush" Color="#FF6593CF"/> <LinearGradientBrush x:Key="buttBackBrush" StartPoint="0,0" EndPoint="0,1" >



<GradientStop Color="#FFE3EFFF" Offset="0"/> <GradientStop Color="#FFC4DDFF" Offset="0.367"/> <GradientStop Color="#FFADD1FF" Offset="0.377"/> <GradientStop Color="#FFC0DBFF" Offset="1"/> </LinearGradientBrush> <Style x:Key="buttonStyle" TargetType="Button"> <Setter Property="Width" Value="90"/> <Setter Property="Background" Value="{StaticResource buttBackBrush}" /> <Setter Property="Foreground" Value="#FF000000"/> <Setter Property="HorizontalContentAlignment" Value="Center"/> <Setter Property="VerticalContentAlignment" Value="Center"/> <Setter Property="FontSize" Value="14"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <Grid> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal"/> <VisualState x:Name="MouseOver"> <Storyboard> <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[0].(GradientStop.Color)" To="#FFFFFCDE"/> <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[1].(GradientStop.Color)" To="#FFFFEAAC"/> <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[2].(GradientStop.Color)" To="#FFFFD767"/> <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[3].(GradientStop.Color)" To="#FFFFE59B"/> </Storyboard> </VisualState> <VisualState x:Name="Pressed"> <Storyboard> <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[0].(GradientStop.Color)" To="#FFFFFCDE"/> <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[1].(GradientStop.Color)" To="#FFFFEAAC"/> <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[2].(GradientStop.Color)" To="#FFFFD767"/> <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[3].(GradientStop.Color)" To="Orange"/> </Storyboard> </VisualState> </VisualStateGroup>



</VisualStateManager.VisualStateGroups> <Border BorderThickness="0,0,1,0"> <Border.Background> <LinearGradientBrush x:Name="BackgroundGradient" StartPoint="0,0" EndPoint="0,1" > <GradientStop Color="#FFE3EFFF" Offset="0"/> <GradientStop Color="#FFC4DDFF" Offset="0.367"/> <GradientStop Color="#FFADD1FF" Offset="0.377"/> <GradientStop Color="#FFC0DBFF" Offset="1"/> </LinearGradientBrush> </Border.Background> </Border> <Border Name="brd" BorderThickness="0,0,1,0" Margin="0,3" BorderBrush="{StaticResource commandBaseBorderBrush}"/> <ContentPresenter x:Name="contentPresenter" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}"/> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> <Style TargetType="RadioButton" x:Key="radioButtonStyle"> <Setter Property="Width" Value="90"/> <Setter Property="Background" Value="{StaticResource buttBackBrush}" /> <Setter Property="Foreground" Value="#FF000000"/> <Setter Property="HorizontalContentAlignment" Value="Center"/> <Setter Property="VerticalContentAlignment" Value="Center"/> <Setter Property="FontSize" Value="14"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="RadioButton"> <Grid> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal"/> <VisualState x:Name="MouseOver"> <Storyboard> <DoubleAnimation Duration="0"



Storyboard.TargetName="brd" Storyboard.TargetProperty="Opacity" To="0.15"/> <ColorAnimation Duration="0" Storyboard.TargetName="MouseOverGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[0].(GradientStop.Color)" To="#FFFFFCDE"/> <ColorAnimation Duration="0" Storyboard.TargetName="MouseOverGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[1].(GradientStop.Color)" To="#FFFFEAAC"/> <ColorAnimation Duration="0" Storyboard.TargetName="MouseOverGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[2].(GradientStop.Color)" To="#FFFFD767"/> <ColorAnimation Duration="0" Storyboard.TargetName="MouseOverGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[3].(GradientStop.Color)" To="#FFFFE59B"/> </Storyboard> </VisualState> </VisualStateGroup> <VisualStateGroup x:Name="CheckStates"> <VisualState x:Name="Checked"> <Storyboard> <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[0].(GradientStop.Color)" To="#FFFFD9AA"/> <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[1].(GradientStop.Color)" To="#FFFFBB6E"/> <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[2].(GradientStop.Color)" To="#FFFFAB3F"/> <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[3].(GradientStop.Color)" To="#FFFEE17A"/> </Storyboard> </VisualState> <VisualState x:Name="Unchecked"/> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Border BorderThickness="0,0,1,0"> <Border.Background> <LinearGradientBrush x:Name="MouseOverGradient" StartPoint="0,0" EndPoint="0,1" > <GradientStop Color="Transparent" Offset="0"/> <GradientStop Color="Transparent" Offset="0.367"/> <GradientStop Color="Transparent" Offset="0.377"/> <GradientStop Color="Transparent" Offset="1"/> </LinearGradientBrush> </Border.Background> </Border> <Border Name="brd" BorderThickness="0,0,1,0"> <Border.Background>



<LinearGradientBrush x:Name="BackgroundGradient" StartPoint="0,0" EndPoint="0,1" > <GradientStop Color="#FFE3EFFF" Offset="0"/> <GradientStop Color="#F9C4DDFF" Offset="0.367"/> <GradientStop Color="#E5ADD1FF" Offset="0.377"/> <GradientStop Color="#C6C0DBFF" Offset="1"/> </LinearGradientBrush> </Border.Background> </Border> <Border BorderThickness="0,0,1,0" Margin="0,3" BorderBrush="{StaticResource commandBaseBorderBrush}"/> <ContentPresenter x:Name="contentPresenter" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}"/> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> </ResourceDictionary> </UserControl.Resources>

7. 次のマークアップを追加して、アプリケーションで使用するスタイルとデータ連結を完了します。

XAML

 <LinearGradientBrush x:Key="BorderBrush" EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FFA3AEB9" Offset="0"/> <GradientStop Color="#FF8399A9" Offset="0.375"/> <GradientStop Color="#FF718597" Offset="0.375"/> <GradientStop Color="#FF617584" Offset="1"/> </LinearGradientBrush>  <SolidColorBrush x:Key="commandBaseBorderBrush" Color="#FF6593CF"/> <LinearGradientBrush x:Key="buttBackBrush" StartPoint="0,0" EndPoint="0,1" > <GradientStop Color="#FFE3EFFF" Offset="0"/> <GradientStop Color="#FFC4DDFF" Offset="0.367"/> <GradientStop Color="#FFADD1FF" Offset="0.377"/> <GradientStop Color="#FFC0DBFF" Offset="1"/>



</LinearGradientBrush> <Style x:Key="buttonStyle" TargetType="Button"> <Setter Property="Width" Value="90"/> <Setter Property="Background" Value="{StaticResource buttBackBrush}" /> <Setter Property="Foreground" Value="#FF000000"/> <Setter Property="HorizontalContentAlignment" Value="Center"/> <Setter Property="VerticalContentAlignment" Value="Center"/> <Setter Property="FontSize" Value="14"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <Grid> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal"/> <VisualState x:Name="MouseOver"> <Storyboard> <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[0].(GradientStop.Color)" To="#FFFFFCDE"/> <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[1].(GradientStop.Color)" To="#FFFFEAAC"/> <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[2].(GradientStop.Color)" To="#FFFFD767"/> <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[3].(GradientStop.Color)" To="#FFFFE59B"/> </Storyboard> </VisualState> <VisualState x:Name="Pressed"> <Storyboard> <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[0].(GradientStop.Color)" To="#FFFFFCDE"/> <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[1].(GradientStop.Color)" To="#FFFFEAAC"/> <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[2].(GradientStop.Color)" To="#FFFFD767"/> <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[3].(GradientStop.Color)" To="Orange"/> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Border BorderThickness="0,0,1,0"> <Border.Background> <LinearGradientBrush



x:Name="BackgroundGradient" StartPoint="0,0" EndPoint="0,1" > <GradientStop Color="#FFE3EFFF" Offset="0"/> <GradientStop Color="#FFC4DDFF" Offset="0.367"/> <GradientStop Color="#FFADD1FF" Offset="0.377"/> <GradientStop Color="#FFC0DBFF" Offset="1"/> </LinearGradientBrush> </Border.Background> </Border> <Border Name="brd" BorderThickness="0,0,1,0" Margin="0,3" BorderBrush="{StaticResource commandBaseBorderBrush}"/> <ContentPresenter x:Name="contentPresenter" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}"/> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> <Style TargetType="RadioButton" x:Key="radioButtonStyle"> <Setter Property="Width" Value="90"/> <Setter Property="Background" Value="{StaticResource buttBackBrush}" /> <Setter Property="Foreground" Value="#FF000000"/> <Setter Property="HorizontalContentAlignment" Value="Center"/> <Setter Property="VerticalContentAlignment" Value="Center"/> <Setter Property="FontSize" Value="14"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="RadioButton"> <Grid> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal"/> <VisualState x:Name="MouseOver"> <Storyboard> <DoubleAnimation Duration="0" Storyboard.TargetName="brd" Storyboard.TargetProperty="Opacity" To="0.15"/> <ColorAnimation Duration="0" Storyboard.TargetName="MouseOverGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[0].(GradientStop.Color)" To="#FFFFFCDE"/>



<ColorAnimation Duration="0" Storyboard.TargetName="MouseOverGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[1].(GradientStop.Color)" To="#FFFFEAAC"/> <ColorAnimation Duration="0" Storyboard.TargetName="MouseOverGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[2].(GradientStop.Color)" To="#FFFFD767"/> <ColorAnimation Duration="0" Storyboard.TargetName="MouseOverGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[3].(GradientStop.Color)" To="#FFFFE59B"/> </Storyboard> </VisualState> </VisualStateGroup> <VisualStateGroup x:Name="CheckStates"> <VisualState x:Name="Checked"> <Storyboard> <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[0].(GradientStop.Color)" To="#FFFFD9AA"/> <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[1].(GradientStop.Color)" To="#FFFFBB6E"/> <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[2].(GradientStop.Color)" To="#FFFFAB3F"/> <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[3].(GradientStop.Color)" To="#FFFEE17A"/> </Storyboard> </VisualState> <VisualState x:Name="Unchecked"/> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Border BorderThickness="0,0,1,0"> <Border.Background> <LinearGradientBrush x:Name="MouseOverGradient" StartPoint="0,0" EndPoint="0,1" > <GradientStop Color="Transparent" Offset="0"/> <GradientStop Color="Transparent" Offset="0.367"/> <GradientStop Color="Transparent" Offset="0.377"/> <GradientStop Color="Transparent" Offset="1"/> </LinearGradientBrush> </Border.Background> </Border> <Border Name="brd" BorderThickness="0,0,1,0"> <Border.Background> <LinearGradientBrush x:Name="BackgroundGradient" StartPoint="0,0" EndPoint="0,1" > <GradientStop Color="#FFE3EFFF" Offset="0"/>



<GradientStop Color="#F9C4DDFF" Offset="0.367"/> <GradientStop Color="#E5ADD1FF" Offset="0.377"/> <GradientStop Color="#C6C0DBFF" Offset="1"/> </LinearGradientBrush> </Border.Background> </Border> <Border BorderThickness="0,0,1,0" Margin="0,3" BorderBrush="{StaticResource commandBaseBorderBrush}"/> <ContentPresenter x:Name="contentPresenter" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}"/> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> </ResourceDictionary> </UserControl.Resources>

8. 次の XAML マークアップを挿入して、グリッド、アプリケーションの境界線、および Scheduler ビューを制御する４つのラ

ジオボタンを含むスタックパネルを作成します。

XAML

<Grid x:Name="LayoutRoot" Background="White"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition/> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="196"/> <ColumnDefinition MinWidth="200"/> </Grid.ColumnDefinitions> <Border BorderThickness="1" Height="28" HorizontalAlignment="Stretch" Grid.Column="0" Grid.ColumnSpan="2" BorderBrush="{StaticResource BorderBrush}" Background="{StaticResource buttBackBrush}"> <StackPanel Orientation="Horizontal" > <RadioButton x:Name="btnDay" Style="{StaticResource radioButtonStyle}" Content="Day" c1:CommandExtensions.CommandTarget="{Binding



ElementName=Scheduler}" c1:CommandExtensions.Command="sched:C1Scheduler.ChangeStyleCommand" c1:CommandExtensions.CommandParameter="{Binding Path=OneDayStyle, ElementName=Scheduler}"/> <RadioButton x:Name="btnWorkWeek" Style="{StaticResource radioButtonStyle}" Content="Work Week" c1:CommandExtensions.CommandTarget="{Binding ElementName=Scheduler}" c1:CommandExtensions.Command="sched:C1Scheduler.ChangeStyleCommand" c1:CommandExtensions.CommandParameter="{Binding Path=WorkingWeekStyle, ElementName=Scheduler}"/> <RadioButton x:Name="btnWeek" Style="{StaticResource radioButtonStyle}" Content="Week" c1:CommandExtensions.CommandTarget="{Binding ElementName=Scheduler}" c1:CommandExtensions.Command="sched:C1Scheduler.ChangeStyleCommand" c1:CommandExtensions.CommandParameter="{Binding Path=WeekStyle, ElementName=Scheduler}"/> <RadioButton x:Name="btnMonth" Style="{StaticResource radioButtonStyle}" Content="Month" c1:CommandExtensions.CommandTarget="{Binding ElementName=Scheduler}" c1:CommandExtensions.Command="sched:C1Scheduler.ChangeStyleCommand" c1:CommandExtensions.CommandParameter="{Binding Path=MonthStyle, ElementName=Scheduler}"/> <RadioButton x:Name="btnTimeLine" Style="{StaticResource radioButtonStyle}" Content="Time Line" Width="100" c1:CommandExtensions.CommandTarget="{Binding ElementName=Scheduler}" c1:CommandExtensions.Command="sched:C1Scheduler.ChangeStyleCommand" c1:CommandExtensions.CommandParameter="{Binding Path=TimeLineStyle, ElementName=Scheduler}"/> </StackPanel> </Border>

9. 次の XAML マークアップは、アプリケーションにリストボックス、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, Mode=TwoWay}"/> </DataTemplate> </ListBox.ItemTemplate> </ListBox> <c1sched:C1Scheduler x:Name="Scheduler" StyleChanged="Scheduler_StyleChanged" GroupBy="Owner" GroupHeaderTemplate="{StaticResource myCustomGroupHeaderTemplate}" GroupPageSize="2" Grid.Column="1" Grid.Row="1" Grid.RowSpan="2" Style="{Binding OneDayStyle, ElementName=Scheduler}" c1:C1NagScreen.Nag="True"> <c1sched:C1Scheduler.Settings> <c1sched:C1SchedulerSettings FirstVisibleTime="07:00:00" AllowContactsEditing="False" AllowCategoriesEditing="False" AllowCategoriesMultiSelection="False" /> </c1sched:C1Scheduler.Settings> </c1sched:C1Scheduler>  <StackPanel Margin="2" Grid.Row="3" Grid.ColumnSpan="2" Orientation="Horizontal"> <TextBlock Margin="2,2,10,2">Status:</TextBlock> <TextBlock Margin="2" x:Name="tbStatus" Grid.Row="2" MinHeight="10"/> </StackPanel> </Grid></UserControl>

この手順では、アプリケーションのデータ連結とリソースを作成しました。また、C1Scheduler コントロールと C1Calendar コント

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

します。

手順３：アプリケーションへのコードの追加手順３：アプリケーションへのコードの追加

この手順では、アプリケーションを制御するコードを追加します。

1. アプリケーションを右クリックし、リストから［コードの表示コードの表示］を選択します。

2. ページ先頭の Import ステートメントまたは using ステートメントに次のステートメントを追加します。

Visual Basic

Imports C1.Silverlight.ScheduleImports System.Collections.SpecializedImports C1.C1ScheduleImports C1.Silverlight.DataImports System.IOImports System.Windows.Data



Imports System.GlobalizationImports MultiUser.DataService

C#

using C1.Silverlight.Schedule;using System.Collections.Specialized;using C1.C1Schedule;using C1.Silverlight.Data;using MultiUser.DataService;using System.IO;using System.Windows.Data;using System.Globalization;using System.ServiceModel;

3. 次のコードを最初の class ステートメントの下に挿入します。

Visual Basic

Private _ds As DataSet = NothingPrivate _dtAppointments As DataTable = NothingPrivate _dtEmployees As DataTable = NothingPrivate _dtCustomers As DataTable = Nothing

C#

private DataSet _ds = null;private DataTable _dtAppointments = null;private DataTable _dtEmployees = null;private DataTable _dtCustomers = null;

4. 次のコードを InitializeComponent() メソッド呼び出しの直後に追加して、ReminderFire とScheduler.GroupItems.CollectionChanged の各イベントハンドラを設定します。

Visual Basic

AddHandler Scheduler.ReminderFire, AddressOf scheduler_ReminderFireAddHandler Scheduler.GroupItems.CollectionChanged, GroupItems_CollectionChanged

C#

Scheduler.ReminderFire += new EventHandler<ReminderActionEventArgs>(scheduler_ReminderFire);Scheduler.GroupItems.CollectionChanged += new NotifyCollectionChangedEventHandler(GroupItems_CollectionChanged);

5. スケジューラの AppointmentStorage、OwnerStorage、および ContactStorage のマッピングを設定します。

Visual Basic

' AppointmentStorages のマッピングを設定します

Dim storage As AppointmentStorage = Scheduler.DataStorage.AppointmentStorage storage.Mappings.AppointmentProperties.MappingName = "Properties" storage.Mappings.Body.MappingName = "Description" storage.Mappings.[End].MappingName = "End"



storage.Mappings.IdMapping.MappingName = "AppointmentId" storage.Mappings.Location.MappingName = "Location" storage.Mappings.Start.MappingName = "Start" storage.Mappings.Subject.MappingName = "Subject" storage.Mappings.OwnerIndexMapping.MappingName = "Owner" ' OwnerStorage のマッピングを設定します

Dim ownerStorage As ContactStorage = Scheduler.DataStorage.OwnerStorage AddHandler DirectCast(ownerStorage.Contacts, INotifyCollectionChanged).CollectionChanged, New NotifyCollectionChangedEventHandler(AddressOf Owners_CollectionChanged) ownerStorage.Mappings.IndexMapping.MappingName = "EmployeeId" ownerStorage.Mappings.TextMapping.MappingName = "FirstName" ' ContactStorage のマッピングを設定します

Dim cntStorage As ContactStorage = Scheduler.DataStorage.ContactStorage AddHandler DirectCast(cntStorage.Contacts, INotifyCollectionChanged).CollectionChanged, New NotifyCollectionChangedEventHandler(AddressOf Contacts_CollectionChanged) cntStorage.Mappings.IdMapping.MappingName = "CustomerId" cntStorage.Mappings.TextMapping.MappingName = "CompanyName" ' サーバーからデータをロードします

LoadData()

C#

// AppointmentStorages のマッピングを設定します

AppointmentStorage storage = Scheduler.DataStorage.AppointmentStorage; storage.Mappings.AppointmentProperties.MappingName = "Properties"; storage.Mappings.Body.MappingName = "Description"; storage.Mappings.End.MappingName = "End"; storage.Mappings.IdMapping.MappingName = "AppointmentId"; storage.Mappings.Location.MappingName = "Location"; storage.Mappings.Start.MappingName = "Start"; storage.Mappings.Subject.MappingName = "Subject"; storage.Mappings.OwnerIndexMapping.MappingName = "Owner"; // OwnerStorage のマッピングを設定します

ContactStorage ownerStorage = Scheduler.DataStorage.OwnerStorage; ((INotifyCollectionChanged)ownerStorage.Contacts).CollectionChanged += new NotifyCollectionChangedEventHandler(Owners_CollectionChanged); ownerStorage.Mappings.IndexMapping.MappingName = "EmployeeId"; ownerStorage.Mappings.TextMapping.MappingName = "FirstName"; // ContactStorage のマッピングを設定します

ContactStorage cntStorage = Scheduler.DataStorage.ContactStorage; ((INotifyCollectionChanged)cntStorage.Contacts).CollectionChanged += new NotifyCollectionChangedEventHandler(Contacts_CollectionChanged); cntStorage.Mappings.IdMapping.MappingName = "CustomerId"; cntStorage.Mappings.TextMapping.MappingName = "CompanyName"; // サーバーからデータをロードします

LoadData();

6. 次のコードを追加して、GroupItems_CollectionChanged イベントを処理します。

Visual Basic



Private Sub GroupItems_CollectionChanged(sender As Object, e As NotifyCollectionChangedEventArgs) For Each group As SchedulerGroupItem In Scheduler.GroupItems If group.Owner IsNot Nothing Then ' SchedulerGroupItem.Tag プロパティをデータ行に設定します。これで、xaml でデータ行フィールドを連結に使用できます

Dim index As Integer = CInt(group.Owner.Key(0)) group.Tag = _dtEmployees.Rows.Find(index) End If Next End Sub

C#

void GroupItems_CollectionChanged(object sender, NotifyCollectionChangedEventArgs e) { foreach (SchedulerGroupItem group in Scheduler.GroupItems) { if (group.Owner != null) { // SchedulerGroupItem.Tag プロパティをデータ行に設定します。これで、

xaml でデータ行フィールドを連結に使用できます

int index = (int)group.Owner.Key[0]; group.Tag = _dtEmployees.Rows.Find(index); } } }

7. 次のコードを使用して、Owners_CollectionChanged イベントを処理します。

Visual Basic

Private Sub Owners_CollectionChanged(sender As Object, e As NotifyCollectionChangedEventArgs) If e.Action = NotifyCollectionChangedAction.Add Then For Each cnt As Contact In e.NewItems Dim row As DataRow = _dtEmployees.Rows.Find(cnt.Key(0)) If row IsNot Nothing Then ' Contact.MenuCaption を FirstName + LastName 文字列に設定します

cnt.MenuCaption = row("FirstName").ToString() & " " & row("LastName").ToString() End If Next End If End Sub

C#

void Owners_CollectionChanged(object sender, NotifyCollectionChangedEventArgs e) { if (e.Action == NotifyCollectionChangedAction.Add) { foreach (Contact cnt in e.NewItems) {



DataRow row = _dtEmployees.Rows.Find(cnt.Key[0]); if (row != null) { // Contact.MenuCaption を FirstName + LastName 文字列に設定

します

cnt.MenuCaption = row["FirstName"].ToString() + " " + row["LastName"].ToString(); } } } }

8. Contacts_CollectionChanged イベントを処理する次のコードを挿入します。

Visual Basic

Private Sub Contacts_CollectionChanged(sender As Object, e As NotifyCollectionChangedEventArgs) If e.Action = NotifyCollectionChangedAction.Add Then For Each cnt As Contact In e.NewItems Dim row As DataRow = _dtCustomers.Rows.Find(cnt.Key(0)) If row IsNot Nothing Then ' Contact.MenuCaption を CompanyName + Contactname 文字列に設定

します

cnt.MenuCaption = row("CompanyName").ToString() & " (" & row("ContactName").ToString() & ")" End If Next End If End Sub

C#

void Contacts_CollectionChanged(object sender, NotifyCollectionChangedEventArgs e) { if (e.Action == NotifyCollectionChangedAction.Add) { foreach (Contact cnt in e.NewItems) { DataRow row = _dtCustomers.Rows.Find(cnt.Key[0]); if (row != null) { // Contact.MenuCaption を CompanyName + Contactname 文字

列に設定します

cnt.MenuCaption = row["CompanyName"].ToString() + " (" + row["ContactName"].ToString() + ")"; } } } }

9. アラームが表示されないようにするイベントハンドラを追加します。



Visual Basic

' アラームが表示されないようにします

Private Sub scheduler_ReminderFire(sender As Object, e As ReminderActionEventArgs) e.Handled = True End Sub

C#

// アラームが表示されないようにします

private void scheduler_ReminderFire(object sender, ReminderActionEventArgs e) { e.Handled = true; }

10. 次の Region を挿入して、データの読み込みを処理します。

Visual Basic

#Region "** loading data" ' 現在のホスト/ドメインに関連するデータサービスを取得します

Private Function GetDataService() As DataServiceSoapClient ' バッファサイズを増やします

Dim binding = New System.ServiceModel.BasicHttpBinding() binding.MaxReceivedMessageSize = 2147483647 ' int.MaxValue binding.MaxBufferSize = 2147483647 ' int.MaxValue ' サービスの絶対アドレスを取得します

Dim uri As Uri = C1.Silverlight.Extensions.GetAbsoluteUri("DataService.asmx") Dim address = New System.ServiceModel.EndpointAddress(uri) ' 新しいサービスクライアントを返します

Return New DataServiceSoapClient(binding, address) End Function Private Sub LoadData() ' Web サービスを呼び出します

Dim svc = GetDataService() AddHandler svc.GetDataCompleted, AddressOf svc_GetDataCompleted svc.GetDataAsync("Appointments,Employees,Customers") End Sub Private Sub svc_GetDataCompleted(sender As Object, e As GetDataCompletedEventArgs) ' エラーを処理します

If e.[Error] IsNot Nothing Then tbStatus.Text = "Error downloading data..." Return End If ' サーバーからのデータストリームを解析します（DataSet は XML） tbStatus.Text = String.Format("Got data, {0:n0} kBytes", e.Result.Length / 1024) Dim ms = New MemoryStream(e.Result) _ds = New DataSet()



_ds.EnforceConstraints = False _ds.ReadXml(ms) _ds.EnforceConstraints = True ' データを取得し、テーブルを検索します

_dtAppointments = _ds.Tables("Appointments") _dtEmployees = _ds.Tables("Employees") _dtCustomers = _ds.Tables("Customers") ' C1Scheduler データソースをサーバーからロードされた DataTable に設定します

Scheduler.DataStorage.AppointmentStorage.DataSource = _dtAppointments Scheduler.DataStorage.ContactStorage.DataSource = _dtCustomers Scheduler.DataStorage.OwnerStorage.DataSource = _dtEmployees End Sub#End Region

C#

#region ** loading data // 現在のホスト/ドメインに関連するデータサービスを取得します

DataServiceSoapClient GetDataService() { // バッファサイズを増やします

var binding = new System.ServiceModel.BasicHttpBinding(); binding.MaxReceivedMessageSize = 2147483647; // int.MaxValue binding.MaxBufferSize = 2147483647; // int.MaxValue // サービスの絶対アドレスを取得します

Uri uri = C1.Silverlight.Extensions.GetAbsoluteUri("DataService.asmx"); var address = new System.ServiceModel.EndpointAddress(uri); // 新しいサービスクライアントを返します

return new DataServiceSoapClient(binding, address); } void LoadData() { // Web サービスを呼び出します

var svc = GetDataService(); svc.GetDataCompleted += svc_GetDataCompleted; svc.GetDataAsync("Appointments,Employees,Customers"); } void svc_GetDataCompleted(object sender, GetDataCompletedEventArgs e) { // エラーを処理します

if (e.Error != null) { tbStatus.Text = "Error downloading data..."; return; } // サーバーからのデータストリームを解析します（DataSet は XML） tbStatus.Text = string.Format( "Got data, {0:n0} kBytes", e.Result.Length / 1024); var ms = new MemoryStream(e.Result); _ds = new DataSet(); _ds.EnforceConstraints = false; _ds.ReadXml(ms); _ds.EnforceConstraints = true;



// データを取得し、テーブルを検索します

_dtAppointments = _ds.Tables["Appointments"]; _dtEmployees = _ds.Tables["Employees"]; _dtCustomers = _ds.Tables["Customers"]; // C1Scheduler データソースをサーバーからロードされた DataTable に設定します

Scheduler.DataStorage.AppointmentStorage.DataSource = _dtAppointments; Scheduler.DataStorage.ContactStorage.DataSource = _dtCustomers; Scheduler.DataStorage.OwnerStorage.DataSource = _dtEmployees; } #endregion

11. 次のコードは Scheduler_StyleChanged イベントを処理します。

Visual Basic

Private Sub Scheduler_StyleChanged(sender As Object, e As RoutedEventArgs) If Scheduler.Style Is Scheduler.TimeLineStyle Then ' グループヘッダーを更新します（TimeLine とその他のビューにそれぞれ異なるヘッダーを使

用します）

Scheduler.GroupHeaderTemplate = DirectCast(Resources("myCustomTimeLineGroupHeaderTemplate"), DataTemplate) btnTimeLine.IsChecked = True Else ' グループヘッダーを更新します（TimeLine とその他のビューにそれぞれ異なるヘッダーを使

用します）

Scheduler.GroupHeaderTemplate = DirectCast(Resources("myCustomGroupHeaderTemplate"), DataTemplate) ' 現在の C1Scheduler ビューに応じて、ツールバーボタンの状態を更新します

If Scheduler.Style Is Scheduler.WorkingWeekStyle Then btnWorkWeek.IsChecked = True ElseIf Scheduler.Style Is Scheduler.WeekStyle Then btnWeek.IsChecked = True ElseIf Scheduler.Style Is Scheduler.MonthStyle Then btnMonth.IsChecked = True Else btnDay.IsChecked = True End If End If End Sub

C#

private void Scheduler_StyleChanged(object sender, RoutedEventArgs e) { if (Scheduler.Style == Scheduler.TimeLineStyle) { // グループヘッダーを更新します（TimeLine とその他のビューにそれぞれ異なるヘッ

ダーを使用します）

Scheduler.GroupHeaderTemplate = (DataTemplate)Resources["myCustomTimeLineGroupHeaderTemplate"]; btnTimeLine.IsChecked = true; } else



{ // グループヘッダーを更新します（TimeLine とその他のビューにそれぞれ異なるヘッダー

を使用します）

Scheduler.GroupHeaderTemplate = (DataTemplate)Resources["myCustomGroupHeaderTemplate"]; // 現在の C1Scheduler ビューに応じて、ツールバーボタンの状態を更新します

if (Scheduler.Style == Scheduler.WorkingWeekStyle) { btnWorkWeek.IsChecked = true; } else if (Scheduler.Style == Scheduler.WeekStyle) { btnWeek.IsChecked = true; } else if (Scheduler.Style == Scheduler.MonthStyle) { btnMonth.IsChecked = true; } else { btnDay.IsChecked = true; } } }

12. 最後に挿入する部分は、BooleanToVisibilityConverter を作成するコードです。

Visual Basic

Public Class BooleanToVisibilityConverter Implements IValueConverter Public Function Convert(value As Object, targetType As Type, parameter As Object, culture As CultureInfo) As Object If TypeOf value Is [Boolean] Then Return If(CBool(value), Visibility.Visible, Visibility.Collapsed) End If Return value End Function Public Function ConvertBack(value As Object, targetType As Type, parameter As Object, culture As CultureInfo) As Object Throw New NotImplementedException() End Function Public Function Convert1(value As Object, targetType As System.Type, parameter As Object, culture As System.Globalization.CultureInfo) As Object Implements System.Windows.Data.IValueConverter.Convert Return value End Function Public Function ConvertBack1(value As Object, targetType As System.Type, parameter As Object, culture As System.Globalization.CultureInfo) As Object Implements System.Windows.Data.IValueConverter.ConvertBack Return value End Function



End ClassEnd Class

C#

public class BooleanToVisibilityConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { if (value is Boolean) { return ((bool)value) ? Visibility.Visible : Visibility.Collapsed; } return value; } public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { throw new NotImplementedException(); } } }}


この手順ではアプリケーションを実行します。

1. ［［F5］］キーを押してアプリケーションを実行します。アプリケーションは次の図のように表示されます。



2. 左側のリストボックスに表示されるユーザーを制御できます。また、日付をダブルクリックすることで、任意のユーザー

のスケジュールに予定を追加できます。さらに、アプリケーション上部のボタンを使用して、ビューを制御することもでき

ます。


新しい Silverlight アプリケーションを作成し、コードファイルとデータサービスを追加しました。また、Access データベースをア

プリケーションのリソースとして追加しました。コードと XAML マークアップを使用して、アプリケーションのデザインと機能を作

成および制御しました。



タスク別ヘルプタスク別ヘルプ

タスク別ヘルプは、Visual Studio および Microsoft Blend でのプログラミングにある程度慣れていることを前提としています。

［ヘルプ］に示される手順に従って作業を進めるだけで、Scheduler for Silverlight のさまざまな機能を具体的に紹介するプロ

ジェクトを作成しながら、Scheduler for WPF/Silverlight の主要な機能と特長を理解できます。

また、各タスク別ヘルプトピックは、C1.WPF.Schedule.4 または C1.Silverlight.Schedule.5 アセンブリを参照する新しい

WPF/Silverlight アプリケーションプロジェクトが作成されていることを前提としています。

C1Scheduler のタスクのタスク

以下のトピックでは、特定の C1Scheduler タスクを実行する方法を示します。

スケジューラとカレンダーのリンクスケジューラとカレンダーのリンク

このトピックでは、Microsoft Blend、Visual Studio、および XAML を使用して、スケジュールを C1Calendar コントロールに連結す

る方法について説明します。

Microsoft Blend を使用する場合を使用する場合

Blend で C1Scheduler をカレンダーコントロールの１つにリンクするには、１つのプロパティを設定するだけです。

1. C1Scheduler コントロールと C1Calendar コントロールをウィンドウに追加します。

2. ［オブジェクトとタイムライン［オブジェクトとタイムライン］で scheduler1 をクリックし、コントロールの名前として「「C1Scheduler1」と入力します。必要に

応じて、［ウィンドウウィンドウ］→［オブジェクトとタイムラインオブジェクトとタイムライン］を選択して［オブジェクトとタイムラインオブジェクトとタイムライン］を表示します。

3. ウィンドウに追加した C1Calendar コントロールを選択します。

4. ［デザインデザイン］ビューの［プロパティ［プロパティ］パネルで、［日時指定日時指定］カテゴリの C1Calendar.SelectedDate プロパティの横にある［詳細詳細

オプションオプション］ボタンをクリックします。

5. ［カスタム式カスタム式］を選択し、次の式を入力します。

マークアップ

{Binding Path=SelectedDateTime, ElementName=C1Scheduler1, Mode=TwoWay}

これで、カレンダーで選択中の日付がスケジュールに連結されます。

［XAML］ビュータブをクリックすると、対応する XAML コードを表示できます。次のように表示されます。

XAML

<c1sched:C1Calendar HorizontalAlignment="Left" VerticalAlignment="Top" Theme="{DynamicResource {ComponentResourceKey ResourceId=Default, TypeInTargetAssembly={x:Type c1sched:CalendarBase}}}" SelectedDate="{Binding SelectedDateTime, ElementName=C1Scheduler1, Mode=TwoWay}">

6. ［F5］キーを押してプロジェクトを実行し、カレンダーで任意の日付を選択します。スケジュールの日付も同様に選択されま

す。



Visual Studio を使用する場合を使用する場合

C1Scheduler コントロールを C1Calendar コントロールにリンクするには、次の手順に従います。

1. C1Scheduler コントロールと C1Calendar コントロールをウィンドウに追加します。

2. C1Scheduler コントロールを選択します。

3. 必要に応じて、［プロパティ］ウィンドウの［名前名前］テキストボックスに「C1Scheduler1」と入力します。

4. ウィンドウに追加した C1Calendar コントロールを選択します。

5. ［XAML］ウィンドウで、 XAML を見つけます。

6. この XAML を次のように編集します。

マークアップ

<c1sched:C1Calendar HorizontalAlignment="Left" Margin="34,51,0,0" Name="c1Calendar1" VerticalAlignment="Top" SelectedDate="{Binding Path=SelectedDateTime, ElementName=C1Scheduler1, Mode=TwoWay}" />

7. ［F5］キーを押してプロジェクトを実行し、C1Calendar で任意の日付を選択します。スケジュールの日付も同様に選択され

ます。

XAML の使用の使用

次の XAML は、C1Scheduler を C1Calendar コントロールに連結します。

マークアップ

<c1sched:C1Calendar HorizontalAlignment="Left" Margin="34,51,0,0" Name="c1Calendar1" VerticalAlignment="Top" SelectedDate="{Binding Path=SelectedDateTime, ElementName=C1Scheduler1, Mode=TwoWay}" />

時間列のカスタマイズ時間列のカスタマイズ

C1Scheduler コントロールの時間列をカスタマイズするには、組み込みの C1Scheduler_TimeRuler_Template を編集する必

要があります。以下の例では、TimeRuler データテンプレートを編集して、時間列に時間を表示する方法と、時間列の背景色

を変更します。

時間列のレイアウトの変更時間列のレイアウトの変更

1. Visual Studio のソリューションエクスプローラで、プロジェクト名を右クリックし、［追加追加］→［リソースディクショナリリソースディクショナリ］を選



択します。

2. リソース辞書に名前を付け、［追加追加］をクリックします。

3. 次のように、C1Scheduler 名前空間を追加します。

XAML

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:c1sched="clr-namespace:C1.WPF.C1Schedule;assembly=C1.WPF.C1Schedule"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

4. ComponentOne と共に＜インストールフォルダ＞＜インストールフォルダ＞\Misc\Xaml\C1WPFSchedule にインストールされている

Default.xml を見つけて開きます。

5. C1Scheduler_TimeRuler_Template キーを含むデータテンプレートを見つけます。

XAML

 <DataTemplate x:Key="C1Scheduler_TimeRuler_Template"> <Grid Name="OneHourGrid"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition MinWidth="20" SharedSizeGroup="Minutes" /> </Grid.ColumnDefinitions> <ItemsControl Grid.Column="1" x:Name="IntervalMarkersList" ItemsSource="{Binding Items}"> <ItemsControl.ItemTemplate> <DataTemplate> <Border BorderThickness="0,1px,0,0" Margin="0,0,4,0" SnapsToDevicePixels="True" BorderBrush="{DynamicResource C1Scheduler_ControlAreaLines_Brush}" /> </DataTemplate> </ItemsControl.ItemTemplate> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <UniformGrid Rows="{Binding ElementName=IntervalMarkersList, Path=Items.Count}" /> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> </ItemsControl> <Border BorderThickness="0,1px,0,0" Margin="4,0,0,0" Grid.Column="0" SnapsToDevicePixels="True" BorderBrush="{DynamicResource C1Scheduler_ControlAreaLines_Brush}" HorizontalAlignment="Right" VerticalAlignment="Top" MinWidth="25"> <TextBlock FontSize="16" Foreground="{DynamicResource C1Scheduler_ControlAreaText_Brush}" HorizontalAlignment="Right" Padding="3,0,3,0"



> <TextBlock.Text> <MultiBinding Converter="{x:Static c1sched:DateTimeInfoToStringConverter.Default}"> <Binding Path="StartTimeInfo"/> <Binding Source="hh" /> </MultiBinding> </TextBlock.Text> </TextBlock> </Border> <TextBlock FontSize="11" Grid.Column="1" Foreground="{DynamicResource C1Scheduler_ControlAreaText_Brush}" HorizontalAlignment="Right" Padding="3,2,2,0" Margin="0,0,4,0"> <TextBlock.Text> <Binding Converter="{x:Static c1sched:TimeRulerConverter.Default}" Path="VisualIntervals[0].StartTimeInfo" /> </TextBlock.Text> </TextBlock> </Grid> </DataTemplate>

6. データテンプレートをコピーして、リソース辞書に貼り付けます。

7. 次の XAML を変更します。

マークアップ

<TextBlock Text="{Binding VisualIntervals[0].StartTimeInfo.FormattedDate[hh]}"


<TextBlock Text="{Binding VisualIntervals[0].StartTimeInfo.FormattedDate[%h]}"

8. ソリューションエクスプローラで、Window1.xaml またはプロジェクトのメインウィンドウ/ページをダブルクリックします。

9. リソース辞書を指定するためのリソースを追加します。

XAML

<Window.Resources><ResourceDictionary><ResourceDictionary x:Key="{ComponentResourceKey TypeInTargetAssembly={x:Type my:C1Scheduler},ResourceId=custom_theme}" Source="MyResourceDictionary.xaml" /></ResourceDictionary></Window.Resources>

次の例は、データテンプレートを変更する前の時間列と、カスタム書式文字列に変更した後の時間列です。

書式文字列書式文字列 hh 書式文字列書式文字列 %h



時間列の色の変更時間列の色の変更

1. Visual Studio のソリューションエクスプローラで、プロジェクト名を右クリックし、［追加追加］→［リソースディクショナリリソースディクショナリ］を選

択します。

2. リソース辞書に名前を付け、［追加追加］をクリックします。

3. 次のように、C1Scheduler 名前空間を追加します。

XAML

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:c1sched="clr-namespace:C1.WPF.C1Schedule;assembly=C1.WPF.C1Schedule"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

4. ComponentOne と共に＜インストールフォルダ＞＜インストールフォルダ＞\Misc\Xaml\C1WPFSchedule にインストールされている

Default.xml を見つけて開きます。

5. C1Scheduler_TimeRuler_Template キーを含むデータテンプレートを見つけます。

XAML

<DataTemplate x:Key="C1Scheduler_TimeRuler_Template"><Grid Name="OneHourGrid"><Grid.ColumnDefinitions><ColumnDefinition Width="Auto" /><ColumnDefinition MinWidth="20" SharedSizeGroup="Minutes" /></Grid.ColumnDefinitions><ItemsControl Grid.Column="1" x:Name="IntervalMarkersList" ItemsSource="{Binding Items}"><ItemsControl.ItemTemplate><DataTemplate><Border BorderThickness="0,1px,0,0" Margin="0,0,4,0" SnapsToDevicePixels="True"BorderBrush="{DynamicResource C1Scheduler_ControlAreaLines_Brush}" /></DataTemplate></ItemsControl.ItemTemplate><ItemsControl.ItemsPanel><ItemsPanelTemplate>



<UniformGrid Rows="{Binding ElementName=IntervalMarkersList, Path=Items.Count}" /></ItemsPanelTemplate></ItemsControl.ItemsPanel></ItemsControl><Border BorderThickness="0,1px,0,0" Margin="4,0,0,0" Grid.Column="0" SnapsToDevicePixels="True"BorderBrush="{DynamicResource C1Scheduler_ControlAreaLines_Brush}"HorizontalAlignment="Right" VerticalAlignment="Top" MinWidth="25"><TextBlock Text="{Binding VisualIntervals[0].StartTimeInfo.FormattedDate[hh]}"FontSize="16"Foreground="{DynamicResource C1Scheduler_ControlAreaText_Brush}"HorizontalAlignment="Right" Padding="3,0,3,0" /></Border><TextBlock FontSize="11" Grid.Column="1"Foreground="{DynamicResource C1Scheduler_ControlAreaText_Brush}"HorizontalAlignment="Right" Padding="3,2,2,0" Margin="0,0,4,0"><TextBlock.Text><Binding Converter="{x:Static c1sched:TimeRulerConverter.Default}"Mode="OneWay" Path="VisualIntervals[0].StartTimeInfo" /></TextBlock.Text></TextBlock></Grid></DataTemplate>

6. データテンプレートをコピーして、リソース辞書に貼り付けます。

7. Grid Name を編集して背景色を追加します。

マークアップ

<Grid Name="OneHourGrid" Background="Orange">

8. ソリューションエクスプローラで、Window1.xaml またはプロジェクトのメインウィンドウ/ページをダブルクリックしま

す。

9. リソース辞書を指定するためのリソースを追加します。

XAML

<Window.Resources><ResourceDictionary><ResourceDictionary x:Key="{ComponentResourceKey TypeInTargetAssembly={x:Type my:C1Scheduler},ResourceId=custom_theme}" Source="MyResourceDictionary.xaml" /></ResourceDictionary></Window.Resources>

この XAML は、次の図のようなスケジュールを作成します。



さまざまなビューの時間間隔のカスタマイズさまざまなビューの時間間隔のカスタマイズ

さまざまなビューの時間間隔のカスタマイズさまざまなビューの時間間隔のカスタマイズ

Scheduler for WPF/Silverlight では、1 日より短い表示間隔を含むビュー（日ビュー、週間勤務日ビュー、週ビュー、タイム

ラインビューなど）の時間間隔をカスタマイズできます。C1Scheduler クラスは、XAML で時間間隔を設定するための

SmallVisualIntervalScale プロパティ（VisualIntervalScale プロパティに依存する依存プロパティ）を提供します。

SmallVisualIntervalScale プロパティに特定の値を設定するか、このプロパティを scale などのスケジューラ要素に連結する

ことで、ビューがエンドユーザーによって変更されるたびに時間間隔を更新できます。デフォルトで

は、SmallVisualIntervalScale プロパティは TimeSpan.Zero に設定されています。このため、SmallVisualIntervalScale プロ

パティに値が設定されていない場合、あるいはこのプロパティが XAML で何らかの要素に連結されていない場合は、

VisualScaleInterval プロパティだけが有効です。

このプロパティを使用して、ビューが切り替えられる際に、カスタムスケーリングを適用および保持できます。

次の XAML コードスニペットは、SmallVisualIntervalScale プロパティを scale 要素に連結する方法を示します。

XAML

<c1sched:C1Scheduler x:Name="scheduler1" Grid.Column="1" Margin="10 0 0 0" BorderThickness="1" ShowWorkTimeOnly="True" ViewType="Month" SmallVisualIntervalScale="{Binding SelectedItem, ElementName=scale}">

次の C# コードを使用して、XAML の操作ロジックで scale 要素を初期化します。上記のコード例で使用されている

SmallVisualIntervalScale プロパティは、下記のコードで初期化される scale 要素に連結します。

C#



// タイムスケールコンボボックスを初期化します

scale.Items.Add(TimeSpan.FromMinutes(10));scale.Items.Add(TimeSpan.FromMinutes(15));scale.Items.Add(TimeSpan.FromMinutes(20));scale.Items.Add(TimeSpan.FromMinutes(30));scale.Items.Add(TimeSpan.FromMinutes(60));scale.Items.Add(TimeSpan.FromHours(2));

ナビゲーションペインのテキストの変更ナビゲーションペインのテキストの変更

ナビゲーションペインのテキストは、NextAppointmentText プロパティと PreviousAppointmentText プロパティを設定す

るだけで変更できます。

Microsoft Blend を使用する場合を使用する場合

Blend でナビゲーションペインのテキストを変更するには、次の手順に従います。

1. C1Scheduler コントロールをウィンドウに追加します。

2. ［デザインデザイン］ビューの［プロパティプロパティ］パネルで、外観外観ノードを展開し、NextAppointmentText プロパティに「次へ次へ」と入力

します。

3. PreviousAppointmentText プロパティに「前へ前へ」と入力します。


Visual Studio でナビゲーションペインのテキストを変更するには、次の手順に従います。


2. ［プロパティ］ウィンドウで、NextAppointmentText プロパティを「次へ次へ」に設定します。

3. PreviousAppointmentText プロパティを「前へ前へ」に設定します。


次の XAML は、NextAppointmentText プロパティと PreviousAppointmentText プロパティを設定します。

XAML

<c1sched:C1Scheduler Margin="15,15,0,12" Name="C1Scheduler2" Grid.ColumnSpan="2" NextAppointmentText="次へ" PreviousAppointmentText="前へ" Theme="{DynamicResource {ComponentResourceKey TypeInTargetAssembly=c1sched:C1Scheduler, ResourceId=Office2007.Default}}"></c1sched:C1Scheduler>

スケジュールは、次の図のようになります。



ContactStorage のマッピングとデータソースの設定のマッピングとデータソースの設定

ContactStorage のマッピングとデータソースを設定するには、次のコードを使用します。

C#

// ContactStorage のマッピングとデータソースを設定します

ContactStorage cntStorage = Scheduler.DataStorage.ContactStorage;((INotifyCollectionChanged)cntStorage.Contacts).CollectionChanged += new NotifyCollectionChangedEventHandler(Contacts_CollectionChanged);cntStorage.Mappings.IdMapping.MappingName = "CustomerId";cntStorage.Mappings.TextMapping.MappingName = "CompanyName";cntStorage.DataSource = dataSet.Customers;

［稼働日］ビューの曜日の設定［稼働日］ビューの曜日の設定

［稼働日稼働日］ビューに表示する曜日を指定するには、CalendarHelper プロパティから WorkDays を設定します。

Blend を使用する場合を使用する場合

Blend で［稼働日］ビューの曜日を設定するには、次の手順に従います。

1. C1Scheduler コントロールをウィンドウに追加して選択します。

2. ［デザインデザイン］ビューの［プロパティ］パネルで、外観外観ノードを展開します。

3. ［Style］の横にあるドロップダウン矢印をクリックし、［WorkingWeekStyle］を選択します。

4. Calendar ノードを展開し、CalendarHelper ノードを展開します。

5. ［WorkDays］の横にあるドロップダウン矢印をクリックし、稼働日として表示する曜日の横にあるチェックボックスをオ

ンにします。




Visual Studio で［稼働日稼働日］ビューの曜日を設定するには、次の手順に従います。


2. ［プロパティプロパティ］ウィンドウで、Style プロパティを［WorkingWeekStyle］に設定します。

3. CalendarHelper プロパティを展開し、［WorkDays］の横にあるドロップダウン矢印をクリックします。

4. 稼働日として表示する曜日の横にあるチェックボックスをオンにします。


次の XAML は、［稼働日稼働日］ビューの曜日を設定します。

XAML

<c1sched:C1Scheduler x:Name="scheduler1" Theme="{DynamicResource {ComponentResourceKey TypeInTargetAssembly=c1sched:C1Scheduler, ResourceId=Office2007.Default}}" Style="{DynamicResource {ComponentResourceKey TypeInTargetAssembly=c1sched:C1Scheduler, ResourceId=WorkingWeekStyle}}"> <c1sched:C1Scheduler.CalendarHelper> <c1sched:CalendarHelper Culture="Japanese" WeekStart="Sunday" EndDayTime="18:20:00" StartDayTime="09:20:00" WorkDays="Tuesday,Wednesday,Thursday,Friday,Saturday"> </c1sched:CalendarHelper> </c1sched:C1Scheduler.CalendarHelper></c1sched:C1Scheduler>

C1Scheduler への休日の追加への休日の追加

Holidays プロパティを使用して、C1Scheduler コントロールに休日を追加できます。このプロパティは XAML では設定でき

ず、コードでのみ設定できます。

C1Scheduler に休日を追加するには、次のコードを使用します。

XAML

sched1.CalendarHelper.Holidays.Add(new DateTime(2013, 1, 1));sched1.CalendarHelper.Holidays.Add(new DateTime(2012, 12, 25));sched1.CalendarHelper.Holidays.Add(new DateTime(2012, 12, 31));

このトピックの作業結果このトピックの作業結果

C1Scheduler コントロールで、休日に指定された日には予定を作成できません。



グループ化グループ化

GroupBy プロパティを使用して、簡単にグループ化を行うことができます。このプロパティは、表示するグループ化の種類を

決定します。C1Scheduler コントロールは、連絡先、カテゴリ、リソースや、Owner プロパティの値に基づくグループ化をサ

ポートしています。

文字列文字列グループ化グループ化

空文字列グループ化なし。

Category グループ化は、Appointment.Categories プロパティ値によって決定されます。

Contact グループ化は、Appointment.Links プロパティ値によって決定されます。

Owner グループ化は、Appointment.Owner プロパティ値によって決定されます。

Resource グループ化は、Appointment.Resources プロパティ値によって決定されます。

カレンダーにリンクされたスケジュールがプロジェクトにあるとします。XAML は、次のようになります。

XAML(WPF)

<Window x:Class="Grouping.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="574" Width="757" xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml" xmlns:c1sched="http://schemas.componentone.com/wpf/Schedule" Loaded="Window_Loaded"> <Grid Height="371" Width="689"> <c1:C1Calendar x:Name="cal1" CalendarHelper="{Binding CalendarHelper,



ElementName=sched1, Mode=OneWay}" SelectedDates="{Binding VisibleDates, ElementName=sched1, Mode=OneWay}" BoldedDates="{Binding BoldedDates, ElementName=sched1, Mode=OneWay}" MaxSelectionCount="42" Margin="-9,7,459,188" /> <c1:C1Scheduler x:Name="sched1" Margin="195,0,12,62"/> </Grid></Window>

XAML(Silverlight)

<UserControl x:Class="SilverlightApplication11.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignHeight="540" d:DesignWidth="687" xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml"> <Grid x:Name="LayoutRoot" Background="White" Height="434" Width="591"> <c1:C1Calendar x:Name="cal1" CalendarHelper="{Binding CalendarHelper, ElementName=sched1, Mode=OneWay}" SelectedDates="{Binding VisibleDates, ElementName=sched1, Mode=OneWay}" BoldedDates="{Binding BoldedDates, ElementName=sched1, Mode=OneWay}" MaxSelectionCount="42" Margin="-9,7,459,188" /> <c1:C1Scheduler x:Name="sched1" Margin="195,0,12,62"/> </Grid></UserControl>

MainWindow をダブルクリックし、Window_Loaded イベントに次のコードを追加します。

Visual Basic

Private Sub Window_Loaded(sender As Object, e As RoutedEventArgs) sched1.GroupBy = "Category"End Sub

C#

C#private void Window_Loaded(object sender, RoutedEventArgs e) { sched1.GroupBy = "Category"; }

プロジェクトを実行すると、スケジュールがカテゴリ別にグループ化されます。これは、最も簡単な例です。完全なサンプルにつ

いては、プロジェクトと共にインストールされている Grouping サンプルを参照してください。

C1Calendar のタスクのタスク

以下のトピックでは、特定のカレンダータスクを実行する方法を示します。

カレンダーの月または年の変更カレンダーの月または年の変更



SelectedDate プロパティを使用して、C1Calendar コントロールで選択中の月または年を簡単に変更できます。


次の XAML は、SelectedDate プロパティを設定します。

XAML

<c1sched:C1Calendar Margin="10,10,82,89" Name="c1Calendar1" HorizontalAlignment="Left" Width="182" Height="159" VerticalAlignment="Top" SelectedDate="2010-12-27" />

実行時実行時

実行時に、C1Calendar コントロールの月または年を変更するには、次の手順に従います。

1. カレンダーの上に表示されている月または年をクリックします。ポップアップリストが表示されます。

2. 目的の月または年を選択します。目的の月または年がリストに表示されていない場合は、前月または前年を選択して

から、再度月または年をクリックして、新しいリストを表示してください。

最大最大/最小日付の設定最小日付の設定

C1Calendar の最大/最小日付を設定するには、MaxDate プロパティと MinDate プロパティを使用します。


Visual Studio で、C1Calendar の最大/最小日付を設定するには、次の手順に従います。

1. C1Calendar コントロールをウィンドウに追加して選択します。

2. ［プロパティ］ウィンドウで、MaxDate プロパティの横に「12/31/2099」と入力します。

3. ［プロパティ］ウィンドウで、MinDate プロパティの横に「1/1/1700」と入力します。


次の XAML は、MaxDate プロパティと MinDate プロパティを設定します。

XAML

<c1sched:C1Calendar HorizontalAlignment="Left" Margin="10,10,0,0" Name="c1Calendar1" VerticalAlignment="Top" MaxDate="2099-12-31" MinDate="1700-01-01" />



月領域の前月および翌月の日付の表示月領域の前月および翌月の日付の表示

月領域に前月および翌月の日付を表示するには、GenerateAdjacentMonthDays プロパティを有効にします。


Visual Studio で、C1Calendar の月領域に前月および翌月の日付を表示するには、次の手順に従います。


2. ［プロパティプロパティ］ウィンドウで、GenerateAdjacentMonthDays プロパティの横にあるチェックボックスをオンにします。


次の XAML は、GenerateAdjacentMonthDays プロパティを設定します。

XAML

<c1sched:C1Calendar HorizontalAlignment="Left" Margin="10,10,0,0" Name="c1Calendar1" VerticalAlignment="Top" GenerateAdjacentMonthDays="True" />

このトピックの作業結果このトピックの作業結果

C1Calendar の月領域に、前月と翌月の日付が灰色のテキストで表示されます。

C1Calendar で選択可能な最大日数の指定で選択可能な最大日数の指定

C1Calendar で選択可能な最大日数を指定するには、MaxSelectionCount プロパティに整数を設定します。この例では、カ

レンダーの月表示領域で、最大 31 日を選択可能にします。


Visual Studio で、選択可能な最大日数を「31」に設定するには、次の手順に従います。


2. ［プロパティ］ウィンドウで、MaxSelectionCount プロパティの横に「31」と入力します。


次の XAML は、MaxSelectionCount プロパティを「31」に設定します。

XAML

<c1sched:C1Calendar HorizontalAlignment="Left" Margin="10,10,0,0" Name="c1Calendar1"



VerticalAlignment="Top" MaxSelectionCount="31" />