Scheduler for WPF/Silverlight

Transcription

1 更新 グレープシティ株式会社

2 目次 製品の概要 6 ComponentOne for WPF/Silverlight のヘルプ 6 主な特長 7 Scheduler for WPF クイックスタート 8 手順 1: データソースの設定 8-9 手順 2: データソースへの C1Scheduler の連結 9-12 手順 3: データビューとテーマの選択 手順 4: アプリケーションの実行 Scheduler for Silverlight クイックスタート 16 手順 1: アプリケーションの作成 16 手順 2: データビューの設定 手順 3: ナビゲーションボタンの追加 17 手順 4: アプリケーションの実行 17 XAML クイックリファレンス 18 例 : ネストされたプロパティに値を割り当てる 18 例 : 稼働日ビューの曜日を設定する 18 例 :C1Scheduler を C1Calendar に連結する コントロールとコンポーネント C1Scheduler コントロールを使用する レイアウトおよび外観 22 C1Scheduler のデータビュー C1Scheduler データビューのキーと外観 C1Scheduler のデフォルトのスタイルとテンプレート 27 デフォルトテンプレートの使用 ClearStyle 技術 28 C1Scheduler for WPF のテーマ C1Scheduler のテーマの設定 デフォルトの C1Scheduler のテーマリソース カスタムのスタイルとテンプレートを作成するためのヒント カスタムテーマの作成 テーマパックの作成 Copyright GrapeCity, Inc. All rights reserved.

3 テーマパックのテスト Blend でのテーマの作成 40 C1Scheduler for Silverlight のテーマ デフォルトのテーマ カスタムテーマの作成 42 ユーザーインターフェイスのカスタマイズ ユーザーインターフェイス作成の簡略化 46 複数の日の予定を表示する Visual Intervals のスタイルとテンプレートの選択 Scheduler のコマンド ネストされたプロパティへの値の割り当て 52 WPF を使用してC1Scheduler の連結 52 データソースへの C1Scheduler の連結 PropertyBridge クラスを使用したデータ連結 Silverlight を使用して C1Scheduler の連結 57 予定データの連結 データ中心型アーキテクチャ (Silverlight のみ ) サンプルアプリケーション 60 アプリケーションの作成 60 参照の追加 UI の作成 61 サーバー側の実装 61 データベースアクセスインフラストラクチャの追加 Web サービスの実装 クライアント側の実装 65 Web サービスへの参照の追加 Web サービスを使ったデータの取得 サーバーへの変更のコミット ローカライズしたリソースのプロジェクトへの追加 カレンダーの設定 C1Calendar コントロールの使い方 C1Calendar の要素 74 カレンダー日のセル ( スロット ) Copyright GrapeCity, Inc. All rights reserved.

4 日スロットの生成 75 曜日 75 C1Calendar の外観 C1Calendar のプロパティ 76 色のプロパティ テキストのプロパティ 79 C1Calendar のテーマ (WPF のみ ) カレンダーのテーマの設定 デフォルトのカレンダーテーマのリソース 82 カレンダーのテンプレート C1Calendar のレイアウト 83 C1Calendar レイアウトのプロパティ 複数月カレンダーの表示 C1Calendar の配置 85 C1Calendar の動作 85 C1Calendar のナビゲーション C1Calendar の選択 86 設定 カレンダーコントロールへのスケジュールの連結 予定 91 ラベル 公開方法 アラーム 連絡先 94 連絡先リストの追加 予定への連絡先の割り当て 95 分類 分類リストの追加 予定への分類の割り当て 97 リソース 97 リソースリストの追加 実行時における予定の操作 予定の追加と保存 99 3 Copyright GrapeCity, Inc. All rights reserved.

5 予定の編集 予定の削除 100 予定の繰り返し Scheduler for WPF チュートリアル 103 カスタムグループ化ビューの作成 103 手順 1: アプリケーションの作成 手順 2: アプリケーションへのコードの追加 手順 3: リソースディクショナリの作成 手順 4: アプリケーションの完成 複数ユーザースケジュールの作成 121 手順 1: アプリケーションの作成 手順 2: リソースと C1Scheduler コントロールの作成 手順 3: アプリケーションへのコードの追加 手順 4: アプリケーションの実行 Scheduler for Silverlight チュートリアル 131 カスタムデータを使用するカスタムアプリケーションの作成 131 手順 1: アプリケーションの作成 131 手順 2: カスタムデータ構造の定義 手順 3: カスタム予定ダイアログの作成 手順 4: アプリケーションメインページへの機能の追加 手順 5: アプリケーションの完成 カスタムビューの作成 154 手順 1: アプリケーションの作成 手順 2: データテンプレートの作成と C1Schedule コントロールの追加 手順 3: アプリケーションを制御するコードの追加 手順 4: アプリケーションの実行 複数ユーザースケジュールの作成 167 手順 1: アプリケーションの作成 手順 2: リソースと C1Scheduler コントロールの作成 手順 3: アプリケーションへのコードの追加 手順 4: アプリケーションの実行 タスク別ヘルプ Copyright GrapeCity, Inc. All rights reserved.

6 C1Scheduler のタスク 196 スケジューラとカレンダーのリンク 時間列のカスタマイズ さまざまなビューの時間間隔のカスタマイズ ナビゲーションペインのテキストの変更 ContactStorage のマッピングとデータソースの設定 204 [ 稼働日 ] ビューの曜日の設定 C1Scheduler への休日の追加 グループ化 C1Calendar のタスク 207 カレンダーの月または年の変更 最大 / 最小日付の設定 208 月領域の前月および翌月の日付の表示 C1Calendar で選択可能な最大日数の指定 Copyright GrapeCity, Inc. All rights reserved.

7 製品の概要 Scheduler for WPF/Silverlight を使用すると Outlook 形式のスケジュール機能を WPF/Silverlight アプリケーションに簡単に組み込むことができます カスタマイズ可能なダイアログボックス 組み込みデータビュー インポート / エクスポート機能などのオプションにより スケジュールアプリケーションの設計が今までになく容易になっています メモ : 説明内に含まれるクラスおよびメンバーに対するリファレンスへのリンクは 原則としてWPF 版のリファレンスページを参照します Silverlight 版については 目次から同名のメンバーを参照してください ComponentOne for WPF/Silverlight のヘルプ ComponentOne for WPF/Silverlight のインストール ライセンス テクニカルサポート 名前空間 およびコントロールを含むプロジェクトの作成方法については ComponentOne for WPF/Silverlight ユーザーガイド を参照してください 6 Copyright GrapeCity, Inc. All rights reserved.

8 主な特長 Scheduler for WPF/Silverlight が備える便利な主要機能の一部を以下に示します 複数の組み込みデータビューから選択する C1Scheduler コントロールには 5 つの組み込みデータビューがあります このデータビューを使用することで スケジュールをさまざまな方法で表示する機能をユーザーに提供できます スケジュールを日 週 週間勤務日 または月単位で表示できます カスタムビューを作成する カスタムスケジュールビューを作成して使用することができます 任意のデータソースにスケジュールを連結する Scheduler for WPF には 標準の ADO.NET データ連結を使用する方法と 組み込みデータソースを使用する方法があります C1ScheduleStorage コンポーネントと連携するデータソース設定を使用することで テーブル内の各列にデータソースをマップし 予定 カテゴリ 連絡先 ラベル リソース 予定の状態などを保存したりロードすることができます カスタマイズされたダイアログボックスの作成 Scheduler for WPF では [ 予定 ] [ 繰り返し ] [ アラーム ] などのダイアログボックスに対して 独自の外観を設定できます それには Scheduler for WPF に付属するデフォルトのテンプレートをコピーし 目的の要素をカスタマイズします 空のテンプレートを作成したり [ 予定 ] などのダイアログボックスを最初から設計することもできます Scheduler for WPF テンプレートの詳細については C1Scheduler のデフォルトのスタイルとテンプレート を参照してください Outlook 形式の予定の作成 C1Scheduler コントロール内で新しい予定の追加や既存の予定の編集を簡単に行えます Microsoft Outlook と同様に 予定を 1 回だけ発生させたり 設定した時間が過ぎるまで何回も発生させることができます また 予定を忘れないためにアラームを設定できます さらに C1Scheduler は ユーザーが予定を管理しやすいように 12 個の組み込みラベルと 4 つの空き状況オプションのほか カスタムラベルを作成する機能も提供しています 予定はカテゴリに分けて整理でき 各予定にリソースや連絡先を指定できます 複数の書式のインポートとエクスポート 組み込みデータソースを使用する場合は サポートされている書式 ( バイナリ XML ical) の中からアプリケーションに適した書式でデータを保存またはロードできます それには C1ScheduleStorage の Export メソッドと Import メソッドを使用するか C1Scheduler ルーティングコマンドの ExportCommand と ImportCommand を使用します Office 2007 形式のテーマ Scheduler for WPF には C1Scheduler とカレンダーコントロールのための 7 個の定義済みテーマのほか カスタマイズされたテーマを作成する機能もあります 組み込みテーマの詳細については C1Scheduler WPF のテーマ C1Scheduler Silverlight Themes または C1Calendar のテーマ を参照してください 7 Copyright GrapeCity, Inc. All rights reserved.

9 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] をクリックし [ データソース設定ウィザード ] ダイアログボックスで [ 次へ ] をクリックします プロジェクトにファイルをコピーするかどうかを質問されたら [ いいえ ] をクリックします 接 8 Copyright GrapeCity, Inc. All rights reserved.

