在 ASP.NET 2.0 中创建 Web 应用程序主题（二）

2017 年 11 月 30 日4890

Skin 文件可以包含比列表 1 中所包含的格式设置更复杂的格式设置。例如，列表 3 中的 GridView.Skin 文件包含了用作 GridView 控件的格式设置的脚本和模板。（在 ASP.NET 2.0 Framework 中，GridView 控件替换了 DataGrid 控件。）

列表 3：GridView.Skin (C#)


＜script language="C#" runat="Server">
string DisplayInStock(object inStock) { if ( (Int16)inStock >
0 ) return "In Stock"; else return "Out of Stock"; } ＜/script>
＜asp:GridView AutoGenerateColumns="false" ShowHeader="false" CellPadding="5" Font-Name="Arial" Runat="Server">
＜AlternatingRowStyle BackColor="LightBlue" />
＜Columns>
＜asp:TemplateField>
＜ItemTemplate>
＜%# Eval("ProductName") %>
＜/ItemTemplate>
＜/asp:TemplateField>
＜asp:BoundField DataField="UnitPrice" DataFormatString="{0:c}" />
＜asp:TemplateField>
＜ItemTemplate>
＜%# DisplayInStock(Eval("UnitsInStock")) %>
＜/ItemTemplate>
＜/asp:TemplateField>
＜/Columns>
＜/asp:GridView>

列表 3：GridView.Skin (Visual Basic .NET)


＜script language="VB" runat="Server">
Function DisplayInStock(inStock As Object) As String If CType(inStock, Int16) >
0 Then Return "In Stock" Else Return "Out of Stock" End If End Function ＜/script>
＜asp:GridView AutoGenerateColumns="false" ShowHeader="false" CellPadding="5" Font-Name="Arial" Runat="Server">
＜AlternatingRowStyle BackColor="LightBlue" />
＜Columns>
＜asp:TemplateField>
＜ItemTemplate>
＜%# Eval("ProductName") %>
＜/ItemTemplate>
＜/asp:TemplateField>
＜asp:BoundField DataField="UnitPrice" DataFormatString="{0:c}" />
＜asp:TemplateField>
＜ItemTemplate>
＜%# DisplayInStock(Eval("UnitsInStock")) %>
＜/ItemTemplate>
＜/asp:TemplateField>
＜/Columns>
＜/asp:GridView>

列表 3 中的 Skin 文件包含一个 GridView 控件，该控件具有三列（请参见图 2）。第一列是一个 TemplateField 列，用于显示 ProductName 字段的值。第二列是一个 BoundField 列，用于显示 UnitPrice 字段（请注意，此列使用 DataFormatString 属性将价格形式设置为货币）。最后，第三列是另一个 TemplateField 列。此列将从 Skin 文件所包含的脚本中调用 DisplayUnitsInStock 方法，以显示文本“In Stock”或“Out of Stock”。

图 2：复杂的 GridView 外观

您可以将 GridView.Skin 外观用于列表 4 中的页面（假如您已将该外观添加到了 OrangeTheme 文件夹中）。

列表 4：SkinnedGridView.aspx


＜%@ Page Theme="OrangeTheme" %>
＜html>
＜head runat="server">
＜title>
Skinned GridView＜/title>
＜/head>
＜body>
＜form runat="server">
＜asp:GridView DataSourceID="ProductSource" Runat="Server" />
＜asp:SqlDataSource ConnectionString="Server=localhost;Trusted_Connection=true;Database=Northwind" SelectCommand="Select ProductName,UnitPrice,UnitsInStock FROM Products" Runat="Server" />
＜/form>
＜/body>
＜/html>

列表 4 中的页面显示了 Products 数据库表中的内容。该页面包含一个绑定到 SqlDataSource 控件的 GridView 控件。SqlDataSource 控件用于连接到 Northwind 数据库表，以检索该数据库中的数据。

默认外观与命名外观

在上一部分中，您学习了如何创建应用于某一类控件的所有实例的外观。例如，您学习了如何创建应用于所有 TextBox 控件或 GridView 控件的外观。但是，您很快就会发现，您需要为同一控件创建多个外观。例如，您会希望能够将不同外观应用于不同页面（甚至同一页面）中的 GridView 控件。

如果您创建的是“命名外观”，那么就可以创建应用于同一类控件的多个外观。命名外观就是包含 SkinID 的外观。例如，列表 5 中的 Skin 文件包含了三个可以应用于 TextBox 控件的外观。

列表 5：TextBox.Skin


＜asp:TextBox BackColor="Green" Runat="Server" />
＜asp:TextBox SkinID="BlueTextBox" BackColor="Blue" Runat="Server" />
＜asp:TextBox SkinID="RedTextBox" BackColor="Red" Runat="Server" />

在列表 5 中，第一个 TextBox 外观称为默认外观。由于该外观不包含 SkinID，因此，默认情况下，该外观应用于所有 TextBox 控件。而第二个和第三个 TextBox 外观包含各自的 SkinID 属性值。只有在通过其 SkinID 值明确引用这两个外观时，它们才应用于 TextBox 控件。

例如，列表 6 中的页面使用了 TextBox.Skin Skin 文件中的全部三个外观。

列表 6：SkinnedTextBoxes.aspx


＜%@ Page Theme="OrangeTheme" %>
＜html>
＜head runat="server">
＜title>
Skinned TextBoxes＜/title>
＜/head>
＜body>
＜form runat="server">
＜asp:TextBox Runat="Server" />
＜br />
＜asp:TextBox SkinID="BlueTextBox" Runat="Server" />
＜br />
＜asp:TextBox SkinID="RedTextBox" Runat="Server" />
＜/form>
＜/body>
＜/html>