в 15:30, 26 мая 2010

2010-05-26T15:30:57Z

Admin: 1 версия

2010-05-26T11:56:12Z

1 версия

Новая страница

== 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">
<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></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">
<div>
<asp:TextBox
Runat="server" />
</div>
</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">
<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>
 | 
<a href="showdynamicskin.aspx?skin=colorful">Colorful</a>
</div>
</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">
<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></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">
<div>
<asp:TextBox
id="txtFirstName"
SkinID="DashedTextBox"
Runat="server" />
<br /><br />
<asp:TextBox
id="txtLastName"
Runat="server" />
</div>
</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">
<div>
<asp:Calendar
id="Calendar1"
Runat="server" />
<br /><br />
<asp:Calendar
id="Calendar2"
EnableTheming="false"
Runat="server" />
</div>
</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">
<div>
<asp:Label
id="Label1"
Text="What color background do I have?"
BackColor="red"
Runat="server" />
</div>
</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">
<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></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">
<div>
<asp:Label
id="Label1"
Text="What color background do I have?"
BackColor="red"
Runat="server" />
</div>
</form>
</body>
</html></source>

← Предыдущая	Версия 15:30, 26 мая 2010
(нет различий)

ASP.NET Tutorial/Development/Themes - История изменений

в 15:30, 26 мая 2010

Admin: 1 версия