Содержание

1 Adding Cascading Style Sheets to Themes
2 Registration Form
3 Dynamic Theme

Adding Cascading Style Sheets to Themes

   <source lang="csharp">

If you add a CSS file to a Theme folder, then the CSS is applied to every page to which the Theme is applied. File: \yourApplicationRoot\App_Themes\StyleTheme\SimpleStyle.css .content {

   margin:auto;
   width:600px;
   border:solid 1px black;
   background-color:White;
   padding:10px;

} .button {

   background-color:#eeeeee;

}

File: ShowSimpleCSS.aspx <%@ Page Language="C#" Theme="StyleTheme" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server">

   <title>Show Simple CSS</title>

</head> <body>

   <form id="form1" runat="server">

Registration Form

   <asp:Label
       id="lblFirstName"
       Text="First Name:"
       AssociatedControlID="txtFirstName"
       Runat="server" />
   

   <asp:TextBox
       id="txtFirstName"
       Runat="server" />
   


   <asp:Label
       id="lblLastName"
       Text="Last Name:"
       AssociatedControlID="txtLastName"
       Runat="server" />
   

   <asp:TextBox
       id="txtLastName"
       Runat="server" />
   


   <asp:Button
       id="btnSubmit"
       Text="Submit Form"
       CssClass="button"
       Runat="server" />

   </form>

</body> </html></source>

Adding Skins to Themes

   <source lang="csharp">

A Theme can contain one or more Skin files. A Skin modifies any of the appearance properties of an ASP.NET control. File: App_Themes\Simple\TextBox.skin <asp:TextBox

   BackColor="Yellow"
   BorderStyle="Dotted"
   Runat="Server" />

You can name a Skin file anything you want. A Theme folder can contain a single Skin file that contains Skins for all controls. A Theme folder can contain hundreds of Skin files, each of which contains a single Skin. Everything in a Theme folder gets compiled into one Theme class. You must include a Runat attribute, but you can never include the ID attribute when declaring a control in a Skin. File: ShowSkin.aspx uses the Simple Theme. Include a Theme attribute in its <%@ Page %> directive. <%@ Page Language="C#" Theme="Simple" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server">

   <title>Show Skin</title>

</head> <body>

   <form id="form1" runat="server">

   <asp:TextBox
       Runat="server" />

   </form>

</body> </html></source>

An ASP.NET Theme enables you to apply a consistent style to the pages.

   <source lang="csharp">

A Master Page enables you to share content across multiple pages in a website. A Theme enables you to control the appearance of the content. You create a Theme by adding a new folder named App_Themes. Each folder that you add to the App_Themes folder represents a different Theme. If the App_Themes folder must be located in the root of your application. The contents of a Theme folder are compiled into a new class. Be careful not to name a Theme with a class name that conflicts with an existing class name.</source>

Applying Skins Dynamically

   <source lang="csharp">

File: Default.aspx <%@ Page Language="C#" Theme="DynamicSkin" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <script runat="server">

   protected void Page_PreInit(object sender, EventArgs e)
   {
       if (Request["skin"] != null)
       {
           switch (Request["skin"])
           {
               case "professional":
                   grdProducts.SkinID = "Professional";
                   break;
               case "colorful":
                   grdProducts.SkinID = "Colorful";
                   break;
           }
       }
   }

</script> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server">

   <title>Show Dynamic Skin</title>

</head> <body>

   <form id="form1" runat="server">

   <asp:GridView
       id="grdProducts"
       DataSourceID="srcProducts"
       Runat="server" />
   <asp:SqlDataSource
       id="srcProducts"
       ConnectionString="<%$ ConnectionStrings:Products %>"
       SelectCommand="SELECT Id,Title,Director FROM Products"
       Runat="server" />

   <a href="showdynamicskin.aspx?skin=professional">Professional</a>
    | 
   <a href="showdynamicskin.aspx?skin=colorful">Colorful</a>

   </form>

</body> </html></source>

Applying Themes Dynamically

   <source lang="csharp">