10 続には名前が付けられます 新しい接続を作成したら [ 次へ ] を再度クリックします [ 次へ ] をクリックして接続文字列を保存します [ テーブル ] ノードを選択し [ データセット名 ] を [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 Studio 2010で作成したプロジェクト (.sln) を開きます 9 Copyright GrapeCity, Inc. All rights reserved.

11 2. [ プロジェクト ] パネルの Page1.xaml をダブルクリックしてページを開き 必要に応じて [ デザイン ] タブをクリックしてデザインビューにアクセスします 3. C1Scheduler コントロールをページに追加します Visual Studio 2010 でプロジェクトを作成したときに C1.WPF.C1Schedule アセンブリへの参照を既に追加しているので 必要な作業は [ アセット ] パネルから C1Scheduler を追加するだけです Blend の [ ツール ] パネルにある [ アセット ] ボタンをクリックします [ アセット ] パネルで [ カテゴリ ] タブをクリックします C1Scheduler を選択します このコンポーネントは [ ツール ] パネルの [ アセット ] ボタンの下に表示されます [ ツール ] パネルの [C1Scheduler] ボタンをダブルクリックして ページに追加します 4. [XAML] タブをクリックして XAML ビューに切り替えます 5. Page タグ内の名前空間のリストに次の XAML コードを追加して CLR 名前空間を作成します clr-namespace の値には Visual Studio 2010 プロジェクトの名前を使用します XAML は 次のようになります XAML <Page xmlns=" xmlns:x=" x:class="myprojectname.page1" Title="Page1" xmlns:c1sched=" 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] ダイアログボックスが表示されます 10 Copyright GrapeCity, Inc. All rights reserved.

12 4. [DataSource] プロパティの隣にある [ 詳細オプション ] ボタンをクリックし [ ローカルリソース ] を選択し [dataset] をオンにします このプロパティが ScheduleDataSet に設定されます 5. DataMember プロパティの隣に Appointments と入力します C1Scheduler が Appointments テーブルにマップされ そのデータに基づいてスケジュールに値が挿入されます 6. 次に プロパティと Appointments テーブルの対応するデータフィールドとのマッピングを設定します 各 [Property Mappings] 項目に次のテキストを入力します プロパティ Body End Location Start Subject AppointmentProperties IdMapping テキスト Body End Location Start Subject Properties Id IndexMapping 11 Copyright GrapeCity, Inc. All rights reserved.

13 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 つを選択します データビューを選択するには 1. C1Scheduler が選択されたままになっていることを確認します 2. [ プロパティ ] パネルの [ ビュー ] で Style プロパティの隣にあるドロップダウン矢印をクリックし [ リセット ] をクリックしま 12 Copyright GrapeCity, Inc. All rights reserved.

14 す 3. ドロップダウン矢印を再度クリックし [ 週ビュー ] を選択します テーマを選択するには [ ビュー ] ノードを展開し Theme の隣にあるドロップダウン矢印をクリックし Office 2007 Black を選択します 手順 4: : アプリケーションの実行 これで スケジュールアプリケーションを作成し スケジュールをデータソースに連結し スケジュールの外観を Blend でカスタマイズできたので 最後にアプリケーションを実行してみます スケジュールアプリケーションを実行して Scheduler for WPF の実行時の動作を確認するには 1. [F5] キーを押すか [ デバッグ ] メニューから [ デバッグの開始 ] を選択します スケジュールと [ アラーム ] ダイアログボックスが表示されます [ すべてのアラームを消す ] をクリックします 2. 目的の日時の下にある予定の時刻をダブルクリックして予定を設定します この例では 6 月 9 日水曜日の午前 8 時に予定を作成します [ 予定 ] ダイアログボックスが開きます 13 Copyright GrapeCity, Inc. All rights reserved.

15 3. [ 件名 ] に 医者との予定 [ 場所 ] に 病院 [ 終了時刻 ] に 9:00AM と入力します 4. [ ラベル ] の隣にあるドロップダウン矢印をクリックして [ 個人用 ] を選択します 14 Copyright GrapeCity, Inc. All rights reserved.

16 5. [ 保存して閉じる ] ボタンをクリックします スケジュールに新しい予定が表示されます おめでとうございます これで Scheduler for WPF のクイックスタートは完了です Scheduler for WPF アプリケーションを作成し データソースにスケジュールを連結し 新しい予定を作成しました おめでとうございます 15 Copyright GrapeCity, Inc. All rights reserved.

17 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="clrnamespace:c1.silverlight.schedule;assembly=c1.silverlight.schedule" x:class="schedulerquickstart.mainpage" xmlns= xmlns:x= xmlns:c1="clr-namespace:c1.silverlight;assembly=c1.silverlight" xmlns:d=" xmlns:mc= 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> 16 Copyright GrapeCity, Inc. All rights reserved.

18 プロジェクトを実行すると スケジュールが日ビューに表示されます 次の手順では ナビゲーションボタンを追加します 手順 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 のアプリケーションを作成しました 17 Copyright GrapeCity, Inc. All rights reserved.

19 XAML クイックリファレンス このセクションでは XAML コードのみを使用して C1Scheduler コントロールを使用する方法を示すいくつかの例を提供します 例 : ネストされたプロパティに値を割り当てる XAML では ネストされたプロパティに値を割り当てることはできません ただし DataStorage のオブジェクトモデルは その特性上 ネストされたプロパティを含んでいます この制限に対処するには NestedPropertySetter クラスを使用します メモ :NestedPropertySetter クラスは C1Scheduler と共に使用する場合にのみ機能します XAML で C1Scheduler 要素の子として配置されるこのクラスの要素は Property/Value ペアで表されるセッターです Property には 親 C1Scheduler 要素からプロパティへの相対パスを指定します 次の例では C1BindingSource.DataMember プロパティがデータベースの Appointments テーブルに割り当てられます C1BindingSource.DataSource は 次のようにプロジェクト内のデータセットリソースに設定されます XAML <c1:c1scheduler > <!-- マップの AppointmentStorage --> <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 コントロールに連結します 18 Copyright GrapeCity, Inc. All rights reserved.

20 XAML <c1:c1calendar HorizontalAlignment="Left" Margin="34,51,0,0" Name="c1Calendar1" VerticalAlignment="Top" SelectedDate="Binding Path=SelectedDateTime, ElementName=C1Scheduler1, Mode=TwoWay" /> 19 Copyright GrapeCity, Inc. All rights reserved.

21 コントロールとコンポーネント Scheduler for WPF/Silverlight は 次のコントロールとコンポーネントで構成されています スケジュールアプリケーションのすべての機能は これらのコントロールとコンポーネントによって提供されます C1Scheduler コントロール C1Scheduler コントロールは 予定を追加 編集 管理するために必要な機能を完全に備えたスケジュールです このコントロールは 主に次の 2 つの部分で構成されます 予定 連絡先などのビジネスデータを格納する記憶領域 このデータを 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 20 Copyright GrapeCity, Inc. All rights reserved.

22 に変更されています 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 のデザインビューでは デフォルトのユーザーインターフェイスは次の図のようになります 21 Copyright GrapeCity, Inc. All rights reserved.

23 レイアウトおよび外観 C1Scheduler の外観をカスタマイズするには いくつかの方法があります 次のトピックでは データビュー テンプレート テーマなどに関する一部のカスタマイズ技術について説明します C1Scheduler のデータビュー Scheduler for WPF は DataStorage 内のデータを 4 つのビューで表示します データビュー 説明 [ 日 ] ビュー 特定の日の予定を表示する詳細ビューを表示します [ 月 ] ビュー 1つ以上の月の予定を表示します これがデフォルトのビューです [ 週 ] ビュー 指定された週の予定を表示します [ 稼働日 ] ビュー 指定された毎週の期間の予定を表示します デフォルトは月曜日から金曜日までです [ タイムライン ] ビュー タイムラインを表示します 各ビューは 1 つのスタイルで表され それぞれが XAML で定義されています これらのスタイルは C1Scheduler に適用でき C1SchedulerResources クラスの静的フィールド (OneDayStyle WorkingWeekStyle WeekStyle MonthStyle) を使ってアクセスできます インターフェイスのデフォルトのビューは MonthStyle であり 現在の日付が表示されます たとえば [ 日 ] ビューを指定するには 次に示すように,C1Scheduler.OneDayStyle フィールド値を使用して スケジューラの C1Scheduler.ChangeStyle メソッドを割り当てます Visual Basic Projects\MoveAcross\MoveAcross\MoveAcross C# 22 Copyright GrapeCity, Inc. All rights reserved.

24 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" [ 日 ] 23 Copyright GrapeCity, Inc. All rights reserved.

25 local:c1scheduler, ResourceId=OneDayStyle" TargetType="x:Type local:c1scheduler" TargetType="c1sched:C1Scheduler" ビュー x:key="componentresourcekey TypeInTargetAssembly=x:Type local:c1scheduler, ResourceId=WorkingWeekStyle" TargetType=" x:type local:c1scheduler" x:key="componentresourcekey TypeInTargetAssembly=x:Type local:c1scheduler, ResourceId=WeekStyle" TargetType="x:Type local:c1scheduler" x:key="componentresourcekey TypeInTargetAssembly=x:Type local:c1scheduler, ResourceId=MonthStyle" TargetType="x:Type local:c1scheduler" x:key="componentresourcekey TypeInTargetAssembly=x:Type local:c1scheduler, ResourceId=TimeLineStyle" TargetType="x:Type local:c1scheduler" x:key="workingweekstyle" TargetType="c1sched:C1Scheduler" x:key="weekstyle" TargetType="c1sched:C1Scheduler" x:key="monthstyle" TargetType="c1sched:C1Scheduler" x:key= TimeLineStyle TargetType= c1sched:c1scheduler [ 稼働日 ] ビュー [ 週 ] ビュー [ 月 ] ビュー [ タイムライン ] ビュー 次の図に 使用可能な各データビューの外観の例を示します [ 日 ] ビュー [ 稼働日 ] ビュー 24 Copyright GrapeCity, Inc. All rights reserved.

26 [ 週 ] ビュー [ 月 ] ビュー 25 Copyright GrapeCity, Inc. All rights reserved.

27 [ タイムライン ] ビュー 26 Copyright GrapeCity, Inc. All rights reserved.

28 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 説明 スクロールバーのスタイルを決定します [ 日 ] ビューでの 1 つの勤務時間グループのスタイルを決定します [ 日 ] ビューでの 1 つの空き時間グループのスタイルを決定します [ 日 ] ビューでの 1 つの空き時間スロットのテンプレートを決定します [ 日 ] ビューでの 1 つの空き時間スロットのテンプレートを決定します [ 日 ] ビューに全日の領域を表示する際に使用されるテンプレートを決定します [ 日 ] ビューのタイムルーラーの 1 時間を表示する際に使用されるテンプレートを決定します 月のグリッドヘッダー ( 曜日の名前 ) のスタイルを決定します [ 月 ] ビューで 1 日 ( 日付ヘッダーと日付コンテンツも含む ) を表示する際に使用するテンプレートを決定します C1Scheduler_OverflowJumper_Template 使用可能な日付領域に入らない予定要素がある場合に [ 月 ] ビューと Office 2003 の [ 週 ] ビューにオーバーフロージャンパーを表示する際のテンプレートを決定します PART_GroupNavigationScrollBar PART_GroupNavigationScrollBar がコントロールテンプレート内にある場合 C1Scheduler はこれを使用してグループナビゲーションを行います このパーツは デフォルトの TimeLine スタイルに含まれます これらの ComponentResourceKey の使用は必須ではありません 任意のキーを使用して 対応する C1Scheduler プロパティにカスタムスタイルを割り当てることができます 次に例を示します XAML <my:c1scheduler MonthStyle="DynamicResource customonedaystyle" WeekStyle="DynamicResource customweekstyle"/> C1Scheduler のデフォルトのインターフェイスには デフォルトの DataTemplate オブジェクトがいくつか含まれています このテンプレートに カスタムユーザーインターフェイスを DataTemplate オブジェクトとして提供することができます そのようなオブジェクトは 適切な C1Scheduler プロパティに割り当てる必要があります デフォルトの DataTemplate には ComponentResourceKey からアクセスできます 次の表に DataTemplate およびデフォルトの DataTemplate ComponentResourceKey を定義する C1Scheduler プロパティを示します C1Scheduler プロパティ IntervalAppointmentTemplate デフォルトの DataTemplate x:key="componentresourcekey TypeInTargetAssembly= x:type local:c1scheduler, ResourceID=IntervalAppointmentTemplate" 説明 Appointment element template. 27 Copyright GrapeCity, Inc. All rights reserved.

29 デフォルトテンプレートの使用 C1Scheduler のデフォルトのインターフェイスには [ 予定 ] [ 編集 ] [ アラーム ] の各ダイアログボックスなど いくつかのデフォルトの DataTemplate オブジェクトが含まれています これらのテンプレートに カスタムユーザーインターフェイスを DataTemplate オブジェクトとして提供することができます そのようなオブジェクトは 適切な C1Scheduler プロパティに割り当てる必要があります 次の表に DataTemplate およびデフォルトの DataTemplate を定義する C1Scheduler プロパティを示します C1Scheduler プロパティデフォルトの DataTemplate 説明 EditAppointmentTemplate <DataTemplate> [ 編集 / 新規予定 ] ダイアログボックスのテンプレート EditRecurrenceTemplate SelectFromListTemplate ShowRemindersTemplate <c1:editappointmentcontrol/> </DataTemplate> <DataTemplate> <c1:editrecurrencecontrol /> </DataTemplate> <DataTemplate> <c1:selectfromlistscene /> </DataTemplate> <DataTemplate> <c1:showreminderscontrol /> </DataTemplate> [ 繰り返しの編集 ] ダイアログボックスのテンプレート [ リソースの選択 ] [ カテゴリの選択 ] [ 連絡先の選択 ] ダイアログボックスのテンプレート [ アラーム ] ウィンドウのテンプレート ClearStyle 技術 C1Scheduler は コントロールのテンプレートを変更することなくコントロールの色を簡単に変更できる ComponentOne の ClearStyle 技術をサポートします 色のプロパティをいくつか設定するだけで コントロール全体の外観を簡単に設定できます 次の表では コントロールの外観のカスタマイズに使用できる一般的な C1Scheduler プロパティをリストします プロパティ Background Foreground ControlBackground ControlForeground 説明 個々の日付とタイムスロットのパレットの基本色として使用されるブラシを取得または設定します 日付ヘッダー 週のタブ およびナビゲーションパネルのテキスト色であるブラシを取得または設定します コントロール ( タイムルーラー 月ビューのヘッダーなど ) の表示色であるブラシを取得または設定します コントロール ( タイムルーラー 月ビューのヘッダーなど ) のテキスト色であるブラシを取得または設定します AppointmentForeground 予定要素の前景に使用されるブラシを取得または設定します AlternatingBackground SelectedBackground TodayBackground 交互表示月の勤務時間数 / 日数の背景に使用されるブラシを取得または設定します 現在選択されている日付を強調表示するために使用されるブラシを取得または設定します 現在の日付に色を付けるために使用されるブラシオブジェクトを取得または設定します 28 Copyright GrapeCity, Inc. All rights reserved.

30 C1Scheduler for WPF のテーマ C1Scheduler のテーマを設定する方法には 多くの選択肢があります 設計時にテーマを設定するには XAML で ResourceID を使用するか コードで C1SchedulerResources 静的フィールドを使用するか Page Window または Application リソースで ResourceDictionary および DefaultTheme キーを定義します 罫線や背景ブラシ デフォルトスタイルなどの最も一般的な C1Scheduler コントロールのユーザーインターフェイスのプロパティは テーマ ResourceDictionary で定義します C1Scheduler には 7 つの定義済みのテーマがあります C1Scheduler のテーマ 例 Dusk Blue Dusk Green Media Player Office 2007 Default(Office 2007 Blue) Office 2007 Black Office 2007 Blue 29 Copyright GrapeCity, Inc. All rights reserved.

31 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 プロパティを変更することによってコントロールのパレットを変更できます このファイルには 他の Office 2007 テーマで使用される Office 2007 スタイルとテンプレートのすべての定義が含まれます Black.xaml Office2007Black Office2007.Black Office 2007 Black テーマ Blue.xaml Office2007Blue Office2007.Blue Office 2007 Blue テーマ このファイルには 他の Office 2007 テーマで使用される 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 フォルダに置かれています テーマファイル C1SchedulerResource クラスの静的フィールド ResourceID 説明 MediaPlayer.xaml MediaPlayer MediaPlayer Media Player テーマ 30 Copyright GrapeCity, Inc. All rights reserved.

32 Vista テーマ 次のテーマは Vista フォルダに置かれています テーマファイル C1SchedulerResource クラスの静的フィールド ResourceID 説明 Vista.xaml Vista Vista Vista テーマ メモ : このセクションの内容は ComponentOne for WPF にのみ適用されます C1Scheduler のテーマの設定 最初にプロジェクトに C1Scheduler を追加したときは Office 2007 Default テーマで書式設定されます 別のテーマを使用する場合は 新しいテーマを選択する方法がいくつかあります Visual Studio の設計時にテーマを設定するには 次の手順に従います 1. C1Scheduler コントロールを右クリックします 2. [ テーマ ] を選択し 7つの定義済みテーマから1つを選択します メモ :[ プロパティ ] ウィンドウで,Themeプロパティの隣にあるドロップダウンリストからオプションを選択して テーマを変更することもできます Microsoft Blend でテーマを設定する場合は 設計時に C1Scheduler.Theme プロパティを変更します 1. XAML のウィンドウまたはページで C1Scheduler コントロールを選択します 2. [ プロパティ ] パネルの [View] で Theme プロパティの隣にあるドロップダウン矢印をクリックし [ リセット ] をクリックします 3. [Theme] ドロップダウン矢印を再度クリックして 定義済みのテーマを 1 つ選択します 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> 31 Copyright GrapeCity, Inc. All rights reserved.

33 </Page.Resources> これにより 現在のスコープのすべてのコントロールに影響が及ぶことに注意してください 独自のテーマの ResourceDictionary を作成して C1Scheduler で使用することもできます 定義済みテーマをカスタマイズする最善の方法は カスタム ResourceDictionary にデフォルトのテーマ定義を入れ テーマブラシなどのリソースを必要に応じて再定義することです XAML メモ : カスタマイズ中も引き続きすべてのデフォルトのスタイルとテンプレートが正しく動作するように リソースキーをデフォルト設 定から変更しないことをお勧めします <Page x:class="c1wpfschedulersamples.themedschedulerwindow" xmlns=" xmlns:x=" xmlns:c1sched="clr-namespace:c1.wpf.schedule;assembly=c1.wpf.schedule" xmlns:presentationoptions=" xmlns:sys="clr-namespace:system;assembly=mscorlib" xmlns:mc=" 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" 32 Copyright GrapeCity, Inc. All rights reserved.

34 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="# " 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> 33 Copyright GrapeCity, Inc. All rights reserved.

35 </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_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.Background プロパティにローカル値がない場合に コントロールの背景として使用されるブラシ 日付間の境界線の色を指定する際に使用されるブラシ タイムルーラーなどのコントロール領域の背景色を指定する際に使用されるブラシ タイムルーラーなどのコントロール領域の境界線の色を指定する際に使用されるブラシ タイムルーラーなどのコントロール領域のテキストの色を指定する際に使用されるブラシ 日付ヘッダーの色を指定する際に使用されるブラシ マウスポインタを合わせたときの日付ヘッダーの色を指定する際に使用されるブラシ 日付ヘッダーの境界線の色を指定する際に使用されるブラシ 日付ヘッダーテキストの色を指定する際に使用されるブラシ 空き時間の水平境界線 ( 暗 ) を表示する際に使用されるブラシ 勤務時間の背景を表示する際に使用されるブラシ 空き時間の水平境界線 ( 明 ) を表示する際に使用されるブラシ 選択されているタイムスロットの色を指定する際に使用されるブラシ 勤務時間の水平境界線 ( 暗 ) を表示する際に使用されるブラシ 勤務時間の背景を表示する際に使用されるブラシ 34 Copyright GrapeCity, Inc. All rights reserved.

36 C1Scheduler_WorkHourLightBorder_Brush 勤務時間の水平境界線 ( 明 ) を表示する際に使用されるブラシ Office 2007 固有のキー リソースキー C1Scheduler_AllDayAreaTodayBorder _Thickness C1Scheduler_AllDayAreaTodayBorder_Brush 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 説明 現在の日付の [ 全日 ] 領域 ([ 日 ] ビュー [ 稼働日 ] ビュー および [Office 2007 の週 ] ビューで使用 ) の境界線の太さを決定します 現在の日付の [ 全日 ] 領域 ([ 日 ] ビュー [ 稼働日 ] ビュー および [Office 2007 の週 ] ビューで使用 ) の境界線ブラシを決定します ナビゲーションペインの色を指定する際に使用されるブラシ マウスポインタを合わせたときのナビゲーションペインの色を指定する際に使用されるブラシ ナビゲーションペインの境界線の色を指定する際に使用されるブラシ ナビゲーションペインのテキストの色を指定する際に使用されるブラシ 前 / 次の予定に移動するためのナビゲーションパネルをコントロールに表示するかどうかを決定します [ 月 ] ビューで 選択した日の背景色を指定する際に使用されるブラシ 現在の日付の境界線の色を指定する際に使用されるブラシ 現在の日付のヘッダーの色を指定する際に使用されるブラシ マウスポインタを合わせたときの 現在の日付ヘッダーの色を指定する際に使用されるブラシ 現在の日付のヘッダー境界線の色を指定する際に使用されるブラシ 現在の日付のヘッダーテキストの色を指定する際に使用されるブラシ 週のタブの色を指定する際に使用されるブラシ マウスポインタを合わせたときの週のタブの色を指定する際に使用されるブラシ 週のタブの境界線の色を指定する際に使用されるブラシ 週のタブのテキストの色を指定する際に使用されるブラシ C1Scheduler のスタイルとテンプレートの ThemeResources プロパティは すべて XAML で定義されています C1Scheduler の UI に関して独自のスタイルとテンプレートを構築するには 次のいずれかの方法を検討します C1Scheduler のデフォルトのスタイルおよびテンプレートと同じ方法でリソースを使用する 独自のロジックを使って UI を構築する カスタムのスタイルとテンプレートを作成するためのヒント 次のリストは カスタムのスタイルとテンプレートを作成するためのヒントです 可能な限りビジュアルツリーを簡潔にする 一部の要素で IsHittestVisible="false" に設定するとパフォーマンスが向上する場合がある CoverElementsPane.Orientaion プロパティが設定されている要素では上の設定を行わない 35 Copyright GrapeCity, Inc. All rights reserved.

37 可能な限りビジュアルツリーの上部で C1BrushBuilder を使用する C1BrushBuilder を多く使用するほど パフォーマンスが悪くなります カスタムテーマの作成 テーマは WPF コントロールを対象とするブラシ スタイル データテンプレートなどのさまざまなリソースが集められた ResourceDictionary です C1Scheduler コントロールおよび C1Calendar コントロールは多数の小さなパーツから構成されており これらのパーツは実行時に動的に作成されます これらのパーツはすべて 再利用可能なリソースとしてテーマ辞書に記述されています たとえば すべてのビューで使用される Day Header の Style 定義は 1 つしかありません ブラシリソースの場合は すべてのブラシを 1 回ずつ定義し 一意のキーを割り当てて 後からスタイルとテンプレートのテーマプロパティとして使用することをお勧めします この 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 がキーです [ 月 ] ビューでは これは通常 1 日間隔です [ 日 ] ビューでは 数分間という最小時間スロットです これらの間隔は 大きなパーツにグループ化できます たとえば [ 月 ] ビューでは 間隔は週にグループ化され [ 日 ] ビューでは 分は時間に 時間は日にグループ化されます そのため C1Scheduler の外観を決定するには 各パーツのすべての外観を決定する必要があります 次の2つの図は デフォルトのテーマで使用されるリソースキーと UI 表現との対応を示しています 1 番目の例は [ 月 ] ビューのスケジュールです 36 Copyright GrapeCity, Inc. All rights reserved.

38 2 番目の例は [ 週 ] ビューのスケジュールです 新しいテーマを作成する最初の手順は 全体をどのように小さなパーツに分割するかを理解することです 次に その小さなパーツのリソース スタイル およびテンプレートを作成し それを使用して コントロール全体に適用される新しいスタイルを作成します 基本的に C1Scheduler のソース XAML で使用されるものと同じリソースキーを保持する場合は デフォルトのスタイルで自動的に使用される小さなパーツの一部についてのみテンプレートを作り直します 37 Copyright GrapeCity, Inc. All rights reserved.

39 テーマパックの作成 独自のテーマパックを作成するには 新しい Visual Studio 2008 プロジェクトを作成し 1 つ以上のテーマ 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=" xmlns:x=" xmlns:local="clr-namespace:c1.wpf.schedule;assembly=c1.wpf.schedule" xmlns:storage="clr-namespace:c1.c1schedule;assembly=c1.wpf.schedule" xmlns:presentationoptions=" xmlns:sys="clr-namespace:system;assembly=mscorlib" xmlns:mc=" mc:ignorable="presentationoptions"> 12. デフォルトのテーマの一部のみを再定義する場合は 次の XAML のようにソーステーマ定義を ReourceDictionary.MergedDictionaries コレクションに追加します XAML ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="/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 38 Copyright GrapeCity, Inc. All rights reserved.

40 <!-- 月のグリッドヘッダー ( 曜日の名前 ) のスタイルを決定します --> <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=RelativeSource AncestorType=x:Type local:c1scheduler, Path=Theme[ControlAreaLinesBrush]" SnapsToDevicePixels="True" Background="Binding RelativeSource=RelativeSource AncestorType=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="componentresourcekey TypeInTargetAssembly=x:Type local:c1scheduler, ResourceId=MyTheme" Source="/C1SchedulerThemePack;component/themes/MyTheme.xaml" /> 18. すべての変更を保存し [ ビルド ] [C1SchedulerThemePack のビルド ] をクリックして選択し テーマアセンブリをビルドします Office 2007 Blue Silver Black など複数の色でテーマを作成する場合は 1 つのファイルにテーマ定義全体を配置し これを 1 つの色で使用します 次に マージされるリソース辞書として このファイルを他の色の 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 プロジェクトから 39 Copyright GrapeCity, Inc. All rights reserved.

41 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); 40 Copyright GrapeCity, Inc. All rights reserved.

42 sched1.theme = themedictionary; メモ : このセクションの内容は ComponentOne for Silverlight にのみ適用されます デフォルトのテーマ 次の表に デフォルトの C1Scheduler のテーマリソースの詳細と そのキーを示します すべてのデフォルトテーマで使用されるキー リソースキー C1Scheduler_Background C1Scheduler_Border_Brush C1Scheduler_Border_Style C1Scheduler_Foreground_Brush C1Scheduler_Selected_Brush C1Scheduler_ControlArea_Brush C1Scheduler_ControlAreaText_Brush C1Scheduler_NavPane_Brush C1Scheduler_NavPane_Style C1Scheduler_NavPane_HoverBrush C1Scheduler_NavPane_HoverStyle C1Scheduler_DayHeader_Brush C1Scheduler_DayHeader_Style C1Scheduler_DayHeader_HoverBrush C1Scheduler_DayHeader_HoverStyle C1Scheduler_Today_Brush 説明 このブラシは コントロールの Background プロパティのデフォルト値として使用されます このブラシは コントロールの BorderBrush プロパティのデフォルト値として使用されます ナビゲーションペイン 日付ヘッダー 週タブの境界の色を指定する際に使用される C1BrushBuilder スタイル このブラシは コントロールの Foreground プロパティのデフォルト値として使用されます C1Scheduler.SelectedBackground プロパティのデフォルト値として使用されるブラシ これは 月ビューで 選択した日の背景色を指定する際に使用されます C1Scheduler.ControlBackground プロパティのデフォルト値として使用されるブラシ これは タイムルーラーなどのコントロール領域の背景色を指定する際に使用されます C1Scheduler.ControlForeground プロパティのデフォルト値として使用されるブラシ これは タイムルーラーなどのコントロール領域のテキストと線の色を指定する際に使用されます ナビゲーションペインの色を指定する際に使用されるブラシ ナビゲーションパネルの色を指定する際に使用される C1BrushBuilder スタイル マウスポインタを合わせたときのナビゲーションペインの色を指定する際に使用されるブラシ マウスポインタを合わせたときのナビゲーションパネルの色を指定する際に使用される C1BrushBuilder スタイル 日付ヘッダーの色を指定する際に使用されるブラシ 日付ヘッダーの色を指定する際に使用される C1BrushBuilder スタイル マウスポインタを合わせたときの日付ヘッダーの色を指定する際に使用されるブラシ マウスポインタを合わせたときの日付ヘッダーの色を指定する際に使用される C1BrushBuilder スタイル C1Scheduler.TodayBackground プロパティのデフォルト値として使用されるブラシ 現在の日付要素の色を指定する際の基本色として使用されます 41 Copyright GrapeCity, Inc. All rights reserved.

