لطفا منتظر باشید ...
Publisher5.6 Modifying Control Appearance
One
of the great things about
ASP.NET Server
Controls is that they are incredibly flexible in allowing developers
to define how they should appear on the page. Most server controls
expose properties that allow simple formatting, such as fonts and
background colors. All server controls also expose properties that
allow for setting cascading style sheets (CSS) styles to modify the
appearance of a control. Finally, some controls allow the use of
templates to further define how the output of the control should
appear. Together or individually, these techniques allow ASP.NET
developers extensive control over the appearance of their controls.
5.6.1 Properties
Using control
properties
is the simplest technique for modifying the appearance of a control.
Example 5-14 shows a page with two Label controls,
one of which uses its default settings. The second Label control has
one attribute used to set the Font-Name property. Font is a property
that is represented by the FontInfo class. Setting
the font-name attribute sets the value of the
FontInfo class' Name member. Note
that this second Label control also has the BackColor property set
(in this case, to blue) in the Page_Load event handler. The output
from Example 5-14 is shown in Figure 5-12.
Example 5-14. ControlProps.aspx
<%@ Page Language="vb" %>
<html>
<head>
<title>Control Properties Example</title>
<script runat="server">
Sub Page_Load( )
Label2.BackColor = System.Drawing.Color.LightBlue
End Sub
</script>
</head>
<body>
<h1>Control Properties Example</h1>
<form runat="server">
<asp:table id="MyTable" border="1" cellpadding="5"
cellspacing="0" runat="server">
<asp:tablerow runat="server">
<asp:tablecell runat="server">
Default Label:
</asp:tablecell>
<asp:tablecell runat="server">
<asp:label id="Label1" runat="server">
Hello, World!
</asp:label>
</asp:tablecell>
</asp:tablerow>
<asp:tablerow runat="server">
<asp:tablecell runat="server">
Label with Properties:
</asp:tablecell>
<asp:tablecell runat="server">
<asp:label id="Label2" font-name="arial"
runat="server">
Hello, World!
</asp:label>
</asp:tablecell>
</asp:tablerow>
</asp:table>
</form>
</body>
</html>
Figure 5-12. Control properties
5.6.2 CSS Styles
A more extensive technique for modifying control appearance involves
the use of CSS styles. The base
HtmlControl class (from which all HTML controls
inherit) exposes a Style property, which contains a collection of CSS
styles that are rendered at runtime as attributes on the tag
generated by the control. The base WebControl
class (from which all web controls inherit) also exposes a
Style
property and adds a CssClass property, which renders the
value of the property as a class attribute on the
control. This property allows you to set the style of a control using
a CSS class defined in a stylesheet, rather than by setting
individual styles. Like many other properties of web and HTML
controls, the Style and CssClass properties can be set either
declaratively (using attributes) or programmatically. Example 5-15
illustrates the use of both properties. Example 5-16 shows the HTML
that would be rendered to the browser by Example 5-15. Note that the ViewState hidden field has been
removed for clarity.
Example 5-15. ControlStyles.aspx
<%@ Page Language="vb" %>
<html>
<head>
<title>Control Properties Example</title>
<script runat="server">
Sub Page_Load( )
Label2.Style("background-color") = "silver"
End Sub
</script>
<style>
.Hello
{
font: 14pt arial;
color:blue;
}
</style>
</head>
<body>
<h1>Control Properties Example</h1>
<form runat="server">
<asp:table id="MyTable" border="1" cellpadding="5" cellspacing="0"
runat="server">
<asp:tablerow runat="server">
<asp:tablecell runat="server">
HtmlInputText Control:
</asp:tablecell>
<asp:tablecell runat="server">
<input id="Text1" type="text"
style="font: 12pt arial;background-color:silver;color:red;"
runat="server"/>
</asp:tablecell>
</asp:tablerow>
<asp:tablerow runat="server">
<asp:tablecell runat="server">
Label with Style:
</asp:tablecell>
<asp:tablecell runat="server">
<asp:label id="Label2" cssclass="Hello" runat="server">
Hello, World!
</asp:label>
</asp:tablecell>
</asp:tablerow>
</asp:table>
</form>
</body>
</html>
Example 5-16. Rendered HTML from ControlStyles.aspx
<html>
<head>
<title>Control Properties Example</title>
<style>
.Hello
{
font: 14pt arial;
color:blue;
}
</style>
</head>
<body>
<h1>Control Properties Example</h1>
<form name="_ctl0" method="post" action="ControlStyles.aspx"
id="_ctl0">
<table id="MyTable" cellspacing="0" cellpadding="5" border="1"
border="0" style="border-collapse:collapse;">
<tr>
<td>
HtmlInputText Control:
</td>
<td>
<input name="Text1" id="Text1" type="text"
style="font: 12pt arial;background-color:silver;color:red;"
/>
</td>
</tr>
<tr>
<td>
Label with Style:
</td>
<td>
<span id="Label2" class="Hello"
style="background-color:silver;">
Hello, World!
</span>
</td>
</tr>
</table>
</form>
</body>
</html>
5.6.3 Templates
Certain controls, most notably
the
Repeater
data-bound control, can also use templates to specify the appearance
of the control output. In fact, the Repeater control requires at
least one template (the ItemTemplate) to display anything at all.The Repeater works by rendering anything contained in the
HeaderTemplate (if defined) and then rendering the contents of its
data source based on the ItemTemplate, AlternatingItemTemplate (if
defined), and SeparatorTemplate (if defined).Once all rows of the data source have been rendered, the Repeater
then renders the contents of the FooterTemplate (if defined). Figure 5-13 shows the output of
ControlTemplates.aspx .
Figure 5-13. Template output
