Edit this page

Getting Started

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:
    ribbonbar-getting-started 001

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.

ribbonbar-getting-started 013

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:
    ribbonbar-getting-started 002

  3. Add two more TabItems with captions Format and Insert:
    ribbonbar-getting-started 003

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:
    ribbonbar-getting-started 004
    ribbonbar-getting-started 005
    ribbonbar-getting-started 006

 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:
    ribbonbar-getting-started 007

  3. Click radRibbonBarButtonGroup1 smart tag.

  4. Click on Edit items link
    ribbonbar-getting-started 008

  5. Select RadButtonElement from the drop down list:
    ribbonbar-getting-started 009

Having done that a RadButtonElement is added to the button group that you have just created in the previous steps.
ribbonbar-getting-started 010

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 Italic.

  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 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:
    ribbonbar-getting-started 011

Add the Code 

Toggle Bold or Italic

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);
    }
}

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 (ribbonbar-getting-started 012).

  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.

ribbonbar-getting-started 012

See Also