# Changing the Visual Style

Get started with Menus and Toolbars for WinForms. Create versatile menus and docking/floating toolbars. See more in documentation here.

## Content



The [C1TopicBar](/componentone/docs/win/online-menus-toolbar/) control carries several visual styles that can be added to the control by setting the [VisualStyle](/componentone/docs/win/online-menus-toolbar/) property. This topic illustrates how change the visual style using the smart tag, the Properties window, and code.

### Using the Smart Tag

Complete the following steps:

1.  Navigate to the Toolbox and double-click the [C1TopicBar](/componentone/docs/win/online-menus-toolbar/) icon to add the control to your page.
2.  Click [C1TopicBar](/componentone/docs/win/online-menus-toolbar/)'s smart tag (![Topic Bar](https://cdn.mescius.io/document-site-files/images/a27cb622-e6d9-4efc-a0b0-0c31245fd632/imagesext/image10_47.png)) to open the **C1TopicBar Tasks** menu.
3.  Click the **VisualStyle** drop-down arrow and select a style from the list. For this example, select **Office2003Olive**.

The selected visual style is applied to the control.

### Using the Properties Window

Complete the following steps:

1.  Navigate to the Toolbox and double-click the [C1TopicBar](/componentone/docs/win/online-menus-toolbar/) icon to add the control to your page.
2.  Right-click the [C1TopicBar](/componentone/docs/win/online-menus-toolbar/) control to open its context menu and then select **Properties**. The Properties window opens with the [C1TopicBar](/componentone/docs/win/online-menus-toolbar/) control's properties in focus.
3.  Locate the [VisualStyle](/componentone/docs/win/online-menus-toolbar/) property, click its drop-down arrow, and select a visual style. For this example, select **Office2003Olive**.

The selected visual style is applied to the control.

### Using Code

Complete the following steps:

1.  Navigate to the Toolbox and double-click the [C1TopicBar](/componentone/docs/win/online-menus-toolbar/) icon.
2.  Double-click the empty portion of the form to open Code view. Notice that a **Form\_Load** event handler has been added to Code view.
3.  Import the following namespace into the project:
    
    DOC-DETAILS-TAG-OPEN
    
    DOC-SUMMARY-TAG-OPEN
    
    To write code in Visual Basic
    
    DOC-SUMMARY-TAG-CLOSE
    
    ```vbnet
    Imports C1.Win.C1Command
    ```
    
    DOC-DETAILS-TAG-CLOSE
    
    DOC-DETAILS-TAG-OPEN
    
    DOC-SUMMARY-TAG-OPEN
    
    To write code in C#
    
    DOC-SUMMARY-TAG-CLOSE
    
    ```csharp
    using C1.Win.C1Command;
    ```
    
    DOC-DETAILS-TAG-CLOSE
    
4.  To set the visual style, add the following code, which sets the visual style to **Office2003Olive**, to the **Form\_Load** event:
    
    DOC-DETAILS-TAG-OPEN
    
    DOC-SUMMARY-TAG-OPEN
    
    To write code in Visual Basic
    
    DOC-SUMMARY-TAG-CLOSE
    
    ```vbnet
    c1TopicBar1.VisualStyle = VisualStyle.Office2003Olive
    ```
    
    DOC-DETAILS-TAG-CLOSE
    
    DOC-DETAILS-TAG-OPEN
    
    DOC-SUMMARY-TAG-OPEN
    
    To write code in C#
    
    DOC-SUMMARY-TAG-CLOSE
    
    ```csharp
    c1TopicBar1.VisualStyle = VisualStyle.Office2003Olive;
    ```
    
    DOC-DETAILS-TAG-CLOSE
    

### This topic illustrates the following:

In this topic, you learned how to change the visual style using three different methods. The result of this topic will look as follows:

<br />![](https://cdn.mescius.io/document-site-files/images/a27cb622-e6d9-4efc-a0b0-0c31245fd632/imagesext/image10_79.png)

## See Also

[Customizing the Expand/Collapse Behaviors](/componentone/docs/win/online-menus-toolbar/menusandtoolbarsforw2/topicbartasks/customizingtheexpand)