【ASP.NET】【VB】サイトマップ / テーマとスキン（Site Map/Theme & Skin)

ASP.NET

サイトマップ

Web.sitemapについて

 * ソリューションエクスプローラのプロジェクトを右クリックし、[追加]-[新しい項目]-[サイトマップ]で「Web.sitemap」を追加できる

構成

 <siteMap>
  |
  +- <siteMapNode>
  +- <siteMapNode>
  +- <siteMapNode>
      |
      +- <siteMapNode>
      +- <siteMapNode>

サンプル

 * 上記のように「Web.sitemap」を作成しておくと、以下のコントロールと結びつく
   + SiteMapPathコントロール
   + Menuコントロール（データソースの選択で、Web.sitemapを指定する必要がある）
   + TreeViewコントロール（データソースの選択で、Web.sitemapを指定する必要がある）

Web.sitemap

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
    <siteMapNode url="~/Default.aspx" title="Defalut Page"  description="">
        <siteMapNode url="~/Hello.aspx" title="Hello World"  description="Page for beginners" />
        <siteMapNode url="~/About.aspx" title="About us"  description="About us" />
    </siteMapNode>
</siteMap>

テーマ＆スキン

作成方法

 [1] 以下のようなフォルダ構成にする
　(ソリューション エクスプローラで、プロジェクトを右クリックし[追加]-[ASP.NETフォルダーの追加]-[Theme]を選択すればフォルダを作成できる)

【例】
 / (ルート)
  |
  +- [App_Themes]
      |
      +- [Sample001]
      |   |
      |   +- SampleSkin001.skin (スキンファイル1)
      |   +- SampleCss001.css (CSSファイル1)
      |
      +- [Sample002]
          |
          +- SampleSkin002.skin (スキンファイル2)
          +- ampleCss002.css (CSSファイル2)

 [2] スキンファイル・CSSファイルを作成する (以下、サンプル を参照のこと)

サンプル

SampleSkin001.skin

<asp:TextBox runat="server"
    BackColor="yellow" Wrap="True" />
<asp:Button Runat="server"
    BackColor="#FFE0C0" BorderColor="#FFC080" ForeColor="#C00000" />

SampleCss001.css

body 
{
    background-color:Olive;
}

SampleSkin002.skin

<asp:TextBox Runat="server"
    BackColor="#C0FFC0" BorderColor="#004000" />
<asp:Button Runat="server" SkinID="SkinID001"
    BackColor="#C0FFC0" BorderColor="DarkGreen" />
<asp:Button Runat="server" SkinID="SkinID002"
    BackColor="#FFFFC0" BorderColor="Blue" />

SampleCss002.css

body 
{
    background-color:Lime;
}

使用方法

* 使用方法は以下の通り

使用方法[1] ページごとに適用させるには

 * WebFormページのDOCUMENTのプロパティ「Theme」に、テーマを指定する（例「Theme：Sample001」など）

使用方法[2] コントロールごとに適用させるには

 * 使用方法[1] の後に、コントロールのプロパティ「SkinID」に、SkinIDを指定する（例「SkinID：SkinID002」など）

使用方法[3] プログラムから動的に指定する方法

* Page_PreInitイベントで、テーマを指定する（Page_Loadイベントではない） 
Protected Sub Page_PreInit(ByVal sender As Object, ByVal e As EventArgs) _
    Handles Me.PreInit
    Page.Theme = "Sample001"
End Sub

スキンとCSSの使い分け

 * 基本、CSSを使う
 * ASP.NET サーバー コントロールのスタイルを指定するときには、スキンを使用する