# Customizing the Titles of OutPages

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

## Content



In this topic, you will learn how to customize the title area of a [C1OutBar](/componentone/docs/win/online-menus-toolbar/) control’s pages. You will create a [C1OutBar](/componentone/docs/win/online-menus-toolbar/) with three [C1OutPage](/componentone/docs/win/online-menus-toolbar/)s, set a few properties, and then add code to the project that will paint custom colors to each title.

Complete the following steps:

1.  Add a [C1OutBar](/componentone/docs/win/online-menus-toolbar/) control to your form.
2.  Add three [C1OutPage](/componentone/docs/win/online-menus-toolbar/) components to the [C1OutBar](/componentone/docs/win/online-menus-toolbar/) control. (See [Adding a C1OutPage to the C1OutBar](/componentone/docs/win/online-menus-toolbar/menusandtoolbarsforw2/outbartasks/addingac1outpagetoth).)
3.  Set the following properties:
    *   Set **c1OutBar1**’s [VisualStyle](/componentone/docs/win/online-menus-toolbar/) property to **Classic**. If you want, you can also choose **Custom**; the rest of the visual styles will not work for custom title drawing.
    *   Set **c1OutPage1**’s [OwnerDraw](/componentone/docs/win/online-menus-toolbar/) property to **True**.
    *   Set **c1OutPage2**’s [OwnerDraw](/componentone/docs/win/online-menus-toolbar/) property to **True**.
    *   Set **c1OutPage3**’s [OwnerDraw](/componentone/docs/win/online-menus-toolbar/) property to **True**.
4.  In the **Properties** window, select **c1OutBar1** from the drop-down list, click the **Events** button, and then double-click the [DrawPage](/componentone/docs/win/online-menus-toolbar/) event to add the [DrawPage](/componentone/docs/win/online-menus-toolbar/) event handler to the project.
5.  Import the following namespace to 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
    
6.  Add the following code to the [DrawPage](/componentone/docs/win/online-menus-toolbar/) event handler:
    
    DOC-DETAILS-TAG-OPEN
    
    DOC-SUMMARY-TAG-OPEN
    
    To write code in Visual Basic
    
    DOC-SUMMARY-TAG-CLOSE
    
    ```vbnet
    'e.page parameter determines the page
    If e.Page Is c1OutPage1 Then
       e.Graphics.FillRectangle(Brushes.Gold, e.Bounds)
       e.Graphics.DrawString("I", c1OutBar1.Font, Brushes.Black, New PointF(e.Bounds.Right - 40, e.Bounds.Top + 2))
    ElseIf e.Page Is c1OutPage2 Then
       e.Graphics.FillRectangle(Brushes.Silver, e.Bounds)
       e.Graphics.DrawString("II", c1OutBar1.Font, Brushes.White, New PointF(e.Bounds.Right - 40, e.Bounds.Top + 2))
    ElseIf e.Page Is c1OutPage3 Then
       e.Graphics.FillRectangle(Brushes.Plum, e.Bounds)
       e.Graphics.DrawString("III", c1OutBar1.Font, Brushes.Yellow, New PointF(e.Bounds.Right - 40, e.Bounds.Top + 2))
    End If
    ```
    
    DOC-DETAILS-TAG-CLOSE
    
    DOC-DETAILS-TAG-OPEN
    
    DOC-SUMMARY-TAG-OPEN
    
    To write code in C#
    
    DOC-SUMMARY-TAG-CLOSE
    
    ```csharp
    \\e.page determines the page
    If (e.Page == c1OutPage1) 
    {
        e.Graphics.FillRectangle(Brushes.Gold, e.Bounds);
        e.Graphics.DrawString("I", c1OutBar1.Font, Brushes.Black, new PointF(e.Bounds.Right - 40, e.Bounds.Top + 2));
    }
    else if (e.Page == c1OutPage2) 
    {
        e.Graphics.FillRectangle(Brushes.Silver, e.Bounds);
        e.Graphics.DrawString("II", c1OutBar1.Font, Brushes.White, new PointF(e.Bounds.Right -40, e.Bounds.Top + 2));
    }
    else if (e.Page == c1OutPage3) 
    {
        e.Graphics.FillRectangle(Brushes.Plum, e.Bounds);
        e.Graphics.DrawString("III", c1OutBar1.Font, Brushes.Yellow, new PointF(e.Bounds.Right - 40, e.Bounds.Top + 2));
    }
    ```
    
    DOC-DETAILS-TAG-CLOSE
    
7.  Press F5 to run the project and observe that the titles are customized. The final product appears as follows:<br />![Form](https://cdn.mescius.io/document-site-files/images/a27cb622-e6d9-4efc-a0b0-0c31245fd632/imagesext/image10_56.png)

## See Also

[Creating and Configuring the OutBar Control](/componentone/docs/win/online-menus-toolbar/menusandtoolbarsforw2/outbartasks/creatingandconfiguri)