Skin文件

2008-08-26 下午 03:54

Skin文件是.NET Framework2.0中的新特性，是用来美化前台界面的一个控件。
在以前对HTML控件进行美化的时候通常采用css来作为美化的模板。但是随着.net的不断丰富，新控件有了很多的新特性，css这个与html同时期的模板对高级控件的支持显得力不从心，这时候MS就推出了skin来满足强大的.net 2.0的控件库的美化需要。下面就介绍如何制作和使用skin

制作Skin：
1、添加新项->skin文件
[翻译]：以下是添加skin文件的时候默认出现的提示：
（随手记录，没啥技术含量，但是很重要噢~）

<%--
Default skin template. The following skins are provided as examples only.
默认skin模板.下面的skin只提供了一个例子.

1. Named control skin. The SkinId should be uniquely defined because
    duplicate SkinId's per control type are not allowed in the same theme.
    给skin控件命名.SkinId的定义非常独特,因为不允许在同一个theme文件中定义两个相同的SkinId

<asp:GridView runat="server" SkinId="gridviewSkin" BackColor="White" >
   <AlternatingRowStyle BackColor="Blue" />
</asp:GridView>

2. Default skin. The SkinId is not defined. Only one default
    control skin per control type is allowed in the same theme.
    默认skin.没有定义SkinId.在一个相同的theme中只有一个默认的skin控件

<asp:Image runat="server" ImageUrl="~/images/image1.jpg" />
--%>

添加skin文件,第一次添加的时候系统默认添加App_themes文件夹，skin1方案中可以添加多个skin文件。一个skin方案对应一个theme。在使用的时候只需调用theme方案就可以了。
可以在控件的套用格式中套用再将代码复制过来
　1、去掉ID号
　2、[可选]添加SkinId

 

 

 

　<%--可以在控件的套用格式中套用再将代码复制过来
　1、去掉ID号
　2、[可选]添加SkinId--%>
        <asp:Calendar runat="server" BackColor="White" BorderColor="#999999"
             CellPadding="4" DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt"
             ForeColor="Black" Height="180px" Width="200px">
            <SelectedDayStyle BackColor="#666666" Font-Bold="True" ForeColor="White" />
            <TodayDayStyle BackColor="#CCCCCC" ForeColor="Black" />
            <SelectorStyle BackColor="#CCCCCC" />
            <WeekendDayStyle BackColor="#FFFFCC" />
            <OtherMonthDayStyle ForeColor="#808080" />
            <NextPrevStyle VerticalAlign="Bottom" />
            <DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True" Font-Size="7pt" />
            <TitleStyle BackColor="#999999" BorderColor="Black" Font-Bold="True" />
        </asp:Calendar>

保存以上文件skin1.skin
使用skin：

skin的第一种用法：
在未设置/需要修改其皮肤的页面，如default.aspx中拖拽一个日历控件，切换到其源代码视图，在<%page指令中添加theme=，选择弹出的theme方案，比如这里选skin1

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebAppTheme._Default" theme="Skin1"%>

启动default.aspx可查看效果


skin的第二种用法：
skin文件的写法还是一样的。
只是在引用的时候有所不同。
之前我们是使用theme=“skin1”的方法来定义的。这样定义有一个不好的地方就是它不允许程序员在aspx中对控件进行额外设置，这样即使程序员手动修改了控件属性，也将无法得到需要的效果。因此用了一个StyleSheetTheme关键字来替代theme。这样如果控件如果设置了自己的属性，则引用自己的控件属性来配色。
现在让我们做一个例子：
1、修改控件属性但不修改theme关键字。
a、在控件中用自动套用格式来设置控件外观，（与skin中的配色方案不同）
b、启动运行，发现结果还是按skin中的设置来配色 。
2、使用StyleSheetTheme关键字查看效果
a、将<@Page指令中的theme换成StyleSheetTheme；
b、启动运行，发现skin的配色方案失效，取而代之的是用户方案和skin方案的综合版本（原因见第三种方法的开始几行）。


skin的第三种用法：
这时候需要用到一直提到的SkinID这个关键字。
使用方法二的时候，会得到一个综合版本，可能用户又觉得有不爽，其实那是因为用户未设置足够的变量限制skin文件的使用，也就是说，用直接设置属性的方法可能未对某个参数进行设置比如说ForeColor，但是在skin中进行了设置，因此就会使用到skin中的参数值。
下面就讲述用SkinID来单独启用某个控件。
1、在skin1.skin中添加新的Canlender的样式属性，再次复制一个其他类型的（比如专业型），同样的方式设置，比如删除ID，添加SkinID=“Pro1”。假设这个SkinID为Pro1

        <%--专业型1--%>
        <asp:Calendar SkinID="Pro1" runat="server" BackColor="White" BorderColor="White" BorderWidth="1px" Font-Names="Verdana" Font-Size="9pt" ForeColor="Black" Height="190px" NextPrevFormat="FullMonth" Width="350px">
            <SelectedDayStyle BackColor="#333399" ForeColor="White" />
            <TodayDayStyle BackColor="#CCCCCC" />
            <OtherMonthDayStyle ForeColor="#999999" />
            <NextPrevStyle Font-Bold="True" Font-Size="8pt" ForeColor="#333333" VerticalAlign="Bottom" />
            <DayHeaderStyle Font-Bold="True" Font-Size="8pt" />
            <TitleStyle BackColor="White" BorderColor="Black" BorderWidth="4px" Font-Bold="True"
                 Font-Size="12pt" ForeColor="#333399" />
        </asp:Calendar>

2、在未启用任何设置日历控件属性的源视图中添加SkinID=“Pro1”

<asp:Calendar ID="Calendar1" runat="server" SkinID="Pro1"></asp:Calendar>

3、启动浏览，可以看到现在的日历控件就是Pro1而不是综合版本或者默认版本了。
4、此时及时将<@Page指令中的Theme改为StyleSheetTheme，也仍然不会改变它的外观。SkinID决定了它只按SkinID中的风格。



Skin的编程应用：
记得Blog风行的现代互联网，个性化的追求让网站制作者绞尽脑汁，不过众口难调，如果人人都有自己喜欢的配色方案是否能更显个性呢？
css提供了强大的个性化定制功能，但是正如本文开始所说的skin的诞生是伴随着控件的复杂化，所以个性化css的进化版应该是个性化skin，让人人都有自己的skin成了接下去的主题。
假设界面中有两个链接用来接受从客户端传回来的两种主题方案的话，那么同样是上面的例子，我们将看到客户对此定制自己主题的例子。
1、再添加一个theme方案
2、添加两个超级链接，传递两个参数，一个是theme1，一个是theme2

      <a href="Default.aspx?Theme=Skin1">Theme A</a>
      <a href="Default.aspx?Theme=Skin2">Theme B</a>

3、再在Default.aspx的源视图中添加代码（在html标签前）：

<script runat="server">
   protected void Page_PreInit()
  {
       Page.Theme = Server.HtmlEncode(Request.QueryString["Theme"]);
   }
</script>

或用一个DropDownList控件使用switch方法选择（msdn中所使用的方法）
ms-help://MS.VSCC.v80/MS.MSDN.v80/MS.VisualStudio.v80.chs/dv_aspnetcon/html/02eed7c3-01e8-4e20-8358-df47dbd4f148.htm
启动运行可以看到互动的效果。