To add Themes to your web solution you will need to right
click on you web solution, choose Add ASP.NET Folder
and select Theme. In this case I am creating a theme
named Red.
Figure 1
The next step is to add the actual skin file to the theme we
previously created. To accomplish this, right click on the theme named Red and
select Add New Item.
Figure 2
As you can see in listing 2 there are various file types you
can choose from, in this case select Skin File and provide the name red.skin. Once
you accomplish this step your new skin provides the following example.
Listing 1
<%--
Default skin template. The following skins are provided as examples only.
1. Named control skin. The SkinId should be uniquely defined because
duplicate SkinId's per control type are not allowed in the same theme.
<asp:GridView runat="server" SkinId="gridviewSkin" BackColor="White" >
<AlternatingRowStyle BackColor="Blue" />
</asp:GridView>
2. Default skin. The SkinId is not defined. Only one default
control skin per control type is allowed in the same theme.
--%>
At this point you are ready to begin creating the skin for
the various controls that you determined should have the ability to use a skin.
As an example, create a skin for a button control. In order to accomplish
this you need to add the following to the red.skin file.
Listing 2
<asp:Button runat="server" SkinId="Red" BackColor="red" ForeColor="black" />
Now you are ready to skin your button control back on your WebForm.
However, before you can do this you must first set the WebForm to use this
theme. This is accomplished by adding the theme attribute to the ASP.NET
source code.
Listing 3
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"
Inherits="_Default" Theme="Red" %>
Finally, set the SkinId attribute of the button control.
Listing 4
<asp:Button ID="Button1" runat="server" Text="Red Skin Button" SkinID="Red" />
At this point you are ready to execute your application and
view your work. If all has worked as expected, you should see your button
control skinned.
Figure 3
