ASP.NET Tutorial/Development/Themes

Материал из .Net Framework эксперт
Перейти к: навигация, поиск

Adding Cascading Style Sheets to Themes

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">
    <div class="content">
    <h1>Registration Form</h1>
    <asp:Label
        id="lblFirstName"
        Text="First Name:"
        AssociatedControlID="txtFirstName"
        Runat="server" />
    <br />
    <asp:TextBox
        id="txtFirstName"
        Runat="server" />
    <br /><br />
    <asp:Label
        id="lblLastName"
        Text="Last Name:"
        AssociatedControlID="txtLastName"
        Runat="server" />
    <br />
    <asp:TextBox
        id="txtLastName"
        Runat="server" />
    <br /><br />
    <asp:Button
        id="btnSubmit"
        Text="Submit Form"
        CssClass="button"
        Runat="server" />
    </div>
    </form>
</body>
</html>


Adding Skins to Themes

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">
    <div>
    <asp:TextBox
        Runat="server" />
    </div>
    </form>
</body>
</html>


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

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.


Applying Skins Dynamically

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">
    <div>
    <asp:GridView
        id="grdProducts"
        DataSourceID="srcProducts"
        Runat="server" />
    <asp:SqlDataSource
        id="srcProducts"
        ConnectionString="<%$ ConnectionStrings:Products %>"
        SelectCommand="SELECT Id,Title,Director FROM Products"
        Runat="server" />
    <hr />
    <a href="showdynamicskin.aspx?skin=professional">Professional</a>
    &nbsp;|&nbsp;
    <a href="showdynamicskin.aspx?skin=colorful">Colorful</a>
    </div>
    </form>
</body>
</html>


Applying Themes Dynamically

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">
    <div class="content">
    <h1>Dynamic Theme</h1>
    Please select a Theme:
    <ul>
    <li>
        <a href="Default.aspx?theme=Green">Green Theme</a>
    </li>
    <li>
        <a href="Default.aspx?theme=Pink">Pink Theme</a>
    </li>
    </ul>
    </div>
    </form>
</body>
</html>

File: Web.config

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


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

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&iexcl;�ve configured.
<asp:Button ID="Button1" runat="server" ... EnableTheming="false" />


Creating Named Skins with a SkinID property

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">
    <div>
    <asp:TextBox
        id="txtFirstName"
        SkinID="DashedTextBox"
        Runat="server" />
    <br /><br />
    <asp:TextBox
        id="txtLastName"
        Runat="server" />
    </div>
    </form>
</body>
</html>


Disabling Themes

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">
    <div>
    <asp:Calendar
        id="Calendar1"
        Runat="server" />
    <br /><br />
    <asp:Calendar
        id="Calendar2"
        EnableTheming="false"
        Runat="server" />
    </div>
    </form>
</body>
</html>


Handling Theme Conflicts

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" %>


How Themes Work

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" %>


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

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">
    <div>
    <asp:Label
        id="Label1"
        Text="What color background do I have?"
        BackColor="red"
        Runat="server" />
    </div>
    </form>
</body>
</html>


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

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


Show Dynamic CSS

<%@ 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">
    <div>
    <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" />
    <hr />
    <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" />
    </div>
    </form>
</body>
</html>


Themes Versus StyleSheetThemes

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">
    <div>
    <asp:Label
        id="Label1"
        Text="What color background do I have?"
        BackColor="red"
        Runat="server" />
    </div>
    </form>
</body>
</html>
Источник — «http://nfex.ru/index.php?title=ASP.NET_Tutorial/Development/Themes&oldid=2544»