Shulou(Shulou.com)06/02 Report--

This article introduces how to analyze the application of ASP.NET 2.0 Themes features. The content is very detailed. Interested friends can use it for reference. I hope it will be helpful to you.

We will show readers another important feature of Asp.net 2.0-Themes (theme). Our sample code still uses the personal website starter Kit provided in Visual Studio 2005.

Themes (theme)

Basic Concepts of 0.1 ASP.NET 2.0Themes

Friends who have used the forum know that they can change the appearance of the forum by selecting the theme of the forum, so as to achieve different users to customize their favorite appearance. In previous versions of Asp.net, or in other Web programming languages such as Asp, too much code was required to implement this function. In Asp.net 2.0, you only need a few simple lines of code or a few attribute settings to achieve this effect. This is the ASP.NET 2.0 Themes feature!

The Themes file is placed in the App_Themes directory under the asp.net site, separate from your program code, so you don't have to worry about spending too much time communicating between programmers and artists. This is also the spirit of. Net Code behind!

We can see that under the App_Themes folder in the sample code of Microsoft, there are two themes, one is White and the other is Black. We are also familiar with .CSS and .skin files under these two Themes. The .skin file is a newly added file that defines the style of the control in. Net 2.0.

Readers can understand it this way: .CSS defines html control styles, while .skin defines server-side control styles.

Let's look at how to define the Default.Skin file under White.

1 < asp:imagebuttonrunat= "server" Imageurl= "Images/button-login.gif" skinid= "login" / > 2 3 < asp:imagerunat= "server" Imageurl= "Images/button-create.gif" skinid= "create" / > 4 < asp:imagerunat= "server" ImageUrl= "Images/button-download.gif" skinid= "download" / > 5 < asp:imagerunat= "Server" ImageUrl= "images/button-dwn_res.gif" skinid= "dwn_res" / > 6 7 < asp:imagerunat= "Server" ImageUrl= " Images/button-gallery.jpg "skinid=" gallery "/ > 8 < asp:imagebuttonrunat=" server "imageurl=" Images/button-tog8.jpg "skinid=" tog8 "/ > 9 < asp:imagebuttonrunat=" server "imageurl=" Images/button-tog24.jpg "skinid=" tog24 "/ > 10 11 < asp:ImageButtonrunat=" server "ImageUrl=" Images/button-first.jpg "skinid=" first "/ > 12 < asp:ImageButtonrunat=" server "ImageUrl=" images/button-prev.jpg "skinid=" prev " 13 < asp:ImageButtonrunat= "server" ImageUrl= "images/button-next.jpg" skinid= "next" / > 14 < asp:ImageButtonrunat= "server" ImageUrl= "Images/button-last.jpg" skinid= "last" / > 15 16 < asp:imagerunat= "Server" ImageUrl= "images/album-l1.gif" skinid= "b01" / > 17 < asp:imagerunat= "Server" ImageUrl= "images/album-mtl.gif" skinid= "b02" / > 18 < asp:imagerunat= "Server" ImageUrl= "images/album -mtr.gif "skinid=" b03 "/ > 19 < asp:imagerunat=" Server "ImageUrl=" images/album-r1.gif "skinid=" b04 "/ > 20 < asp:imagerunat=" Server "ImageUrl=" images/album-l2.gif "skinid=" b05 "/ > 21 < asp:imagerunat=" Server "ImageUrl=" images/album-r2.gif "skinid=" b06 "/ > 22 < asp:imagerunat=" Server "ImageUrl=" images/album-l3.gif "skinid=" b07 "/ > 23 < asp: Imagerunat= "Server" ImageUrl= "images/album-r3.gif" skinid= "b08" / > 24 < asp:imagerunat= "Server" ImageUrl= "images/album-l4.gif" skinid= "B09" / > 25 < asp:imagerunat= "Server" ImageUrl= "images/album-mbl.gif" skinid= "b10" / > 26 < asp:imagerunat= "Server" ImageUrl= "images/album-mbr.gif" skinid= "b11" / > 27 < asp:imagerunat= "Server" ImageUrl= "images/album-r4.gif" skinid= "b12" / > 28 29 30 < asp:ImageButtonRunat= "server" ImageUrl= "skinid=" add "/ > 31 32 < asp:gridviewrunat=" server "backcolor=" # 606060 "> 33 < AlternatingRowStylebackcolor=" # 656565 "/ > 34 < / asp:gridview > 35 < asp:imagerunat=" Server "ImageUrl=" Images/button-edit.gif "skinid=" edit "/ > 36 < asp:ImageButtonRunat=" server "ImageUrl=" Images/button-rename.gif "SkinID=" rename "/ > 37 < asp:ImageButtonRunat= "server" ImageUrl= "Images/button-delete.gif" SkinID= "delete" / > 38 < asp:ImageButtonRunat= "server" ImageUrl= "Images/button-save.gif" SkinID= "save" / > 39 < asp:ImageButtonRunat= "server" ImageUrl= "Images/button-cancel.gif" SkinID= "cancel" / >

The properties in the above code have the same meaning as the properties of the control, so we won't cover them one by one. What I want to mention here is "SkinID". If you want to apply which Skin, you just need to set the SkinID of the control to have the same name as the SkinID in the .skin file.

0.2 how to create a .skin file in ASP.NET 2.0 Themes

When readers create their own master page, just click Project, right-select "add New item", select the appearance file, and you can add a .skin file. If there is no App_Themes file in your program file, when the reader adds the file, the system will automatically add this directory and put the new files in this directory.

Create a .skin file

0.3 use Themes

How to use Themes is the most concerned issue for readers. Let's show you how to apply the Themes you have created in the program. There are two ways to apply Themes in the foreground.

1. Set the name of the Themes that the reader needs to apply through the Themes attribute in the Page or Master instruction (in fact, you can also achieve the effect by setting the StyleSheetTheme attribute, and we'll talk about the difference between them later).

2. The effect can also be achieved through the configuration in setting Web.Config. (the sample code is in this way)

They are generated in the following order:

1. Settings in Web.config

2. The settings in the instruction (will override the settings in Web.config)

Let's first look at how to set it in the Page or Master instruction, which is actually very simple:

<% @ Page Language= "C#" MasterPageFile= "~ / Default.master" Title= "here is your name | Home page" CodeFile= "Default.aspx.cs" Inherits= "Default_aspx" Theme= "Black"% >

The page will then apply the settings below Black.

< pages Theme= "black" / >

The above is to set Themes in Web.config. But this sentence must be placed in the configuration section. However, when we use it, we find that there is no way to change the style of the control. How did this happen? How to set up to achieve both the use of Themes and some customization? This is what we mentioned earlier, if you use StyleSheetTheme to set up Themes, readers can customize some of their own styles.

What we talked about earlier is how to apply Themes at the configuration level. At the code level, it's actually very simple:

1this.Page.Theme = ""; 2this.Page.StyleSheetTheme = ""

Let's look at the order in which the style property is applied to the control:

1. The style referenced by StyleSheetTheme

2. Control properties set by the code (will override StyleSheetTheme)

3. The style referenced by Theme (the first two will be overwritten)

We can see how easy it is to apply Themes, and there is no need for complex communication between programmers and artists. Here are the different effects produced by our sample code using White and Black:

The effect of using White

The effect of using Black

We simply changed the configuration of Thems, as if we got two different sites.

On how to analyze the application of ASP.NET 2.0 Themes features to share here, I hope that the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.