File: Default.aspx <%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <script runat="server">

   protected void Page_PreInit(object sender, EventArgs e)
   {
       if (Request["theme"] != null)
       {
           switch (Request["theme"])
           {
               case "Green":
                   Profile.userTheme = "GreenTheme";
                   break;
               case "Pink":
                   Profile.userTheme = "PinkTheme";
                   break;
           }
       }
       Theme = Profile.userTheme;
   }

</script> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server">

   <title>Dynamic Theme</title>

</head> <body>

   <form id="form1" runat="server">

Dynamic Theme

   Please select a Theme:

<a href="Default.aspx?theme=Green">Green Theme</a>
<a href="Default.aspx?theme=Pink">Pink Theme</a>

   </form>

</body> </html>

File: Web.config

 <system.web>
   <profile>
     <properties>
       <add name="UserTheme" />
     </properties>
   </profile>
 </system.web>

</configuration></source>

Configure specific controls so they opt out of the theming process entirely.

   <source lang="csharp">

Set the EnableTheming property of the control on the web page to false. ASP.NET will still apply the theme to other controls on the page, but it will skip over the control you¡�ve configured. <asp:Button ID="Button1" runat="server" ... EnableTheming="false" /></source>

Creating Named Skins with a SkinID property

   <source lang="csharp">

File: Simple\TextBox.skin <asp:TextBox

   SkinID="DashedTextBox"
   BorderStyle="Dashed"
   BorderWidth="5px"
   Runat="Server" />

<asp:TextBox

   BorderStyle="Double"
   BorderWidth="5px"
   Runat="Server" />

File: ShowNamedSkin.aspx <%@ Page Language="C#" Theme="Simple" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server">

   <title>Show Named Skin</title>

</head> <body>

   <form id="form1" runat="server">

   <asp:TextBox
       id="txtFirstName"
       SkinID="DashedTextBox"
       Runat="server" />
   


   <asp:TextBox
       id="txtLastName"
       Runat="server" />

   </form>

</body> </html></source>

Disabling Themes

   <source lang="csharp">

Use the EnableTheming property to prevent a Skin from being applied. File: Simple\Calendar.skin <asp:Calendar

   BackColor="White"
   BorderColor="White"
   BorderWidth="1px"
   Font-Names="Verdana"
   Font-Size="9pt"
   ForeColor="Black"
   NextPrevFormat="FullMonth"
   Width="400px"
   Runat="Server">
   <SelectedDayStyle
       BackColor="#333399"
       ForeColor="White" />
   <OtherMonthDayStyle
       ForeColor="#999999" />
   <TodayDayStyle
       BackColor="#CCCCCC" />
   <NextPrevStyle
       Font-Bold="True"
       Font-Size="8pt"
       ForeColor="#333333"
       VerticalAlign="Bottom" />
   <DayHeaderStyle
       Font-Bold="True"
       Font-Size="8pt" />
   <TitleStyle
       BackColor="White"
       BorderColor="Black"
       BorderWidth="4px"
       Font-Bold="True"
       Font-Size="12pt"
       ForeColor="#333399" />

</asp:Calendar>

File: ShowEnableTheming.aspx <%@ Page Language="C#" Theme="Simple" %> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server">

   <title>Show EnableTheming</title>

</head> <body>

   <form id="form1" runat="server">

   <asp:Calendar
       id="Calendar1"
       Runat="server" />
   


   <asp:Calendar
       id="Calendar2"
       EnableTheming="false"
       Runat="server" />

   </form>

</body> </html></source>

Handling Theme Conflicts

   <source lang="csharp">

When properties conflict between your controls and your theme, the theme wins. To make this change, just use the StyleSheetTheme attribute instead of the Theme attribute. <%@ Page Language="C#" AutoEventWireup="true" ... StyleSheetTheme="FunkyTheme" %></source>

How Themes Work

   <source lang="csharp">

All themes are application specific. In order to use a Theme, create a folder that defines it. This folder needs to be placed in a folder named App_Themes, which must be placed inside the top-level directory for your web application. For example, if application is called SuperCommerce and the theme is FunkyTheme, it should stay in SuperCommerce\App_Themes\FunkyTheme. Only one theme can be active on a given page at a time. A skin file is a text file with the .skin extension. ASP.NET treats all the skin files in a theme directory as part of the same theme definition. To apply the theme, set the Theme attribute of the Page directive to the folder name. <%@ Page Language="C#" AutoEventWireup="true" ... Theme="FunkyTheme" %></source>

Override Skin properties by applying a Theme to a page with the StyleSheetTheme attribute instead of the Theme attribute.

   <source lang="csharp">

File: Simple\Label.skin <asp:Label

   BackColor="Orange"
   Runat="Server" />

File: ShowSkinStyleSheetTheme.aspx <%@ Page Language="C#" StyleSheetTheme="Simple" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server">

   <title>Show Skin Style Sheet Theme</title>

</head> <body>

   <form id="form1" runat="server">

   <asp:Label
       id="Label1"
       Text="What color background do I have?"
       BackColor="red"
       Runat="server" />

   </form>

</body> </html></source>

Share the Theme among multiple web applications running on the same web server

   <source lang="csharp">

You create a Global Theme by adding the Theme to the Themes folder located at the following path: WINDOWS\Microsoft.NET\Framework\v2.0.50727\ASP.NETClientFiles\Themes To use the Theme in an HTTP-based website, you need to perform an additional step. You must add the Theme folder to the following path: Inetpub\wwwroot\aspnet_client\system_web\v2.0.50727\Themes</source>

Show Dynamic CSS

   <source lang="csharp">

<%@ Page Language="C#" Theme="DynamicSkin" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <script runat="server">

   protected void btnSubmit_Click(object sender, EventArgs e)
   {
       grdProducts.CssClass = ddlCssClass.SelectedItem.Text;
   }

</script> <html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server">

   <title>Show Dynamic CSS</title>

</head> <body>

   <form id="form1" runat="server">

   <asp:GridView
       id="grdProducts"
       DataSourceID="srcProducts"
       HeaderStyle-CssClass="Header"
       AlternatingRowStyle-CssClass="Alternating"
       GridLines="none"
       Runat="server" />
   <asp:SqlDataSource
      id="srcProducts"
      ConnectionString="<%$ ConnectionStrings:Products %>"
      SelectCommand="SELECT Id,Title,Director FROM Products"
      Runat="server" />

   <asp:Label
       id="lblCssClass"
       Text="Select Style:"
       AssociatedControlID="ddlCssClass"
       Runat="server" />
   <asp:DropDownList
       id="ddlCssClass"
       Runat="server">
       <asp:ListItem Text="Professional" />
       <asp:ListItem Text="Colorful" />
   </asp:DropDownList>
   <asp:Button
       id="btnSubmit"
       Text="Select"
       Runat="server" OnClick="btnSubmit_Click" />

   </form>

</body> </html></source>

Themes Versus StyleSheetThemes

   <source lang="csharp">

Properties in a Skin override properties in a page. File: Simple\Label.skin <asp:Label

   BackColor="Orange"
   Runat="Server" />

File: ShowSkinTheme.aspx <%@ Page Language="C#" Theme="Simple" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server">

   <title>Show Skin Theme</title>

</head> <body>

   <form id="form1" runat="server">

   <asp:Label
       id="Label1"
       Text="What color background do I have?"
       BackColor="red"
       Runat="server" />

   </form>

</body> </html></source>

ASP.NET Tutorial/Development/Themes

Содержание

Adding Cascading Style Sheets to Themes

Registration Form

Adding Skins to Themes

An ASP.NET Theme enables you to apply a consistent style to the pages.

Applying Skins Dynamically

Applying Themes Dynamically

Dynamic Theme

Configure specific controls so they opt out of the theming process entirely.

Creating Named Skins with a SkinID property

Disabling Themes

Handling Theme Conflicts

How Themes Work

Override Skin properties by applying a Theme to a page with the StyleSheetTheme attribute instead of the Theme attribute.

Share the Theme among multiple web applications running on the same web server

Show Dynamic CSS

Themes Versus StyleSheetThemes

Навигация

Персональные инструменты

Пространства имён

Варианты

Просмотры

Ещё

Поиск

Разделы

Инструменты

Навигация