ASP.NET テーマを使用してマスターページの画像を動的に変更

マスタページに配置したImageコントロールの画像を、テーマを使用して動的に変更したいと思います。
テーマを変更するにはページのPreInitイベントでMe.Theme = "スキン名"で変更できます。しかしマスターページにはPreInitイベントはありませんのでカスタムページのPreInitイベントでテーマを変更し、個々のページはカスタムページを継承して作成します。


■スキンファイルを作成します。
新しい項目の追加より「スキンファイル」を追加します。ファイル名は「SkinA.skin」とします。
同様に「SkinB.skin」も作成します。

SkinA.skin
<asp:Image runat="server" 
    ImageUrl="~/Image/A.gif" 
    SkinID="Logo">

</asp:Image>


SkinB.skin
<asp:Image runat="server" 
    ImageUrl="~/Image/B.gif" 
    SkinID="Logo">

</asp:Image>


■マスタページを作成します。
新しい項目の追加より「マスターページ」を追加します。マスターページにはImageコントロールを1つ配置しSkinIDプロパティを「Logo」にします。

■カスタムページを作成します。
「新しいプロジェクトの追加」より「Windowsコントロールライブラリ」プロジェクトを追加します。「Windowsコントロールライブラリ」が表示されていない場合は「クラスライブラリ」プロジェクトを追加します。(Visual Basic 2005 Expression Editionには「Windowsコントロールライブラリ」選択肢がない)プロジェクト名は何でもいいのですが「CustomControls」としました。
CustomControlsプロジェクトの新しい項目の追加より「Webカスタムコントロール」を追加します。ファイル名は「WebCustomPage.vb」とします。
「Inherits WebControl」部分を「Inherits System.Web.UI.Page」に変更し、PreInitイベントを定義します。PreInitイベントではセッション変数「Site」が"A"であればページのテーマをSkinAに、セッション変数「Site」が"B"であればページのテーマをSkinBにします。

Imports System
Imports System.Collections.Generic
Imports System.ComponentModel
Imports System.Text
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls

Namespace CustomConstrols

    <DefaultProperty("Text"), ToolboxData("<{0}:WebCustomPage runat=server></{0}:WebCustomPage>")> _
    Public Class WebCustomPage
        Inherits System.Web.UI.Page


        <Bindable(True), Category("Appearance"), DefaultValue(""), Localizable(True)> Property Text() As String
            Get
                Dim s As String = CStr(ViewState("Text"))
                If s Is Nothing Then
                    Return String.Empty
                Else
                    Return s
                End If
            End Get

            Set(ByVal Value As String)
                ViewState("Text") = Value
            End Set
        End Property
  
        Private Sub Page_PreInit(ByVal sender As Object, ByVal e As System.EventArgs) _
        Handles Me.PreInit
            Select Case CStr(Session.Item("Site"))
                Case "A"
                    Me.Theme = "SkinA"
                Case "B"
                    Me.Theme = "SKinB"
            End Select
        End Sub
    End Class
End Namespace


■コンテンツ部分を作成します。
Webサイトの参照に「CustomControlsクラスライブラリ」を追加します。
新しい項目の追加より「Webフォーム」を作成します。作成したページの
「Inherits System.Web.UI.Page」部分を「Inherits CustomControls.WebCustomPage」に変更します。

■実行して確認してみます。
セッション変数「Site」に"A"か"B"か保存するページを作成し動作確認します。

テーマAを適用したページです。

テーマBを適用したページです。

0 件のコメント: