Asp.net 2.0 tutorial subject and skin

Source: Internet
Author: User

Respect the author. Keep the words www.it55.com.

In this section, we contact Asp.net 2.0 for new features: Theme and skin.

Make theme and skin
Create a web site, right-click "add ASP. NET folder"> "topic" on the project, and rename "Topic 1" generated by default to "blue ":




Right-click "Add new project" on the blue topic ",

In the pop-up setting box, select "appearance file", name it "button. Skin", and click "add"

Modify button. Skin as follows:

<% --
Default appearance template. The following appearance is provided only as an example.

1. Name the control appearance. The definition of skinid must be unique because a control type cannot have duplicate skinid in the same topic.

<Asp: gridview runat = "server" skinid = "gridviewskin" backcolor = "white">
<Alternatingrowstyle backcolor = "blue"/>
</ASP: gridview>

2. Default appearance. Skinid is not defined. In the same topic, each control type can have only one default control appearance.

<Asp: Image runat = "server" imageurl = "~ /Images/image1.jpg "/>
-- %>
<Asp: button runat = "server" backcolor = "lightsteelblue" borderstyle = "NONE" forecolor = "Navy"/>
<Asp: button runat = "server" backcolor = "lightsteelblue" borderstyle = "Groove" forecolor = "Navy" text = "button" bordercolor = "royalblue" skinid = "withborder"/>

Click "add" on the right of the bluetheme to create a new project. In the displayed setting box, select the sample table, name it "“style.css", and click "add"
Style.css content is as follows:

Body {text-align: center; Background-color: Gray;
}

Default. aspx content:

<% @ Page Language = "C #" autoeventwireup = "true" theme = "blue" codefile = "default. aspx. cs" inherits = "_ default" %>

<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Title> subject and skin </title>
</Head>
<Body>
<Form ID = "form1" runat = "server">
<Div>
The whole page is applied to style.css in the bluetopic, so the content is centered and the background is gray.
<Br/>
<Asp: button id = "button1" runat = "server" text = "button"/> <br/> if no skinid is set for this button, the default appearance is called.
<Br/>
<Br/>
<Asp: button id = "button2" runat = "server" text = "button" skinid = "withborder"/> <br/> This button calls a specific appearance Based on the skinid
</Div>
</Form>
</Body>
</Html>

Note: If the control on the page has its own style or appearance definition, the definition will overwrite the definition of the topic. Running result:

Theme Application
Theme = "theme name" is used in the page header to apply a topic at the page level. The application-level topic application method is as follows:
Configure the following section in the web. config file:
<Configuration>
<System. Web>
<Pages theme = "topic name"/>
</System. Web>
</Configuration>
Note: The theme settings in Web. config in a folder will overwrite the theme settings of the application.

Dynamic topic Loading
Because the theme attribute of the page object can only be set during or before the page's preinit event, we must modify the theme attribute value in the page_preinit event handler, to achieve the purpose of dynamically calling a topic.
The specific implementation method will not be described. You can refer to this article: Two implementation methods for dynamically loading themes in Asp.net 2.0

This is the only basic content for topics and styles. We will learn about the new features of Asp.net 2.0 in the next section.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.