Themes for WinForms | ComponentOne
In This Topic
    Create a Custom Control Theme
    In This Topic

    This QuickStart guide will walk you through creating a new theme for FlexGrid control based on a built-in theme template using the C1ThemeDesigner. The topic comprises of two steps:

    Step 1: Create a New Theme using ThemeDesigner

    In this step, you will create a new theme for FlexGrid control based on the Standard built-in theme template. For more information, see C1ThemeDesigner Application Overview.

    1. Open the C1ThemeDesigner from the C:\Program Files (x86)\ComponentOne\Apps\v4.0 folder.
    2. Click on Create New Theme from the Topic Bar. The New Theme dialog box appears.
    3. Enter a suitable name for the theme and select Office2016White from the ComponentOne theme dropdown.

      new-theme-dialog
    4. Click the right-pointing arrow beside C1FlexGrid in the Theme tree pane and, then select Styles.

      control-select
    5. Expand the Normal section and set the following properties.

      Property Value
      Background White
      Border > Color 212; 212; 212;
      Border > Style Flat
      Border > Width 1
      Font Calibri; 11.25

    6. Expand the Alternate section and set the following properties.

      Property Value
      Background White
      Font Calibri; 11.25

    7. Expand the Fixed section and set the following properties.

      Property Value
      Background White
      Border > Color 171; 171; 171
      Border > Direction Both
      Border > Style Flat
      Border > Width 1
      Font Calibri; 11.25
      ForeColor ControlText

    8. Expand the Highlight section and set the following properties.

      Property Value
      Background 198; 198; 198
      Border > Color 165; 165; 165
      Border > Direction Both
      Border > Style Flat
      Border > Width 1
      Font Calibri; 11.25
      ForeColor 68; 68; 68

    9. Expand the Focus section and set the following properties.

      Property Value
      Background White
      Border > Color 33; 115; 70
      Border > Direction Both
      Border > Style Double
      Border > Width 2

    10. Expand the SelectedColumnHeader and set the following properties.

      Property Value
      Background 225; 225; 225
      ForeColor Black

      Notice that the changes made in the properties appear in the Theme preview pane.

      custom-theme-preview
    11. Select File | Save As from the File menu to save the current theme in .c1themez file format.

    Step 2: Using Theme in Visual Studio

    To add and use the custom control theme in your application, perform the following steps.

    1. Open a form belonging to your FlexGrid application in the Visual Studio's forms designer.
    2. Add the C1ThemeController from the toolbox onto your form. Make sure to provide reference to C1.C1Zip.4.dll in your project.
    3. Click on the C1ThemeController component's Add theme... action item. This will show a file open dialog.
    4. Browse and select the theme file ( .c1themez) in your system and then click OK. The selected theme will be added to your C# or VB project as an embedded resource in a Themes folder, and will be available for selection from the themes list provided by the C1ThemeController.
    5. Run the application and observe the theme applied on your control.

      apply-theme