skin的初级应用

转载 2007年10月01日 12:13:00

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

      <href="Default.aspx?Theme=Skin1">Theme 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
启动运行可以看到互动的效果。
 

skin的初级应用[制作skin][应用skin][编程使用skin]

Skin文件是.NET Framework2.0中的新特性,是用来美化前台界面的一个控件。在以前对HTML控件进行美化的时候通常采用css来作为美化的模板。但是随着.net的不断丰富,新控件有了很多的...
  • JOHNCOOLS
  • JOHNCOOLS
  • 2007年05月16日 14:42
  • 1193

Servlet应用入门

一、Servlet简介 Servlet是Sun公司提供的一门用于开发动态Web资源的技术。Sun公司在其API中提供了一个Servlet接口,用户若想用发一个动态Web资源(即开发一个Java程序向...
  • zhcj3672
  • zhcj3672
  • 2011年10月25日 18:51
  • 348

[引]VS2005 主题(Theme)和外观(skin)帮助文档:如何应用 ASP.NET 主题

A.对网站应用主题B.对单个页应用主题C.对控件应用外观D.禁用页的主题E.禁用控件的主题F.配置特定文件和子目录 ===================您可以对页或网站应用主题,或对全局应用主题...
  • freeliver54
  • freeliver54
  • 2007年01月20日 13:03
  • 350

Android模拟器skin

定制Android模拟器skin 2011-05-14 11:16 277人阅读 评论(1) 收藏 举报 Android模拟器提供了6个标准的skin供我们使用,分别对应HVGA(横屏/竖...
  • qeqeqe236
  • qeqeqe236
  • 2012年01月09日 14:12
  • 3483

定制Android模拟器skin

Android模拟器提供了6个标准的skin供我们使用,分别对应HVGA(横屏/竖屏)、QVGA(横屏/竖屏)、WQVGA以及WVGA,我们只要在启动模拟器时使用 -skin 参数就可以载入相应的皮肤...
  • littlegirlya
  • littlegirlya
  • 2013年12月09日 13:37
  • 3147

定制Android模拟器skin, android屏幕分辨率(VGA、HVGA、QVGA、WVGA、WQVGA)

http://www.williamhua.com/2009/04/customize-android-emulator-skin/ VGA:Video Graphics Array,即:显示绘...
  • gnoynehc
  • gnoynehc
  • 2011年08月23日 23:16
  • 3517

Asp.net主题(theme)和皮肤(skin)的使用

 1 asp.net的服务器端控件提供了多种样式的设计,如果对每个控件都单独设置,是比较繁琐的事情,所以微软也提供了针对这些服务器端控件的样式管理,其实也可以通过css来控制部分服务器端控件的样式,比...
  • sweetsoft
  • sweetsoft
  • 2009年08月18日 17:15
  • 5178

ASP2.0 自定义控件SKIN的应用

我们在使用Windows操作系统的时候,可以在桌面设置中通过主题来设定当前Windows的UI风格,现在在asp.net 2.0中也新增加了这一功能:主题/皮肤。例如:在我们的系统中,我们可以制作几种...
  • seamonkey
  • seamonkey
  • 2007年03月13日 10:15
  • 930

mediawiki中,SkinTemplate->stylename用于设置样式表名称

mediawiki中,SkinTemplate->stylename用于设置样式表名称在初始安装下,使用monobook皮肤,使用的皮肤模板类是/skins/MonoBook.php文件中的SkinM...
  • hu_zhenghui
  • hu_zhenghui
  • 2007年09月09日 19:59
  • 1778

Android解决“发现了以元素 'd:skin' 开头的无效内容”

今天打开eclipse出现了很多错误提示,如下: Error: Error parsing F:\wangpeng\Android\adt-bundle-windows-x86_64-2014070...
  • w2865673691
  • w2865673691
  • 2016年01月17日 11:17
  • 3786
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章: skin的初级应用
举报原因:
原因补充:

(最多只允许输入30个字)