43 C1Scheduler_TodayHeader_Brush C1Scheduler_TodayHeader_HoverBrush 現在の日付のヘッダーの色を指定する際に使用されるブラシ マウスポインタを合わせたときの 現在の日付ヘッダーの色を指定する際に使用されるブラシ C1Scheduler_AllDayAreaBorder_Thickness [ 全日 ] 領域 ( 日ビュー 週間勤務日ビュー および [Office 2007 の週 ] ビューで使用 ) の境界線の太さを決定します C1Scheduler_AllDayAreaTodayBorder _Thickness C1Scheduler_AllDayArea_Brush C1Scheduler_AllDayArea_SelectedBrush C1Scheduler_AllDayArea_Style C1Scheduler_WorkHour_Brush C1Scheduler_WorkHourBorder_Brush C1Scheduler_WorkHourLightBorder_Brush C1Scheduler_FreeHour_Brush C1Scheduler_FreeHourBorder_Brush C1Scheduler_FreeHourLightBorder_Brush C1Scheduler_WeekTab_Brush C1Scheduler_WeekTab_BrushStyle C1Scheduler_WeekTab_HoverBrush C1Scheduler_WeekTab_HoverBrushStyle C1Scheduler_AlternateMonthDay_Brush C1Scheduler_AppointmentBgMask_Brush C1Scheduler_AppointmentForeground_Brush C1Scheduler_TimeSlot_SelectedBrush 現在の日付の [ 全日 ] 領域 ( 日ビュー 週間勤務日ビュー および [Office 2007 の週 ] ビューで使用 ) の境界線の太さを決定します [ 全日 ] 領域の背景色を指定する際に使用されるブラシ 現在選択されている日の [ 全日 ] 領域の背景色を指定する際に使用されるブラシ [ 全日 ] 領域の色を指定する際に使用される C1BrushBuilder スタイル 勤務時間の背景を表示する際に使用されるブラシ C1Scheduler.AlternatingBackground プロパティのデフォルト値として使用されます 勤務時間の水平境界線 ( 暗 ) を表示する際に使用されるブラシ 勤務時間の水平境界線 ( 明 ) を表示する際に使用されるブラシ 勤務時間の背景を表示する際に使用されるブラシ 空き時間の水平境界線 ( 暗 ) を表示する際に使用されるブラシ 空き時間の水平境界線 ( 明 ) を表示する際に使用されるブラシ 週のタブの色を指定する際に使用されるブラシ 週のタブの色を指定する際に使用される C1BrushBuilder スタイル マウスポインタを合わせたときの週のタブの色を指定する際に使用されるブラシ マウスポインタを合わせたときの週のタブの色を指定する際に使用される C1BrushBuilder スタイル 別の月日 ( 月ビューで使用 ) の背景を表示する際に使用されるブラシ 予定の背景色を指定する際にマスクとして使用されるブラシ C1Scheduler.AppointmentForeground プロパティのデフォルト値として使用されるブラシ 予定のテキストを表示する際に使用されます 選択されているタイムスロットの色を指定する際に使用されるブラシ カスタムテーマの作成 C1Scheduler のカスタムテーマを作成する最も簡単な方法は デフォルトの C1 テーマの 1 つから継承し いくつかのデフォルトリソースを MyCustomTheme サンプルに示されているように再定義するというものです このサンプルは ComponentOne for Silverlight のインストールフォルダにあります ユーザーインターフェイスのカスタマイズ Scheduler for WPF/Silverlight には ユーザーインターフェイス (UI) の作成を支援するための特殊な映像データモデルが用意されています C1Scheduler の UI 構築の概念は System.Windows.Controls.ItemsControl をグループ化 42 Copyright GrapeCity, Inc. All rights reserved.

44 し ItemsControl.ItemsSource の特別なコレクションと組み合わせたものとほぼ同じです たとえば VisualStartTime では スケジュールの先頭に表示する日付が設定されます VisualTimeSpan プロパティでは 時間の長さ つまりほとんどの場合はビューに表示される日数が定義されます VisualIntervalScale プロパティは VisualTimeSpan をさらに細かく分割する単位です ビューにてカスタムスケーリングを保持するには C1Scheduler クラスに C1Scheduler.SmallVisualIntervalScale プロパティが提供されています ビューを切り替える際に カスタムスケーリングを保持する方法の詳細について さまざまなビューの時間間隔のカスタマイズ を参照してください たとえば [ 稼働日 ] ビューのビュースタイルでは VisualStartTime はデフォルトで現在の週の最初の月曜日になっています VisualTimeSpan は 5:00:00:00 つまり一般的な稼働日である月曜から金曜の 5 日間です VisualIntervalScale は 00:15:00 です つまり スケジュールでは 1 時間が 15 分単位に分割されて表示されます メモ :VisualStartTime プロパティ値は VisualTimeSpan プロパティと SelectedDateTime プロパティによって自動的に決定されます このため ほとんどの場合は VisualStartTime プロパティ値を設定する必要はありません ただし VisualTimeSpan プロパティと SelectedDateTime プロパティは設定する必要があります これは スケジュールの先頭に表示される日付が現在の日付であるとは限らない週や月のビューで重要です 指定された VisualStartTime VisualTimeSpan VisualIntervalScale のプロパティでは VisualIntervalCollection は VisualInterval オブジェクトによって値を挿入され 期間の定義は VisualIntervalScale の長さです VisualIntervalCollection 内の項目はグループ化することができます グループ化の基準は VisualIntervalGroupDescriptions コレクションで定義され 各グループレベルに 1 つの項目が格納されます 各グループレベル ( ヘッダー グループ項目を含むパネル グループ項目の UI これらの部分が集められたレイアウト ) の UI は VisualIntervalGroupStyles コレクションで定義され 各グループレベルに 1 つの項目が格納されます VisualInterval の UI 表現を定義するには VisualIntervalTemplate プロパティを使用する必要があります VisualIntervalPanel プロパティでは VisualInterval の項目を配置するパネルが定義されます 43 Copyright GrapeCity, Inc. All rights reserved.

45 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 Level1 PropertyNames = "StartTime.Day" (group by VisualInterval.StartTime.Day) GroupStyle = (Header: day name; Panel : some Panel with Horizontal orientation) Group Level2 PropertyNames = "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> <! - グループレベル 1 日でグループ化 --> <local:visualintervalgroupdescription PropertyNames="StartTime.Day" /> <! - グループレベル 2 時間でグループ化 --> <local:visualintervalgroupdescription PropertyNames="StartTime.Hour" /> </local:intervalgroupdescriptioncollection> </Setter.Value> </Setter> 44 Copyright GrapeCity, Inc. All rights reserved.

46 <!-- グループスタイルの定義 --> <Setter Property="local:VisualIntervalGroupStyles"> <Setter.Value> <local:intervalgroupstylecollection> <! - グループレベル 1 日でグループ化 --> <GroupStyle ContainerStyleSelector="StaticResource DayGroupStyleSelector"> <GroupStyle.HeaderTemplate> <DataTemplate> <Border Visibility="Collapsed" /> <!-- ヘッダーは個別に描画されます --> </DataTemplate> </GroupStyle.HeaderTemplate> <! - 日を 1 行に並べてグループを作成 --> <GroupStyle.Panel> <ItemsPanelTemplate> <UniformGrid SnapsToDevicePixels="True" Rows="1" /> </ItemsPanelTemplate> </GroupStyle.Panel> </GroupStyle> <! - グループレベル 2 時間でグループ化 --> <GroupStyle ContainerStyleSelector="StaticResource TimeSlotGroupStyleSelector"> <GroupStyle.HeaderTemplate> <DataTemplate> <Border Visibility="Collapsed" /> </DataTemplate> </GroupStyle.HeaderTemplate> <! - 24 時間を 1 列に並べてグループを作成 --> <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 スケジュールの時間間隔を示すペインを表示する場所を定義します 上記の各プレースホルダはオプションです 45 Copyright GrapeCity, Inc. All rights reserved.

47 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 コントロールでは 予定ボックスを 2 つ以上のビジュアルボックスに分割する必要がある場合が認識されます たとえば [ 月 ] ビューで予定が 3 日間にまたがる場合 AppointmentsCoverPane は自動的に 予定が含まれる各日に 3 つのボックスを描画します AppointmentsCoverPane 予定ボックスの内容は IntervalAppointmentTemplate プロパティで定義される DataTemplate によって表されます AppointmentsCoverPane コントロールは VisualIntervals を表す任意の UI に対して機能を提供します それには VisualInterval UI の表現として扱うことができる各要素 ( 通常は VisualIntervalTemplate 定義内の外側の ( ルート ) 要素 ) に添付 OrientationProperty フィールドが割り当てられている必要があります CoverElementsPane は AppointmentsCoverPane クラスの基本クラスであることに注意してください 割り当てられる値は 間隔要素の時間の方向を示しており 値は Horizontal または Vertical です たとえば [ 稼働日 ] ビュー内の間隔要素ではこの値に Vertical を割り当て [ 月 ] ビューの要素ではこの値に Horizontal を割り当てます C1Scheduler ビジュアルツリーには 複数の AppointmentsCoverPanes を格納できます たとえば デフォルトの DayView テンプレートには 日付ヘッダーに全日のイベントを表示する AppointmentsCoverPane と 短い予定をタイムスロットに表示する AppointmentsCoverPane があります AppointmentsCoverPane で表示する必要がある予定をフィルタ 46 Copyright GrapeCity, Inc. All rights reserved.

48 処理するには 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> 47 Copyright GrapeCity, Inc. All rights reserved.

49 Visual Intervals のスタイルとテンプレートの選択 C1Scheduler.VisualIntervals の適切なスタイルとテンプレートをすばやく簡単に選択できるように C1Scheduler コントロールには TimeSlotGroupStyleSelector DayGroupStyleSelector TimeSlotTemplateSelector, DayIntervalStyleSelector and TimeSlotStyleSelector. TimeSlotGroupStyleSelector クラスを使用すると [ 日 ] ビューおよび [ 稼働日 ] ビューモードで 勤務時間と空き時間にタイムスロットグループのスタイルを適用できます このクラスを使用するには 次の手順に従います 1. テーブルに多くのデータが表示されている場合 先頭のヘッダ行などを固定することができます マークアップ <local:timeslotgroupstyleselector x:key="timeslotgroupstyleselector"/> Scheduler for WPF/Silverlight 2. 次の2つのグループスタイルを定義します 勤務時間にはキー PART_WorkHourStyle を使用 空き時間にはキー PART_FreeHourStyle を使用 3. グループ定義で 次のスタイルセレクタを指定します マークアップ <GroupStyle ContainerStyleSelector="StaticResource TimeSlotGroupStyleSelector"> DayGroupStylesSelector クラスを使用すると [ 日 ] ビューおよび [ 稼働日 ] ビューモードで Office 2003/2007 形式の表示に日付グループのスタイルを適用できます このクラスを使用するには 次の手順に従います 1. クラスのインスタンスを作成します マークアップ <local:daygroupstyleselector x:key="daygroupstyleselector"/> 2. 次の2つのグループスタイルを定義します Office 2003 の外観を使用するにはキー PART_Day2003Style を使用 Office 2007 の外観を使用するにはキー PART_Day2007Style を使用 3. グループ定義で 次のスタイルセレクタを指定します マークアップ <GroupStyle ContainerStyleSelector="StaticResource DayGroupStyleSelector"> TimeSlotTemplateSelector クラスを使用すると [ 日 ] ビューおよび [ 稼働日 ] ビューモードで 単独のタイムスロットを示す VisualInterval オブジェクトに DataTemplate を選択できます このクラスを使用するには 次の手順に従います 1. クラスのインスタンスを作成します マークアップ <local:timeslottemplateselector x:key="timeslottemplateselector"/> 2. 次の2つの DataTemplate を定義します 空き時間にはキー PART_FreeSlotTemplate を使用 勤務時間にはキー PART_WorkSlotTemplate を使用 3. C1SchedulerPresenter オブジェクトに ItemTemplateSelector を指定します マークアップ <local:c1schedulerpresenter ItemTemplateSelector="StaticResource TimeSlotTemplateSelector" /> この方法で VisualInterval DataTemplate を選択する場合は VisualIntervalTemplate プロパティを設定しないでください DayIntervalStyleSelector クラスを使用すると 平日または当日に対してグループスタイルを適用することができます このクラスを使用するには 次の手順に従います 1. クラスのインスタンスを作成します 48 Copyright GrapeCity, Inc. All rights reserved.

50 マークアップ <local:dayintervalstyleselector x:key= DayIntervalStyleSelector"/> 2. DayIntervalStyleSelector リソースには 次の2つのグループスタイルを定義します 平日にはキー C1Scheduler_Day_Style を使用 当日にはキー C1Scheduler_Today_Style を使用 3. グループ定義で 次のスタイルセレクタを指定します マークアップ <GroupStyle ContainerStyleSelector="StaticResource DayIntervalStyleSelector"> TimeSlotStyleSelector TimeSlotStyleSelectorクラスを使用すると [ 日 ] ビューおよび [ 稼働日 ] ビューモードで 勤務時間と空き時間にタイムスロットグループのスタイルを適用できます このクラスを使用するには 次の手順に従います 1. クラスのインスタンスを作成します マークアップ <local:timeslotstyleselector x:key="timeslotstyleselector"/> 2. TimeSlotStyleSelector リソースには 次の 2 つのグループスタイルを定義します 勤務時間にはキー C1Scheduler_WorkSlot_Style を使用 空き時間にはキー C1Scheduler_FreeSlot_Style を使用 3. C1SchedulerPresenter オブジェクトに ItemContainerStyleSelector を指定します マークアップ <local:c1schedulerpresenter ItemContainerStyleSelector="StaticResource TimeSlotTemplateSelector" /> Scheduler のコマンド 一部の種類の C1Scheduler 機能を XAML で宣言的に使用する機能を提供するために C1Scheduler には ButtonBase または InputBinding 派生クラスのインスタンスを使って発行できるコマンドがいくつか用意されています 次の表は ナビゲーションのコマンドについて説明しています ナビゲーションのコマンド ( このコマンドの送信元の例 :C1SchedulerScrollBar コントロール ) DecrementStartTimeSmallCommand DecrementStartTimeLargeCommand IncrementStartTimeSmallCommand IncrementStartTimeLargeCommand SetRelativeStartTimeCommand SmallStartTimeChange プロパティで指定された量だけ VisualStartTime プロパティ値をデクリメントします LargeStartTimeChange プロパティで指定された量だけ VisualStartTime プロパティ値をデクリメントします SmallStartTimeChange プロパティで指定された量だけ VisualStartTime プロパティ値をインクリメントします LargeStartTimeChange プロパティで指定された量だけ VisualStartTime プロパティ値をインクリメントします 指定された率に基づいて VisualStartTime プロパティを Start プロパティ値と End プロパティ値の間の値に設定します コマンドパラメータ :0 ~1 の浮動小数点数またはその文字列表現 NavigateToPreviousAppointmentCommand SelectedDateTime 直前の予定をコントロール UI に表示します NavigateToNextAppointmentCommand SelectedDateTime 直後の予定をコントロール UI に表示します 49 Copyright GrapeCity, Inc. All rights reserved.

51 次の表は ダイアログのコマンドについて説明しています ダイアログのコマンド EditAppointmentDialogCommand 既存の予定についての [ 予定の編集 ] ダイアログボックスを開きます コマンドパラメータは次のいずれかの値になります 編集対象の予定 編集する Appointment オブジェクトの IList 親予定を編集する必要がある Reminder オブジェクトの IList パラメータ値が指定されていない場合 コントロールは送信元の DataContext から予定を取得しようとします NewAppointmentDialogCommand EditRecurrenceDialogCommand SelectFromListDialogCommand 新しい予定を追加して その予定についての [ 予定の編集 ] ダイアログボックスを開きます 予定を作成する時間間隔は 送信元の DataContext によって決定されます 予定の繰り返しに関する [ 繰り返しの編集 ] ダイアログボックスを開きます コマンドパラメータ :RecurrencePattern を編集する対象の予定 パラメータ値が指定されていない場合 コントロールは送信元の DataContext から予定を取得しようとします [ リソースの選択 ] [ カテゴリの選択 ] [ 連絡先の選択 ] などのダイアログボックスを開きます コマンドパラメータは 4~5 個の値の配列です 1. 選択肢を含むマスターリスト たとえば Resources などです 2. 選択した項目を配置する結果のリストです たとえば Appointment.Resources リストなどです 3. 両方のリストに含まれる項目の種類を指定する System.Type 値 4. 所有ウィンドウへの参照 ( 存在する場合 ) 5. ダイアログウィンドウのタイトルとして表示する String 値 このパラメータはオプションです 次の表は インポート / エクスポートのコマンドについて説明しています インポート / エクスポートのコマンド ImportCommand ExportCommand C1Scheduler データをファイルからインポートします このコマンドを実行すると [ ファイルを開く ] ダイアログボックスが開き 選択したファイルからのデータのインポートが試行されます C1Scheduler データをファイルにエクスポートします このコマンドを実行すると [ ファイルの保存 ] ダイアログが開き ファイルにデータがエクスポートされます コマンドパラメータは次のいずれかの値になります 1. 保存する予定 2. 保存する Ilist<Appointment> 50 Copyright GrapeCity, Inc. All rights reserved.

52 3. null すべての Scheduler データがエクスポートされます 次の表は アラームのコマンドについて説明しています アラームのコマンド DismissCommand アラームを終了します コマンドパラメータは次のいずれかの値になります 1. 終了する Reminder オブジェクトの IList 2. 終了する Reminder オブジェクト コマンドパラメータが指定されていない場合は すべてのアクティブなアラームが終了します SnoozeCommand アラームを停止します コマンドパラメータには 2 個の値の配列を含めることができます 1. 停止に使用する時間間隔を指定する TimeSpan 値 2. 次のいずれかの値です 停止する Reminder オブジェクトの IList 停止する Reminder オブジェクト この項目はオプションです これが指定されていない場合は すべてのアクティブなアラームが停止します 次の表では 追加コマンドについて説明しています その他のコマンド DeleteSelectedAppointmentCommand ChangeStyleCommand NavigateToPreviousGroupCommand. ユーザーインターフェイスで選択されるおよび C1Scheduler.SelectedAppointment プロパティに参照される予定を削除します 指定された Style または特定の ResourceDictionary キーで参照されるスタイルを使用して Style プロパティを変更します コマンドパラメータ :Style またはスタイルを表す ResourceDictionary キー C1Scheduler UI を前の SchedulerGroupItem オブジェクトに移動するコマンドを定義します オプションのコマンドパラメータは次のいずれかの値になります ページ移動する場合は "Page" ページサイズは GroupPageSize プロパティ値によって決定されます 最初のグループに移動する場合は "Home" NavigateToNextGroupCommand C1Scheduler UI を次の SchedulerGroupItem オブジェクトに移動するコマンドを定義します オプションのコマンドパラメータは次のいずれかの値になります 51 Copyright GrapeCity, Inc. All rights reserved.

