Export (0) Print
Expand All

Customizing the Appearance of ASP.NET Server Controls Using Styles

Visual Studio .NET 2003

Some server controls allow you to customize the appearance of individual elements by setting properties of style objects. For example, in the Calendar Web server control, you can set the appearance of the selected day by setting properties of the SelectedDayStyle object. Similarly, in the DataList Web server control, you can set the appearance of individual items and selected items using properties of the ItemStyle and SelectedItemStyle objects.

Setting Style Properties in the Web Forms Designer

The Web Forms Designer provides tools that make it easy to set style properties.

To set style properties in the Web Forms Designer

  1. In Design view, select the control that you want to set styles for.
  2. In the Properties window, do the following:
    • Expand the style object and then set properties for that object. For example, to set properties for the DataList control's ItemStyle object, expand ItemStyle in the Properties window.

      –or–

    • If the control supports property builders (such as the DataList and DataGrid controls), click Property Builder at the bottom of the Properties window to open the Properties dialog box. Choose the Format option, choose a style object in the Objects list, and then set its properties.

Setting Style Properties

You can set style properties directly in the .aspx file in two ways.

To set style properties in the .aspx file

  • Declare the style property using a convention of hyphenating the style object name and property:
    <asp:Calendar ID="MyCalendar" 
       SelectionMode="DayWeek"
       runat="server" 
       TitleStyle-Backcolor="#3366ff"
       TitleStyle-ForeColor="White" />
    

    -or-

  • Declare explicit elements in which you declare property elements of the appropriate data type:
    <asp:Calendar id="MyCalendar"
       SelectionMode="DayWeek"
       runat="server">
       <TitleStyle BackColor="#3366ff"
                   ForeColor="white" />
    </asp:Calendar>
    
    Note   If the Web Forms Designer cannot render a Web server control correctly, it displays a grey box with the text "Error Creating Control." This often means that the ASP.NET syntax of the control is incorrect — for example, if the
    runat="server"
    attribute is missing in a Web server control element, you will see this error. Point to the information icon (s9kstc51.vbwebcontrolserrorinfoicon(en-us,VS.71).gif); a ToolTip is displayed with details about the error.

Setting Style Properties Programmatically

You can set style properties of a control programmatically, which allows you to change the appearance of a control conditionally.

To set style properties programmatically

  • Use the following hierarchical convention for specifying the style object and property you want to set:
    Control.StyleObject.Property = value
    

    The following example shows how you might set the BackColor property for the DayStyle object of a Calendar control:

    ' Visual Basic
    Calendar1.DayStyle.BackColor = Color.Green
    
    // C#
    Calendar1.DayStyle.BackColor = Color.Green;
    

You can also create a separate Style object and copy or merge the values of its properties to one of the styles on a control. This is a powerful way to apply the same styles to several different list objects in your project. In effect, you can create a virtual stylesheet as a Style object and then apply it to a series of controls.

To create a Style object and apply it to controls

  1. Create an instance of the Style object and set its properties:
    ' Visual Basic
    Dim s As Style = New Style()
    s.BackColor = Color.Red
    
    // C#
    Style s = new Style();
    s.BackColor = Color.Red;
    
  2. Assign the Style object to a control using one of the following methods:
    • The CopyFrom method applies all settings from a Style object, including null ones.
    • The MergeWith method copies only the properties already set on the Style object, skipping Style properties that have not been set. Also, the MergeWith method will not overwrite any existing style elements.

    The following example shows how you might create a Style object, set one of its properties, and then apply it to two different control style objects, using each of the methods described:

    ' Visual Basic
    ' Apply all values in s, including nulls.
    Calendar1.SelectedDayStyle.CopyFrom(s)
    ' Apply only values in s that are null in HeaderStyle.
    DataGrid1.HeaderStyle.MergeWith(s)
    
    // C#
    // Apply all values in s, including nulls.
    Calendar1.SelectedDayStyle.CopyFrom(s);
    // Apply only values in s that are null in HeaderStyle.
    DataGrid1.HeaderStyle.MergeWith(s);
    

See Also

Programming Web Forms | ASP.NET Server Controls and CSS Styles | Web Server Controls Templates | ASP.NET Server Controls | ASP.NET Server Controls and Browser Capabilities

Show:
© 2014 Microsoft