Ribbon for WinForms
クイックスタート

The following quick start guide will take you through the basics of Ribbon control and its design customizations. You can add tabs, groups and items to the groups. By the end of this section, you will be able to create a simple text editor with the Ribbon user interface.

To create a simple WinForms application in .NET 4.5.2 for Ribbon control, complete the following steps: 

  1. Create a new Windows Forms application.
  2. Drag and drop the C1Ribbon control to your form.The Ribbon control is positioned at the top of the form. A tab and group gets added to the Ribbon control in advance.

    The image shows a ribbon control in application with tab.
  3. Add the RichTextBox control from the Toolbox to your form. Set its Dock property to Fill.
  4. To add a new tab, click the C1Ribbon control to enable its floating toolbar. Click the Actions button and select Add Tab from the list of actions. Whenever you add a new tab, a group is already added to it.
  5. Rename the tabs as 'Home' and 'Insert'. This can be done by in-place text editing by double clicking the tab. You can also add text from the Text Settings in floating toolbar or by editing the Text property in the Properties window.

    The image shows a ribbon control in application with group and tab.
  6. To add a new group, click the 'Home' Tab to enable its floating toolbar. Click the Actions button and select Add Group from the list of actions.

    The image shows a menu open in ribbon control
  7. Rename the groups as 'Font' and 'Color' either by double clicking on it or by editing the Text property from the Properties window.

    The image shows ribbon with tab and group.
  8. To add an item to the group, click the 'Font' group to enable its floating toolbar. Click the Actions button and Select Add Font ComboBox from the list of actions.
    The image shows a big menu open in ribbon control.
  9. Enter the placeholder text 'Select a Font' in the Font ComboBox either by clicking on it or editing the Text property from the Properties window.
    The image shows groups and tabs in ribbon, with a combobox.
  10. Similarly, select Add ColorPicker from the list of actions of 'Color' group to add it as an item.

    A snapshot of colorpicker in ribbon control.
  11. The Windows Form can be converted to a Ribbon Form by switching to the code view and replacing the following:
    C#
    コードのコピー
    partial class Form1 : Form
    {
        //...
    }
    
    VB
    コードのコピー
    Partial Class Form1
        Inherits System.Windows.Forms.Form
        '...
    End Class
    

    With

    C#
    コードのコピー
    partial class Form1 : C1RibbonForm
    {
        //...
    }
    
    VB
    コードのコピー
    Partial Class Form1
        Inherits C1.Win.C1Ribbon.C1RibbonForm
        '...
    End Class
    
The basic difference between the Windows form and the Ribbon Form is that in the Ribbon form, the title bar of the Windows Form is omitted and the title bar of the Ribbon Form comes into existence.

Run the application and observe the Ribbon Form generated in the following image. The Ribbon Form contains tabs, groups and FontComboBox and ColorPicker as items in the Group. Similarly, you can add other items from the group item list such as DatePicker, Gallery, Label, CheckBox, ToggleButton, TextBox etc.

A snapshot of windowforms application with ribbon control, depicting tabs, groups, colorpicker and combobox.

