C1Toolbar Layout and Appearance | Componentone Toolbar for WPF and Silverlight

C1Toolbar Layout and Appearance

In This Topic

The following topics detail how to customize the C1Toolbar control's layout and appearance. You can use built-in layout options to lay your controls out in panels such as Grids or Canvases.

You can customize the appearance of your toolbar items by using the stack panel. Inside the stack panel you can determine the orientation of your toolbar item. Additionally you can add an image and some text. The text’s alignment, font style, and color can be modified.

XAML	Copy Code
<c1tb:C1Toolbar> <c1tb:C1ToolbarGroup Header="Clipboard"> <c1tb:C1ToolbarStrip Padding="0"> <c1tb:C1ToolbarButton Width="60" HorizontalContentAlignment="Left"> <StackPanel Orientation="Horizontal" > <Image Grid.Column="1" Source="Resources/cut.png" Margin="7 0 7 0"/> <TextBlock Text="Cut" Foreground= "DarkOrange" VerticalAlignment="Center" TextAlignment="Center" /> </StackPanel> </c1tb:C1ToolbarButton> </c1tb:C1ToolbarStrip> <c1tb:C1ToolbarStrip Padding="0"> <c1tb:C1ToolbarButton Width="60" HorizontalContentAlignment="Left" > <StackPanel Orientation="Horizontal"> <Image Source="Resources/copy.png" Margin="4 0 4 0"/> <TextBlock Text="Copy" VerticalAlignment="Center" TextAlignment="Center"/> </StackPanel> </c1tb:C1ToolbarButton> </c1tb:C1ToolbarStrip> <c1tb:C1ToolbarStrip Padding="0"> <c1tb:C1ToolbarButton Width="60" HorizontalContentAlignment="Left"> <StackPanel Orientation="Horizontal"> <Image Source="Resources/paste.png" Margin="4 0 4 0"/> <TextBlock Text="Paste" VerticalAlignment="Center" TextAlignment="Center"/> </StackPanel> </c1tb:C1ToolbarButton> </c1tb:C1ToolbarStrip> </c1tb:C1ToolbarGroup> </c1tb:C1Toolbar>

XAML

Copy Code

<c1tb:C1Toolbar>
 <c1tb:C1ToolbarGroup Header="Clipboard">
   <c1tb:C1ToolbarStrip Padding="0">
     <c1tb:C1ToolbarButton Width="60" HorizontalContentAlignment="Left">
        <StackPanel Orientation="Horizontal" >
         <Image Grid.Column="1" Source="Resources/cut.png" Margin="7 0 7 0"/>
         <TextBlock Text="Cut" Foreground= "DarkOrange" VerticalAlignment="Center" TextAlignment="Center" />
           </StackPanel>
    </c1tb:C1ToolbarButton>
   </c1tb:C1ToolbarStrip>
   <c1tb:C1ToolbarStrip Padding="0">
      <c1tb:C1ToolbarButton Width="60" HorizontalContentAlignment="Left" >
        <StackPanel Orientation="Horizontal">
      <Image Source="Resources/copy.png"  Margin="4 0 4 0"/>
   <TextBlock Text="Copy" VerticalAlignment="Center" TextAlignment="Center"/>
        </StackPanel>
      </c1tb:C1ToolbarButton>
    </c1tb:C1ToolbarStrip>
  <c1tb:C1ToolbarStrip Padding="0">
     <c1tb:C1ToolbarButton Width="60" HorizontalContentAlignment="Left">
          <StackPanel Orientation="Horizontal">
            <Image Source="Resources/paste.png"  Margin="4 0 4 0"/>
           <TextBlock Text="Paste" VerticalAlignment="Center" TextAlignment="Center"/>
        </StackPanel>
      </c1tb:C1ToolbarButton>
    </c1tb:C1ToolbarStrip>
  </c1tb:C1ToolbarGroup>
</c1tb:C1Toolbar>