53 ページ移動する場合は "Page" ページサイズは GroupPageSize プロパティ値によって決定されます 最後のグループに移動する場合は "End" HideGroupCommand 指定された SchedulerGroupItem オブジェクトを非表示にするコマンドを定義します コマンドパラメータで 非表示にする SchedulerGroupItem オブジェクトを指定します ネストされたプロパティへの値の割り当て XAML では ネストされたプロパティに値を割り当てることはできません ただし,DataStorage のオブジェクトモデルは その特性上 ネストされたプロパティを含んでいます この制限に対処するには NestedPropertySetter クラスを使用します メモ :NestedPropertySetter クラスは C1Scheduler と共に使用する場合にのみ機能します XAML で C1Scheduler 要素の子として配置されるこのクラスの要素は Property/Value ペアで表されるセッターです Property には 親 C1Scheduler 要素からプロパティへの相対パスを指定します 次の例では DataMember プロパティがデータベースの Appointments テーブルに割り当てられます DataSource は 次のようにプロジェクト内のデータセットリソースに設定されます XAML <c1sched:c1scheduler > <!-- マップの AppointmentStorage --> <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#] を指定するには [ そ 52 Copyright GrapeCity, Inc. All rights reserved.

54 の他の言語 ] ノードを展開する必要があることに注意してください c. [ テンプレート ] ペインから [WPF アプリケーション ] を選択します d. [ 名前 ] テキストボックスにプロジェクトの名前を入力し [OK] をクリックします 新しいプロジェクトが作成されます 2. [ プロジェクト ] メニューから [ ページの追加 ] を選択します [ 新しい項目の追加 ] ウィンドウが表示されます [ カテゴリ ] で [Visual C#] が選択され [ テンプレート ] ペインに [ ページ (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 53 Copyright GrapeCity, Inc. All rights reserved.

55 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=" xmlns:x=" x:class="wpfapplication1.page1" xmlns:local="clr-namespace:wpfapplication1" Title="Page1" xmlns:c1sched=" 6. [ プロジェクト ] [ プロジェクトのビルド ] を選択します 7. <Page> の開始タグの後に次のコードを入力して ScheduleDataSet をリソースとして追加します XAML <Page.Resources> <local:scheduledataset x:key="dataset" /> </Page.Resources> C1Scheduler データストレージにマップするには 54 Copyright GrapeCity, Inc. All rights reserved.

56 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 End Location Start Subject AppointmentProperties IdMapping IndexMapping テキスト Body End Location Start Subject Properties Id 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"/> 55 Copyright GrapeCity, Inc. All rights reserved.

57 <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 という 2 つの依存プロパティを公開し 2 つの値が等しくなるように保ちます つまり 1 つのプロパティの値が変更されると 他方のプロパティの値も同じ値に設定されます この単純な仕組みにより DependencyProperty であるプロパティのみを使用するように設計された WPF メカニズムで DependencyProperty でないプロパティを使用できるようになります 次の例では PropertyBridge クラスを使用する方法を示します 2 つの非依存プロパティを連結する : ソースとして 1 つの非依存プロパティを持つ TwoWay 連結を Source プロパティに割り当て ソースとして別の非依存プロパティを持つ TwoWay 連結を Target プロパティに割り当てます これによって非依存プロパティが連結プロパティとして動作します これは INotifyPropertyChanged インターフェイスをサポートする非依存プロパティを公開しているクラスでのみ動作します C1ScheduleStorage オブジェクトモデルの大部分のクラスがこれに当てはまります トリガ内から非依存プロパティ値を設定する : ソースとして 1 つの非依存プロパティを持つ TwoWay または OneWayToSource 連結を Source プロパティに割り当て Trigger の Setter を使って値を PropertyBridge の Target プロパティに割り当てます この値は Source に連結される非依存プロパティに割り当てられます 多対多連結 : MultiBinding 連結を Source と Target に割り当てて 多対多連結を実現します ネストされたプロパティに値を割り当てる : ネストしているプロパティを参照する Path で ターゲットを TwoWay または OneWayToSource に設定します 次に Source を割り当てます ( 直接 または Setter 内から ) ネストしているプロパティに この値が割り当てられます 直接アクセスできないオブジェクトのプロパティを割り当てる : ネストしているプロパティへの値の割り当てと同様に Target への連結で RelativeSource を使用し 56 Copyright GrapeCity, Inc. All rights reserved.

58 て 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 オブジェクトのコレクションを保持するクラスを追加します 57 Copyright GrapeCity, Inc. All rights reserved.

59 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=" xmlns:c1=" xmlns:x=" xmlns:d=" xmlns:local="clr-namespace:c1scheduler_businessobjectsbinding" xmlns:mc=" 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" > <!-- AppointmentStorage をビジネスオブジェクトのコレクションとマップする --> <c1:nestedpropertysetter PropertyName="DataStorage.AppointmentStorage.Mappings.AppointmentProperties.MappingName" Value="Properties"/> 58 Copyright GrapeCity, Inc. All rights reserved.

60 <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 と 3 では 通常 データを転送するために Web サービスが使用され データベースをクエリーおよび更新するために従来のデータアクセス方法が使用されます 手順 2 では 通常 Silverlight データ連結コントロールが使用されます Microsoft は サーバー側のジョブを実行するために多くのツールを提供しています 最新のツールとして ADO.NET Data Services があります これは Web アクセス可能なエンドポイントをデータモデルに提供し Silverlight ライブラリ (System.Data.Services.Client.dll) の ADO.NET Data Services を介して Silverlight と統合されます 最近では この新技術に関する記事が多く掲載されています (MSDN 2008 年 9 月 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 メソッドを使用して そのストリームをデシリアライズします 59 Copyright GrapeCity, Inc. All rights reserved.

61 2. クライアント側でデータを表示および編集します クライアントは DataSet 内のテーブルをコントロールに連結します ( 通常は LINQ クエリーを使用 ) ユーザーは コントロールを操作して データ項目を表示 編集 追加 および削除します 3. サーバーに変更を送信します クライアントは DataSet.GetChanges および DataSet.WriteXml を呼び出して 変更をストリームにシリアライズし そのストリームをサーバーに送信します サーバーは DataSet.ReadXml を呼び出して変更をデシリアライズし 次に DataAdapter オブジェクトを使って変更をデータベースに保存します このシナリオにおける C1Data の役割は 2 つあります 1 つめは クライアント側とサーバー側の DataSet オブジェクト間のデータ転送を容易にする対称型のシリアライズメカニズムを提供します 2 つめは クライアント側でデータを操作するための使い慣れたオブジェクトモデルを提供します メモ :C1Data は ADO.NET Data Services に対抗するものではありません C1Data は 既に蓄えてある ADO.NET の知識や資産を活用できるようにします あらゆる情報や資産を最小限の作業で Silverlight に転送することができます また 必要に応じて 徐々に ADO.NET Data Services に移行することもできます C1Data はレガシー技術ではありません たとえば C1Data は LINQ と共に使用できます 実際 C1Data では デスクトップでは使用できるが Silverlight アプリケーションでは使用できない LINQ 機能が有効になります ( 一部匿名クラス ) 以下のセクションでは 上の手順に従う単純なアプリケーションの実装について説明します このアプリケーションは単純ですが ほとんどのデータ中心型アプリケーションで必要になる 4 つの 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) と設定を受け入れ プロジェクトを作成します 60 Copyright GrapeCity, Inc. All rights reserved.

62 参照の追加 このプロジェクトでは C1.Silverlight.Data.dll(C1Data クラスを含む ) と System.Windows.Controls.Data.dll(Microsoft の DataGrid コントロールを含む ) の 2 つの追加アセンブリを使用します ここでは C1Data クラスが他の ComponentOne コントロールにまったく関連付けられていないことを示すために ComponentOne グリッドではなく Microsoft グリッドを使用することにします 実際 C1Data クラスは任意の Silverlight コントロールに対して使用できます アセンブリを追加するには 次の手順に従います 1. ソリューションエクスプローラで Scheduler プロジェクトを右クリックし [ 参照の追加 ] を選択します 2. [ 参照の追加 ] ダイアログボックスで 以下のアセンブリを見つけて選択し [OK] をクリックしてプロジェクトに参照を追加します C1.Silverlight.dll C1.Silverlight.Data.dll C1.Silverlight.DateTimeEditors.dll C1.Silverlight.Schedule.dll UI の作成 ユーザーインターフェイスにはスケジュールが含まれています ユーザーインターフェイスを作成するには MainPage.xaml ファイルを開き ソースビューで次の XAML をページにコピーします XAML <UserControl x:class="bindingscheduler.mainpage" xmlns=" xmlns:x=" xmlns:d=" xmlns:mc=" xmlns:c1sched="clrnamespace: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> これまでの作業に問題がないことを確認するため ここでアプリケーションを実行してみます 空のスケジュールが表示されます サーバー側の実装 この手順では アプリケーションのサーバー側を実装します サーバー側は 2 つのメソッド (GetData と UpdateData) を含む 1 つの Web サービスで構成されます GetData は Schedule.mdb データベースからデータを取得し そのデータをクライアントに返します UpdateData は クライアントで行われた変更をデータベースに戻して保存します データベースは この製品と共にインストールされる C1Scheduler_DataBinding サンプルに含まれています 61 Copyright GrapeCity, Inc. All rights reserved.

63 データベースアクセスインフラストラクチャの追加 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 ファイルをプロジェクトに追加するには 次の手順に従います Scheduler for WPF/Silverlight 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) ファイルが Visual Studio で開かれます このファイルには 1つの HelloWorld メソッドのみがあります 62 Copyright GrapeCity, Inc. All rights reserved.

64 このファイルを次のように編集します 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; 63 Copyright GrapeCity, Inc. All rights reserved.

65 catch (Exception x) return x.message; このメソッドは 3 つのパラメータを受け取ります 各パラメータは それぞれ異なるタイプの変更 ( レコードの追加 変更 削除 ) をデータベースに適用するために使用されます このメソッドは 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 メソッドを呼び出して 変更をデータベースに書き込みます 64 Copyright GrapeCity, Inc. All rights reserved.

66 6. これで サーバー側のコードは大部分準備できました 後は SmartDataSet を作成して設定するメソッドを追加するだけです この実装に以下のコードを追加します C# SmartDataSet GetDataSet() // mdb ファイルの物理的な場所を取得します string mdb = Path.Combine( // このファイルの存在を確認します 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 によって検出されます 65 Copyright GrapeCity, Inc. All rights reserved.

67 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; 66 Copyright GrapeCity, Inc. All rights reserved.

68 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); 67 Copyright GrapeCity, Inc. All rights reserved.

69 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 = ; // int.maxvalue binding.maxbuffersize = ; // 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 オブジェクトをインスタンス化して返します デフォルトコンストラクタは開発環境 ( など ) を参照するため ここでは使用しません デフォルトコンストラクタは開発マシンでは正常に機能しても アプリケーションの展開時には機能しません また デフォルトコンストラクタは 65 KB バッファを使用しているため データ転送には小さすぎます 上の GetDataService メソッドの実装は この 2 つの問題を解決します 上の LoadData メソッドは サービスをインスタンス化し GetDataAsync メソッドを呼び出します このメソッドは 実行の終了時に svc_datacompleted デリゲートを呼び出します このデリゲートは DataSet オブジェクトをインスタンス化し ReadXml メソッドを使用して サーバーから提供されたデータをデシリアライズします 次に AppointmentStorage のデータソースを設定します Page コンストラクタで AppointmentStorage のマッピングが設定されているため AppointmentStorage.DataSource プロパティを設定すると データが C1Scheduler コントロールに連結されます これは 双方向連結になります つまり _dtappointments に加えられた変更は C1Scheduler にも反映され 逆方向にも反映されます メモ : これは C1.Silverlight.Data DataSet クラスの最も重要な機能の1つです この機能は ADO.NET DataSet オブジェクトと同じ XML スキーマを使用します これにより アプリケーションはクライアントでデータをシリアライズし サーバーでそのデータをデシリアライズできます この逆も可能です また オブジェクトモデルがよく似ているので 開発者にとってもわかりやすく 好都合です 68 Copyright GrapeCity, Inc. All rights reserved.

70 サーバーへの変更のコミット ほとんど完成に近づきました この後は ユーザーが行った変更がデータベースに適用されるように 変更をサーバーに送信するコードを追加します 最初に 変更をサーバーにコミットするボタンを追加します このボタンのイベントハンドラにより データがサーバーに戻されて保存されます 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 メソッドを呼び出して 3 つのバイト配列を作成します 各バイト配列は サーバーからデータがダウンロードされてから 追加 変更 または削除された行を含む DataSet を表します 次に 前に実装した Web サービスを呼び出して その結果を待ちます サーバーの更新中にエラーが検出された場合は 例外をスローします ( 実際のアプリケーションでは エラーはもう少し丁寧に処理されます ) 残りは GetChanges メソッドです 次にコードを示します C# 69 Copyright GrapeCity, Inc. All rights reserved.

71 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 ファイルにサテライトアセンブリが追加されます 70 Copyright GrapeCity, Inc. All rights reserved.

72 C1.Silverlight.Schedule.5 アセンブリでは 次のリソースファイルが使用されます リソースファイル C1.Schedule.Categories.resx C1.Schedule.EditAppointment.resx C1.Schedule.EditRecurrence.resx C1.Schedule.Exceptions.resx C1.Schedule.Labels.resx C1.Schedule.MiscStrings.resx C1.Schedule.RecChoice.resx 説明 デフォルトの予定分類のローカライズ可能な名前を含みます デフォルトの EditAppointmentTemplate のローカライズ可能な文字列を含みます デフォルトの EditRecurrenceTemplate のローカライズ可能な文字列を含みます エンドユーザーに表示されるローカライズ可能なエラーメッセージを含みます デフォルトの予定ラベルのローカライズ可能な名前を含みます 繰り返しパターンの説明に使用されるローカライズ可能な文字列を含みます [Open recurrence] および [Remove recurrence] の各ダイアログのローカライズ可能な文字列を含みます C1.Schedule.SelectFromListScene.resx SelectFromListScene コントロールのローカライズ可能な文字列を含みます C1.Schedule.ShowReminders.resx C1.Schedule.Statuses.resx C1.Schedule.TimeStrings.resx Silverlight.resx デフォルトの ShowRemindersTemplate のローカライズ可能な文字列を含みます デフォルトの公開方法のローカライズ可能な名前を含みます C1TimeSpanPicker コントロールのローカライズ可能な文字列を含みます 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> 71 Copyright GrapeCity, Inc. All rights reserved.

73 使用可能なカレンダー設定は以下のようになります : CalendarHelper プロパティ WeekStart WorkDays StartDayTime EndDayTime Holidays WeekendExceptions FullMonthNames 説明 週の初めの日を決定する DayOfWeek 値を取得または設定します デフォルトはシステム設定です 1 週間の勤務日を含む WorkDays オブジェクトを取得または設定します 勤務時間の開始を指定する TimeSpan 値を取得または設定します 勤務時間の終了を指定する TimeSpan 値を取得または設定します 休日 ( 勤務日以外の日と週末 ) のリストを保持する ObservableCollection(T) オブジェクトを取得または設定します 働く必要がある週末の日のリストを保持する ObservableCollection (T) オブジェクトを取得または設定します カルチャ固有の月の完全名の配列を取得します 72 Copyright GrapeCity, Inc. All rights reserved.

74 C1Calendar コントロールの使い方 C1Scheduler には C1Calendar という補助的なカレンダーコントロールがあります C1Calendar コントロールは 1 つの月または複数の月を表示するカレンダーユーザーインターフェイスの作成します このコントロールを使用して 1 つまたは複数の日付を対話式に選択できます カレンダーコントロールの目的は 特定の日付を対話式に選択する機能を持つカレンダーユーザーインターフェイスを ( コードを使用せずに XAML だけで ) 作成するためのデータを提供することです そのために次のプロパティがあります 主なカレンダープロパティ プロパティ SelectedDate DateTime SelectedDate get; set; Year int Year get; set; Month int Month get; set; MaxDate DateTime MaxDate get; set; MinDate TimeSpan MinDate get; set; 説明 カレンダーで選択されている現在の日付を定義します C1.WPF.Schedule.CalendarBase.SelectedDate または C1.Silverlight.Schedule.CalendarBase.SelectedDate プロパティの年の部分を定義します カレンダーが表す 1 か月を定義します 使用できる最大の日付を取得または設定します デフォルト値は 12/31/9998 です 使用できる最小の日付を取得または設定します デフォルト値は 01/01/1753 です これらのプロパティは同期が維持されます したがって SelectedDate を変更すると Year と Month がそれに応じて変更され Year や Month を変更すると SelectedDate が変更されます その他のカレンダープロパティ プロパティ CalendarHelper, public C1.WPF.Schedule.CalendarHelper CalendarHelper get; set; MaxSelectionCount, public int MaxSelectionCount get; set; SelectedDates, public C1.WPF.Schedule.DateList SelectedDates get; set; BoldedDates, public C1.WPF.Schedule.DateList 説明カレンダーに依存するプロパティを提供します コントロールで選択できる最大の日数を定義します 選択中の日付のリストです 太字の日付のリストです 73 Copyright GrapeCity, Inc. All rights reserved.

