Spread ASP.NET 17
Spread for ASP.NET 17 Product Documentation / Developer's Guide / Customizing the Appearance / Customizing the Appearance of Headers / Customizing the Style of Header Cells
In This Topic
    Customizing the Style of Header Cells
    In This Topic

    You can customize the style of header cells if you want to change the default appearance. Set the default style of the header cells by setting the DefaultStyle property in the RowHeader or ColumnHeader class. For more information on what can be set, refer to the StyleInfo object and the RowHeader and ColumnHeader objects in the Assembly Reference.

    You can also change some of the properties of the SheetSkin class that customize the appearance of header cells and apply the skin the sheet. These properties include FlatRowHeader and FlatColumnHeader. For more information creating and applying skins, refer to Applying a Skin to a Sheet and Creating a Skin for Sheets.

    When defining and applying a custom style to header cells, be sure to set the text alignment. The default renderer (without any style applied) centers the text; if you apply a style, and do not set the alignment, the text is left-aligned not centered.

    You can also set the grid lines around the header cells with the Border property.

    Using the Properties Window

    1. At design time, in the Properties window, select the FpSpread component.
    2. Select the NamedStyles Collection drop-down button.
    3. Add a style and set the properties.
    4. Click OK. Select the cells you want to apply the style to and set the StyleName property.
    5. Use the SheetView Collection Editor to set the DefaultStyleName for a column header, row header, column footer, or sheet corner.
    6. Click OK to close the editor.

    Using a Shortcut

    1. To change the style for the column header, define a style and then set the ColumnHeader DefaultStyle property.
    2. To change the settings for the row header, define a style and then set the RowHeader DefaultStyle property.

    Example

    This example code defines a style with new colors and applies it to the column header.

    C#
    Copy Code
    // Define a new style.
    FarPoint.Web.Spread.StyleInfo darkstyle = new FarPoint.Web.Spread.StyleInfo();
    darkstyle.BackColor = Color.Teal;
    darkstyle.ForeColor = Color.Yellow;
    darkstyle.Border = new FarPoint.Web.Spread.Border(Color.Crimson);
    // Apply the new style.
    FpSpread1.ActiveSheetView.ColumnHeader.DefaultStyle = darkstyle; 
    
    VB
    Copy Code
    ' Define a new style.
    Dim darkstyle As New FarPoint.Web.Spread.StyleInfo()
    darkstyle.BackColor = Color.Teal
    darkstyle.ForeColor = Color.Yellow
    darkstyle.Border = New FarPoint.Web.Spread.Border(Color.Crimson)
    ' Apply the new style.
    FpSpread1.ActiveSheetView.ColumnHeader.DefaultStyle = darkstyle 
    

    Using the Spread Designer

    1. Select the Settings menu.
    2. Select the Named Style icon under the Appearance Settings section.
    3. Use the new style icon to create a style name. Use the edit style icon to set properties for the style.
    4. Click OK. Close the NamedStyle dialog.
    5. In order to apply the style to a header, select the Header Editor icon under Other Settings. Use the Selected Header option to specify column header, row header, column footer, or sheet corner.
    6. Set the DefaultStyleName. Click Apply and OK.
    7. For cells, select the Cells, Columns, and Rows Editor.
    8. Select the cells you want to apply the style to.
    9. Set the StyleName.
    10. Choose Apply and OK to apply your changes to the component.
    11. Click Apply and Exit to close the Spread Designer.