webtemplates.aspx

书籍教程 >> .Net教程 >> asp.net编程精彩百例

  Icon="/quickstart/aspplus/images/style5.gif"
  Caption="JScript Style5.aspx"
  runat="server" />
  </JsTemplate>
</Acme:LangSwitch>

<p>
稍微不同的语法允许将每个 <b>Style</b> 属性声明为嵌套在 Web 服务器控件标记中的子元素。

<p>
<div class="code"><pre>
&lt;ASP:Calendar ... runat="server"&gt;
    &lt;TitleStyle BorderColor="darkolivegreen" BorderWidth="3"
            BackColor="olivedrab" Height="50px" /&gt;
&lt;/ASP:Calendar&gt;
</pre></div>
<p>

下面的示例显示另一种语法，但在功能上与前一个示例等效。
<p>


<Acme:LangSwitch runat="server">
  <CsTemplate>
<Acme:SourceRef
  RunSample="/quickstart/aspplus/samples/webforms/customize/CS/style6.aspx"
  ViewSource="/quickstart/aspplus/samples/webforms/customize/style6.src"
  Icon="/quickstart/aspplus/images/style6.gif"
  Caption="C# Style6.aspx"
  runat="server" />
  </CsTemplate>
  <VbTemplate>
<Acme:SourceRef
  RunSample="/quickstart/aspplus/samples/webforms/customize/VB/style6.aspx"
  ViewSource="/quickstart/aspplus/samples/webforms/customize/style6.src"
  Icon="/quickstart/aspplus/images/style6.gif"
  Caption="VB Style6.aspx"
  runat="server" />
  </VbTemplate>
  <JsTemplate>
<Acme:SourceRef
  RunSample="/quickstart/aspplus/samples/webforms/customize/JS/style6.aspx"
  ViewSource="/quickstart/aspplus/samples/webforms/customize/style6.src"
  Icon="/quickstart/aspplus/images/style6.gif"
  Caption="JScript Style6.aspx"
  runat="server" />
  </JsTemplate>
</Acme:LangSwitch>

<p>
与 HTML 服务器控件一样，也可使用 CSS 类定义对 Web 服务器控件应用样式。<b>WebControl</b> 基类公开一个名为 <b>CssClass</b> 的 <b>String</b> 属性以设置样式类：
<p>


<Acme:LangSwitch runat="server">
  <CsTemplate>
<Acme:SourceRef
  RunSample="/quickstart/aspplus/samples/webforms/customize/CS/style7.aspx"
  ViewSource="/quickstart/aspplus/samples/webforms/customize/style7.src"
  Icon="/quickstart/aspplus/images/style7.gif"
  Caption="C# Style7.aspx"
  runat="server" />
  </CsTemplate>
  <VbTemplate>
<Acme:SourceRef
  RunSample="/quickstart/aspplus/samples/webforms/customize/VB/style7.aspx"
  ViewSource="/quickstart/aspplus/samples/webforms/customize/style7.src"
  Icon="/quickstart/aspplus/images/style7.gif"
  Caption="VB Style7.aspx"
  runat="server" />
  </VbTemplate>
  <JsTemplate>
<Acme:SourceRef
  RunSample="/quickstart/aspplus/samples/webforms/customize/JS/style7.aspx"
  ViewSource="/quickstart/aspplus/samples/webforms/customize/style7.src"
  Icon="/quickstart/aspplus/images/style7.gif"
  Caption="JScript Style7.aspx"
  runat="server" />
  </JsTemplate>
</Acme:LangSwitch>

<p>
如果在服务器控件上设置的属性与控件上的任何强类型属性都不对应，该属性和值将被填充到控件的 <b>Attributes</b> 集合中。默认情况下，服务器控件在返回给请求浏览器客户端的 HTML 中不修改地呈现这些属性。这意味着可以直接在 Web 服务器控件上设置样式和类属性，而不必使用强类型属性。虽然这需要对控件的实际呈现有一定的了解，但它可能同样是应用样式的灵活方法。这对标准窗体输入控件尤其有用，如下面的示例所示。
<p>


<Acme:LangSwitch runat="server">
  <CsTemplate>
<Acme:SourceRef
  RunSample="/quickstart/aspplus/samples/webforms/customize/CS/style8.aspx"
  ViewSource="/quickstart/aspplus/samples/webforms/customize/style8.src"
  Icon="/quickstart/aspplus/images/style8.gif"
  Caption="C# Style8.aspx"
  runat="server" />
  </CsTemplate>
  <VbTemplate>
<Acme:SourceRef
  RunSample="/quickstart/aspplus/samples/webforms/customize/VB/style8.aspx"
  ViewSource="/quickstart/aspplus/samples/webforms/customize/style8.src"
  Icon="/quickstart/aspplus/images/style8.gif"
  Caption="VB Style8.aspx"
  runat="server" />
  </VbTemplate>
  <JsTemplate>
<Acme:SourceRef
  RunSample="/quickstart/aspplus/samples/webforms/customize/JS/style8.aspx"
  ViewSource="/quickstart/aspplus/samples/webforms/customize/style8.src"
  Icon="/quickstart/aspplus/images/style8.gif"
  Caption="JScript Style8.aspx"
  runat="server" />
  </JsTemplate>
