バージョン

WebSchedule のキャプション ヘッダ領域をカスタマイズ

始める前に

WebSchedule の WebDayView、WebMonthView、および WebCalendarView には、カスタマイズおよびスタイル可能なヘッダ領域にナビゲーション領域があります。 CaptionsHeaderStyle オブジェクトはほとんどの Ultimate UI for ASP.NET コントロールにある標準的な Style オブジェクトに基づいています。

以下の手順は、Cursor だけでなくボタンの BackColor を変更する方法を示します。

注： この詳細なガイドでは、インストールされた Cascading Style Sheet（CSS）を変更し、すべてのプロジェクトで WebDayView の NavigationButtons から背景色を削除します。これによって他のプロジェクトに問題が発生する場合には、ひとつのプロジェクトのみにこのスタイルシートを指定することを推奨します。

次の手順を実行します。

  1. 新しい ASP.NET プロジェクトを作成します。WebSchedule コントロールをフォームで設定します。詳細については、 「Web フォーム デザイナを使用してクイック スタート」または 「コードで WebSchedule を設定」を参照してください。

  2. フォームに設定した WebSchedule コントロールを Data Provider と WebScheduleInfo に接続したら、さまざまな部分（例:NavigationButtonStyle）をカスタマイズする準備が整いました。

  3. デフォルトでコントロールが取得しているプリセットのために使用している WebSchedule コントロールのための CSS を変更してからでなければ、実際的にはコントロールをカスタマイズできません。スタイル シートは ig_common というインストール パスにインストールされます。以下の場所に標準的なインストールで配置されます:

C:\Inetpub\wwwroot\aspnet_client\infragistics23.1\Styles。

  1. プリセットを選択していない場合、希望のスタイルシートは Default フォルダに配置されます。デフォルト以外のプリセットを選択した場合には、そのプリセット フォルダにナビゲートします。

  2. プリセットを変更していないことを前提として、Default フォルダを選択します。WebDayView で操作をしていることがもうひとつの前提です。ig_webdayview.css と呼ばれるファイルを開いてください。Visual Studio .NET IDE 内でこのスタイル シートを開いて変更することができます。その他のビューで操作をしている場合には、その他のビューが同じ場所で開くことができる CSS を持っていることに注意してください。

  3. CSS を開いて、igdv_CaptionHeader をリストする所まで下にスクロールします。background-image と background-position を設定している最後の 2 行は、これから変更する 2 つのプロパティです。これらの 2 行を /* * / の間に配置することによってコメント化します。スタイル シートは以下のようになります。

CSS の場合：

.igwv_CaptionHeader {
	/*background-image: url(images/MonthHeaderCaption_bg.png);
	background-repeat: repeat-x;*/
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size: x-small;
	font-weight: bold;
	color: #FFFFFF;
	height: 25px;
	line-height: 25px;
	padding-top: 0px;
	padding-bottom: 0px;
	text-align: left;
	overflow: hidden;
	border-collapse: collapse;
	border-bottom: 1px solid #002D96;
	border-left: 1px solid #002D96;
	border-right: 1px solid #002D96;
	background-color: #002D96;
}

  1. WebDayView がプルするスタイル シートを変更することになるので、この変更がこの特定のプリセットを使用しているすべての WebDayView に影響することに注意してください。コントロールがコードで設定されたプロパティを読み取った後でスタイル シートを読み取るため、これが必要です。したがって、両方の場所で変更されている場合スタイル シート プロパティは常に取得されます。

  2. この単純な変更を実行した後で、コードビハインドに移動して、CaptioHeaderStyle オブジェクトを設定できます。以下のコードはキャプション ヘッダの BackColor とマウスをヘッダ上に置いた時に表示される Cursor を変更します。

Visual Basic の場合：

Me.WebDayView1.CaptionHeaderStyle.BackColor = Color.Red
Me.WebDayView1.CaptionHeaderStyle.Cursor = Infragistics.WebUI.[Shared].Cursors.Hand

C# の場合：

this.WebDayView1.CaptionHeaderStyle.BackColor = Color.Red;
this.WebDayView1.CaptionHeaderStyle.Cursor = Infragistics.WebUI.Shared.Cursors.Hand;
images\WebSchedule Walk Through Customizing the CaptionHeaderStyle 01.png

  1. 表示できるようにこれらのボタンをスタイルすることは確かに簡単です。CaptioHeaderStyle を変更する時にナビゲーション ボタンをスタイルしてもかまいません。NavigationButtonStyle を変更する方法についての詳細は、 「ナビゲーション ボタンをカスタマイズ」を参照してください。

復習

この詳細なガイドは、WebDayView および WebMonthView の一番上にあるキャプション ヘッダ領域をスタイルする際に役立ちます。

関連トピック

WebSchedule 名前空間