ASP.NET EC のホームへ戻る

■テーマ/スキン

 

「ドットネット書店」では、「Classic」と「Professional」の2種類のテーマを用意しています。これらのテーマは、App_Themesフォルダにサブフォルダとして作成します。それぞれのテーマ(Classic/Professional)には、スキンファイル(SkinFile.skin)CSSファイル(StyleSheet.css)が格納されています。Imagesフォルダには、テーマ別のイメージファイルが格納されています。

 

図6:テーマのフォルダ構成

fig16

 

 

スキンファイルには、ImageCalendarGridViewなどのWebコントロールのフォーマット情報が格納されています。CSSファイルには、LabelTextBoxDropDownListRadioButtonListなどのWebコントロールのCSSが格納されています。HTML<body><h1><a><tablel><tr><td>タグのCSSCSSファイルに格納されています。

 

すべてのWebページに同じテーマを適用させるには、Web.configファイルの<pages>要素に「theme=」属性を追加します。たとえば、すべてのWebページに「Classic」のテーマを適用するには以下のようにWeb.configファイルを書き換えます。

 

<pages theme="Classic">

 

Webページごとに個別にテーマを設定するには、@Pageディレクティブに「Theme=」属性を追加します。たとえば、特性のWebページのテーマに「Professional」を適用するには以下のように書き換えます。

 

<%@ Page Language="VB" MasterPageFile="~/MasterPage.master"

   Theme="Professional"... %>

 

ラインタイム時にダイナミックにテーマを書き換えるには、Page_PreInitイベントハンドラでPageクラスのThemeプロパティを書き換えます。

 

Protected Sub Page_PreInit(...) Handles Me.PreInit

  Page.Theme = "Professional"

End Sub

 

ユーザーが選択したテーマを次回訪問時に復元するには、プロファイルにテーマを保存して復元します。

 

Profile.Theme = "Professional"  ' テーマをプロファイルに保存

Page.Theme = Profile.Theme    ' テーマをプロファイルから復元

 

<profile>

  <properties>

    <add name="Theme" allowAnonymous="true"  type="System.String" />

  </properties>

</profile>

 

 

図7: <pages>要素の「theme」属性に「Classic」と「Professional」のテーマを設定した例

fig17

 

 

●スキンファイルを作成するには (SkinFile.skin)

 

Imageのスキン作成

 

Imageコントロールのスキンを作成するには、ツールボックスの「標準」タブから[Image]MasterPage.masterにドラッグ&ドロップします。ImageImageUrlプロパティに「Classic」のGIFイメージのパスを設定します。次にImageのタグをコピーしたら「Classic」のスキンファイルに貼り付けします。

 

<asp:Image ID="Image1" runat="server"

  ImageUrl="~/App_Themes/Classic/Images/dotNetBookstore.gif"

  ImageAlign=Middle />

 

スキンファイルのImageコントロールのIDプロパティを削除してSkinIDプロパティを追加します。

 

<asp:Image SkinID="masterDotNetImage" runat="server"

  ImageUrl="~/App_Themes/Classic/Images/dotNetBookstore.gif"

  ImageAlign=Middle />

 

同様の手順で「Professional」用のスキンを作成します。

 

<asp:Image SkinID="masterDotNetImage" runat="server"

  ImageUrl="~/App_Themes/Professional/Images/dotNetBookstore.gif"

  ImageAlign=Middle />

 

MasterPage.masterに配置したImageコントロールからフォーマット情報を削除したら、SkinIDプロパティを追加してスキンファイルのフォーマットを参照させます。これでテーマ別のGIFイメージが表示されます。

 

<asp:Image ID="Image1" runat="server" SkinID="masterDotNetImage" />

 

 

Calendarのスキン作成

 

Calendarコントロールのスキンを作成するには、ツールボックスの「標準」タブから[Calendar]をドラッグ&ドロップしてデザイナに配置します。「Calendarのタスク」メニューから[オートフォーマット]を選択したら、「スキームの選択」から[シンプル]を選択してフォーマットします。ソースビューに切り替えたら、Calendarの開始タグから終了タブまでをコピーして「Classic」のスキンファイルに貼り付けます。スキンファイルのCalendarコントロールからIDプロパティを削除して代わりにSkinIDプロパティを追加します。同様の手順で、オートフォーマットの「スキームの選択」から[カラフル1]を選択して「Professional」用のスキンを作成します。

 

