# Getting Started with WinForms RibbonBar

This tutorial will help you to quickly get started using the control.

## Adding Telerik Assemblies Using NuGet

To use `RadRibbonBar` when working with NuGet packages, install the `Telerik.UI.for.WinForms.AllControls` package. The [package target framework version may vary](https://www.telerik.com/products/winforms/documentation/visual-studio-integration/available-nugets).

Read more about NuGet installation in the [Install using NuGet Packages](https://www.telerik.com/products/winforms/documentation/installation-and-upgrades/install-using-nuget) article.

> tip With the 2025 Q1 release, the Telerik UI for WinForms has a new licensing mechanism. You can learn more about it [here](https://www.telerik.com/products/winforms/documentation/licensing/license-key).

## Adding Assembly References Manually

When dragging and dropping a control from the Visual Studio (VS) Toolbox onto the Form Designer, VS automatically adds the necessary assemblies. However, if you're adding the control programmatically, you'll need to manually reference the following assemblies:

* **Telerik.Licensing.Runtime**
* **Telerik.WinControls**
* **Telerik.WinControls.UI**
* **TelerikCommon**

The Telerik UI for WinForms assemblies can be install by using one of the available [installation approaches](https://www.telerik.com/products/winforms/documentation/installation-and-upgrades/installing-on-your-computer).

## Defining the RadRibbonBar

This section will help you in creating your first Telerik **RadRibbonBar** with some basic functionality (test formatting).

## Adding a Ribbon Bar

1. Add a new **RadRibbonForm** to your project or create one by changing the base class of a standard **Form** to **RadRibbonForm**.

2. The **RadRibbonForm**'s designer automatically adds a **RadRibbonBar** control on the form as shown below:

   ![WinForms RadRibbonBar Design Time](https://www.telerik.com/products/winforms/documentation/assets/0075b97919df3d4ebb16fc86b5c798fd/ribbonbar-getting-started001.png)

> note By default, **RadRibbonBar** shows minimize, mazimize and close buttons in its caption element. The **HelpButton** is not shown. It is necessary to set the RibbonBarElement.RibbonCaption.HelpButton.**Visibility** property to *ElementVisibility.Visible* in order to be displayed. The form's **HelpButtonClicked** event is fired when Help button in the ribbon's caption element is clicked. It can be canceled. However, if it is not canceled, the **HelpRequested** event will be fired when the Help cursor is clicked on any Control.
>
> ![WinForms RadRibbonBar Default Look](https://www.telerik.com/products/winforms/documentation/assets/cdd467794d29c833972501593741dd1d/ribbonbar-getting-started013.png)

> important Copying/Cutting and Pasting of [tabs](https://www.telerik.com/products/winforms/documentation/controls/ribbonbar/getting-started#adding-tabs), [groups](https://www.telerik.com/products/winforms/documentation/controls/ribbonbar/getting-started#adding-groups), and [elements](https://www.telerik.com/products/winforms/documentation/controls/ribbonbar/getting-started#adding-elements) are not supported in the Visual Studio designer.

## Adding Tabs

1. Click **Add New Tab...**

2. Type **Edit** and press **Enter**. A new **Add New Tab...** button will be created to the right of the **Edit** tab:

   ![WinForms RadRibbonBar Add Tab](https://www.telerik.com/products/winforms/documentation/assets/b48cc6a6a677c9180f2489f07a420ba0/ribbonbar-getting-started002.png)

3. Add two more **TabItems** with captions **Format** and **Insert:**

   ![WinForms RadRibbonBar Adding More Tabs](https://www.telerik.com/products/winforms/documentation/assets/ac2b517f8b5056867f9ba586635d22d1/ribbonbar-getting-started003.png)

## Adding Groups

1. Click the **Format** tab.

2. Click the **Add New Group...** button to create a new **RadRibbonBarGroup**. You will be prompted to enter the **Text** of the new group. Type *Font* and press Enter to confirm the typed **Text**. Do the whole operation again for another group, but set its **Text** to *Paragraph*. These groups will become containers that you will use to group controls by the type of functionality they have in common:<br>![WinForms RadRibbonBar Adding Group](https://www.telerik.com/products/winforms/documentation/assets/f3ac346595b4abaa0d7ae7d8359d394f/ribbonbar-getting-started004.png)<br>![WinForms RadRibbonBar Add Nested Group](https://www.telerik.com/products/winforms/documentation/assets/845d3bda241c6ebeb5bd0df6828a1a99/ribbonbar-getting-started005.png)<br>![WinForms RadRibbonBar Adding More Nested Groups](https://www.telerik.com/products/winforms/documentation/assets/a5c30b1cdd52cb37dbb09c529aa9faa0/ribbonbar-getting-started006.png)

##  Adding Elements

1. Click the **Font** group *smart tag*.

2. Click on **Add Vertical Button Group** link. This selection will place a red highlighted area inside of the **Font** group:

   ![WinForms RadRibbonBar ribbonbar-getting-started 007](https://www.telerik.com/products/winforms/documentation/assets/1576be5b2075fe6b494a311d9df549bd/ribbonbar-getting-started007.png)

3. Click **radRibbonBarButtonGroup1** smart tag.

4. Click on **Edit items** link

   ![WinForms RadRibbonBar Group Edit Dialog](https://www.telerik.com/products/winforms/documentation/assets/42665967883425b0bce3ccb98e899ee2/ribbonbar-getting-started008.png)

5. Select **RadButtonElement** from the *drop down* list:

   ![WinForms RadRibbonBar Group Edit Dialog Edit Items](https://www.telerik.com/products/winforms/documentation/assets/f0e0a3fbb79944bc4d023bcf823c3360/ribbonbar-getting-started009.png)

Having done that a **RadButtonElement** is added to the *button group* that you have just created in the previous steps.
![WinForms RadRibbonBar Populate Group with Buttons](https://www.telerik.com/products/winforms/documentation/assets/98fcdff73164b98a1f32583cba6ac95d/ribbonbar-getting-started010.png)

## Formatting a Button

1. Click **radButtonElement1**, open its Smart Tag menu.

2. Open the drop-down menu of the **DisplayStyle** property and select **Image**.

3. Open the drop-down menu of the **ImageIndex** property and select an image.

4. Close the *Smart Tag* menu.

5. In the Properties window of **radButtonElement1**, change the **Name** property from **radButtonElement1** to **TextItalic**.

## Prepare an ImageList with RadRibbonBar

1. Drag a WinForms ImageList component from the Toolbox to the form.  In the area below the design surface, you will see **imageList1**.

2. Using the Images Collection Editor, add images to represent **Italic** text and **Bold** text to the ImageList. For more help with this task, see [How to: Add or Remove ImageList Images with the Designer](https://msdn.microsoft.com/en-us/library/ms233674) documentation.

3. In the *Properties* window of **radRibbonBar1**, locate the **ImageList** property. Click the drop-down arrow and choose **imageList1** from the drop-down list.

## Add a RadRichTextEditor

1. Drag a standard **WinForms RichTextBox** control onto the form.

2. Open the **Smart Tag** of the control and execute its **'Dock in parent container**:

   ![WinForms RadRibbonBar Add a RadRichTextEditor](https://www.telerik.com/products/winforms/documentation/assets/cab7ba98118b3ff6f7060468712700bc/ribbonbar-getting-started011.png)

## Add the Code 

#### Toggle Bold or Italic

```C#
private void TextBold_Click(object sender, EventArgs e)
{
    if (richTextBox1.SelectionFont.Bold)     
    {
        richTextBox1.SelectionFont = new Font(richTextBox1.SelectionFont, richTextBox1.SelectionFont.Style & ~FontStyle.Bold); 
    }     
    else   
    {
        richTextBox1.SelectionFont = new Font(richTextBox1.SelectionFont, richTextBox1.SelectionFont.Style | FontStyle.Bold);   
    }
}
 
private void TextItalic_Click(object sender, EventArgs e)
{
    if (richTextBox1.SelectionFont.Italic)     
    {
        richTextBox1.SelectionFont = new Font(richTextBox1.SelectionFont, richTextBox1.SelectionFont.Style & ~FontStyle.Italic);     
    }     
    else       
    {
        richTextBox1.SelectionFont = new Font(richTextBox1.SelectionFont, richTextBox1.SelectionFont.Style | FontStyle.Italic);
    }
}
```

```VB.NET
Private Sub TextBold_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles TextBold.Click
    If RichTextBox1.SelectionFont.Bold Then
        RichTextBox1.SelectionFont = New Font(RichTextBox1.SelectionFont, RichTextBox1.SelectionFont.Style And Not FontStyle.Bold)
    Else
        RichTextBox1.SelectionFont = New Font(RichTextBox1.SelectionFont, RichTextBox1.SelectionFont.Style Or FontStyle.Bold)
    End If
End Sub

Private Sub TextItalic_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles TextItalic.Click
    If RichTextBox1.SelectionFont.Italic Then
        RichTextBox1.SelectionFont = New Font(RichTextBox1.SelectionFont, RichTextBox1.SelectionFont.Style And Not FontStyle.Italic)
    Else
        RichTextBox1.SelectionFont = New Font(RichTextBox1.SelectionFont, RichTextBox1.SelectionFont.Style Or FontStyle.Italic)
    End If
End Sub
```

## Additional Code Instructions

It is necessary to link the Bold and Italic buttons to their event handler code.

1. Click the **Bold** button.

2. In the Properties window, click the **Event** code icon (![WinForms RadRibbonBar ribbonbar-getting-started 012](https://www.telerik.com/products/winforms/documentation/assets/46cfe660b0c7a59f268ff90fb38b4e34/ribbonbar-getting-started012.png)).

3. Locate the Click Action event and select **TextBold_Click** from its drop-down list.

4. Set the Italic button's Click Action to **TextItalic_Click** in the same manner.

## Run the Application

1. Press **F5** to run the QuickStart.

2. Add some text into the text area.

3. Highlight some words and click on the **B** button to change their font to bold. Click the **B** button again to remove the bold formatting.

   ![WinForms RadRibbonBar RichTextBox Integration](https://www.telerik.com/products/winforms/documentation/assets/9c4b59aa44a0ff47c278d5832a60a8d3/ribbonbar-getting-started014.gif)

## See Also

* [Design Time](https://www.telerik.com/products/winforms/documentation/controls/ribbonbar/design-time)
* [Structure](https://www.telerik.com/products/winforms/documentation/controls/ribbonbar/structure)
* [Properties and Events](https://www.telerik.com/products/winforms/documentation/controls/ribbonbar/properties-events)

## Telerik UI for WinForms Learning Resources

* [Telerik UI for WinForms RibbonBar Component](https://www.telerik.com/products/winforms/ribbonbar.aspx)
* [Getting Started with Telerik UI for WinForms Components](https://docs.telerik.com/devtools/winforms/getting-started/first-steps)
* [Telerik UI for WinForms Setup](https://docs.telerik.com/devtools/winforms/installation-and-upgrades/installing-on-your-computer)
* [Telerik UI for WinForms Converter](https://www.telerik.com/products/winforms/documentation/ai-coding-assistant/converter/converter)
* [Telerik UI for WinForms Visual Studio Templates](https://docs.telerik.com/devtools/winforms/visual-studio-integration/visual-studio-templates)
* [Deploy Telerik UI for WinForms Applications](https://docs.telerik.com/devtools/winforms/deployment-and-distribution/application-deployment)
* [Telerik UI for WinForms Virtual Classroom(Training Courses for Registered Users)](https://learn.telerik.com/learn/course/external/view/elearning/17/telerik-ui-for-winforms)
* [Telerik UI for WinForms License Agreement)](https://www.telerik.com/purchase/license-agreement/winforms-dlw-s)
