home *** CD-ROM | disk | FTP | other *** search
/ io Programmo 40 / IOPROG_40.ISO / SOFT / NETFrameworkSDK.exe / comsdk.cab / samples.exe / QuickStart / aspplus / doc / webtemplates.aspx < prev    next >
Encoding:
Text File  |  2000-06-08  |  10.8 KB  |  236 lines
  1.  
  2. <%@ Register TagPrefix="Acme" TagName="SourceRef" Src="/quickstart/util/SrcRef.aspx"%>
  3.  
  4. <!-- #include virtual="/quickstart/aspplus/include/header.inc" -->
  5.  
  6. <h4>Applying Styles to Controls</h4>
  7. <p>
  8.  
  9. <div class="indent" style="font-family:Verdana; font-size:8pt;">
  10.     <b> <img align="middle" src="/quickstart/images/bullet.gif">  </b><a class="toc2" target="content" href="#htmlstyles">Applying Styles to HTMLControls</a><br>
  11.     <b> <img align="middle" src="/quickstart/images/bullet.gif">  </b><a class="toc2" target="content" href="#webstyles">Applying Styles to Web Controls</a><br>
  12. </div>
  13. <p>
  14. <hr>
  15.  
  16. The web is an extremely flexible environment for user interfaces, with extreme variations in look-and-feel across web sites.  The 
  17. widespread adoption of Cascading Style Sheets (CSS) is largely responsible for the rich designs we encounter on the web.  ASP+
  18. has been designed to provide first-class support for CSS styles in all of its HTML Controls and Web Controls.  In this section we demonstrate
  19. the use of styles in conjunction with server controls, and how it is possible to have very fine control over the look-and-feel of your
  20. Web Forms.
  21.  
  22. <!--BEGIN SECTION-->
  23. <br>
  24. <a name="htmlstyles">
  25. <br>
  26. <span class="subhead">Applying Styles to HTML Controls</span>
  27. <p>
  28.  
  29. Standard HTML tags support CSS through a "style" attribute, which can be set to a semicolon-delimited list of attribute/value pairs.
  30. A good resource for learning about the various CSS attributes supported by the Internet Explorer  browser can be found on
  31. MSDN Web Workshop's <a target="_blank" href="http://msdn.microsoft.com/workshop/author/css/reference/attributes.asp">CSS Attributes Reference</a> page.
  32. All of the ASP+ HTML Controls can accept styles in exactly the same manner as standard HTML tags.  The following example
  33. illustrates a number of styles applied to various HTML Controls.  If you "view source" on the page returned to the client, you'll note
  34. that these styles are passed along to the browser in the control's rendering.
  35. <p>
  36.  
  37. <Acme:SourceRef 
  38.   RunSample="/quickstart/aspplus/samples/webforms/customize/style1.aspx" 
  39.   ViewSource="/quickstart/aspplus/samples/webforms/customize/style1.src"
  40.   Icon="/quickstart/aspplus/images/style1.gif"
  41.   Caption="Style1.aspx"
  42.   runat="server" />
  43.  
  44.  
  45. <p>
  46. CSS also defines a "class" attribute, which can be set to a CSS style definition contained in a <style>...</style> section of
  47. the document.  The class attribute makes it easy to define styles once and apply them to several tags without the need to redefine the
  48. style itself.  Styles on HTML Controls may also be set in this manner, as demonstrated by the sample below.
  49. <p>
  50.  
  51. <Acme:SourceRef 
  52.   RunSample="/quickstart/aspplus/samples/webforms/customize/style2.aspx" 
  53.   ViewSource="/quickstart/aspplus/samples/webforms/customize/style2.src"
  54.   Icon="/quickstart/aspplus/images/style2.gif"
  55.   Caption="Style2.aspx"
  56.   runat="server" />
  57.  
  58. <p>
  59. When an ASP+ page is parsed, the style information is populated into a <b>Style</b> property (of type <b>CssStyleCollection</b>)
  60. on the <b>System.Web.UI.HtmlControls.HtmlControl</b> class.  This property is essentially a dictionary which exposes the control's
  61. styles as String-indexed collection of values for each style-attribute key.  For example, you could do the following to set and 
  62. subsequently retrieve the width style-attribute on an HtmlInputText control:
  63.  
  64. <div class="code"><pre>
  65. <script runat="server>
  66.  
  67.     public void Page_Load(Object sender, EventArgs E)
  68.     {
  69.         MyText.Style["width"] = "90px";
  70.         Response.Write(MyText.Style["width"]);
  71.     }
  72.  
  73. </script>
  74.  
  75. <input type="text" id="MyText" runat="server"/>
  76. </pre></div>
  77.  
  78. <p>
  79. This next sample shows how you can programmatically manipulate the style for an HTML Control using this Style collection 
  80. property.
  81. <p>
  82.  
  83. <Acme:SourceRef 
  84.   RunSample="/quickstart/aspplus/samples/webforms/customize/style3.aspx" 
  85.   ViewSource="/quickstart/aspplus/samples/webforms/customize/style3.src"
  86.   Icon="/quickstart/aspplus/images/style3.gif"
  87.   Caption="Style3.aspx"
  88.   runat="server" />
  89.  
  90. <!--BEGIN SECTION-->
  91. <br>
  92. <a name="webstyles">
  93. <br>
  94. <span class="subhead">Applying Styles to Web Controls</span>
  95. <p>
  96.  
  97. ASP+ Web Controls provide an additional level of support for styles by adding several strongly-typed properties for commonly used
  98. style settings, such as background and forground color, font name and size, width, height, etc.  These style properties represent a 
  99. sub-set of all style behavior available in HTML, and are represented as "flat" properties exposed directly on the 
  100. <b>System.Web.UI.WebControls.WebControl</b> base class.  The advantage to using these properties is that they provide 
  101. compile-time type checking and statement completion in development tools, such as Microsoft Visual Studio 7.
  102. <p>
  103. This next sample shows a WebCalendar control with several styles applied to it (a calendar without styles applied is included for 
  104. contrast).  Note that when setting a property which is a class-type like "Font", we use the sub-property syntax
  105.  <i>PropertyName-SubPropertyName</i> .
  106. <p>
  107.  
  108. <Acme:SourceRef 
  109.   RunSample="/quickstart/aspplus/samples/webforms/customize/style4.aspx" 
  110.   ViewSource="/quickstart/aspplus/samples/webforms/customize/style4.src"
  111.   Icon="/quickstart/aspplus/images/style4.gif"
  112.   Caption="Style4.aspx"
  113.   runat="server" />
  114.  
  115. <p>
  116. The System.Web.UI.WebControls namespace includes a <b>Style</b> base class which encapsulates common style
  117. attributes (additional style classes, such as <b>TableStyle</b> and <b>TableItemStyle</b> inherit from 
  118. this common base class).  Many Web Controls expose properties of this type for specifying the style of individual rendering
  119. elements of the control.  For example, the WebCalendar exposes many such Style properties: <b>DayStyle</b>, 
  120. <b>WeekendDayStyle</b>, <b>TodayDayStyle</b>, <b>SelectedDayStyle</b>, <b>OtherMonthDayStyle</b>, 
  121. and <b>NextPrevStyle</b>.  We can set individual properties of these Styles using the sub-property syntax: 
  122. <i>PropertyName-SubPropertyName</i>.  The following sample demonstrates this:
  123. <p>
  124.  
  125. <Acme:SourceRef 
  126.   RunSample="/quickstart/aspplus/samples/webforms/customize/style5.aspx" 
  127.   ViewSource="/quickstart/aspplus/samples/webforms/customize/style5.src"
  128.   Icon="/quickstart/aspplus/images/style5.gif"
  129.   Caption="Style5.aspx"
  130.   runat="server" />
  131.  
  132. <p>
  133. The sub-property syntax can get a little unwieldy when setting many Style properties at once.  A slightly different syntax allows
  134. each Style property to be declared as a child control to the Web Control:
  135.  
  136. <p>
  137. <div class="code"><pre>
  138. <ASP:Calendar ... runat="server">
  139.     <property name="TitleStyle">
  140.         <ASP:TableItemStyle BorderColor="darkolivegreen" BorderWidth="3" BackColor="olivedrab" Height="50px" />
  141.     </property>
  142. </ASP:Calendar>
  143. </pre></div>
  144. <p>
  145.  
  146. The following sample is functionally equivalent to the preceding sample, using this alternative syntax:
  147. <p>
  148.  
  149. <Acme:SourceRef 
  150.   RunSample="/quickstart/aspplus/samples/webforms/customize/style6.aspx" 
  151.   ViewSource="/quickstart/aspplus/samples/webforms/customize/style6.src"
  152.   Icon="/quickstart/aspplus/images/style6.gif"
  153.   Caption="Style6.aspx"
  154.   runat="server" />
  155.  
  156. <p>
  157. Just as you can apply styles to HTML Controls using a CSS class definition, you can also do this with Web Controls.  The
  158. WebControl base class exposes a String property named <b>CssClass</b> for setting the style class:
  159. <p>
  160.  
  161. <Acme:SourceRef 
  162.   RunSample="/quickstart/aspplus/samples/webforms/customize/style7.aspx" 
  163.   ViewSource="/quickstart/aspplus/samples/webforms/customize/style7.src"
  164.   Icon="/quickstart/aspplus/images/style7.gif"
  165.   Caption="Style7.aspx"
  166.   runat="server" />
  167.  
  168. <p>
  169. If an attribute is set on a server control which does not correspond to any strongly-typed property on the control, the attribute
  170. and value are populated in the <b>Attributes</b> collection of the control.  By default, server controls will render these attributes
  171. unmodified in the HTML returned to the requesting browser client.  This means that the "style" and "class" attributes may be
  172. set on Web Controls directly instead of using the strongly-typed properties.  While this requires some understanding of the actual
  173. rendering of the control, it can be a flexible way to apply styles as well.  It is especially useful for the standard form input controls, 
  174. as illustrated in the sample below:
  175. <p>
  176.  
  177. <Acme:SourceRef 
  178.   RunSample="/quickstart/aspplus/samples/webforms/customize/style8.aspx" 
  179.   ViewSource="/quickstart/aspplus/samples/webforms/customize/style8.src"
  180.   Icon="/quickstart/aspplus/images/style8.gif"
  181.   Caption="Style8.aspx"
  182.   runat="server" />
  183.  
  184. <p>
  185. Web Control Styles may also be set programmatically, using the <b>ApplyStyle</b> method of the base WebControl class.  
  186. For example:
  187. <p>
  188.  
  189. <div class="code"><pre>
  190. <script runat="server">
  191.     protected void Page_Load(Object Src, EventArgs E ) 
  192.     {
  193.         Style style = new Style();
  194.         style.BorderColor = Color.Black;
  195.         style.BorderStyle = BorderStyle.Dashed;
  196.         style.BorderWidth = 1;
  197.  
  198.         MyLogin.ApplyStyle (style);
  199.         MyPassword.ApplyStyle (style);
  200.         MySubmit.ApplyStyle (style);
  201.     }
  202. </script>
  203.  
  204. Login: <ASP:TextBox id="MyLogin" runat="server" />/<p/>
  205. Password: <ASP:TextBox id="MyPassword" TextMode="Password" runat="server" />
  206. View:  <ASP:DropDownList id="MySelect" runat="server">  ...  </ASP:DropDownList>
  207. </pre></div>
  208.  
  209. <p>
  210. The following example demonstrates the above code:
  211. <p>
  212.  
  213. <Acme:SourceRef 
  214.   RunSample="/quickstart/aspplus/samples/webforms/customize/style9.aspx" 
  215.   ViewSource="/quickstart/aspplus/samples/webforms/customize/style9.src"
  216.   Icon="/quickstart/aspplus/images/style9.gif"
  217.   Caption="Style9.aspx"
  218.   runat="server" />
  219.  
  220. <!--BEGIN SECTION-->
  221. <a name="endofsection">
  222.  
  223. <h4>Section Summary</h4>
  224. <ol>
  225. <li>ASP+ provides first-class support for CSS styles in both its HTML Controls and Web Controls families.
  226. <li>Styles may be applied by setting either the "style" or "class" attributes of a controls.  These settings are accessible
  227. programmatically through the control's Attributes collection.  In the case of HTML Controls, individual values for style-attribute
  228. keys may be retrieved from the control's Style collection.
  229. <li>Most commonly used style settings are exposed on Web Controls as strongly-typed properties of the control itself.
  230. <li>The System.Web.UI.WebControls namespace includes a Style base class which encapsulates common style
  231. attributes.  Many Web Controls expose properties of this type to to control individual rendering elements.
  232. <li>Styles may be set programmatically on Web Controls using the ApplyStyle method of the WebControl base class.
  233. </ol>
  234. <p>
  235.  
  236. <!-- #include virtual="/quickstart/aspplus/include/footer.inc" -->