Ribbon for WPF | ComponentOne
In This Topic
    ToolStrip
    In This Topic

    The ToolStrip control represents a strip that contains one or more elements. It is represented by the C1ToolStrip class. ToolStrip can be used alone or as the content of toolbar group.

    The following image illustrates C1ToolStrip:

     Image of toolstrip.

    The ToolStrip can be added by dropping the C1ToolStrip on the Window. The resulting XAML code is shown below:

    XAML
    Copy Code 
    <c1:C1ToolStrip HorizontalAlignment="Left" Height="37" Margin="10,10,0,0" Grid.RowSpan="2" Width="241">
            <c1:C1ButtonTool IconTemplate="{x:Static c1:C1IconTemplate.Asterisk}" Label="Button 1"/>
            <c1:C1ButtonTool IconTemplate="{x:Static c1:C1IconTemplate.Asterisk}" Label="Button 2"/>
            <c1:C1ToolSeparator/>
            <c1:C1ButtonTool IconTemplate="{x:Static c1:C1IconTemplate.Asterisk}" Label="Button 1"/>
            <c1:C1ButtonTool IconTemplate="{x:Static c1:C1IconTemplate.Asterisk}" Label="Button 2"/>
            <c1:C1ToolSeparator/>
            <c1:C1ButtonTool IconTemplate="{x:Static c1:C1IconTemplate.Asterisk}" Label="Button 1"/>
            <c1:C1ButtonTool IconTemplate="{x:Static c1:C1IconTemplate.Asterisk}" Label="Button 2"/>
        </c1:C1ToolStrip>

    You can add buttons, dropdown tool, toggle button, menu tool, select tool and tools separator. Both the Ribbon and ToolStrip controls share these tools or elements, and can be used in any of the controls. We are discussing about these controls in detail in the Elements topic.

    The following code illustrates how to create a toolstrip control with these elements. 

    XAML
    Copy Code 
            <!-- Add tool strip control -->
        <c1:C1ToolStrip ToolIconSize="16" Grid.ColumnSpan="2" x:Name="tb">
           
            <!-- Add menu tool -->
            <c1:C1MenuTool Label="Open">
                <c1:C1MenuTool.IconTemplate>
                    <c1:C1IconTemplate>
                        <c1:C1BitmapIcon Source="/openProject.png" />
                    </c1:C1IconTemplate>
                </c1:C1MenuTool.IconTemplate>
                <c1:C1ButtonTool Label="Project..." >
                    <c1:C1ButtonTool.IconTemplate>
                        <c1:C1IconTemplate>
                            <c1:C1BitmapIcon Source="/open.png" />
                        </c1:C1IconTemplate>
                    </c1:C1ButtonTool.IconTemplate>
                </c1:C1ButtonTool>
                <c1:C1ButtonTool Label="Web Site...">
                    <c1:C1ButtonTool.IconTemplate>
                        <c1:C1IconTemplate>
                            <c1:C1BitmapIcon Source="/openWebSite.png" />
                        </c1:C1IconTemplate>
                    </c1:C1ButtonTool.IconTemplate>
                </c1:C1ButtonTool>
                <c1:C1ButtonTool Label="File...">
                    <c1:C1ButtonTool.IconTemplate>
                        <c1:C1IconTemplate>
                            <c1:C1BitmapIcon Source="/openFile.png"/>
                        </c1:C1IconTemplate>
                    </c1:C1ButtonTool.IconTemplate>
                </c1:C1ButtonTool>
            </c1:C1MenuTool> 
            <!-- Add a button -->
            <c1:C1ButtonTool Label="Close solution">
                <c1:C1ButtonTool.IconTemplate>
                    <c1:C1IconTemplate>
                        <c1:C1BitmapIcon Source="/closeSolution.png" />
                    </c1:C1IconTemplate>
                </c1:C1ButtonTool.IconTemplate>
            </c1:C1ButtonTool>
            <!-- Add tool separator -->
            <c1:C1ToolSeparator  />
            <c1:C1ButtonTool Label="Save">
                <c1:C1ButtonTool.IconTemplate>
                    <c1:C1IconTemplate>
                        <c1:C1BitmapIcon Source="/save.png"/>
                    </c1:C1IconTemplate>
                </c1:C1ButtonTool.IconTemplate>
            </c1:C1ButtonTool>
            <c1:C1ButtonTool Label="Save All">
                <c1:C1ButtonTool.IconTemplate>
                    <c1:C1IconTemplate>
                        <c1:C1BitmapIcon Source="/saveAll.png" />
                    </c1:C1IconTemplate>
                </c1:C1ButtonTool.IconTemplate>
            </c1:C1ButtonTool>
            <c1:C1ToolSeparator  />
            <c1:C1ButtonTool Label="Page setup">
                <c1:C1ButtonTool.IconTemplate>
                    <c1:C1IconTemplate>
                        <c1:C1BitmapIcon Source="/pageSetup.png"  />
                    </c1:C1IconTemplate>
                </c1:C1ButtonTool.IconTemplate>
            </c1:C1ButtonTool>
            <c1:C1ButtonTool Label="Print">
                <c1:C1ButtonTool.IconTemplate>
                    <c1:C1IconTemplate>
                        <c1:C1BitmapIcon Source="/print.png" />
                    </c1:C1IconTemplate>
                </c1:C1ButtonTool.IconTemplate>
            </c1:C1ButtonTool>
            <c1:C1ToolSeparator  />
            <c1:C1ButtonTool Label="Delete">
                <c1:C1ButtonTool.IconTemplate>
                    <c1:C1IconTemplate>
                        <c1:C1BitmapIcon Source="/delete.png"  />
                    </c1:C1IconTemplate>
                </c1:C1ButtonTool.IconTemplate>
            </c1:C1ButtonTool>
            <c1:C1ButtonTool Label="Cut">
                <c1:C1ButtonTool.IconTemplate>
                    <c1:C1IconTemplate>
                        <c1:C1BitmapIcon Source="/cut.png" />
                    </c1:C1IconTemplate>
                </c1:C1ButtonTool.IconTemplate>
            </c1:C1ButtonTool>
            <c1:C1ButtonTool Label="Copy">
                <c1:C1ButtonTool.IconTemplate>
                    <c1:C1IconTemplate>
                        <c1:C1BitmapIcon Source="/copy.png"  />
                    </c1:C1IconTemplate>
                </c1:C1ButtonTool.IconTemplate>
            </c1:C1ButtonTool>
            <c1:C1ButtonTool Label="Paste">
                <c1:C1ButtonTool.IconTemplate>
                    <c1:C1IconTemplate>
                        <c1:C1BitmapIcon Source="/paste.png" />
                    </c1:C1IconTemplate>
                </c1:C1ButtonTool.IconTemplate>
            </c1:C1ButtonTool>
            <c1:C1ToolSeparator  />
            <!-- Add dropdown tool -->
            <c1:C1DropDownTool Label="Popup">
                <c1:C1DropDownTool.IconTemplate>
                    <c1:C1IconTemplate>
                        <c1:C1BitmapIcon Source="/color.png" />
                    </c1:C1IconTemplate>
                </c1:C1DropDownTool.IconTemplate>
                <c1:C1DropDownTool.ContentTemplate>
                    <DataTemplate>
                        <StackPanel>
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Width="20" Text="R:" VerticalAlignment="Center" TextAlignment="Center" />
                                <Slider Margin="3" Width="80" />
                            </StackPanel>
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Width="20" Text="G:" VerticalAlignment="Center" TextAlignment="Center" />
                                <Slider Margin="3" Width="80" />
                            </StackPanel>
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Width="20" Text="B:" VerticalAlignment="Center" TextAlignment="Center" />
                                <Slider Margin="3" Width="80" />
                            </StackPanel>
                        </StackPanel>
                    </DataTemplate>
                </c1:C1DropDownTool.ContentTemplate>
            </c1:C1DropDownTool>
        </c1:C1ToolStrip>