ASP.NET 2.0移动开发入门之使用样式

每个ASP.NET移动控件都提供了若干样式属性，使用这些属性可以自定义控件的呈现方式。当然你也可以使用StyleSheet控件来定义样式信息,然后在同一个页面的不同控件上应用StyleSheet控件定义的样式信息.我们在前面已经提及到你不但可以将样式应用到不同的控件上,还可以应用到容器控件上,这样就保证了所以在容器控件中的移动控件都具有一致性的用户体验。
　
　　StyleSheet控件应该放置在页面中,而不是容器控件中.事实上,这是惟一一个可以放置在容器控件外面的WEB移动控件.对于所有的页面和移动控件来说,我们可以只定义一个StyleSheet控件.在你添加完一个StyleSheet控件后,可以通过打开样式编辑器来定义相应的样式属性.

　　为了在一个移动WEB页面上创建、自定义和应用一个StyleSheet控件，我们可以按照如下的步骤进行设置：

　　1. 拖拽一个StyleSheet控件到移动WEB页面上。

　　2. 右键点击StyleSheet控件，在弹出的菜单中选择\"模块化选项\"命令。这时会出现一个\"模块化选项\"对话框，如下图所示。该对话框允许你创建和编辑多个样式和设备筛选器，设备筛选器将以后的小节中详细介绍。


　　3. 单击\"编辑\"按钮，将会打开一个\"样式编辑器\"窗口，如下图所示。利用该窗口使得开发人员可以根据实际的需求创建多个样式。


　　4. 根据所要创建的样式类型，选择左侧列表栏中对应的\"样式类型\"的某个选项，然后单击\">\"按钮。这将创建一个从\"样式类型\"列表中所选类型的样式实例，并将其添加到右侧的\"定义的样式\"列表中。在当前的样式列表中有两个不同的样式类型：

　　⑴ Pager Style type: 该样式包含Style样式的属性以及可应用于分页控件的属性。这对一个移动WEB页面上包含多个移动控件的情形是非常有用的，因为移动设备可能无法在同一屏显示所有的移动控件，所以需要分页进行显示。采用这种样式类型，ASP.NET会自动在上述情况下创建分页。

　　⑵ Style: 该样式包含移动控件常用的外观属性。

　　5. 在\"定义的样式\"列表栏中右键点选已经定义好的的样式实例，这时会弹出一个\"重命名\"菜单，你可以为该样式命名一个有意义的名称。本例中设置了两个样式，分别为Pager Style类型的\"GrayBackground\"样式和Style类型的\"RedBackground\"样式。

　　6. 当所有的样式都定义好后，单击\"确定\"按钮就完成了整个的定义过程。

　　从上图你可以看出这里的样式属性远比传统的ASP.NET程序的样式属性要少很多，这主要是受到移动设备的硬件限制，尤其是一些只支持WML的设备。尽管如此，在ASP.NET移动WEB程序中还是保留一些常用的样式属性。例如你可以设置背景颜色、字体颜色、字体大小和字体类型等属性。虽然存在一些缺憾，但是我们可以在移动WEB页面上方便地使用StyleSheet控件，使程序具有一致性的用户体验。

　　当你定义完样式后，我们就可以将这些样式应用到具体的移动控件上了。这个过程是非常容易的，你只需点选该移动控件对应属性窗体上的StyleReference属性，然后在下拉列表中选择合适的样式即可。如下图所示，我们将GrayBackground样式应用到整个WEB Form控件上，而将RedBackground样式应用到Label控件上。这就是为什么所有在Form控件内的移动控件的背景颜色都是灰色，唯独Label控件的背景颜色为红色的原因 (Label移动控件用自身的样式替代窗体的样式)，最后的显示效果如下：