# Applying Themes

This topic covers information about applying themes.

## Content

The overall appearance of FlexPivot controls can also be customized by applying themes through C1ThemeController. Developers can choose from a collection of predefined built-in themes to customize the control's overall appearance.

To apply built-in themes, perform the following steps.

1. Create a new Windows Forms Application project in Visual Studio.
2. Drag-and-drop the [FlexPivotPage](/componentone/docs/win/online-flexpivot/concepts/FlexPivotArchitecture/flexpivotpage) control onto the form from the Toolbox.
3. Add **C1.Win.C1Themes.4** reference to your project to access built-in themes through C1ThemeController.
4. Click once on the smart tag icon ( ![SmartTag](https://cdn.mescius.io/document-site-files/images/78f24d1c-0e57-452f-87a1-d318e186587a/images/smarttag.png) ). The FlexPivotPageTasks smart panel appears as illustrated in the image below.
<br>
    ![Smarttag_pivotpage](https://cdn.mescius.io/document-site-files/images/78f24d1c-0e57-452f-87a1-d318e186587a/images/smarttag_pivotpage.png)
5. Select **Undock in Parent Container** option to undock the FlexPivotPage control in the parent container i.e. Form.
6. Navigate to the toolbox and add a standard label control to the form.
7. Set some of the properties of the label control from the Properties Window as follows:
    * AutoSize = True
    * TabIndex = 0
    * Text = "Apply Theme"
8. Add a standard Combobox control from the Toolbox and set some its properties as follows:
    * Name = "cbTheme"
    * FormattingEnabled = True
    * DropDownStyle = DropDownList
    * TabIndex = 1
    * Text = "Apply Theme"

    The Design View appears similar to the following image:![FlexPivot_ApplyThemeDesignView](https://cdn.mescius.io/document-site-files/images/78f24d1c-0e57-452f-87a1-d318e186587a/images/flexpivot_applythemedesignview.png)
9. Switch to the code view add the following Import statement.

    ```vbnet
    Imports C1.Win.C1Themes
    Imports System.Data.OleDb
    ```

    ```csharp
    using C1.Win.C1Themes;
    using System.Data.OleDb;
    ```
10. Add the following code to set up a connection string with the **C1NWind.mdb** database file.

```vbnet
Private Shared Function GetConnectionString() As String
    Dim path As String = Environment.GetFolderPath(Environment.SpecialFolder.Personal) + "\ComponentOne Samples\Common"
    Dim conn As String = "provider=microsoft.jet.oledb.4.0;data source={0}\c1nwind.mdb;"
    Return String.Format(conn, path)
End Function
```

```csharp
// get standard nwind mdb connection string
static string GetConnectionString()
{
    string path = Environment.GetFolderPath(Environment.SpecialFolder.Personal) + @"\ComponentOne Samples\Common";
    string conn = @"provider=microsoft.jet.oledb.4.0;data source={0}\c1nwind.mdb;";
    return string.Format(conn, path);
}
```

11. Add the following code in the Form's constructor to fetch data from the **C1NWind.mdb** database file and create a view.

```vbnet
' get data
Dim da = New OleDbDataAdapter("Select * from Invoices", GetConnectionString())
Dim dt = New DataTable("NorthWind Sales Data")
da.Fill(dt)
' assign data to FlexPivotPage control
FlexPivotPage1.DataSource = dt
Dim fp = FlexPivotPage1.FlexPivotEngine
fp.ValueFields.MaxItems = 3
fp.BeginUpdate()
fp.RowFields.Add("Country")
fp.ColumnFields.Add("Product")
fp.ValueFields.Add("Sales")
fp.EndUpdate()
```

```csharp
// get data
var da = new OleDbDataAdapter("Select * from Invoices", GetConnectionString());
var dt = new DataTable("NorthWind Sales Data");
da.Fill(dt);
// assign data to FlexPivotPage control
FlexPivotPage1.DataSource = dt;
var fp = FlexPivotPage1.FlexPivotEngine;
fp.ValueFields.MaxItems = 3;
fp.BeginUpdate();
fp.RowFields.Add("Country");
fp.ColumnFields.Add("Product");
fp.ValueFields.Add("Sales");
fp.EndUpdate();
```

12. Add the following code in the Form's constructor to subscribe **SelectedIndexChanged** event for Combobox control, and implement logic for applying themes to the Form on selecting built-in themes from the dropdown list.

```vbnet
For Each theme As String In C1ThemeController.GetThemes()
    cbTheme.Items.Add(theme)
Next
AddHandler cbTheme.SelectedIndexChanged, AddressOf cbTheme_SelectedIndexChanged
```

```csharp
cbTheme.SelectedIndexChanged += cbTheme_SelectedIndexChanged;
foreach (string theme in C1ThemeController.GetThemes())
    cbTheme.Items.Add(theme);
```

13. Add the following code to the event handler created for **cbTheme.SelectedIndexChanged** event.

```vbnet
Private Sub cbTheme_SelectedIndexChanged(sender As Object, e As EventArgs)
    Dim theme As C1Theme = C1ThemeController.GetThemeByName(cbTheme.Text, False)
    If theme IsNot Nothing Then
        C1ThemeController.ApplyThemeToObject(FlexPivotPage1, theme)
    End If
End Sub
```

```csharp
private void cbTheme_SelectedIndexChanged(object sender, EventArgs e)
{
    C1Theme theme = C1ThemeController.GetThemeByName(cbTheme.Text, false);
    if (theme != null)
        C1ThemeController.ApplyThemeToObject(FlexPivotPage1, theme);
}
```

14. Press **F5** to run the application and select a predefined theme.

![applying_themes](https://cdn.mescius.io/document-site-files/images/78f24d1c-0e57-452f-87a1-d318e186587a/images/applying_themes.gif)