To create a simple WinForms application in .NET 5 for Ribbon control, complete the following steps: 
  1. Create a new Windows Forms application.

  2. Switch to code editor and initialize the C1Ribbon object.

    C#
    コードのコピー
    C1Ribbon customRibbon;
    
  3. Initialize the Ribbon control and add the control to the Form.

    C#
    コードのコピー
    //  Ribbonコントロールを初期化します
    customRibbon = new C1Ribbon();
    //  Ribbonコントロールをフォームに追加します
    this.Controls.Add(customRibbon);
    
  4. Create an instance of RibbonTab class and add the 'Home' tab to the Ribbon control using the Add method of RibbonTabCollection class.

    C#
    コードのコピー
    // 「ホーム」タブを作成して追加します
    RibbonTab homeTab = new RibbonTab();
    homeTab.Text = "Home";
    customRibbon.Tabs.Add(homeTab);
    
  5. Create an instance of RibbonGroup class, assign it the name 'Font' and add it to the Home tab using the Add method of RibbonGroupCollection class.

    C#
    コードのコピー
    // 「ホーム」タブに「フォント」という名前のグループを追加します
    RibbonGroup fontStyle = new RibbonGroup();
    fontStyle.Text = "Font";
    homeTab.Groups.Add(fontStyle);
    
  6. Create Quick Access Toolbar in the Ribbon control using the Qat property of C1Ribbon class, and add items to the Quick Access Toolbar using the Items property of RibbonQat class and Add method of RibbonItemCollectionBase class.

    C#
    コードのコピー
    // クイックアクセスツールバーにアイテムを追加します
    Image openImage = Image.FromFile(@"images\open.png");
    customRibbon.Qat.Items.Add(new RibbonButton("Open", openImage));
    Image undoImage = Image.FromFile(@"images\undo.png");
    customRibbon.Qat.Items.Add(new RibbonButton("Undo", undoImage));
    Image redoImage = Image.FromFile(@"images\redo.png");
    customRibbon.Qat.Items.Add(new RibbonButton("Repeat", redoImage));
    
  7. Create items to be added in application menu. Add them to the right and left panel of the Application Menu using ApplicationMenu property of C1Ribbon class.

    C#
    コードのコピー
    // デフォルトのアプリケーションメニューに追加する項目を作成します
    RibbonButton openButton = new RibbonButton("Open", Image.FromFile(@"images\open-file-icon.png"));
    RibbonButton saveButton = new RibbonButton("Save", Image.FromFile(@"images\save-file-icon.png"));
    RibbonButton closeButton = new RibbonButton("Close", Image.FromFile(@"images\close.png"));
    RibbonButton printButton = new RibbonButton("Print", Image.FromFile(@"images\print.png"));
    RibbonButton previewButton = new RibbonButton("Preview", Image.FromFile(@"images\preview.png"));           
    RibbonListItem print = new RibbonListItem(printButton);
    RibbonListItem preview = new RibbonListItem(previewButton);
    // ApplicationMenuの画像アイコンを追加します
    C1BitmapIcon c1Bitmap1 = new C1BitmapIcon();
    c1Bitmap1.Source = Image.FromFile(@"images\application_menu.png");
    c1Bitmap1.Size = new Size(20, 20);
    customRibbon.ApplicationMenu.IconSet.Add(c1Bitmap1);
    // ApplicationMenuの項目を追加します
    customRibbon.ApplicationMenu.LeftPaneItems.Add(openButton);
    customRibbon.ApplicationMenu.LeftPaneItems.Add(saveButton);
    customRibbon.ApplicationMenu.LeftPaneItems.Add(closeButton);
    customRibbon.ApplicationMenu.RightPaneItems.Add(print);
    customRibbon.ApplicationMenu.RightPaneItems.Add(preview);
    
  8. Create items to be added in configuration toolbar. Add the items using ConfigToolBar property of C1Ribbon class.

    C#
    コードのコピー
    // デフォルトのConfigToolbarに追加する項目を作成します
    RibbonButton cutButton = new RibbonButton("Cut", Image.FromFile(@"images\cut.png"));
    RibbonButton copyButton = new RibbonButton("Copy", Image.FromFile(@"images\copy.png"));
    RibbonButton pasteButton = new RibbonButton("Paste", Image.FromFile(@"images\paste.png"));            
    // ConfigToolbarの項目を追加します
    customRibbon.ConfigToolBar.Items.Add(cutButton);
    customRibbon.ConfigToolBar.Items.Add(copyButton);
    customRibbon.ConfigToolBar.Items.Add(pasteButton);
    
  9. Add a new tab 'Format' and new 'Clipboard' group. Add items like button, checkbox, fontcombobox, colorpicker, toggle button and separator to the new tab and group.

    C#
    コードのコピー
    // ボタン、チェックボックス、fontcombobox、colorpicker、トグルボタン、セパレーターなどの項目を追加します
    // 新しいタブを作成します
    RibbonTab format = new RibbonTab();
    format.Text = "Format";
    customRibbon.Tabs.Add(format);
    // グループを追加します
    RibbonGroup formatGroup = new RibbonGroup();
    formatGroup.Text = "Clipboard";
    format.Groups.Add(formatGroup);
    // リボンボタンを追加します
    RibbonButton clearButton = new RibbonButton("Clear Format", Image.FromFile(@"images\clearformat.png"));
    clearButton.ToolTip = "Clear All Formatting";
    formatGroup.Items.Add(clearButton);
    // チェックボックスボタンのリボン項目を追加します
    RibbonCheckBox reminderCheckBox = new RibbonCheckBox();
    reminderCheckBox.IconSet.Add(new C1BitmapIcon(null, new Size(20, 20), Color.Transparent, Image.FromFile(@"images\reminder.png")));
    reminderCheckBox.Text = "Reminder";
    formatGroup.Items.Add(reminderCheckBox);
    // RibbonFontComboBoxを追加します
    RibbonFontComboBox fontComboBox = new RibbonFontComboBox();
    fontComboBox.ToolTip = "Font";
    fontComboBox.Text = "Select a font";
    formatGroup.Items.Add(fontComboBox);
    // RibbonSeparatorを追加します
    RibbonSeparator separator = new RibbonSeparator();
    formatGroup.Items.Add(separator);
    // RibbonColorPickerを追加します
    RibbonColorPicker colorPicker = new RibbonColorPicker(null, Image.FromFile(@"images\fontcolor.png"));
    colorPicker.ToolTip = "Color Picker";
    formatGroup.Items.Add(colorPicker);
    // トグルボタンを追加します
    RibbonToggleButton leftAlign = new RibbonToggleButton(Image.FromFile(@"images\align_left.png"));
    leftAlign.ToolTip = "Align your content with left margin.";
    formatGroup.Items.Add(leftAlign);
    
  10. Add items like datepicker, gallery, label and menu to another tab and group.

    C#
    コードのコピー
    // 日付ピッカー、ギャラリー、ラベル、メニューなどの項目を追加します
    // 新しいタブ「ツール」を作成します
    RibbonTab tool = new RibbonTab();
    tool.Text = "Tools";
    customRibbon.Tabs.Add(tool);          
    // [ツール]タブにエディターグループを追加します
    RibbonGroup toolGroup = new RibbonGroup();
    toolGroup.Text = "Editor";
    tool.Groups.Add(toolGroup);           
    // DatePickerリボン項目を追加します
    RibbonDatePicker datePicker = new RibbonDatePicker();
    datePicker.Format = "yyyy/MM/dd";
    toolGroup.Items.Add(datePicker);
    // RibbonGalleryリボン項目を追加します
    RibbonGallery ribbonGallery = new RibbonGallery();
    ribbonGallery.ToolTip = "Select a shape";
    RibbonGalleryItem ribbonGallery1 = new RibbonGalleryItem("Rectangle", Image.FromFile(@"images\rect.png"));
    RibbonGalleryItem ribbonGallery2 = new RibbonGalleryItem("Circle", Image.FromFile(@"images\circle.png"));
    RibbonGalleryItem ribbonGallery3 = new RibbonGalleryItem("Triangle", Image.FromFile(@"images\triangle.png"));
    RibbonGalleryItem ribbonGallery4 = new RibbonGalleryItem("Hexagon", Image.FromFile(@"images\hexagon.png"));
    ribbonGallery.Items.Add(ribbonGallery1);
    ribbonGallery.Items.Add(ribbonGallery2);
    ribbonGallery.Items.Add(ribbonGallery3);
    ribbonGallery.Items.Add(ribbonGallery4);
    toolGroup.Items.Add(ribbonGallery);
    // ラベルリボン項目を追加します
    RibbonLabel ribbonLabel = new RibbonLabel("Feedback", Image.FromFile(@"images\feedback.png"));
    formatGroup.Items.Add(ribbonLabel);
    // RibbonMenuリボン項目を追加します
    RibbonMenu ribbonMenu = new RibbonMenu();
    ribbonMenu.Text = "Edit";
    RibbonButton buttonCut = new RibbonButton("Cut", Image.FromFile(@"images\cut.png"));
    RibbonButton buttonCopy = new RibbonButton("Copy", Image.FromFile(@"images\copy.png"));
    RibbonButton buttonPaste = new RibbonButton("Paste", Image.FromFile(@"images\paste.png"));
    RibbonSeparator separatoritem = new RibbonSeparator();
    RibbonColorPicker colorpicker = new RibbonColorPicker("Color Picker", Image.FromFile(@"images\fontcolor.png"));
    RibbonLabel label = new RibbonLabel("Select Color");
    RibbonColorPickerItem colorItem = new RibbonColorPickerItem();
    ribbonMenu.Items.Add(buttonCut);
    ribbonMenu.Items.Add(buttonCopy);
    ribbonMenu.Items.Add(buttonPaste);
    ribbonMenu.Items.Add(separatoritem);
    ribbonMenu.Items.Add(colorpicker);
    ribbonMenu.Items.Add(label);
    ribbonMenu.Items.Add(colorItem);
    toolGroup.Items.Add(ribbonMenu);
    
  11. Add more items like Numeric box, progress bar, splitbutton, textbox, timepicker, toolbar and trackbar.

    C#
    コードのコピー
    // Add more items like Numeric box, progress bar, splitbutton, textbox, timepicker, toolbar and trackbar
    // Add Styles group to Tools tab
    RibbonGroup stylesGroup = new RibbonGroup();
    stylesGroup.Text = "Styles";
    tool.Groups.Add(stylesGroup);
    // Add Numeric Box ribbon item
    RibbonNumericBox numericBox = new RibbonNumericBox();
    numericBox.Maximum = 10;
    numericBox.Minimum = 1;
    numericBox.ToolTip = "Select a number";
    numericBox.Label = "Number Box";
    stylesGroup.Items.Add(numericBox);
    // Add Progress Bar ribbon item
    RibbonProgressBar progressBar = new RibbonProgressBar();
    progressBar.Minimum = 0;
    progressBar.Maximum = 100;
    progressBar.Value = 30;
    stylesGroup.Items.Add(progressBar);
    // Add Separator ribbon item
    RibbonSeparator separatorItem = new RibbonSeparator();
    stylesGroup.Items.Add(separatorItem);
    // Add Ribbon Split Button
    RibbonSplitButton splitButton = new RibbonSplitButton("Views");
    RibbonButton printLayout = new RibbonButton("Print Layout", Image.FromFile(@"images\printlayout.png"));
    RibbonButton fullScreenLayout = new RibbonButton("Full Screen Reading", Image.FromFile(@"images\fullscreen.png"));
    RibbonButton webLayout = new RibbonButton("Web Layout", Image.FromFile(@"images\weblayout.png"));
    splitButton.Items.Add(printLayout);
    splitButton.Items.Add(fullScreenLayout);
    splitButton.Items.Add(webLayout);
    stylesGroup.Items.Add(splitButton);
    // Add Ribbon TextBox
    RibbonTextBox textBox = new RibbonTextBox();
    textBox.Text = "Write Text";
    stylesGroup.Items.Add(textBox);
    // Add TimePicker
    RibbonTimePicker timePicker = new RibbonTimePicker();
    timePicker.Label = "Select Time:";
    stylesGroup.Items.Add(timePicker);
    // Add Ribbon Toolbar
    RibbonToolBar ribbonToolBar = new RibbonToolBar();
    RibbonButton boldButton = new RibbonButton(Image.FromFile(@"images\bold.png"));
    RibbonButton italicButton = new RibbonButton(Image.FromFile(@"images\italic.png"));
    RibbonButton underlineButton = new RibbonButton(Image.FromFile(@"images\underline.png"));
    ribbonToolBar.Items.Add(boldButton);
    ribbonToolBar.Items.Add(italicButton);
    ribbonToolBar.Items.Add(underlineButton);
    stylesGroup.Items.Add(ribbonToolBar);
    // Add TrackBar 
    RibbonTrackBar trackBar = new RibbonTrackBar();
    trackBar.Minimum = 10;
    trackBar.Maximum = 100;
    trackBar.Value = 30;
    trackBar.TickFrequency = 10;
    stylesGroup.Items.Add(trackBar);
    

    Note that the Ribbon control provides dedicated class for each item in the ribbon, such as RibbonButton, RibbonCheckBox, RibbonFontComboBox, RibbonSeparator, RibbonColorPicker, RibbonToggleButton, RibbonDatePicker, RibbonGallery, RibbonLabel, RibbonMenu, RibbonNumericBox, RibbonProgressBar, RibbonSplitButton, RibbonTextBox, RibbonTimePicker, RibbonToolbar, RibbonTrackBar classes.

  12. Ribbon control also allows the user to add a hosted control in the ribbon using the RibbonControlHost class. For this, the user has to create a new TextBoxHost class that inherits the RibbonControlHost element, and then initialize RibbonControlHost object in the form and add it to the ribbon group.

    C#
    コードのコピー
    // コントロールホストを追加します
    RibbonControlHost textboxHost = new RibbonControlHost();
    textboxHost = new WinFormsRibbonQuickStart.TextBoxHost();
    stylesGroup.Items.Add(textboxHost);
    
    C#
    コードのコピー
    // 新しいTextBoxHostクラスを作成します
    public class TextBoxHost : C1.Win.Ribbon.RibbonControlHost
    {
        public TextBoxHost() : base(new System.Windows.Forms.TextBox())
        {
            base.Text = "Sample text";
        }
    }
    

    Run the application and observe the ribbon control with tabs, groups and ribbon items.

    A snapshot of window forms application with ribbon control depicting tabs, groups and numerous items such as combobox, labels, datepicker etc., to name a few.

    Note: WinForms .NET 5 Edition does not include rich design-time support yet. We will enhance it in future releases.