75 BoldedDates get; set; DaysPanel, public System.Windows.Controls.ItemsPanelTemplate DaysPanel get; set; 1 か月の日付を表す要素をレイアウトするパネルを定義する ItemsPanelTemplate です デフォルトでは 7 列 6 行の AutoDistributionGrid パネルが使用されます DaySlotTemplate, public System.Windows.DataTemplate DaySlotTemplate get; set; DaySlotStyle, public System.Windows.Style DaySlotStyle get; set; 月内の 1 日の UI 表現を定義する DataTemplate です このテンプレートの DataContext は DaySlot オブジェクトです 月内の 1 日を表すビジュアルツリーのルート要素である DaySlotPresenter 要素の Style です DaysOfWeekPanel, public System.Windows.Controls.ItemsPanelTemplate DaysOfWeekPanel get; set; 曜日を表す要素をレイアウトするパネルを定義する ItemsPanelTemplate です デフォルトでは 水平方向の StackPanel が使用されます DayOfWeekSlotTemplate, public System.Windows.DataTemplate DayOfWeekSlotTemplate get; set; MonthFullName, public string MonthFullName get; Theme, public System.Windows.ResourceDictionary Theme get; set; 1 つの曜日の UI 表現を定義する DataTemplate です このテンプレートの DataContext は DayOfWeekSlot オブジェクトです 現在のカルチャを考慮して カレンダーに表示されている現在の月の完全名を取得します カレンダーテーマのリソースを含む ResourceDictionary オブジェクトを取得または設定します すべてのコントロールは次の RoutedEvent を公開します イベント SelectedDateChanged 説明 C1.WPF.Schedule.CalendarBase.SelectedDate または C1.Silverlight.Schedule.CalendarBase.SelectedDate プロパティ値が変更されたときに発生します C1Calendar の要素 C1Calendar のユーザーインターフェイスは 次の 3 つの主要部分を抽象化して示します 1. 月内の日付を一覧表示するペイン 2. 曜日名を一覧表示するペイン 3. 現在の年 / 月の選択を管理する UI を表すコマンドペイン 日付のリストは ListBox クラスを継承する C1CalendarItemPresenter オブジェクトによって表されます C1CalendarItemPresenter クラスのインスタンスは C1Calendar のテンプレートビジュアルツリー内で カレンダー日のパネルを表示する場所を定義するために使用されます C1Calendar は Year プロパティと Month プロパティに対応するカレンダー日のセルを表す (DaySlotPresenter クラスの ) UI 要素を生成します これらの DaySlotPresenter 要素の実際の UI は DaySlotTemplate プロパティで定義されます これらの要素は DaysPanel プロパティで UI が定義されるパネルの子要素になります メモ : 通常のカレンダーは 6 週間の行で構成され 各行は 7 日間で構成されます つまり 6 * 7 = 42 日分のセル ( スロット ) があります 一部のセルは空のセルで 日付は表しません 74 Copyright GrapeCity, Inc. All rights reserved.

76 カレンダー日のセル ( スロット ) 各 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 で太字になっているかどうかを示す 日スロットの生成 日スロットは カルチャ固有の曜日順序に基づいて生成されます たとえば 米国のカルチャでは日曜日が週の初日になるので 月の初日が火曜日の場合 対応する日スロットはリストの 3 番目になり その前の 2 つのスロットは空になります 一方 ロシアのカルチャでは月曜日が週の初日になるので リストの 2 番目になります 表示されるカルチャは C1Calendar CalendarHelper プロパティによって制御されます 上記の日付のパネルがカレンダーコントロールの UI ツリー (C1Calendar.Template で定義される ) 内に配置される場所を指定するには C1CalendarPresenter 型のインスタンスを使用する必要があります 曜日 曜日のリストは ItemsControl から派生される DaysOfWeekPresenter クラスによって表されます 曜日ペインを配置する場所を指定するには C1Calendar.Template ビジュアルツリー内のプレースホルダとして DaysOfWeekPresenter のインスタンスを使用する必要があります DaysOfWeekPresenter は テンプレートが DaysOfWeekPanel で定義されるパネルの子要素として 7 つの DayOfWeekSlotPresenter オブジェクトを生成します 各 DayOfWeekSlotPresenter オブジェクトは 1 つの曜日を表します 各 DayOfWeekSlotPresenter の UI は DayOfWeekSlotTemplate プロパティで定義されます 各 DayOfWeekSlotPresenter は DataContext として DayOfWeekSlot オブジェクトを受け取ります DayOfWeekSlot には 次のように DayOfWeekSlotPresenter の UI を簡単に連結するためのプロパティがあります DayOfWeek DayOfWeek DayOfWeekSlot が表す曜日を取得する string DayFullName カルチャ固有の曜日の完全名 string DayShortName カルチャ固有の曜日の省略名 string DayShortestName DayOfWeek のカルチャ固有の最短名 bool IsWeekEnd この曜日が週末かどうかを示す リストに表示される曜日の順序はカルチャ固有です たとえば 週の初日は米国のカルチャでは日曜日 ロシアのカルチャでは月曜日です C1Calendar の外観 75 Copyright GrapeCity, Inc. All rights reserved.

77 C1Calendar の外観をカスタマイズするには いくつかの方法があります 以下のトピックでは ブラシのプロパティ テーマ テンプレートを含む さまざまなカスタマイズテクニックについて説明します C1Calendar のプロパティ Scheduler for WPF/Silverlight には カレンダーカレンダーコントロールの外観をカスタマイズするためのプロパティが含まれます コントロールの色 境界 および高さを変更できます 以下のトピックでは これらの外観プロパティの一部について説明します 色のプロパティ 以下のプロパティを使用すると 前後の月の日 曜日 月ヘッダー 選択中の日 週末 現在の日付など カレンダーコントロールの月領域や月ヘッダーの各部で使用する色をカスタマイズできます さらに コントロール自体の前景と背景の色プロパティもあります プロパティ AdjacentMonthDayBrush Background DaysOfWeekBorderBrush Foreground MonthHeaderBackground MonthHeaderForeground NavigationButtonBrush SelectedDayBrush TodayBrush WeekendBrush 説明 前後の月の日の表示に使用する Brush オブジェクトを取得または設定します これは依存プロパティです コントロールの背景を描画するブラシを取得または設定します これは依存プロパティです 曜日に下線を引くために使用する Brush オブジェクトを取得または設定します これは依存プロパティです 前景色を描画するブラシを取得または設定します これは依存プロパティです 月ヘッダーに色を付けるために使用する Brush オブジェクトを取得または設定します これは依存プロパティです 月ヘッダーのテキストに色を付けるために使用する Brush オブジェクトを取得または設定します これは依存プロパティです ナビゲーションボタンに色を付けるために使用する Brush オブジェクトを取得または設定します これは依存プロパティです 選択中の日付の強調表示に使用する Brush オブジェクトを取得または設定します これは依存プロパティです 現在の日付の強調表示に使用する Brush オブジェクトを取得または設定します これは依存プロパティです 週末の表示に使用する Brush オブジェクトを取得または設定します これは依存プロパティです プロパティ 例 AdjacentMonthDayBrush 76 Copyright GrapeCity, Inc. All rights reserved.

78 Background DaysOfWeekBorderBrush Foreground このプロパティは 勤務日 ( 月曜日から金曜日 ) の曜日の省略形と日付に影響します MonthHeaderBackground このプロパティは 月ヘッダーの背景色に影響します 77 Copyright GrapeCity, Inc. All rights reserved.

79 MonthHeaderForeground このプロパティは 月ヘッダーに表示される年と月名に影響します NavigationButtonBrush SelectedDayBrush TodayBrush 78 Copyright GrapeCity, Inc. All rights reserved.

80 WeekendBrush テキストのプロパティ 以下のプロパティを使用すると カレンダーカレンダーコントロールのテキストの外観をカスタマイズできます プロパティ FontFamily FontSize FontStretch FontStyle FontWeight MonthHeaderFontFamily MonthHeaderFontSize 説明 コントロールのフォントファミリを取得または設定します これは依存プロパティです フォントサイズを取得または設定します これは依存プロパティです フォントを画面上で伸縮する比率を取得または設定します これは依存プロパティです フォントスタイルを取得または設定します これは依存プロパティです 指定されたフォントの太さを取得または設定します これは依存プロパティです 月ヘッダーのテキストの表示に使用する FontFamily オブジェクトを取得または設定します これは依存プロパティです 月ヘッダーのフォントサイズを指定する Double 値を取得または設定します これは依存プロパティです MonthHeaderFontWeight 月ヘッダーのテキストの表示に使用する FontWeight オブジェクトを取得または設定します これは依存プロパティです C1Calendar のテーマ (WPF のみ ) カレンダーコントロールには 7 つの定義済みテーマがあります C1Scheduler のテーマ 例 Office 2007 Blue 79 Copyright GrapeCity, Inc. All rights reserved.

81 Office 2007 Black Office 2007 Silver Media Player Dusk Blue Dusk Green Vista テーマの ResourceDictionary では カレンダーコントロールでよく使用されるユーザーインターフェイスプロパティが定義されています 次の表に デフォルトのカレンダーテーマを示します テーマフォルダ テーマファイル C1CalendarResources ク ResourceID 説明 80 Copyright GrapeCity, Inc. All rights reserved.

82 ラスの静的フィールド 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. [ テーマ ] を選択し 7つの定義済みテーマから1つを選択します メモ : [ プロパティ ] ウィンドウで Theme プロパティの隣にあるドロップダウンリストからオプションを選択して テーマを変更することもできます Microsoft Blend でテーマを設定する場合は 設計時にTheme プロパティを変更します 1. XAML のウィンドウまたはページで C1Calendar コントロールを選択します 2. [ プロパティ ] パネルの [View] で CalendarBase.Theme プロパティの横にあるドロップダウン矢印をクリックし 定義済みテーマを選択します ResourceID を使ってテーマを設定する場合は 次の XAML を使用します XAML <my:c1calendar x:name="calendar1" MaxSelectionCount="14" Theme="DynamicResource ComponentResourceKey TypeInTargetAssembly=my:CalendarBase, ResourceId= MediaPlayer"/> C1CalendarResources 静的フィールドを使ってテーマを設定するには プロジェクトに次のコードを追加します Visual Basic calendar.theme = C1CalendarResources.MediaPlayer C# 81 Copyright GrapeCity, Inc. All rights reserved.

83 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 説明 前後の日のテキストの表示に使用されるブラシ カレンダーコントロールの背景として使用されるブラシ 曜日の下線の色を指定する際に使用されるブラシ カレンダーコントロールで使用されるフォントファミリ コントロールで使用されるフォントサイズを指定する倍精度値 月ヘッダーの表示に使用されるフォントファミリ 月ヘッダーの表示に使用されるフォントサイズを指定する倍精度値 月ヘッダーの背景色を指定する際に使用されるブラシ 月ヘッダーの背景色を指定する際に使用されるブラシ ナビゲーション矢印の色を指定する際に使用されるブラシ 選択中の日の背景色を指定する際に使用されるブラシ 現在の日付の境界線の色を指定する際に使用されるブラシ 現在の日付の境界線の太さ 週末日の色を指定する際に使用されるブラシ カレンダーのテンプレート 82 Copyright GrapeCity, Inc. All rights reserved.

84 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 を定義します "Binding Path=DayOfWeekSlot_Property" マークアップ拡張を使用して UI をこのテンプレートに連結します ここで DayOfWeekSlot Property は DayOfWeekSlot クラスの任意のプロパティです C1Calendar DayOfWeekSlotStyle 個々の日を表す UI ツリーのルートオブジェクトのプロパティを定義できます このオブジェクトは DayOfWeekSlotPresenter 型です C1Calendar のレイアウト C1Calendar のレイアウトをカスタマイズするには いくつかの方法があります 以下のトピックでは レイアウトのプロパティ 複数のカレンダーの表示 カレンダーのレイアウトなどのカスタマイズテクニックについて説明します C1Calendar レイアウトのプロパティ Calendar for WPF/Silverlight には カレンダーコントロールのレイアウトをカスタマイズするためのプロパティが含まれます コントロールに表示するカレンダー月の幅 高さ 配置 および月数を変更できます 次のプロパティを使用して コントロールのレイアウトをカスタマイズできます プロパティ Width Height HorizontalAlignment VerticalAlignment 説明 要素の幅を取得または設定します 要素の高さを取得または設定します パネルや項目コントロールなどの親要素内に置かれる要素に適用される水平配置の特性を取得または設定します パネルや項目コントロールなどの親要素内に置かれる要素に適用される垂直配置の特性を取得または設定します 83 Copyright GrapeCity, Inc. All rights reserved.

85 Margin Padding MinWidth MinHeight MaxWidth MaxHeight 要素の外側の余白を取得または設定します コントロールの内側のパディングを取得または設定します 要素の最小幅制約を取得または設定します 要素の最小高さ制約を取得または設定します 要素の最大幅制約を取得または設定します 要素の最大高さ制約を取得または設定します HorizontalContentAlignment コントロールのコンテンツの水平方向の配置を取得または設定します これは依存プロパティです VerticalContentAligment MonthCount MonthHeight MonthWidth コントロールのコンテンツの垂直方向の配置を取得または設定します これは依存プロパティです カレンダーに表示される月の数を取得または設定します デフォ カレンダーの各月スロットの高さを決定します カレンダーの各月スロットの幅を決定します 複数月カレンダーの表示 C1Calendar コントロールでは 複数の月を表示し 月の間を対話式に移動したり 特定の DateTime または日時コンポーネントを選択することができます C1Calendar は 必要な数の C1Calendar コントロールを作成して UI を構築します この UI の作成において重要なプロパティは 次のとおりです int MonthCount カレンダーに表示される月の数 Style MonthCalendarStyle 1 つの月を表す子 C1Calendar にそれぞれ適用されるスタイル Style MonthSlotStyle 1 つの月を表すビジュアルツリーのルート要素である C1CalendarPresenter 要素のスタイル ItemsPanelTemplate MonthsPanel 個々の月を表す要素をレイアウトするパネルを定義する ItemsPanelTemplate C1Calendar の外観をカスタマイズするには 次の手順に従います 1. カレンダーの汎用レイアウトモデルを定義するには C1Calendar.Template プロパティを割り当てる必要があります 通常は Style の Setter を使って行います テンプレートのビジュアルツリーには 月のカレンダーを含むパネルを表示する場所を指定するために C1CalendarPresenter を入れる必要があります 2. 月ペインの UI を定義するには MonthsPanel プロパティにテンプレートを割り当てます このテンプレートで 月の項目をレイアウトするパネルを定義します 84 Copyright GrapeCity, Inc. All rights reserved.

86 3. 1 つの月の 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 では 次の方法でカレンダーの月の間を移動できます 前月ボタンと翌月ボタン 前月または翌月のボタンイメージをクリックして前後の月に移動します 月と年のポップアップカレンダーセレクタ カレンダーの月名をクリックすると 月名のリストボックスが表示され 1 月から 12 月までの任意の月を選択できます カレンダーの年をクリックすると 年のリストボックスが表示され 任意の年を選択できます 項目の UI を表示するためにどのようなパネルや日付が使用されているかに関係なく マウスまたはキーボードを使って対話式に日付を選択できます 前月と翌月のナビゲーションボタン 左矢印ボタンをクリックすると前月に移動でき 右矢印ボタンをクリックすると翌月に移動できます 月と年のポップアップカレンダーセレクタ クイック月セレクタを使用すると ナビゲーションボタンを連続してクリックしなくても 目的のカレンダー月に移動できます これは カレンダー月を何か月も飛ばして移動する場合に役立ちます カレンダー月を 1 回クリックするだけで複数のカレンダー月を表示できます カレンダータイトルの月名を 1 回クリックすると いくつかのカレンダー月の名前がポップアップリストボックスに表示されます 移動先の月を選択すると カレンダー月が現在の月から選択した月に変更されます 85 Copyright GrapeCity, Inc. All rights reserved.

87 カレンダー年を表示するには 月タイトルバーのカレンダー年を 1 回クリックします カレンダータイトルの年を 1 回クリックすると いくつかのカレンダー年がポップアップリストボックスに表示されます 移動先の年を選択すると カレンダー年が現在の年から選択した年に変更されます C1Calendar の選択 デフォルトでは 一度に選択できる日付は 1 つです MaxSelectionCount プロパティの値を増やすと 複数の日付を選択できます 実行時には MaxSelectionCount プロパティの値に基づいて [Ctrl] キーを押しながら複数の日付をクリックして選択できます 選択中の日付は デフォルトでオレンジの背景色で表示されます 選択可能な日付の最大数を設定する方法については C1Calendar で選択可能な最大日数の指定 を参照してください MaxDate プロパティと MinDate プロパティを使用すると カレンダーで選択できる最大と最小の日付を指定できます デフォルトでは 最小値は 1/1/1753 で 最大値は 12/31/9998 です 最大と最小の日付が適用されると これらの値の範囲外の日付は選択できなくなります その結果 ユーザーが指定された範囲外の日付を選択しようとしても 選択した色やアクションは適用されなくなります 設定 C1Scheduler コントロールと C1Calendar コントロールは 同じカレンダー設定を共有します これらの設定には CalendarHelper クラスの対応するプロパティを使ってアクセスできます たとえば 稼働日のカレンダーを作成するには CalendarHelper クラスを使って勤務日を指定します CalendarHelper クラスの XAML は 2 つのコントロールのどちらでも同じであることがわかります C1Scheduler の XAML XAML <my:c1scheduler x:name="scheduler1"> <my:c1scheduler.calendarhelper> <my:calendarhelper Culture="English " WeekStart="Sunday" 86 Copyright GrapeCity, Inc. All rights reserved.

88 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> 87 Copyright GrapeCity, Inc. All rights reserved.

89 1 つのコントロールで 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 WeekStart WorkDays StartDayTime EndDayTime Holidays WeekendExceptions FullMonthNames 説明 カルチャ固有の情報を保持する CultureInfo オブジェクトを取得または設定します 週の初めの日を決定する DayOfWeek 値を取得または設定します デフォルトはシステム設定によって決定されます 1 週間の勤務日を含む WorkDays オブジェクトを取得または設定します 勤務時間の開始を指定する TimeSpan 値を取得または設定します 勤務時間の終了を指定する TimeSpan 値を取得または設定します 休日 ( 勤務日以外の日と週末 ) のリストを保持する ObservableCollection オブジェクトを取得または設定します 働く必要がある週末の日のリストを保持する ObservableCollection オブジェクトを取得または設定します カルチャ固有の月の完全名の配列を取得します カレンダーコントロールへのスケジュールの連結 C1Calendar コントロールは C1Scheduler コントロールにナビゲーションと追加情報を提供するために使用されます それには コントロールのプロパティどうしを連結します C1MonthCalendar/C1MultiMonthCalendar のプロパティ C1Scheduler プロパティ コメント CalendarHelper CalendarHelper これらのプロパティを連結すると 両方のコントロールが使用するカルチャおよびカレンダーに依存するプロパティが同期されます これは デフォルトのナビゲーションにとって重要です VisibleDates SelectedDates これらのプロパティを連結すると ユーザーがカレンダーで日付を選択したときに C1Scheduler コントロールがナビゲートされます たとえば C1Calendar で4 日間を選択すると その4 日間が C1Scheduler コントロールに表示されます BoldedDates BoldedDates これらのプロパティを連結すると カレンダーコントロー ルで予定がある日付が太字で表示されます 88 Copyright GrapeCity, Inc. All rights reserved.

