This walkthrough shows how to add a variety of button types to UXToolBar using designer tools available in Expression Blend.

In this walkthrough, you perform the following tasks:

• Create a new Silverlight project.

• Add a new tool bar to the designer surface.

• Add button, split button and dropdown button to the tool bar using Expression Blend designer.

Prerequisites

You need the following components to complete this walkthrough:

• Microsoft Expression Blend 4

• Intersoft ClientUI

Creating New Silverlight Application and Website Project

The first step is to create a new Silverlight Application and Website project in Microsoft Expression Blend 4.

To create a new Silverlight application and Website project

1. Start Microsoft Expression Blend 4.

2. Create a new Silverlight project using the Silverlight Application + Website project template. Name the project as AddMenuItemAndSeparatorToMenuBarInBlendDesigner.

To add the resources file

1. In your project, create new folder with name Assets.
2. In Assets folder, create new folder with name Images.
3. In Images folder, copy the images from [Intersoft Installation Folder]Intersoft WebUI Studio 2010 R1\Samples\SL4\ClientUI Samples\Intersoft.ClientUI.Samples.Assets\Images\Office\.

Creating the Application Interface

To create Button, DropDownButton and SplitButton to ToolBarButton in Blend Designer

1. Open the MainPage.xaml.
2. In Tools Panel, click the Assets, type the UXWindow inside the search box, click on the UXWindow icon.
   
3. The UXWindow will be appear down the Assets tools, double-click the UXWindow icon. Make sure you have selected the LayoutRoot under [UserControl].
   
4. In the Properties panel, under Layout, reset the margin property by click the white square and click Reset.
   
5. Set the IsClientVisible property to True
   
6. Add a DockPanel within the UXWindow.
7. Set the Width and Height property to Auto.
8. Set the HorizontalAlignment and VerticalAlignment properties of DockPanel to Stretch.
   
9. Add the UXToolBar under DockPanel, within the UXWindow.
10. Set the dock position to Dock to Top by clicking the top square of the icon indicator.
    
11. Remove / delete the two predefined toolbar buttons when you insert the toolbar.
12. Add a Dropdown Button by right-click on the toolbar, click Add Item to Group, click Add Dropdown Button.
    
13. Add the UXMenuItem control within the UXToolBar by right-click on the toolbar, click Add Menu Item.
    
14. Under Common Properties, set the Header property to Bold and the Icon property to boldhs.png.
    
    
    
15. Add one additional UXMenuItem within the toolbar.
16. Set the Header and Icon properties of new created UXMenuItem to Italic and ItalicHS.png.
17. Select the UXToolBar and add the UXSeparator by right-click on the toolbar, click Add Item to Group, click Add Separator.
    
18. Add an Image Button by right-click on the toolbar, click Add Item to Group, click Add Image Button.
    
19. Under Common Properties, set the Icon property to CutHS.png.
20. Add two additional UXToolBarButton and set the Icon property for each toolbar button to CopyHS.png and PasteHS.png.
21. Add another UXSeparator.
22. Add the Split Button by right-click on the toolbar, click Add Item to Group, click Add Split Button.
    
23. Set the Content property of Split Button to Print.
24. Add two additional UXMenuItem within the Split Button.
25. Set the first UXMenuItem Header and Icon properties to Print Area and PrintArea.png.
26. Set the second UXMenuItem Header and Icon properties to Print Preview and PrintPreviewHS.png.
27. Run the project.
    
    
    

In this walkthrough, you have learned how to create the UXToolBar and add the UXToolBarButton and UXSeparator in Microsoft Expression Blend Designer.

Complete Code Listing

MainPage.xaml

<UserControl
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:Intersoft="http://intersoft.clientui.com/schemas"
        x:Class="AddtoToolBar.MainPage"
        Width="640" Height="480">

        <Grid x:Name="LayoutRoot" Background="White">
                <Intersoft:UXWindow Header="UXWindow Title" IsClientVisible="True">
                        <Grid>
                                <Intersoft:DockPanel>
                                        <Intersoft:UXToolBar Intersoft:DockPanel.Dock="Top">
                                                <Intersoft:UXToolGroup>
                                                        <Intersoft:UXToolBarButton Content="Style" ButtonType="DropdownButton">
                                                                <Intersoft:UXMenuItem Header="Bold" Icon="Assets/Images/boldhs.png"/>
                                                                <Intersoft:UXMenuItem Header="Italic" Icon="Assets/Images/ItalicHS.png"/>
                                                        </Intersoft:UXToolBarButton>
                                                        <Intersoft:UXSeparator/>
                                                        <Intersoft:UXToolBarButton Content="UXToolBarButton" DisplayMode="Image" Icon="Assets/Images/CutHS.png"/>
                                                        <Intersoft:UXToolBarButton Content="UXToolBarButton" DisplayMode="Image" Icon="Assets/Images/CopyHS.png"/>
                                                        <Intersoft:UXToolBarButton Content="UXToolBarButton" DisplayMode="Image" Icon="Assets/Images/PasteHS.png"/>
                                                        <Intersoft:UXSeparator/>
                                                        <Intersoft:UXToolBarButton ButtonType="SplitButton" Content="Print" Icon="Assets/Images/PrintHS.png" DisplayMode="ContentAndImage">
                                                                <Intersoft:UXMenuItem Header="Print Area" Icon="Assets/Images/PrintArea.png"/>
                                                                <Intersoft:UXMenuItem Header="Print Preview" Icon="Assets/Images/PrintPreviewHS.png"/>
                                                        </Intersoft:UXToolBarButton>
                                                </Intersoft:UXToolGroup>
                                        </Intersoft:UXToolBar>
                                </Intersoft:DockPanel>
                        </Grid>
                </Intersoft:UXWindow>
        </Grid>
</UserControl>