Default.aspxに配置したCalendarからフォーマット情報を削除したら、SkinIDプロパティを追加してスキンファイルのフォーマットを参照させます。

 

Default.aspx

<asp:Calendar ID="Calendar1" runat="server"

  SkinID="defaultCalendar" />

 

App_Themes\Classic\SkinFile.skin

<asp:Calendar SkinID="defaultCalendar" runat="server"

  BackColor="White" BorderColor="#999999" CellPadding="4"

  DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt"

  ForeColor="Black" Height="180px" Width="200px">

  ・・・

</asp:Calendar>

 

App_Themes\Professional\SkinFile.skin

<asp:Calendar SkinID="defaultCalendar" runat="server"

  BackColor="#FFFFCC" BorderColor="#FFCC66"

  BorderWidth="1px" DayNameFormat="Shortest" Font-Names="Verdana"

  ForeColor="#663399" Height="200px" ShowGridLines="True" Width="220px">

  ・・・

</asp:Calendar>

 

図8:オートマットから「シンプル」と「カラフル1」でフォーマットする

fig8

 

 

GridViewのスキン作成

 

GridViewのスキンを作成するにはデザイナの「GridViewタスク」メニューから「オートフォーマット」を選択します。「オートフォーマット」ダイアログが表示されたら「スキームの選択」からお好みのスキームを選択します。ソースビューに切り替えたらGridViewの開始タグから終了タグまでをコピーしてスキンファイルに貼り付けします。スキンファイルのGridViewコントロールからIDDataSourceIDDataKeyNamesAutoGenerateColumnsプロパティを削除してSkinIDプロパティを追加します。また、スキンファイルのGridViewから列の情報<Columns>…</Columns>を削除します。

 

Webページに配置されているGridViewからフォーマット情報を削除したら、SkinIDプロパティを追加してスキンファイルのフォーマットを参照させます。

 

App_Themes\Classic\SkinFile.skin

<asp:GridView SkinID="booksByCategoryGridView" runat="server"

  CellPadding="4" ForeColor="Black" GridLines="Horizontal"

  BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px">

  <FooterStyle BackColor="#CCCC99" ForeColor="Black" />

  <SelectedRowStyle BackColor="#CC3333" Font-Bold="True" ForeColor="White" />

  <PagerStyle BackColor="White" ForeColor="Black" HorizontalAlign="Right" />

  <HeaderStyle BackColor="#EEEEEE" Font-Bold="True" ForeColor="Black"

    HorizontalAlign="Center" />

</asp:GridView>

 

BooksByCategory.aspx

<asp:GridView ID="GridView1" runat="server"

  SkinID="booksByCategoryGridView"

  DataSourceID="ObjectDataSource1"

  AutoGenerateColumns="False"

  DataKeyNames="ASIN">

  <Columns>

    ・・・

  </Columns>

</asp:GridView>

 

 

CSSファイルを作成するには (StyleSheet.css)

 

TextBoxのスキンファイル/CSSファイル作成

 

TextBoxCheckBoxRadioButtonDropDownListListBoxのようにHTML<input>タグに変換されるWebコントロールは、CSSファイルにフォーマット情報を定義します。以下に、すべてのTextBoxの背景色を黄色で表示するCSSファイルを作成する手順を説明します。Webフォーム(Default.aspx)には、通常のTextBoxを配置します。このTextBoxには「SkinID=」を追加しません。次に、スキンファイル(SkinFile.skin)TextBoxを作成して「CssClass="textBox"」を追加します。このTextBoxにも「SkinID=」を追加しません。最後に、CSSファイル(StyleSheet.css)にクラス(.textBox)指定のスタイルシートを追加して背景色を「黄色」にします。これで、WebページのすべてのTextBoxCSS(background-color: Yellow)が適用されます。

 

Default.aspx

<asp:TextBox ID="txtWelcomeName" runat="server" />

 

App_Themes\Classic\SkinFile.skin

<asp:TextBox runat="server" CssClass="textBox" />

 

App_Themes\Classic\StyleSheet.css

.textBox {background-color: Yellow;}

 

ASP.NET EC のホームへ戻る