Introduction

In the previous article part we have seen that how to create un-named that are simple skins. But now in this part we will be using Named Skins. Un-named skins are sometimes called Default skins. Default skins are applied to every instance of a TextBox that we have already discussed in previous part. We also have the option of creating a Named Skin. When we create a Named Skin, we can decide when we want to apply the Skin. For example, we might want required fields in a form to appear with a red border. In that case, we can create a Named Skin and apply the Skin to only particular TextBox controls. Here is the coded example given below.

TextBox.skin Code


<asp:TextBox
 SkinID="DashedTextBox"
 BorderStyle="Dashed"
 BorderWidth="5px"
 Runat="Server" />

<asp:TextBox
 BorderStyle="Double"
 BorderWidth="5px"
 Runat="Server" />

The first TextBox in above example has Named Skin. Notice that it includes a SkinID property. The SkinID property represents the name of the Named Skin. We use the value of this property when applying the Skin in a page. Above file also includes a Default Skin for a TextBox control. The Default Skin does not include a SkinID property. If a TextBox control in a page is not associated with a Named Skin, then the Default Skin is applied to the TextBox.

A Theme can contain only one Default Skin for each type of control. However, a Theme can contain as many Named Skins as you please. Each Named Skin must have a unique name.

The page given above contains two TextBox controls. The first TextBox control includes a SkinID attribute. This attribute causes the Named Skin to be applied to the control. The second TextBox, on the other hand, does not include a SkinID property. The Default Skin is applied to the second TextBox control.

Default.aspx Code


 <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" Theme="Simple2" %>

<!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></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>

When we open the above page, the first TextBox appears with a dashed border and the second TextBox appears with a double border as given below in figure.

1.JPG

That's pretty cool and most useful.

Note: Continue in next part.

HAVE A GREAT CODING!