縮小・展開するトピックバーを持った.NETアプリケーションの作成

ComponentOne Studioを活用したWindowsフォームアプリケーションの作成

C1Calenderコントロールの概要

　C1Calendarコントロールは、フル機能のOutlookスタイルのカレンダーです。これを使って、エンドユーザーはC1Scheduleコントロール内の現在の日付や予定データの表示に使用する日付セットを選択できます。デフォルトでは、CalendarDimensionsプロパティは1に設定され、1つの月のみがコントロールに表示されますが、使用可能なスペースに応じて、C1Calendarコントロールは同時に1つまたは複数の月を表示できます。

　表示に使用可能な月の数は、CalendarDimensionsプロパティによって決定されます。これは、C1Calendarコントロールに表示する月の最大数を決定しますが、使用可能なスペースに入る数の月のみが表示されます。一度に3つの月が表示された場合は次のような表示になります。

3か月表示のカレンダー

　C1Calendarコントロールには、アクセシビリティを改善するために、いくつかのマウスとキーボードによるナビゲーションが用意されています。実行時に、エンドユーザーは以下に示すキーボードとマウスホイールの組み合わせを使用して、カレンダーのナビゲートが可能です。

キー／マウス	説明
PAGE UP	前の月に移動します。
PAGE DOWN	次の月に移動します。
マウスホイール	1つの月を前後に移動します。
CTRL+PAGE UP	前の年に移動します。
CTRL+PAGE DOWN	次の年に移動します。
CTRL+マウスホイール	1つの年を前後に移動します。
HOME	現在の日付に移動します。

GUIの作成 1

　では、早速アプリケーションを作成してみましょう。

　アプリケーションには、PDFドキュメントを表示する機能をメインに、Webページの表示や電卓、カレンダー、メモ帳の起動を補助機能として組み込みます。

　アプリケーションは、メインとなるフォーム「Form1」にC1TopicBarコントロールとWebBrowserコントロールを配置しPDFドキュメントとWebページを表示します。また、ImageListコントロールを配置しトピックページのタイトルやリンクアイテムに使用するアイコンを組み込みます。

　サブのフォームとして「Form2」を追加し、ここにC1Calendarコントロールを配置して外観を3か月表示にします。

フォームのレイアウト

メインフォーム「Form1」の作成

　では、順番にフォームを作成していきます。

　まずは「Form1」に、C1TopicBarコントロールとWebBrowserコントロールを配置し、ImageListコントロールに次の7つのアイコン画像を登録しておきます。

• AddToFavoritesHS.png
• CalculatorHS.png
• compareversionsHS.png
• InsertHyperlinkHS.png
• LegendHS.png
• NewReportHS.png
• PortraitHS.png

使用するアイコン画像

　また、PDF文書はサンプルとしてPowerPointで作成しPDF形式で保存したものを3つ使用します。

　ファイルはアプリケーション実行ファイルのフォルダに「data」というフォルダを作成して格納します。

使用するPDF文書

　① C1TopicBarコントロールをフォームにドラッグ＆ドロップし、Dockプロパティを「Left」に設定します。

Dockプロパティを「Left」に設定

　② WebBrowserコントロールをフォームにドラッグ＆ドロップし、Dockプロパティを「Fill」に設定します。

　③ ImageListコントロールをフォームにドラッグ＆ドロップし、Imagesプロパティで7つのアイコンファイルを登録します。

7つのアイコンファイルを登録

　④ C1TopicBarコントロールのImageListプロパティに、このImageListコントロールを設定します。この設定を行っておかないと、ページタイトルやリンクアイテムにアイコンを組み込むことができません。

　⑤ C1TopicBarコントロールの左上にあるボタンをクリックし、フローティングツールバーを表示します。

　そして、「トピックページコレクションの編集」ボタンをクリックします。

「トピックページコレクションの編集」ボタンをクリック

　⑥ 「C1TopicPageコレクションエディター」が表示されますので、次のプロパティを設定します。

プロパティ	設定値
Text	目次
ImageList	ImageList1
ImageIndex	4

　これで、最初のページのタイトルとアイコンが設定されます。

最初のページのタイトルとアイコンを設定

　⑦ 次にLinksプロパティの値欄をクリックします。「C1TopicLinkコレクションエディター」が表示されます。このエディターで、ページにリンクアイテムを追加します。

　まず、「追加」ボタンを4回クリックし、「C1TopicLink」オブジェクトを4つ追加します。

　そして、それぞれ次のプロパティを設定します。

メンバー	プロパティ	設定値
0	Text	はじめに
	Tag	a1
	ImageIndex	6
1	Text	利用環境
	Tag	a2
	ImageIndex	6
2	Text	コントロールと参照の追加
	Tag	a3
	ImageIndex	6
3	Text	製品情報
	Tag	a4
	ImageIndex	3

　Tagプロパティは、あとでこのリンクアイテムがクリックされたときに、どのアイテムがクリックされたのかを識別するのに使用します。

4つの「C1TopicLink」オブジェクトのテキストとアイコンTagプロパティを設定

最初のページのタイトルとリンクアイテムが出来上がる

　⑧ 「C1TopicLinkコレクションエディター」を閉じて「C1TopicPageコレクションエディター」に戻り、「追加」ボタンを1回クリックします。

　これで2ページ目が追加されますので、1ページ目と同じようにページタイトルとリンクアイテムを設定します。2ページ目のリンクアイテムは3つにします。

ページタイトルの設定

プロパティ	設定値
Text	よく使うアイテム
ImageList	ImageList1
ImageIndex	0

リンクアイテムの設定

メンバー	プロパティ	設定値
0	Text	電卓
	Tag	b1
	ImageIndex	1
1	Text	カレンダー
	Tag	b2
	ImageIndex	2
2	Text	メモ帳
	Tag	b3
	ImageIndex	5

　これでC1TopicBarコントロールの設定が出来上がりです。

　⑨ 最後に、C1TopicBarコントロールのLinkClickイベントハンドラを作成します。

完成したトピックバー