</Acme:LangSwitch>

<p>
也可使用 <b>WebControl</b> 基类的 <b>ApplyStyle</b> 方法以编程方式设置 Web 服务器控件样式，如下面的代码所示。
<p>

<p>
<Acme:TabControl runat="server">
<Tab Name="C#">
&lt;script language="C#" runat="server"&gt;
    void Page_Load(Object Src, EventArgs E ) {
        Style style = new Style();
        style.BorderColor = Color.Black;
        style.BorderStyle = BorderStyle.Dashed;
        style.BorderWidth = 1;

        MyLogin.ApplyStyle (style);
        MyPassword.ApplyStyle (style);
        MySubmit.ApplyStyle (style);
    }
&lt;/script&gt;

Login: &lt;ASP:TextBox id="MyLogin" runat="server" /&gt;/&lt;p/&gt;
Password: &lt;ASP:TextBox id="MyPassword" TextMode="Password" runat="server" /&gt;
View:  &lt;ASP:DropDownList id="MySelect" runat="server"&gt;  ...  &lt;/ASP:DropDownList&gt;
</Tab>

<Tab Name="VB">
&lt;script language="VB" runat="server"&gt;
    Sub Page_Load(Src As Object, E As EventArgs)
        Dim MyStyle As New Style
        MyStyle.BorderColor = Color.Black
        MyStyle.BorderStyle = BorderStyle.Dashed
        MyStyle.BorderWidth = New Unit(1)

        MyLogin.ApplyStyle (MyStyle)
        MyPassword.ApplyStyle (MyStyle)
        MySubmit.ApplyStyle (MyStyle)
    End Sub
&lt;/script&gt;

Login: &lt;ASP:TextBox id="MyLogin" runat="server" /&gt;/&lt;p/&gt;
Password: &lt;ASP:TextBox id="MyPassword" TextMode="Password" runat="server" /&gt;
View:  &lt;ASP:DropDownList id="MySelect" runat="server"&gt;  ...  &lt;/ASP:DropDownList&gt;
</Tab>

<Tab Name="JScript">
&lt;script language="JScript" runat="server"&gt;
    function Page_Load(sender : Object, E : EventArgs) : void {
        Style style = new Style();
        style.BorderColor = Color.Black;
        style.BorderStyle = BorderStyle.Dashed;
        style.BorderWidth = 1;

        MyLogin.ApplyStyle (style);
        MyPassword.ApplyStyle (style);
        MySubmit.ApplyStyle (style);
    }
&lt;/script&gt;

Login: &lt;ASP:TextBox id="MyLogin" runat="server" /&gt;/&lt;p/&gt;
Password: &lt;ASP:TextBox id="MyPassword" TextMode="Password" runat="server" /&gt;
View:  &lt;ASP:DropDownList id="MySelect" runat="server"&gt;  ...  &lt;/ASP:DropDownList&gt;
</Tab>

</Acme:TabControl>

<p>
下面的示例说明上面的代码。
<p>


<Acme:LangSwitch runat="server">
  <CsTemplate>
<Acme:SourceRef
  RunSample="/quickstart/aspplus/samples/webforms/customize/CS/style9.aspx"
  ViewSource="/quickstart/aspplus/samples/webforms/customize/style9.src"
  Icon="/quickstart/aspplus/images/style9.gif"
  Caption="C# Style9.aspx"
  runat="server" />
  </CsTemplate>
  <VbTemplate>
<Acme:SourceRef
  RunSample="/quickstart/aspplus/samples/webforms/customize/VB/style9.aspx"
  ViewSource="/quickstart/aspplus/samples/webforms/customize/style9.src"
  Icon="/quickstart/aspplus/images/style9.gif"
  Caption="VB Style9.aspx"
  runat="server" />
  </VbTemplate>
  <JsTemplate>
<Acme:SourceRef
  RunSample="/quickstart/aspplus/samples/webforms/customize/JS/style9.aspx"
  ViewSource="/quickstart/aspplus/samples/webforms/customize/style9.src"
  Icon="/quickstart/aspplus/images/style9.gif"
  Caption="JScript Style9.aspx"
  runat="server" />
  </JsTemplate>
</Acme:LangSwitch>

<!--BEGIN SECTION--> <a name="endofsection">

<h4><a name="summary">本节小结</a></h4>
<ol>
<li>ASP.NET 的 HTML 服务器控件和 Web 服务器控件家族提供一流的 CSS 样式支持。
<li>通过设置控件的样式或类属性可以应用样式。通过控件的 <b>Attributes</b> 集合以编程方式可以访问这些设置。对于 HTML 服务器控件的情况，可以从控件的 <b>Style</b> 集合中检索样式属性键的各个值。
<li>大多数常用的样式设置在 Web 服务器控件上以控件本身的强类型属性的形式公开。
<li><b>System.Web.UI.WebControls</b> 命名空间包括一个封装公共样式属性的 <b>Style</b> 基类。许多 Web 服务器控件公开该类型的属性以控制各呈现元素。
<li>在 Web 服务器控件上可以使用 <b>WebControl</b> 基类的 <b>ApplyStyle</b> 方法以编程方式设置样式。
</ol>
<p>

<!-- #include virtual="/quickstart/aspplus/include/footer.inc" -->