主题和皮肤

主题和皮肤
1 组成元素 (1)主题文件.skin  (2)css文件 .css (3)图片和其他资源 .jpg
2 文件存储和组织形式 (1) 创建App_Themes 文件夹(只存存储文件夹及与主题有关的文件)
事例:
3 创建应用主题(名称mytheme)
  (1) 创建主题文件.skip 
   

<asp:TextBox BackColor="Silver" ForeColor="Blue" Runat="Server" />
<asp:BulletedList BulletStyle="CustomImage" BulletImageUrl="Images/arrow.gif" Runat="Server" />

  注意这里引用了图片 arrow.gif
  (2) 为主题添加css文件

body
{}{
    background-color: silver;
}

A:link
{}{
    color: Blue;
    text-decoration: underline;
}
A:visited
{}{
    color: Blue;
    text-decoration: underline;
}
A:hover
{}{
    color: Red;
    text-decoration: none;
}
INPUT
{}{
    background-color: Orange;
}

(3)在aspx页面的第一行修改一下

<%@ Page Language="C#" AutoEventWireup="true"   Theme ="mytheme"  CodeFile="Default1.aspx.cs" Inherits="test_skin_Default1" %>

(4)HTML代码部分应用如下:

<fieldset style="width: 240px">
                <legend>为主题添加CSS文件</legend>
                <br />
                使用CSS设置的HTML控件<br />
                <br />
                <a href="http://www.microsoft.com/china/" target="_blank">微软中国</a> <a href="http://www.microsoft.com/china/msdn/"
                    target="_blank">中文MSDN</a><br />
                <input type="text" /><br />
                <br />
                < <legend>在主题中使用图片</legend>
                <asp:BulletedList ID="BulletedList1" runat="server" BulletStyle="CustomImage">
                    <asp:ListItem Value="0">JSP程序设计</asp:ListItem>
                    <asp:ListItem Value="1">计算机网络教程</asp:ListItem>
                    <asp:ListItem Value="2">UML参考手册</asp:ListItem>
                    <asp:ListItem Value="3">UML和模式应用</asp:ListItem>
                </asp:BulletedList>                            
               
            </fieldset>

(5) 这样主题文件.skin 就应用到了页面
注: 为程序指定或禁用主题 在Web.Config文件里面
 

            <system.web>
        <pages theme="mytheme"></pages>
        </system.web>

这样就不用在Html页面的第一行进行修改,可以进行直接应用

动态加载主题(skin文件):
(1)在主题下面新建2个主题,分别是Blue,Red
Blue主题下面建立主题文件Calendar.skin

<asp:Calendar runat="server" BackColor="White" BorderColor="#EFE6F7"
    CellPadding="4" DayNameFormat="Shortest" Font-Size="0.8em"
    ForeColor="Black" Height="180px" Width="200px">
    <SelectedDayStyle BackColor="#41519A" Font-Bold="True" ForeColor="White" Font-Size="0.8em"/>
    <SelectorStyle BackColor="#41519A" Font-Size="0.8em"/>
    <WeekendDayStyle BackColor="#99ACDD" Font-Size="0.8em"/>
    <OtherMonthDayStyle ForeColor="#41519A" Font-Size="0.9em"/>
    <TodayDayStyle BackColor="#B2C3E1" ForeColor="Black" Font-Size="0.8em"/>
    <NextPrevStyle VerticalAlign="Bottom" Font-Bold="True" ForeColor="White" Font-Size="0.8em"/>
    <DayHeaderStyle Font-Bold="True" Font-Size="0.8em" BackColor="#B2C3E1"/>
    <TitleStyle BackColor="#41519A" BorderColor="Black" Font-Bold="True" ForeColor="White" Font-Size="0.9em"/>
    <DayStyle Font-Size="0.8em" />
</asp:Calendar>

Red 主题下面建立主题文件Calendar.skin

<asp:Calendar runat="server" BackColor="White" BorderColor="#EFE6F7"
    CellPadding="4" DayNameFormat="Shortest" Font-Size="0.8em"
    ForeColor="Black" Height="180px" Width="200px">
    <SelectedDayStyle BackColor="#8A170F" Font-Bold="True" ForeColor="White" Font-Size="0.8em"/>
    <SelectorStyle BackColor="#8A170F" Font-Size="0.8em"/>
    <WeekendDayStyle BackColor="#E7E7E7" Font-Size="0.8em"/>
    <OtherMonthDayStyle ForeColor="#8A170F" Font-Size="0.9em"/>
    <TodayDayStyle BackColor="#F4000A" ForeColor="White" Font-Size="0.8em" Font-Bold="True"/>
    <NextPrevStyle VerticalAlign="Bottom" Font-Bold="True" ForeColor="White" Font-Size="0.8em"/>
    <DayHeaderStyle Font-Bold="True" Font-Size="0.8em" BackColor="#F4000A" ForeColor="White"/>
    <TitleStyle BackColor="#8A170F" BorderColor="Black" Font-Bold="True" ForeColor="White" Font-Size="0.9em"/>
    <DayStyle Font-Size="0.8em" />
</asp:Calendar>

(2)UI部分和后台代码如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<script runat="server">
    void Page_PreInit(Object sender, EventArgs e)
    {
        //设置页面所设置的主题
        string theme="";
        if (Request.QueryString["theme"] == null)
        {
            theme = "Red";
        }
        else
        {
            theme = Request.QueryString["theme"];
        }
        Page.Theme = theme;
        //设置DropDownList控件的选中项
        ListItem item = DropDownList1.Items.FindByValue(theme);
        if (item != null)
        {
            item.Selected = true;
        }
    }
    void SelectedIndexChanged(Object sender, EventArgs e)
    {
        //获取DropDownList选中项值，并进行页面重定向
        string url = Request.Path + "?theme=" + DropDownList1.SelectedItem.Value;
        Response.Redirect(url);
    }
</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>示例6-5</title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <fieldset style="width: 210px">
                <legend>动态加载主题</legend>
                <asp:DropDownList ID="DropDownList1" runat="server" OnSelectedIndexChanged="SelectedIndexChanged"
                    AutoPostBack="True">
                    <asp:ListItem Value="Red">启用Red主题</asp:ListItem>
                    <asp:ListItem Value="Blue">启用Blue主题</asp:ListItem>
                </asp:DropDownList>
                <br />
                <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
            </fieldset>
        </div>
    </form>
</body>
</html>

(3)这样就实现了一次简单的动态加载主题


注:  以上代码 需要在asp.net 2.0下面运行