90 たとえば 次の XAML は C1Scheduler を C1Calendar コントロールに連結します XAML <Window xmlns=" xmlns:x=" xmlns:system="clr-namespace:system;assembly=mscorlib" x:class="untitledproject1.window1" x:name="window" Title="Window1" Width="924" Height="480" xmlns:c1sched=" <Grid> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition/> </Grid.ColumnDefinitions> <c1sched:c1scheduler Name="scheduler1" Grid.Column="1" MonthStyle="DynamicResource ComponentResourceKey TypeInTargetAssembly=c1sched:C1Scheduler, ResourceId=MonthStyle2007" WeekStyle="DynamicResource ComponentResourceKey TypeInTargetAssembly=c1sched:C1Scheduler, ResourceId=WeekStyle2007" WorkingWeekStyle="DynamicResource ComponentResourceKey TypeInTargetAssembly=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> </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 コントロールに表示されます 89 Copyright GrapeCity, Inc. All rights reserved.

91 90 Copyright GrapeCity, Inc. All rights reserved.

92 予定 予定は 一定期間内に実行されるイベントに関する詳細な情報と その期間を表します 予定は 30 分といった時間から複数の日に渡るまで 指定した長さのイベントです 新しい予定を追加するには または既存の予定を編集するには その予定の時刻をダブルクリックします [ 予定 ] ダイアログボックスを使用して 新しい予定のスケジュールを設定します このとき タイトル 場所 ラベル 開始時刻と終了時刻 アラーム 公開方法 その予定が全日のイベントであるかどうか 指定された期間内に繰り返し実行されるものであるかどうかを指定できます また 任意のリソース 分類 および連絡先も指定できます 91 Copyright GrapeCity, Inc. All rights reserved.

93 ラベル ラベルは 予定に追加できる色分けされたマーカーです ラベルを設定したユーザーおよび他のユーザーは 予定の詳細を表示することなく その予定の種類を確認できます Scheduler for WPF/Silverlight には 12 個の定義済みラベルが用意されています ラベルの色は C1Scheduler コントロールのすべてのデータビューに表示されます 定義済みのラベル 定義済みのラベルは次のとおりです ラベル色インデックス なし 0 重要 1 ビジネス 2 個人用 3 休暇 4 締め切り 5 要出席 6 出張 7 要準備 8 誕生日 9 記念日 10 電話連絡 11 公開方法 公開方法を使用すると 予定がスケジュールされる際に自分が参加できるかどうかを全員に知らせることができま 92 Copyright GrapeCity, Inc. All rights reserved.

94 す Scheduler for WPF/Silverlight では 予定あり 空き時間 外出中 および仮の予定の 4 つの定義済み公開方法を使用できます 公開方法は 次の色で指定されます 状況色インデックス 予定あり 0 空き時間 1 外出中 2 仮の予定 3 公開方法は [ 公開方法 ] ドロップダウンリストで指定します 公開方法の色は スケジュールの OneDayStyle ビューおよび WorkingWeekStyle ビューでのみ表示されます 予定の色は 予定の左側にある領域に表示されます 予定を選択すると その予定は公開方法を表す色で強調表示されます アラーム 予定のアラームを使用すると 予定が発生する時刻よりも指定した時間だけ前に [ アラーム ] ダイアログボックスが表示されます [ アラーム ] ダイアログボックスでは 1つまたは複数の予定を取り消すオプション ( 複数の予定が設定されている場合 ) 予定を開くオプション またはアラームをリセットして設定した時間内に再表示するオプションを指定できます 93 Copyright GrapeCity, Inc. All rights reserved.

95 アラームは 予定を作成するときに設定できます それには [ 再通知 ] チェックボックスをオンにし 予定のどれだけ前にアラームを表示するかを指定する時間を [ アラーム ] ドロップダウンリストで指定します 連絡先 通常 連絡先のリストには 頻繁に通信するすべてのユーザーが含まれています 予定には その予定について知らせる必要がある相手の連絡先を割り当てることができます 連絡先情報は ContactCollection クラスに格納されます 既存の連絡先をデータソースから取得できます また 実行時に連絡先連絡先を追加することもできます 連絡先の指定はオプションです また 予定には 1 人または複数の連絡先を割り当てることができます 94 Copyright GrapeCity, Inc. All rights reserved.

96 連絡先リストの追加 Scheduler for WPF/Silverlight では 実行時に [ 連絡先 ] ダイアログボックスを使って作成された連絡先がサポートされます リストに追加した連絡先を予定に割り当てることができます 実行時に連絡先を追加するには 1. 新しい予定を追加するか 既存の予定を開きます 2. [ 予定 ] ダイアログボックスで [ 連絡先 ] ボタンをクリックします [ 連絡先 ] ダイアログボックスが表示されます 3. [ 利用可能な項目 ] テキストボックスに名前を入力して [ 追加 ] をクリックします 4. [OK] をクリックして [ 連絡先 ] ダイアログボックスを閉じます 予定への連絡先の割り当て 実行時に連絡先 ( 複数可 ) を予定に割り当てるには [ 連絡先 ] ダイアログボックスを使用します 項目の追加方法については 連絡先リストの追加 を参照してください 実行時に連絡先を予定に割り当てるには 1. [ 予定 ] ダイアログボックスで [ 連絡先 ] ボタンをクリックします 2. 対象の連絡先の横にあるチェックボックスをオンにし [OK] をクリックします [ 連絡先 ] テキストボックスの横に 連絡先が表示されます 予定には複数の連絡先を追加できます 95 Copyright GrapeCity, Inc. All rights reserved.

97 分類 分類とは 予定を整理する際に使用するキーワードまたはフレーズです Scheduler for WPF/Silverlight では 20 個の定義済み分類が用意されており これらを予定に割り当てることができます データベースの分類を使用することもできます また ユーザーは 実行時に独自のカスタム分類を作成することができます CategoryCollection クラスに格納される分類はオプションです 1 つの予定に複数の分類を割り当てることもできます 定義済みの分類 定義済みの分類は次のとおりです 分類 インデックス 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 では 実行時に [ 分類 ] ダイアログボックスを使って作成された分類がサポートされます リストに追加した分類を予定に割り当てることができます 実行時に分類を追加するには : 1. 新しい予定を追加するか 既存の予定を開きます 96 Copyright GrapeCity, Inc. All rights reserved.

98 2. [ 予定 ] ダイアログボックスで [ 分類 ] ボタンをクリックします [ 分類 ] ダイアログボックスが表示されます 3. [ 利用可能な項目 ] テキストボックスに名前を入力して [ 追加 ] をクリックします 新しい分類がリストの最後に追加されます 4. [OK] をクリックして [ 分類 ] ダイアログボックスを閉じます [ 予定 ] ダイアログボックスで [ 分類 ] ボタンをクリックすると 新しい分類が [ 分類 ] ダイアログボックスに表示されます 予定への分類の割り当て 実行時に分類 ( 複数可 ) を予定に割り当てるには [ 分類 ] ダイアログボックスを使用します デフォルトでは 20 個の定義済み分類から成るリストが用意されています 分類を [ 分類 ] ダイアログボックスに追加する方法については 分類リストの追加 を参照してください 実行時に分類を予定に割り当てるには 1. [ 予定 ] ダイアログボックスで [ 分類 ] ボタンをクリックします 2. 対象の分類の横にあるチェックボックスをオンにし [OK] をクリックします [ 分類 ] テキストボックスの横に 分類が表示されます 予定には複数の分類を割り当てることができます リソース リソースとは 特定のタスクをサポートするソースを定義するキーワードまたはフレーズです ResourceCollection クラスに格納されるリソースはオプションです 1 つの予定に複数のリソースを割り当てることもできます 97 Copyright GrapeCity, Inc. All rights reserved.

99 リソースリストの追加 Scheduler for WPF/Silverlightでは 実行時に [ リソース ] ダイアログボックスを使って作成されたリソースがサポートされます リストに追加したリソースを予定に割り当てることができます 実行時にリソースを追加するには : 1. 新しい予定を追加するか 既存の予定を開きます 2. [ 予定 ] ダイアログボックスで [ リソース ] ボタンをクリックします [ リソース ] ダイアログボックスが表示されます 3. [ 利用可能な項目 ] テキストボックスにリソースを入力して [ 追加 ] をクリックします 新しいリソースがリストに追加されます 4. [OK] をクリックして [ リソース ] ダイアログボックスを閉じます [ 予定 ] ダイアログボックスで [ リソース ] ボタンをクリックすると 新しいリソースが [ リソース ] ダイアログボックスに表示されます 実行時における予定の操作 実行時に予定を作成するには 予定を開始する時刻をダブルクリックして [ 予定 ] ダイアログボックスを開きます 予定の詳細については 予定 を参照してください 98 Copyright GrapeCity, Inc. All rights reserved.

100 [ 予定 ] ダイアログボックスでキーを押したときに実行される処理を次に示します キー動作 Enter Esc F2 Tab (SHIFT+Tab) 選択状態にある [ 予定 ] の [ 予定 ] ダイアログボックスが開きます または 新しい [ 予定 ] が作成されます 変更を保存しないで [ 予定 ] ダイアログボックスが閉じます 選択状態にある [ 予定 ] が編集モードに移動します タブの順番に従って カーソルがフィールド間を移動します 予定の追加と保存 予定をスケジュールに追加するには [ 予定 ] ダイアログボックスを使用します 1. 予定の時刻をダブルクリックして [ 予定 ] ダイアログボックスを開きます または 単一 [Enter] キーを押下して新しい [ 予定 ] を作成します 2. タイトル 場所場所 および予定に割り当てる追加情報を指定します 3. [ 保存して閉じる ] ボタンをクリックして 新しい予定をスケジュールに追加します 予定の編集 予定をスケジュールに変更して更新するには [ 予定 ] ダイアログボックスを使用します 99 Copyright GrapeCity, Inc. All rights reserved.

101 1. [F2] キーを使用してタイトルを編集し [Enter] キーで保存保存します または [Esc] キーで変更を保存しないようにします 2. 存在の [ 予定 ] をダブルクリックして [ 予定 ] ダイアログボックスを開きます または [Enter] キーを押下して選択状態にある [ 予定 ] の [ 予定 ] ダイアログボックスを開きます 3. [ 予定 ] ダイアログボックス内様々のフィールドに編集を行って [ 予定 ] の右端にある [ 保存 ] ボタンまたは [Ctrl+S] キーでスケジュールに [ 予定 ] をを更新します また 選択状態にある [ 予定 ] に [Tab (Shift+Tab)] キーを使用して現在のビュー内タブの順番に従って カーソルがフィールド間を移動できます 予定の削除 [ 予定の編集 ] ダイアログボックスを使用して 選択した予定をスケジュールから簡単に削除することができます 1. スケジュールから削除する予定を選択します 2. キーボードの [Delete] キーを押します その予定がスケジュールから削除されます 予定の繰り返し 特定の間隔で予定が繰り返されるように設定することができます 予定は日 週 月 または年の単位で繰り返すことができます 1. 予定の時刻をダブルクリックして新しい予定を追加するか 既存の予定をダブルクリックします [ 予定 ] ダイアログボックスが表示されます 2. [ 定期的な予定 ] ボタンをクリックします [ 定期的な予定の設定 ] ダイアログボックスが表示されます 3. 繰り返しパターンを設定します 100 Copyright GrapeCity, Inc. All rights reserved.

102 時間の設定 [ 時間の設定 ] グループ内のプロパティを指定して 予定の開始時刻 終了時刻 および予定の時間の長さを設定できます パターンの設定 [ パターンの設定 ] グループの設定は 予定を繰り返す間隔 ( 日単位 週単位 月単位または年単位 ) によって異なります 日 [ 日 ] を指定すると 指定した日数ごとに または勤務日にのみ予定が繰り返されるように設定できます たとえば 予定が 2 日ごとに繰り返されるように設定した場合 その予定は 1 日おきに表示されます 予定が勤務日に繰り返されるように設定した場合 デフォルトでは 予定は月曜日から金曜日にのみ表示されます 週 [ 週 ] を指定すると 週単位で間隔を空けて 指定した日に予定が繰り返されるように設定できます たとえば 予定が 2 週間ごとに繰り返されるように設定し [ 火曜日 ] と [ 木曜日 ] を選択した場合 その予定は1 週間おきに火曜日と木曜日に繰り返されます 月 [ 月 ] を指定すると 月単位で間隔を空けて 指定した日に または指定した曜日に予定が繰り返されるように設定できます たとえば 予定が 2 か月に 1 回 8 日日に繰り返されるように設定した場合 その予定は1か月おきに8 日に表示されます 予定が 2 か月に 1 回 第 3 月曜日に繰り返されるように設定した場合 その予定は1か月おきに第 3 月曜日に表示されます 年 [ 年 ] を指定すると 指定した月の指定した日 または曜日に予定が繰り返されるように設定できます 101 Copyright GrapeCity, Inc. All rights reserved.

103 期間 たとえば 予定が 1 月 2 日日に繰り返されるように設定した場合 その予定は毎年 1 月 2 日に表示されます この設定は 誕生日や記念日に最適です 予定が1 月の第 1 金曜日に繰り返されるように設定した場合 その予定は毎年 1 月の第 1 金曜日に表示されます [ 期間 ] グループを使用して 繰り返しの期間を設定できます [ 開始 ] ドロップダウンカレンダーを使用して 繰り返しを開始する日付を選択することができます 終了日を指定する際は 以下の3つのオプションを使用できます [ 終了日未定 ] を指定すると 予定が無期限に繰り返されます [ 反復回数 ] に 0 回を指定すると 指定された回数だけ予定が繰り返されます たとえば 予定を毎日繰り返す場合 [ 反復回数 ] に 25 回を設定すると 予定を 25 日間毎日繰り返すことができます [ 終了日 ] を指定すると 予定は指定した日まで繰り返されます 4. [ 保存して閉じる ] をクリックして [ 定期的な予定の設定 ] ダイアログボックスを閉じます 102 Copyright GrapeCity, Inc. All rights reserved.

104 Scheduler for WPF チュートリアル このチュートリアルは 読者が Visual Basic.NET または C# のプログラミングに精通していることを前提としています ただし Scheduler for WPF については 手順を追って説明されており 予備知識は特に必要ありません このセクションに示される手順に従って作業を進めるだけで Scheduler for WPF の機能を具体的に示すプロジェクトを作成できます チュートリアルプロジェクトを実行し 自分で変更してみてください メモ : このセクションの内容は ComponentOne for WPF にのみ適用されます ComponentOne for Silverlight ではアセンブリ名が異なります カスタムグループ化ビューの作成 Scheduler for WPF を使用すると グループビューをカスタマイズできます このチュートリアルは XAML マークアップおよびコードを使用してカスタムビューを作成する手順を説明します 手順 1: アプリケーションの作成 この手順では 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=" xmlns:x=" Title="Custom Grouping View" xmlns:c1sched=" xmlns:c1datetime=" xmlns:c1=" Width="1024" Height="800"> 3. <Grid> タグの上部に <Window.Resources> </Window.Resources> タグセットを追加します 4. <Window.Resources> </Window.Resources> タグの間に次のマークアップを追加して リソースディクショナリを作成します 103 Copyright GrapeCity, Inc. All rights reserved.

105 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/> 104 Copyright GrapeCity, Inc. All rights reserved.

106 <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 を返すコードをプロジェクトに追加します 手順 2: アプリケーションへのコードの追加 この手順では アプリケーションにコードを追加して 連絡先の追加を処理し 指定された日の VisualIntervalCollection を返すように制御します 1. MainPage.xaml を右クリックし リストから [ コードの表示 ] を選択します 2. 次の名前空間をアプリケーションに追加します Visual Basic Imports C1.C1Schedule Imports C1.WPF.Schedule Imports C1.WPF Imports 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" 105 Copyright GrapeCity, Inc. All rights reserved.

107 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 として使用される 1 つの VisualIntervalGroup から成るリストを返します ''' その他の場合は 1 日のタイムスロットを含む 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) 106 Copyright GrapeCity, Inc. All rights reserved.

108 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 ' 1 つの 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 Class End Namespace C# /// <summary> /// 指定された日の VisualIntervalCollection と 指定された SchedulerGroup を返します これは VisualIntervalsPresenter /// コントロールの ItemsSource として使用されます /// </summary> /// <remarks> /// コンバータパラメータが "Self" の場合は 全日領域を表すための ItemsSource として使用される 1 つの VisualIntervalGroup から成るリストを返します /// その他の場合は 1 日のタイムスロットを含む VisualItervalCollection を返します /// </remarks> 107 Copyright GrapeCity, Inc. All rights reserved.

109 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") // 1 つの 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 108 Copyright GrapeCity, Inc. All rights reserved.

110 この手順では 連絡先を作成し 指定された日の VisualIntervalCollections を返すコードを追加しました 次の手順では リソースディクショナリを作成します 手順 3: リソースディクショナリの作成 この手順では アプリケーションのリソースディクショナリを作成します 1. リソースディクショナリを作成します それには アプリケーション名を右クリックし リストから [ 追加 ] [ 新しい項目 ] を選択します 2. インストール済みテンプレートのリストから [ リソースディクショナリ ] を選択し CustomViews.xaml という名前を付けます [OK] をクリックします 3. ページ内のマークアップを次の名前空間宣言で置き換えます XAML <ResourceDictionary xmlns=" 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=" xmlns:local="clr-namespace:customgroupingview" xmlns:presentationoptions=" </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 を挿入して 1 日ビューの日付グループのスタイルを決定します XAML 109 Copyright GrapeCity, Inc. All rights reserved.

111 <!-- 1 日ビューでの日付グループのスタイルを決定します --> <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 は 1 日ビューに個別のタイムスロットを表示するために使用されるスタイルを作成します XAML <!-- 1 日ビューに個別のタイムスロットを表示するために使用されるスタイルを決定します ここで DynamicResource を使用するとパフォーマンスに影響があるため 各テーマにコピーします --> <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"/> 110 Copyright GrapeCity, Inc. All rights reserved.

112 </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" /> 111 Copyright GrapeCity, Inc. All rights reserved.

113 </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. 1 日ビューに全日領域を表示するために使用されるスタイルを決定します XAML <!-- 1 日ビューに全日領域を表示するために使用されるスタイルを決定します --> <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=" 112 Copyright GrapeCity, Inc. All rights reserved.

114 Binding Path=Scheduler.TodayBackground" /> </DataTrigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> 9. 次 / 前の予定ペインのスタイルを定義します XAML <!-- ContentControl が表す次 / 前の予定ナビゲーションペイン ( 次 / 前のラベルを含む ) のスタイルを定義します --> <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> <!-- DataContext="TemplateBinding DataContext"/>--> <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" 113 Copyright GrapeCity, Inc. All rights reserved.

115 > <Button.LayoutTransform> <RotateTransform Angle="-90" /> </Button.LayoutTransform> </Button> <!-- DataContext="TemplateBinding DataContext"/>--> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> 10. 次の XAML は アプリケーションがリソースディクショナリから取得するように設定します XAML <!-- 1 日ビューを表すスタイル --> <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"> <!-- DayHeader グリッド ( 日付ヘッダーを含む ) --> <Grid DockPanel.Dock="Top" > <Grid.ColumnDefinitions> <ColumnDefinition Width="57" /> <ColumnDefinition /> <ColumnDefinition Width="17"/> </Grid.ColumnDefinitions> <!-- 各グループの SchedulerPresenter(VisualInterval を生成する ) を非表示にします --> <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" 114 Copyright GrapeCity, Inc. All rights reserved.

116 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"/> Padding="0" </DataTemplate> </ItemsControl.ItemTemplate> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <UniformGrid Rows="1" /> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> </ItemsControl> </Grid> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl> <Border Grid.Column="2" /> </Grid> <!-- AllDay 領域グリッド ( 垂直方向にスクロール可能 ) --> <ScrollViewer DockPanel.Dock="Top" Height="54" BorderThickness="0" 115 Copyright GrapeCity, Inc. All rights reserved.

117 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" Output, ElementName=AllDayBorderBrush" Tag="Binding Background="Binding Background" ItemsSource="Binding RelativeSource=RelativeSource Self, x:static local:groupitemtovisualintervalsconverter.default, Converter= ConverterParameter=Self" ItemContainerStyle="DynamicResource C1Scheduler_AllDayInterval_Style"> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> Rows="1"/> <UniformGrid 116 Copyright GrapeCity, Inc. All rights reserved.

118 </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> x:key="timeborderthickness">0</thickness> <Thickness </ResourceDictionary> </c1sched:appointmentscoverpane.resources> </c1sched:appointmentscoverpane> </Grid> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl> </Grid> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl> </Grid> </ScrollViewer> <!-- TimeSlots グリッド ( 垂直方向にスクロール可能 ) --> <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> 117 Copyright GrapeCity, Inc. All rights reserved.

119 RelativeSource=RelativeSource TemplatedParent, <ItemsControl Grid.Column="1" ItemsSource="Binding 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, x:static local:groupitemtovisualintervalsconverter.default, ConverterParameter=VisualIntervals" Binding Path=Scheduler.VisualIntervalTemplate" Background="Binding Background" Output, ElementName=selectedBackground"> Converter= ItemTemplate=" Tag="Binding <c1sched:visualintervalspresenter.itemspanel> <ItemsPanelTemplate> Columns="1"/> <UniformGrid </ItemsPanelTemplate> </c1sched:visualintervalspresenter.itemspanel> </c1sched:visualintervalspresenter> <c1sched:appointmentscoverpane x:name="apppane" Owner="Binding Owner" UseSimpleLayout="false" SizingType="Proportional" 118 Copyright GrapeCity, Inc. All rights reserved.

120 c1sched:appointmentscoverpane.appointmentfilter="appointment" IsDragDropDisabled="Binding Path=Scheduler.IsDragDropDisabled" CoverElementsMargin="10"> <c1sched:appointmentscoverpane.resources> <ResourceDictionary> x:key="timeborderthickness">5,0,0,0</thickness> <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"> 119 Copyright GrapeCity, Inc. All rights reserved.

121 <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"> <!-- パフォーマンスに影響するため ここに C1BrushBuilder を配置しないでください 代わりに祖先への連結を使用します --> <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> この手順では アプリケーションのリソースディクショナリを作成しました 次の手順では このアプリケーションを完成させます 手順 4: アプリケーションの完成 この手順では 作成したアプリケーションを実行します 1. [F5] キーを押してアプリケーションを実行します 次の図のようになります 120 Copyright GrapeCity, Inc. All rights reserved.

122 各ページに表示する連絡先の数を選択できます また ページの左側にある C1Calendar コントロールから 表示する日付を選択できます さらに ページ上部にある矢印を使用して 連絡先のページを移動できます ここまでの成果 C1Scheduler コントロールとカスタムのスケジュールビューを作成しました アプリケーションのカスタムリソースディクショナリも作成しました 複数ユーザースケジュールの作成 このチュートリアルでは 複数ユーザーのスケジュールを表示できるアプリケーションを作成します インターフェイスの作成には XAML マークアップとコードを使用します また データサービスと 2 つのコードファイルをアプリケーションのリソースとして追加します 手順 1: アプリケーションの作成 この手順では 新しい WPF アプリケーションを作成し 適切な参照と名前空間を追加して 2 つのコードファイルとデータサービスをアプリケーションに追加します 次の手順に従います 1. Visual Studio で新しい WPF アプリケーションを作成し MultiUser という名前を付けます 2. アプリケーションに次の参照を追加します それには ソリューションエクスプローラで [ 参照 ] フォルダを右クリックし リストから [ 参照の追加 ] を選択します 参照先があるフォルダに移動し 次のアセンブリを選択します C1.WPF.4.dll C1.WPF.DateTimeEditors.4.dll C1.WPF.Schedule.4.dll 121 Copyright GrapeCity, Inc. All rights reserved.

123 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 を追加します 手順 2: リソースと 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 122 Copyright GrapeCity, Inc. All rights reserved.

124 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" 123 Copyright GrapeCity, Inc. All rights reserved.

125 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"/> <!-- EmployeesRow から追加情報を表示します --> <TextBlock Foreground="Binding Path=Scheduler.Foreground" Margin="10,3" Grid.Column="2" Grid.Row="1" Text="Binding Path=Tag.Title" VerticalAlignment="Center" HorizontalAlignment="Center"/> 11. TimeLine スタイルのグループヘッダーを制御するために 別の <DataTemplate> を作成します XAML <DataTemplate x:key="mycustomtimelinegroupheadertemplate"> <Grid IsHitTestVisible="False"> <c1:c1brushbuilder x:name="background"> <c1:c1brushbuilder x:name="borderbrush"> <Border VerticalAlignment="Stretch" 124 Copyright GrapeCity, Inc. All rights reserved.

126 HorizontalAlignment="Stretch" BorderThickness="4,1,0,1" BorderBrush="Binding Output, ElementName=BorderBrush" Background="Binding Output, ElementName=Background"> <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center"> <TextBlock TextWrapping="Wrap" Foreground="Binding Path=Scheduler.Foreground" Margin="2" Text="Binding DisplayName" HorizontalAlignment="Center"/> <!-- EmployeesRow から追加情報を表示します --> <TextBlock TextWrapping="Wrap" Foreground="Binding Path=Scheduler.Foreground" Margin="2" Text="Binding Path=Tag[Title]" HorizontalAlignment="Center"/> </StackPanel> </Border> </Grid> </DataTemplate> 12. </Window.Resources> 終了タグの下に <Grid> </Grid> タグセットを追加します 13. 次のマークアップを <Grid> タグの間に挿入します XAML <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="196"/> <ColumnDefinition MinWidth="200"/> </Grid.ColumnDefinitions> 14. <Grid> タグ内で次のコードを使用して アプリケーションのツールバーを作成します XAML <ToolBar Grid.Row="0" Grid.ColumnSpan="2"> <RadioButton x:name="btnday" Content="Day" CommandTarget="Binding ElementName=Scheduler" Command="c1sched:C1Scheduler.ChangeStyleCommand" CommandParameter="Binding Path=OneDayStyle, ElementName=Scheduler"/> <RadioButton x:name="btnworkweek" Content="Work Week" CommandTarget="Binding ElementName=Scheduler" Command="c1sched:C1Scheduler.ChangeStyleCommand" CommandParameter="Binding Path=WorkingWeekStyle, ElementName=Scheduler"/> <RadioButton x:name="btnweek" Content="Week" CommandTarget="Binding ElementName=Scheduler" Command="c1sched:C1Scheduler.ChangeStyleCommand" 125 Copyright GrapeCity, Inc. All rights reserved.

127 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> 126 Copyright GrapeCity, Inc. All rights reserved.

128 この手順では アプリケーションのデータ連結とリソースを作成しました また C1Scheduler コントロールと C1Calendar コントロールを作成し いくつかのスケジューラ設定をカスタマイズしました 次の手順では アプリケーションを制御するコードを追加します 手順 3: アプリケーションへのコードの追加 この手順では アプリケーションのコードを追加します 1. アプリケーションを右クリックし リストから [ コードの表示 ] を選択します 2. 次の名前空間をインポートします Visual Basic Imports C1.WPF.Schedule Imports C1.C1Schedule Imports System.ComponentModel Imports 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 ** fields private 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() メソッドのすぐ下に 次のハンドラと呼び出しを追加して データベースからデータを取得しま 127 Copyright GrapeCity, Inc. All rights reserved.

129 す 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 128 Copyright GrapeCity, Inc. All rights reserved.

130 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); 手順 4: アプリケーションの実行 この手順ではアプリケーションを実行します 1. [F5] キーを押してアプリケーションを実行します アプリケーションは次の図のように表示されます 左側のリストボックスに表示されるユーザーを制御できます また 日付をダブルクリックすることで 任意のユーザーのスケジュールに予定を追加できます さらに アプリケーション上部のボタンを使用して ビューを制御することもできます 129 Copyright GrapeCity, Inc. All rights reserved.

131 ここまでの成果 新しい Silverlight アプリケーションを作成し コードファイルとデータサービスを追加しました また Access データベースをアプリケーションのリソースとして追加しました コードと XAML マークアップを使用して アプリケーションのデザインと機能を作成および制御しました 130 Copyright GrapeCity, Inc. All rights reserved.

132 Scheduler for Silverlight チュートリアル このチュートリアルは 読者が Visual Basic.NET または C# のプログラミングに精通していることを前提としています ただし Scheduler for Silverlight については 手順を追って説明されており 予備知識は特に必要ありません このセクションに示される手順に従って作業を進めるだけで Scheduler for Silverlight の機能を具体的に示すプロジェクトを作成できます チュートリアルプロジェクトを実行し 自分で変更してみてください メモ : このセクションの内容は ComponentOne for Silverlight にのみ適用されます ComponentOne for WPF ではアセンブリ名が異なります カスタムデータを使用するカスタムアプリケーションの作成 Scheduler for Silverlight を使用すると 各予定に多数のデータフィールドを関連付ける必要があるような状況に対応して データモデルをカスタマイズすることができます 各予定にカスタムビジネスオブジェクトをアタッチすることもできます テキストとして保存可能ないくつかのデータフィールドを追加する必要がある場合は CustomData プロパティを使用します Tag プロパティを使用すると 各予定に 1 つのビジネスオブジェクトを関連付けることができますが それを予定と共にシリアライズすることはできません このチュートリアルでは MainPage.xaml ファイル カスタム予定ダイアログを含むカスタム EditAppointmentDialog.xaml ファイル ビジネスオブジェクトクラスを定義する BusinessObjects.cs ファイルまたは BusinessObjects.vb ファイルの 3 つの部分で構成されるアプリケーションを作成します 手順 1: アプリケーションの作成 この手順では デザインビュー XAML マークアップ およびコードを使用して メインスケジューラアプリケーションを作成します 1. 新しい Silverlight アプリケーションを作成します 次に ソリューションエクスプローラで [ 参照 ] を右クリックし リストから [ 参照の追加 ] を選択して 次の参照を追加します C1.Silverlight.dll C1.Silverlight.Schedule.dll C1.Silverlight.DateTimeEditors.dll 手順 2: カスタムデータ構造の定義 この手順では ビジネスオブジェクトクラス (BusinessObjects.cs ファイルまたは BusinessObjects.vb ファイル ) を定義します 1. アプリケーション名を右クリックし [ 追加 ] [ 新しい項目 ] を選択します インストール済みテンプレートのリストから [ コードファイル ] を選択します 使用するコードの原語に応じて 新しいコードファイルに BusinessObject.cs または BusinessObjects.vb という名前を付けます 2. 次の名前空間をページにインポートします Visual Basic Imports System Imports System.ComponentModel Imports System.Collections.ObjectModel C# using System; 131 Copyright GrapeCity, Inc. All rights reserved.

133 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 132 Copyright GrapeCity, Inc. All rights reserved.

134 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) 133 Copyright GrapeCity, Inc. All rights reserved.

135 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.PropertyChanged End 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; 134 Copyright GrapeCity, Inc. All rights reserved.

136 // カスタムデータ 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"); 135 Copyright GrapeCity, Inc. All rights reserved.

137 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; 136 Copyright GrapeCity, Inc. All rights reserved.

138 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 Sub End Class C# // ビジネスオブジェクトコレクションは INotifyCollectionChanged インターフェイスを実装する必要があります public class AppointmentBOList : ObservableCollection<AppointmentBORow> protected override void RemoveItem(int index) 137 Copyright GrapeCity, Inc. All rights reserved.

139 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 Property End 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; 138 Copyright GrapeCity, Inc. All rights reserved.

140 この手順では ビジネスオブジェクトを作成しました このオブジェクトは この後の手順で C1Scheduler コントロールにデータを提供します 手順 3: カスタム予定ダイアログの作成 この手順では カスタム予定ダイアログを作成し XAML マークアップとコードを使用して このダイアログを制御するコードを設定します 1. 新しい Silverlight ページを作成します それには アプリケーション名を右クリックし リストから [ 追加 ] [ 新しい項目 ] を選択します 2. インストール済みテンプレートのリストから [ 新しい Silverlight ページ ] を選択し EditAppointmentDialog という名前を付けます [OK] をクリックします 3. <navigation:page> </navigation:page> タグおよび名前空間を次の <UserControl> ステートメントに置き換えます XAML <UserControl x:class="schedulercustomdata.editappointmentdialog" xmlns=" xmlns:x=" xmlns:d=" xmlns:mc=" 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" /> 139 Copyright GrapeCity, Inc. All rights reserved.

141 </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, 140 Copyright GrapeCity, Inc. All rights reserved.

142 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> 予定の編集ダイアログは デザインビューで次の図のようになります 141 Copyright GrapeCity, Inc. All rights reserved.

143 5. ページを右クリックし リストから [ コードの表示 ] を選択します コードビューで アプリケーションに次の名前空間を追加します Visual Basic Imports C1.Silverlight.Schedule Imports C1.Silverlight Imports C1.Silverlight.DateTimeEditors Imports C1.C1Schedule Imports 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() 142 Copyright GrapeCity, Inc. All rights reserved.

144 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 = 143 Copyright GrapeCity, Inc. All rights reserved.

145 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(); 144 Copyright GrapeCity, Inc. All rights reserved.

146 ((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> 145 Copyright GrapeCity, Inc. All rights reserved.

147 ''' 予定ウィンドウのヘッダーとして使用される <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); 146 Copyright GrapeCity, Inc. All rights reserved.

148 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 147 Copyright GrapeCity, Inc. All rights reserved.

149 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; 148 Copyright GrapeCity, Inc. All rights reserved.

150 endcalendar.clearvalue(control.backgroundproperty); endcalendar.clearvalue(control.foregroundproperty); endcalendar.clearvalue(control.borderbrushproperty); endcalendar.clearvalue(control.borderthicknessproperty); endcalendar.clearvalue(tooltipservice.tooltipproperty); #endregion この手順では カスタムの予定の編集ダイアログを作成し 予定のメソッドとイベントを制御するコードを設定しました 手順 4: アプリケーションメインページへの機能の追加 この手順では 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=" xmlns:x=" xmlns:d=" xmlns:mc= xmlns: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" 149 Copyright GrapeCity, Inc. All rights reserved.

151 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.Schedule Imports C1.Silverlight Imports C1.Silverlight.DateTimeEditors Imports C1.C1Schedule Imports 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. 次のコードを挿入して ビジネスオブジェクトのカスタムプロパティを設定します 150 Copyright GrapeCity, Inc. All rights reserved.

152 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 151 Copyright GrapeCity, Inc. All rights reserved.

153 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# // スケジュールの間隔を 1 時間に設定します 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) 152 Copyright GrapeCity, Inc. All rights reserved.

154 if (app.id == id) return app; return null; この手順では C1Scheduler コントロールをアプリケーションに追加し カスタムダイアログとデータを使用するために必要なプロパティをすべて設定しました 手順 5: アプリケーションの完成 この手順では Scheduler for Silverlight アプリケーションの作成を完了して実行します 1. アプリケーション名を右クリックし リストから [ 追加 ] [ 新規フォルダ ] を選択します 新しいフォルダ名を Images と指定します 2. [Images] フォルダを右クリックし リストから [ 追加 ] [ 既存の項目 ] を選択します [ 保存して閉じる ] ボタンと [ 予定のキャンセル ] ボタンに使用する画像を探し フォルダに追加します 3. [ 保存して閉じる ] ボタンで Image コントロールを選択します [ プロパティ ] ウィンドウで Source プロパティを見つけます 省略符ボタンをクリックして [ イメージの選択 ] ダイアログを開き [ 保存して閉じる ] ボタンに使用する画像を選択します この手順を繰り返して [ 予定のキャンセル ] ボタンの画像を設定します 4. [F5] キーを押すかデバッグを開始して アプリケーションを実行します 初期状態のアプリケーションは次のように表示されます 5. 任意の予定の時刻をダブルクリックして 予定の編集ダイアログを開きます 153 Copyright GrapeCity, Inc. All rights reserved.

155 ここまでの成果 C1Scheduler コントロールとカスタムの予定の編集ダイアログを作成しました 予定の編集ダイアログのフィールドのデータ連結を作成し ダイアログのボタンに画像を追加しました カスタムビューの作成 C1Scheduler コントロールのカスタムビューを簡単に作成することができます このチュートリアルでは 新しい Silverlight アプリケーションを作成し MainPage.xaml ファイルでブラシのスタイルとデータテンプレートを設定し button_click() イベントを制御するコードを追加します 手順 1: アプリケーションの作成 この手順では Silverlight アプリケーションを作成し 適切な参照と名前空間を追加します また MainPage.xaml ファイルでブラシのスタイルを設定します 次の手順に従います 1. Visual Studio で新しい Silverlight アプリケーションを作成し CustomView という名前を付けます 2. アプリケーションに次の参照を追加します それには ソリューションエクスプローラで [ 参照 ] フォルダを右クリックし リストから [ 参照の追加 ] を選択します 参照先があるフォルダに移動し 次の項目を選択します C1.Silverlight C1.Silverlight.Data C1.Silverlight.DateTimeEditors C1.Silverlight.Schedule 154 Copyright GrapeCity, Inc. All rights reserved.

156 3. MainPage.xaml ファイルで 次の行を名前空間宣言に追加します XAML xmlns:c1=" 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> <!-- C1Menu のスタイル --> <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> <!-- C1Scheduler のブラシ --> <!-- 現在の日付のヘッダー --> <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"/> 155 Copyright GrapeCity, Inc. All rights reserved.

157 <GradientStop Color="#FFFFE59B" Offset="1"/> </LinearGradientBrush> 手順 2: データテンプレートの作成と C1Schedule コントロールの追加 この手順では 複数の C1Scheduler ビューのためのデータテンプレート およびメインビューを構成する C1Schedule コントロールと C1Calendar コントロールを作成します 1. スタイルとブラシのリソースの後に次のマークアップを追加して C1Schedule コンバータと 1 日を表示するためのデータテンプレートを作成します XAML <!-- C1Scheduler コンバータ --> <c1:datetimetostringconverter x:key="datetimetostringconverter"/> <c1:booleantovisibilityconverter x:key="booleantovisibilityconverter"/> <c1:visualintervaltostringconverter x:key="visualintervaltostringconverter"/> <!-- 1 日を表示するために使用するスタイルを決定します ( 現在の日付とその他の日付にそれぞれ異なるスタイルを選択します ) --> <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: " 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> 156 Copyright GrapeCity, Inc. All rights reserved.

