サンプル コードのダウンロード (aspnettips_Theme2.msi, 225 KB)

※このサンプルをお使いいただくためには、Visual Studio 2005 が必要です。

ASP.NET 2.0 では、「テーマ」の機能を使って Web サイトのページデザインを統一できます。このテーマについては、「Web サイト内の表示デザインを統一する方法」で紹介しました。このテーマを動的に変更させることもできます。

今回は、上記「Web サイト内の表示デザインを統一する方法」で作成したサンプルを流用します。このサンプルには、blue、red の 2 つのテーマがありますが、これらのテーマを次のように切り替えて表示できるページを作成してみます。

今回は、次の手順でページを作成します。

1. ページのテーマを変更する方法

2. テーマを切り替えるためのドロップダウンリストを用意

3. プログラム上でテーマを設定する

4. 実行

(1) ページのテーマを変更する方法

ページごとにテーマを変更するには、@Page ディレクティブの Theme プロパティを変更します。まず、「Web サイト内の表示デザインを統一する方法」で作成したサンプルをベースに、新しくWebフォーム (Default2.aspx) を追加します。この Default2.aspx をスタートページに設定してください。

このフォームに、Calendar コントロールと TextBox コントロールを貼り付けます（図2）。

@Page ディレクティブの Theme プロパティの変更は、Visual Studio 2005 のプロパティ ウィンドウで行えます。プロパティ ウィンドウのドロップダウン リストで「DOCUMENT」を選択し、その中で Theme プロパティを選択します。ここで blue を選択して実行すると、青系色のページが表示され、red を選択して実行すると、赤系色のページが表示されます。

(2) テーマを切り替えるためのドロップダウン リストを用意

ドロップダウン リストを使って、このページのテーマを切り替えられるようにしてみます。

DropDownList コントロールを貼り付け、AutoPostBack プロパティを True に設定してください。

次に、この DropDownList コントロールの Items プロパティを選択し、[...] ボタンを押して「ListItem コレクションエディタ」を表示させます。ここで、次のようにメンバを 3 つ追加してください（図4）。

(3) プログラム上でテーマを設定する

ドロップダウン リストで選択したテーマをページに反映させるために、Default2.aspx.vb に次のコードを追加します。

Protected Sub Page_PreInit(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreInit
    Dim ThemeName As String = Request("DropDownList1")
    If ThemeName = "blue" Or ThemeName = "red" Then
        Page.Theme = ThemeName
    End If
End Sub

リスト1

ページを再表示するときに、選択されたテーマ (blue または red) を、ページの Theme プロパティに設定しています。

(4) 実行

実行してみます。最初に Default2.aspx が表示されたときは、「(1) ページのテーマを変更する方法」で @Page ディレクティブに直接設定した red または blue のテーマでページが表示さます。

ドロップダウンリストで、blue または red を選択すると、青系色のページまたは赤系色のページが表示されます。

ページのトップへ