Step 2 of 3: Adding C1ToolbarGroups to C1Toolbar

In this step you'll continue in Visual Studio by adding C1ToolbarGroups to your C1Toolbar. You'll then add C1ToolbarButtons to the C1ToolbarGroups.

Right-click on the C1Toolbar control and select Properties to open its Properties window. Navigate to the ToolbarItems property and click on the ellipsis button to open up the Collection Editor: ToolbarItems.

Click on the Add button twice to add two C1ToolbarGroups and click OK. Your XAML should now look like the following:

XAML	Copy Code
<c1:C1Toolbar Name="c1Toolbar1"> <c1:C1ToolbarGroup /> <c1:C1ToolbarGroup /> </c1:C1Toolbar>

In XAML, set the Header property of each C1ToolbarGroup to the following: Clipboard and Font. Your XAML should now look like the following:

XAML	Copy Code
<c1:C1Toolbar Grid.Row="1" Name="c1Toolbar1"> <c1:C1ToolbarGroup Header="Clipboard"/> <c1:C1ToolbarGroup Header="Font"/> </c1:C1Toolbar>

Select the Clipboard C1ToolbarGroup and click on the ellipsis button next to the Items collection editor.
From the Select item drop-down, click Add three times to add three C1ToolbarButtons to the collection.
Select the first C1ToolbarButton and expand the Other node in its properties window to set the LabelTitle property to Paste and set the other two to Cut and Copy, respectively.
As an optional step you can set the LargeImageSource and/or SmallImageSource properties to resources found within your project or add new images.

Click OK to close the Items Collection editor. Your XAML should now look like this:

XAML	Copy Code
<c1:C1Toolbar Name="c1Toolbar1"> <c1:C1ToolbarGroup Header="Clipboard"> <c1:C1ToolbarButton LabelTitle="Paste" LargeImageSource="/ToolbarQuickstart;component/Images/Paste.png" /> <c1:C1ToolbarButton LabelTitle="Cut" SmallImageSource="/ToolbarQuickstart;component/Images/Cut.png" /> <c1:C1ToolbarButton LabelTitle="Copy" SmallImageSource="/ToolbarQuickstart;component/Images/Copy.png" /> </c1:C1ToolbarGroup> <c1:C1ToolbarGroup Header="Font"/> </c1:C1Toolbar>

XAML

Copy Code

<c1:C1Toolbar Name="c1Toolbar1">
    <c1:C1ToolbarGroup Header="Clipboard">
            <c1:C1ToolbarButton LabelTitle="Paste" LargeImageSource="/ToolbarQuickstart;component/Images/Paste.png" />
            <c1:C1ToolbarButton LabelTitle="Cut" SmallImageSource="/ToolbarQuickstart;component/Images/Cut.png" />
            <c1:C1ToolbarButton LabelTitle="Copy" SmallImageSource="/ToolbarQuickstart;component/Images/Copy.png" />
        </c1:C1ToolbarGroup>
        <c1:C1ToolbarGroup Header="Font"/>
</c1:C1Toolbar>