Applying Formatting to Controls


In the following sections, you learn how to make more attractive Web forms. First, you look at an overview of the formatting properties common to all Web controls; they are the formatting properties of the base control class. Next, you learn how to apply Cascading Style Sheet styles and classes to Web controls.

Base Web Control Properties

All Web controls inherit from the base Web control class (the WebControl class). The base Web control class contains a number of properties that you can use to modify the appearance of any Web control. These properties are listed in Table 2.13.

Table 2.13. Base Web Control Formatting Properties

Properties

Description

AccessKey

Indicates a keyboard shortcut for selecting a control. Use a single letter or number when holding down the Alt key.

BackColor

Indicates the color that appears behind the text of a control. This value can be specified by name (red, blue) or by RGB value (#FF0000, #0000FF).

BorderStyle

Sets the appearance of the border. Possible values are Dashed , Dotted , Double , Groove , Inset , None , NotSet , Outset , Ridge , and Solid .

BorderWidth

Indicates the thickness of a control's border in pixels.

Font-Bold

Displays text in bold.

Font-Italic

Displays text in italic.

Font-Name

Indicates the name of the typeface for formatting text.

Font- Names

Specifies a list of names of typefaces for formatting text. If the first typeface is not available, the second typeface is applied, and so on.

Font-Overline

Draws a line above the text.

Font-Size

Sets the size of a font in points or pixels.

Font-Strikeout

Draws a line through the text.

Font-Underline

Draws a line under the text.

ForeColor

Specifies the text color.

Height

Sets the height of the control in pixels.

TabIndex

Indicates the tab order of the controls (works only with Internet Explorer 4.0 and higher).

ToolTip

Sets the text that appears when the mouse pointer hovers over the control.

Width

Sets the width of the control in pixels or percentage.

Not all these properties work with all browsers. Some of them depend on Cascading Style Sheets, which not all browsers support. Furthermore, some of these properties depend on features specific to Microsoft Internet Explorer.

The page in Listing 2.52 demonstrates how you can use several of these properties to format controls (see Figure 2.7).

Listing 2.52 BaseWebControl.aspx
 <html> <head><title>BaseWebControl.aspx</title></head> <body> <form Runat="Server"> Field1: <br> <asp:TextBox   BackColor="yellow"   ForeColor="Blue"   AccessKey="1"   BorderWidth="4"   BorderStyle="Dashed"   Runat="Server" /> <p> Field 2 <br> <asp:TextBox   BackColor="yellow"   ForeColor="Blue"   AccessKey="2"   ToolTip="Enter some data"   Runat="Server" /> <p> Field 3 <br> <asp:TextBox   TextMode="MultiLine"   BackColor="yellow"   ForeColor="Blue"   Font-Name="Script"   Font-Size="24pt"   Width="100%"   Height="100px"   AccessKey="3"   Runat="Server" /> <p> <asp:Button   Text="Click Here!"   BackColor="LightGreen"   ForeColor="Red"   Font-Name="System"   Font-Bold="True"   Font-Size="10pt"   BorderStyle="Double"   Width="100"   Height="100"   Runat="Server" /> </form> </body> </html> 

The C# version of this code can be found on the CD-ROM.

Figure 2.7. Using base Web control properties.

graphics/02fig07.jpg

The page in Listing 2.52 contains three TextBox controls. Each text box is assigned an access key so that you can navigate directly to it. For example, to move to the third text box, you would press Alt+3.

Each TextBox control is assigned a yellow background and blue forecolor. When you type text into the text box, the text appears in a blue font.

The first text box is assigned a dashed border. The BorderWidth property is assigned the value 4 so that the border is easier to see.

The second text box is provided with a ToolTip. If you hover your mouse pointer over the text box, the text "Enter some data" appears in a bubble.

The Width property of the third text box has the value 100% . When the text box is rendered, it fills the width of the screen.

Finally, several of the formatting properties of the Button control are modified in Listing 2.52. For example, the button is assigned a double border.

You also can modify the properties of a Web control within the code of the page. For example, the page in Listing 2.53 enables you to pick both the background color and font size of the text that appears in the text box.

Listing 2.53 BaseWebControlDynamic.aspx
 <%@ Import Namespace="System.Drawing" %> <Script Runat="Server"> Sub dropBackColor_SelectedIndexChanged( s As Object, e As EventArgs )   Dim strBackColor As Color   strBackColor = Color.FromName( dropBackColor.SelectedItem.Text )   txtTextBox.BackColor = strBackColor End Sub Sub dropFontSize_SelectedIndexChanged( s As Object, e As EventArgs )   txtTextBox.Font.Size = FontUnit.Parse( dropFontSize.SelectedItem.Text ) End Sub </Script> <html> <head><title>BaseWebControlDynamic.aspx</title></head> <body> <form Runat="Server"> <asp:TextBox   ID="txtTextBox"   TextMode="MultiLine"   Text="Here is some text"   Runat="Server" /> <p> BackColor: <asp:DropDownList   ID="dropBackColor"   AutoPostBack="True"   OnSelectedIndexChanged="dropBackColor_SelectedIndexChanged"   Runat="Server">   <asp:ListItem Text="Red" />   <asp:ListItem Text="Blue" />   <asp:ListItem Text="Green" /> </asp:DropDownList> <p> Font Size: <asp:DropDownList   ID="dropFontSize"   AutoPostBack="True"   OnSelectedIndexChanged="dropFontSize_SelectedIndexChanged"   Runat="Server">   <asp:ListItem Text="12pt" />   <asp:ListItem Text="14pt" />   <asp:ListItem Text="24pt" /> </asp:DropDownList> </form> </body> </html> 

The C# version of this code can be found on the CD-ROM.

Applying Styles to Web Controls

The Cascading Style Sheets standard contains many more attributes than can be captured by the limited number of properties discussed in the previous sections. Fortunately, you can use any Cascading Style Sheet attribute with a Web control in the same way as you would use the attribute with a normal HTML tag.

For example, you can use the Text-Transform attribute to automatically capitalize the first letter of every word in a string of text. You can use this attribute with the Style property of the Label Web control like this:

 
 <asp:Label   ID="lblLabel"   Style="Text-Transform:Capitalize"   Text="this is some text"   Runat="Server"/> 

When this Label control is rendered, a <span> tag that includes the Style attribute is generated. The following tag is displayed:

 
 <span id="lblLabel" style="Text-Transform:Capitalize">this is some text</span> 

You also can use the CssClass property to assign a Cascading Style Sheet class to a Web control. The page in Listing 2.54 demonstrates how to use the CssClass property.

Listing 2.54 Style.aspx
 <html> <head> <Style> .myClass {   text-align: justify;   font: 14pt Script; } </Style> <title>Style.aspx</title> </head> <body> <form Runat="Server"> <asp:Label   ID="lblLabel"   Width="10"   cssClass="myClass"   Text="this is some text"   Runat="Server"/> </form> </body> </html> 

The C# version of this code can be found on the CD-ROM.

Finally, you can modify either the Style or CssClass properties within the code of an ASP.NET page. For example, the page in Listing 2.55 contains three link buttons . Clicking each link button applies a different style to the Label control. Different styles are applied by modifying the control's Style property (see Figure 2.8).

Listing 2.55 StyleDynamic.aspx
 <Script Runat="Server"> Sub lbtnCapitalize_Click( s As Object, e As EventArgs )   lblLabel.Style( "text-transform" ) = "capitalize" End Sub Sub lbtnUppercase_Click( s As Object, e As EventArgs )   lblLabel.Style( "text-transform" ) = "uppercase" End Sub Sub lbtnLowercase_Click( s As Object, e As EventArgs )   lblLabel.Style( "text-transform" ) = "lowercase" End Sub </Script> <html> <head><title>StyleDynamic.aspx</title></head> <body> <form Runat="Server"> <asp:Label   ID="lblLabel"   Text="This is some text!"   Runat="Server" /> <hr> <asp:LinkButton   id="lbtnCapitalize"   Text="Capitalize!"   OnClick="lbtnCapitalize_Click"   Runat="Server" /> <asp:LinkButton   id="lbtnUppercase"   Text="Uppercase!"   OnClick="lbtnUppercase_Click"   Runat="Server" /> <asp:LinkButton   id="lbtnLowercase"   Text="Lowercase!"   OnClick="lbtnLowercase_Click"   Runat="Server" /> </form> </body> </html> 

The C# version of this code can be found on the CD-ROM.

Figure 2.8. Applying different Style classes.

graphics/02fig08.jpg

In the same manner in which you can modify the Style property programmatically, you can modify the CssClass property programmatically. The page in Listing 2.56 demonstrates how you can programmatically modify the Cascading Style Sheet class assigned to a control. The page contains two classes named myClass1 and myClass2 . When the first LinkButton control is clicked, the myClass1 class is assigned to the Label control. When the second LinkButton control is clicked, the myClass2 class is assigned to the Label control.

Listing 2.56 CssClassDynamic.aspx
 <Script Runat="Server"> Sub lbtnScript_Click( s As Object, e As EventArgs )   myLabel.CssClass = "myClass1" End Sub Sub lbtnVerdana_Click( s As Object, e As EventArgs )   myLabel.CssClass = "myClass2" End Sub </Script> <html> <head> <STYLE> .myClass1 {   font: 18pt script;   color: blue; } .myClass2 {   font: 24pt verdana;   color: red; } </STYLE> <title>CssClassDynamic.aspx</title> </head> <body> <form Runat="Server"> <asp:Label   ID="myLabel"   Text="Here is some text!"   Runat="Server" /> <hr> <asp:LinkButton   id="lbtnScript"   Text="Show Script!"   OnClick="lbtnScript_Click"   Runat="Server" /> <asp:LinkButton   id="lbtnVerdana"   Text="Show Verdana!"   OnClick="lbtnVerdana_Click"   Runat="Server" /> </form> </body> </html> 

The C# version of this code can be found on the CD-ROM.

The Style Class

In the previous section, you learned how to apply client-side style sheets to controls. The ASP.NET Framework also supports server-side styles through the Style class.

If you want to apply the same formatting properties to several controls, you can explicitly create an instance of the Style class and apply it to multiple controls. For example, in Listing 2.57, the same instance of the Style class is applied to three TextBox controls.

Listing 2.57 StyleClass.aspx
 <%@ Import Namespace="System.Drawing" %> <Script Runat="Server"> Sub Page_Load( s As Object, e As EventArgs )   Dim myStyle As New Style   myStyle.BackColor = Color.Yellow   myStyle.ForeColor = Color.Green   myStyle.BorderStyle = BorderStyle.Dashed   myStyle.BorderWidth = New Unit(4)   txtTextBox1.ApplyStyle( myStyle )   txtTextBox2.ApplyStyle( myStyle )   txtTextBox3.MergeStyle( myStyle ) End Sub </Script> <html> <head><title>StyleClass.aspx</title></head> <body> <form Runat="Server"> <asp:TextBox   id="txtTextBox1"   BackColor="red"   Text="Here is some text!"   Runat="Server"/> <p> <asp:TextBox   id="txtTextBox2"   BackColor="red"   Text="Here is some text!"   Runat="Server"/> <p> <asp:TextBox   id="txtTextBox3"   BackColor="red"   Text="Here is some text!"   Runat="Server"/> </form> </body> </html> 

The C# version of this code can be found on the CD-ROM.

In Listing 2.57, the Style class is applied to the first two TextBox controls with the ApplyStyle() method. This method overrides any existing properties of the controls. In this example, the ApplyStyle() method overrides the red back color of the TextBox controls and assigns the new back color yellow.

The MergeStyle() method applies the style to the third test box. This method does not override existing properties. Therefore, the third text box continues to appear with a red back color (see Figure 2.9).

Figure 2.9. Using the Style class.

graphics/02fig09.jpg



ASP.NET Unleashed
ASP.NET 4 Unleashed
ISBN: 0672331128
EAN: 2147483647
Year: 2003
Pages: 263

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net