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:
With
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.
Create a new Windows Forms application.
Switch to code editor and initialize the C1Ribbon object.
C# |
コードのコピー
|
---|---|
C1Ribbon customRibbon; |
Initialize the Ribbon control and add the control to the Form.
C# |
コードのコピー
|
---|---|
// Ribbonコントロールを初期化します customRibbon = new C1Ribbon(); // Ribbonコントロールをフォームに追加します this.Controls.Add(customRibbon); |
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); |
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); |
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)); |
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); |
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); |
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); |
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); |
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.
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.