158 <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: " 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 <!-- Day ヘッダーのスタイルを決定します これは すべての Office 2007 ビューで使用されます --> 157 Copyright GrapeCity, Inc. All rights reserved.

159 <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> <!-- Today ヘッダーのスタイルを決定します これは すべての Office 2007 ビューで使用されます --> <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=" "> <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 <!-- カスタム Week Style --> <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" /> 158 Copyright GrapeCity, Inc. All rights reserved.

160 <Setter Property="c1:C1Scheduler.Template"> <Setter.Value> <ControlTemplate TargetType="c1:C1Scheduler"> <Border BorderBrush="TemplateBinding BorderBrush" BorderThickness="TemplateBinding BorderThickness"> <!-- DataContext を最初の可視グループ項目に設定します --> <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=" "> <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> 159 Copyright GrapeCity, Inc. All rights reserved.

161 </Style> <!-- Two Week 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"> <!-- DataContext を最初の可視グループ項目に設定します --> <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> <!-- カスタム Working Week Style --> 160 Copyright GrapeCity, Inc. All rights reserved.

162 <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"> <!-- DataContext を最初の可視グループ項目に設定します --> <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 161 Copyright GrapeCity, Inc. All rights reserved.

163 <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> 手順 3: アプリケーションを制御するコードの追加 この手順では アプリケーションを制御するための C# または Visual Basic コードを追加します 1. アプリケーションを右クリックし リストから [ コードの表示 ] を選択します 次の名前空間をページの先頭に追加します Visual Basic Imports C1.Silverlight.Schedule C# using C1.Silverlight.Schedule; 162 Copyright GrapeCity, Inc. All rights reserved.

164 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 ' 2 週間分の日付が選択された場合は 月ビューモードから 2 週間 ' ビューモードに変更します 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 163 Copyright GrapeCity, Inc. All rights reserved.

165 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(); // 2 週間分の日付が選択された場合は 月ビューモードから 2 週間 // ビューモードに変更します 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; 164 Copyright GrapeCity, Inc. All rights reserved.

166 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 165 Copyright GrapeCity, Inc. All rights reserved.

167 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(); 手順 4: アプリケーションの実行 この手順でチュートリアルは終了です 1. [F5] キーを押してアプリケーションを実行します アプリケーションは次の図のようになります 166 Copyright GrapeCity, Inc. All rights reserved.

168 ここまでの成果 新しい Silverlight アプリケーションを作成し XAML マークアップとコードを使用してカスタム Scheduler ビューを作成しました 複数ユーザースケジュールの作成 このチュートリアルでは 複数のスケジュールを表示できるアプリケーションを作成します インターフェイスの作成には XAML マークアップとコードを使用します また データサービスと 2 つのコードファイルをアプリケーションのリソースとして追加します 手順 1: アプリケーションの作成 この手順では 新しい Silverlight アプリケーションを作成し 適切な参照と名前空間を追加して 2 つのコードファイルとデータサービスをアプリケーションに追加します 次の手順に従います 1. Visual Studio で新しい Silverlight アプリケーションを作成し MultiUser という名前を付けます 2. アプリケーションに次の参照を追加します それには ソリューションエクスプローラで [ 参照 ] フォルダを右クリックし リストから [ 参照の追加 ] を選択します 参照先があるフォルダに移動し 次のアセンブリを選択します C1.Silverlight.5 C1.Silverlight.Data.5 C1.Silverlight.DateTimeEditors Copyright GrapeCity, Inc. All rights reserved.

169 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 168 Copyright GrapeCity, Inc. All rights reserved.

170 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 Function End Class C# public class DataService : System.Web.Services.WebService [WebMethod] public byte[] GetData(string tables) // 接続文字列を使って DataSet を作成します var ds = GetDataSet(); 169 Copyright GrapeCity, Inc. All rights reserved.

171 // 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; 170 Copyright GrapeCity, Inc. All rights reserved.

172 // データベースを更新します ds.update(); SmartDataSet GetDataSet() // mdb ファイルの物理的な場所を取得します string mdb = Path.Combine( // このファイルの存在を確認します 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 アプリケーションを右クリックします リストから [ サービス参照の追加 ] を選択します 次のような [ サービス参照の追加 ] ダイアログボックスが表示されます 171 Copyright GrapeCity, Inc. All rights reserved.

173 9. [ 探索 ] ボタンをクリックし 利用可能なサービス参照を検索して 次の手順に従います [ サービス ] リストボックスで 利用可能なサービス参照を選択します サービス参照の名前を DataService に変更します [OK] をクリックして サービス参照をアプリケーションに追加します この手順では 新しい Silverlight アプリケーションを作成し 適切なアセンブリ参照を追加して サービス参照と 2 つのコードファイルを追加しました 次の手順では MultiUser アプリケーションに XAML を追加します 手順 2: リソースと C1Scheduler コントロールの作成 この手順では アプリケーションのリソースとデータ連結を作成します また C1Scheduler コントロールを追加してカスタマイズします 次の手順に従います 1. 次の名前空間をメインの MultiUser アプリケーションに追加します 172 Copyright GrapeCity, Inc. All rights reserved.

174 XAML xmlns:c1="clr-namespace:c1.silverlight;assembly=c1.silverlight" xmlns:c1sched="clrnamespace:c1.silverlight.schedule;assembly=c1.silverlight.schedule" Silverlight 5 の場合は 次の名前空間を追加します xmlns:c1="clr-namespace:c1.silverlight;assembly=c1.silverlight.5" xmlns:c1sched="clrnamespace:c1.silverlight.schedule;assembly=c1.silverlight.schedule.5" 名前空間宣言全体は次のようになります <UserControl x:class="multipleusertest.mainpage" xmlns=" xmlns:c1="clr-namespace:c1.silverlight;assembly=c1.silverlight" xmlns:c1sched="clrnamespace:c1.silverlight.schedule;assembly=c1.silverlight.schedule" xmlns:x=" xmlns:d=" xmlns:mc=" 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 マークアップを使用して 2 つのカスタムヘッダーテンプレートを作成します これで カスタムグループヘッダーテンプレートとカスタムタイムライングループヘッダーテンプレートが作成されます XAML <!-- カスタムグループヘッダーテンプレート --> <DataTemplate x:key="mycustomgroupheadertemplate"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="Auto"/> <ColumnDefinition/> <ColumnDefinition Width="Auto"/> 173 Copyright GrapeCity, Inc. All rights reserved.

175 <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"/> 174 Copyright GrapeCity, Inc. All rights reserved.

176 <!-- EmployeesRow から追加情報を表示します --> <TextBlock Foreground="Binding Path=Scheduler.Foreground" Margin="10,3" Grid.Column="2" Grid.Row="1" Text="Binding Path=Tag[Title]" VerticalAlignment="Center" HorizontalAlignment="Center"/> </Grid> </DataTemplate> <!-- TimeLine スタイルに別のグループヘッダーを使用します --> <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"/> <!-- EmployeesRow から追加情報を表示します --> <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" > 175 Copyright GrapeCity, Inc. All rights reserved.

177 <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> 176 Copyright GrapeCity, Inc. All rights reserved.

178 </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" 177 Copyright GrapeCity, Inc. All rights reserved.

179 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> 178 Copyright GrapeCity, Inc. All rights reserved.

180 <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 <!-- Border Brush --> <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> <!-- Button styles --> <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"/> 179 Copyright GrapeCity, Inc. All rights reserved.

181 </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 180 Copyright GrapeCity, Inc. All rights reserved.

182 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"/> 181 Copyright GrapeCity, Inc. All rights reserved.

183 <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"/> 182 Copyright GrapeCity, Inc. All rights reserved.

184 <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 ビューを制御する 4 つのラジオボタンを含むスタックパネルを作成します 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 183 Copyright GrapeCity, Inc. All rights reserved.

185 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" 184 Copyright GrapeCity, Inc. All rights reserved.

186 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 コントロールを作成し いくつかのスケジューラ設定をカスタマイズしました 次の手順では アプリケーションを制御するコードを追加します 手順 3: アプリケーションへのコードの追加 この手順では アプリケーションを制御するコードを追加します 1. アプリケーションを右クリックし リストから [ コードの表示 ] を選択します 2. ページ先頭の Import ステートメントまたは using ステートメントに次のステートメントを追加します Visual Basic Imports C1.Silverlight.Schedule Imports System.Collections.Specialized Imports C1.C1Schedule Imports C1.Silverlight.Data Imports System.IO Imports System.Windows.Data 185 Copyright GrapeCity, Inc. All rights reserved.

187 Imports System.Globalization Imports 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 = Nothing Private _dtappointments As DataTable = Nothing Private _dtemployees As DataTable = Nothing Private _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_reminderfire AddHandler 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" 186 Copyright GrapeCity, Inc. All rights reserved.

188 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 187 Copyright GrapeCity, Inc. All rights reserved.

189 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) 188 Copyright GrapeCity, Inc. All rights reserved.

190 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. アラームが表示されないようにするイベントハンドラを追加します 189 Copyright GrapeCity, Inc. All rights reserved.

191 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 = ' int.maxvalue binding.maxbuffersize = ' 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() 190 Copyright GrapeCity, Inc. All rights reserved.

192 _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 = ; // int.maxvalue binding.maxbuffersize = ; // 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; 191 Copyright GrapeCity, Inc. All rights reserved.

193 // データを取得し テーブルを検索します _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 192 Copyright GrapeCity, Inc. All rights reserved.

194 // グループヘッダーを更新します (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 193 Copyright GrapeCity, Inc. All rights reserved.

195 End Class End 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(); 手順 4: アプリケーションの実行 この手順ではアプリケーションを実行します 1. [F5] キーを押してアプリケーションを実行します アプリケーションは次の図のように表示されます 194 Copyright GrapeCity, Inc. All rights reserved.

196 2. 左側のリストボックスに表示されるユーザーを制御できます また 日付をダブルクリックすることで 任意のユーザーのスケジュールに予定を追加できます さらに アプリケーション上部のボタンを使用して ビューを制御することもできます ここまでの成果 新しい Silverlight アプリケーションを作成し コードファイルとデータサービスを追加しました また Access データベースをアプリケーションのリソースとして追加しました コードと XAML マークアップを使用して アプリケーションのデザインと機能を作成および制御しました 195 Copyright GrapeCity, Inc. All rights reserved.

197 タスク別ヘルプ タスク別ヘルプは 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 つにリンクするには 1 つのプロパティを設定するだけです 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] キーを押してプロジェクトを実行し カレンダーで任意の日付を選択します スケジュールの日付も同様に選択されます 196 Copyright GrapeCity, Inc. All rights reserved.

198 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 のソリューションエクスプローラで プロジェクト名を右クリックし [ 追加 ] [ リソースディクショナリ ] を選 197 Copyright GrapeCity, Inc. All rights reserved.

199 択します 2. リソース辞書に名前を付け [ 追加 ] をクリックします 3. 次のように C1Scheduler 名前空間を追加します XAML <ResourceDictionary xmlns=" xmlns:c1sched="clr-namespace:c1.wpf.c1schedule;assembly=c1.wpf.c1schedule" xmlns:x=" 4. ComponentOne と共に < インストールフォルダ>\Misc\Xaml\C1WPFSchedule にインストールされている Default.xml を見つけて開きます 5. C1Scheduler_TimeRuler_Template キーを含むデータテンプレートを見つけます XAML <!-- [ 日 ] ビューでタイムルーラーの 1 時間を表示する際に使用されるテンプレートを決定します --> <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" 198 Copyright GrapeCity, Inc. All rights reserved.

200 > <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 199 Copyright GrapeCity, Inc. All rights reserved.

201 時間列の色の変更 1. Visual Studio のソリューションエクスプローラで プロジェクト名を右クリックし [ 追加 ] [ リソースディクショナリ ] を選択します 2. リソース辞書に名前を付け [ 追加 ] をクリックします 3. 次のように C1Scheduler 名前空間を追加します XAML <ResourceDictionary xmlns=" xmlns:c1sched="clr-namespace:c1.wpf.c1schedule;assembly=c1.wpf.c1schedule" xmlns:x=" 4. ComponentOne と共に < インストールフォルダ>\Misc\Xaml\C1WPFSchedule にインストールされている Default.xml を見つけて開きます 5. C1Scheduler_TimeRuler_Template キーを含むデータテンプレートを見つけます XAML <!-- [ 日 ] ビューでタイムルーラーの 1 時間を表示する際に使用されるテンプレートを決定します --> <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> 200 Copyright GrapeCity, Inc. All rights reserved.

202 <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 は 次の図のようなスケジュールを作成します 201 Copyright GrapeCity, Inc. All rights reserved.

203 さまざまなビューの時間間隔のカスタマイズ さまざまなビューの時間間隔のカスタマイズ 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=" " BorderThickness="1" ShowWorkTimeOnly="True" ViewType="Month" SmallVisualIntervalScale="Binding SelectedItem, ElementName=scale"> 次の C# コードを使用して XAML の操作ロジックで scale 要素を初期化します 上記のコード例で使用されている SmallVisualIntervalScale プロパティは 下記のコードで初期化される scale 要素に連結します C# 202 Copyright GrapeCity, Inc. All rights reserved.

204 // タイムスケールコンボボックスを初期化します 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 を使用する場合 Visual Studio でナビゲーションペインのテキストを変更するには 次の手順に従います 1. C1Scheduler コントロールをウィンドウに追加します 2. [ プロパティ ] ウィンドウで NextAppointmentText プロパティを 次へ に設定します 3. PreviousAppointmentText プロパティを 前へ に設定します XAML の使用 次の 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> スケジュールは 次の図のようになります 203 Copyright GrapeCity, Inc. All rights reserved.

205 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 を使用する場合 204 Copyright GrapeCity, Inc. All rights reserved.

206 Visual Studio で [ 稼働日 ] ビューの曜日を設定するには 次の手順に従います 1. C1Scheduler コントロールをウィンドウに追加します 2. [ プロパティ ] ウィンドウで Style プロパティを [WorkingWeekStyle] に設定します 3. CalendarHelper プロパティを展開し [WorkDays] の横にあるドロップダウン矢印をクリックします 4. 稼働日として表示する曜日の横にあるチェックボックスをオンにします XAML の使用 次の 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 コントロールで 休日に指定された日には予定を作成できません 205 Copyright GrapeCity, Inc. All rights reserved.

207 グループ化 GroupBy プロパティを使用して 簡単にグループ化を行うことができます このプロパティは 表示するグループ化の種類を決定します C1Scheduler コントロールは 連絡先 カテゴリ リソースや Owner プロパティの値に基づくグループ化をサポートしています 文字列 空文字列 Category Contact Owner Resource グループ化 グループ化なし グループ化は Appointment.Categories プロパティ値によって決定されます グループ化は Appointment.Links プロパティ値によって決定されます グループ化は Appointment.Owner プロパティ値によって決定されます グループ化は Appointment.Resources プロパティ値によって決定されます カレンダーにリンクされたスケジュールがプロジェクトにあるとします XAML は 次のようになります XAML(WPF) <Window x:class="grouping.mainwindow" xmlns=" xmlns:x=" Title="MainWindow" Height="574" Width="757" xmlns:c1=" xmlns:c1sched=" Loaded="Window_Loaded"> <Grid Height="371" Width="689"> <c1:c1calendar x:name="cal1" CalendarHelper="Binding CalendarHelper, 206 Copyright GrapeCity, Inc. All rights reserved.

208 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=" xmlns:x=" xmlns:d=" xmlns:mc=" mc:ignorable="d" d:designheight="540" d:designwidth="687" xmlns:c1=" <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 のタスク 以下のトピックでは 特定のカレンダータスクを実行する方法を示します カレンダーの月または年の変更 207 Copyright GrapeCity, Inc. All rights reserved.

209 SelectedDate プロパティを使用して C1Calendar コントロールで選択中の月または年を簡単に変更できます XAML の使用 次の XAML は SelectedDate プロパティを設定します XAML <c1sched:c1calendar Margin="10,10,82,89" Name="c1Calendar1" HorizontalAlignment="Left" Width="182" Height="159" VerticalAlignment="Top" SelectedDate=" " /> 実行時 実行時に C1Calendar コントロールの月または年を変更するには 次の手順に従います 1. カレンダーの上に表示されている月または年をクリックします ポップアップリストが表示されます 2. 目的の月または年を選択します 目的の月または年がリストに表示されていない場合は 前月または前年を選択してから 再度月または年をクリックして 新しいリストを表示してください 最大 / 最小日付の設定 C1Calendar の最大 / 最小日付を設定するには MaxDate プロパティと MinDate プロパティを使用します Visual Studio を使用する場合 Visual Studio で C1Calendar の最大 / 最小日付を設定するには 次の手順に従います 1. C1Calendar コントロールをウィンドウに追加して選択します 2. [ プロパティ ] ウィンドウで MaxDate プロパティの横に 12/31/2099 と入力します 3. [ プロパティ ] ウィンドウで MinDate プロパティの横に 1/1/1700 と入力します XAML の使用 次の XAML は MaxDate プロパティと MinDate プロパティを設定します XAML <c1sched:c1calendar HorizontalAlignment="Left" Margin="10,10,0,0" Name="c1Calendar1" VerticalAlignment="Top" MaxDate=" " MinDate=" " /> 208 Copyright GrapeCity, Inc. All rights reserved.

210 月領域の前月および翌月の日付の表示 月領域に前月および翌月の日付を表示するには GenerateAdjacentMonthDays プロパティを有効にします Visual Studio を使用する場合 Visual Studio で C1Calendar の月領域に前月および翌月の日付を表示するには 次の手順に従います 1. C1Calendar コントロールをウィンドウに追加して選択します 2. [ プロパティ ] ウィンドウで GenerateAdjacentMonthDays プロパティの横にあるチェックボックスをオンにします XAML の使用 次の 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 を使用する場合 Visual Studio で 選択可能な最大日数を 31 に設定するには 次の手順に従います 1. C1Calendar コントロールをウィンドウに追加して選択します 2. [ プロパティ ] ウィンドウで MaxSelectionCount プロパティの横に 31 と入力します XAML の使用 次の XAML は MaxSelectionCount プロパティを 31 に設定します XAML <c1sched:c1calendar HorizontalAlignment="Left" Margin="10,10,0,0" Name="c1Calendar1" 209 Copyright GrapeCity, Inc. All rights reserved.

211 VerticalAlignment="Top" MaxSelectionCount="31" /> 210 Copyright GrapeCity, Inc. All rights reserved.