ICreate.Controls.Bars Send comments on this topic.
Walkthrough - Outlook 2007 style application using SideBar and CollapsingGroupPanel

Glossary Item Box

This walkthrough demonstrates how to create an Outlook 2007 style application. The application has a menu bar, a SideBar on the left and one CollapsingGroupPanel for each of the SideBar buttons. The CollapsingGroupPanel associated with the selected SideBar button fills the area of the Form not occupied by the SideBar. There is a Splitter control between the SideBar and CollapsingGroupPanel. This Splitter allows the Width of the SideBar to be modified. Since the Width of a SideBar can only be modified when expanded, the Splitter can only be used to adjust the Width of the SideBar when the SideBar is expanded. The image below shows the completed application.

To implement the Outlook style application proceed as follows:

Create the application and add a MainMenuStrip.

  1. Create a WinForm application. You can use C# or Visual Basic.
  2. Rename Form1 to MainForm and set its Size=700,500.
  3. Set the MainForm Text="Outlook 2007 style application walkthrough"
  4. Add a MenuStrip to the MainForm. This MenuStrip is the MainMenuStrip of the Form.
  5. Add a View item to the MenuStrip.
  6. Add the following menu items to the View menu: Products, Repairs, Services, Tasks and Clients.
  7. Name these menu items menuItemProducts, menuItemRepairs, menuItemServices, menuItemTasks, menuItemClients (MenuItemProducts, MenuItemRepairs, MenuItemServices, MenuItemTasks and MenuItemClient for Visual Basic) respectively.
  8. Set the menuItemProducts Image=SmallProducts.png.
  9. Set the menuItemRepairs Image=SmallRepairs.png.
  10. Set the menuItemServices Image=SmallServices.png.
  11. Set the menuItemTasks Image=SmallTasks.png.
  12. Set the menuItemClients Image=SmallClients.png.

Add a SideBar to the MainForm.

  1. Add a SideBar to the MainForm.
  2. Call the SideBar sideBarNavigator (SideBarNavigator for Visual Basic).
  3. Set the SideBar BackColor = 187,215,252.
  4. Set the SideBar Padding = 4,4,0,4.
  5. Add two ImageList components to the MainFrom.
  6. Name the first ImageList imageListLarge, and the second imageListSmall (ImageListLarge and ImageListSmall for Visual Basic).
  7. For ImageListLarge set ColorDepth=Depth32Bit and ImageSize = 32,32.
  8. Add Products.png, Repairs.png, Services.png, Tasks.png and Clients.png to the Images collection of the ImageListLarge ImageList.
  9. For the imageListSmall ImageList set ColorDepth=Depth32 and leave the ImageSize 16,16.
  10. Add SmallProducts.png, SmallRepairs.png, SmallServices.png, SmallTasks.png and SmallClients.png to the Images collection of the imageListSmall ImageList.
  11. Set the sideBarNavigator ImageList = imageListLarge and ImageSmallList = imageListSmall. Make sure that the index of the two versions of the same image are the same in both ImageLists.
  12. Add 5 SideBarItem components to the SideBar. You can do this by clicking the Add command option on the smart panel.
  13. Name the first SideBarItem sideBarItemProducts (SideBarItemProducts for Visual Basic), set Text="Products" and set the ImageIndex to the index corresponding to the Products.png file.
  14. Name the second SideBarItem sideBarItemRepairs (SideBarRepairs for Visual Basic), set Text="Repairs" and set the ImageIndex to the index corresponding to the Repairs.png file.
  15. Name the third SideBarItem sideBarItemServices (SideBarItemServices for Visual Basic), set Text="Services" and set the ImageIndex to the index corresponding to the Services.png file.
  16. Name the fourth SideBarItem sideBarItemTasks (SideBarItemTasks for Visual Basic), set Text="Tasks" and set the ImageIndex to the index corresponding to the Tasks.png file.
  17. Name the fifth SideBarItem sideBarItemClients (SideBarItemClients for Visual Basic), set its Text="Clients" and set the ImageIndex to the index corresponding to the Clients.png file.
  18. Set the Animate property of the SideBar true if you wish the colour transitions to have a fade effect and not occur abruptly.

Add CollapsingGroupPanel for each SideBarItem.

  1. Add a Splitter to the MainForm.
  2. Set the Splitter Width=4 and BackColor=187,215,252.
  3. Add 5 CollapsingGroupPanel controls to the MainForm. Add them to the right of the Splitter.
  4. Name the first CollapsingGroupPanel panelProducts (PanelProducts for Visual Basic). Set the HeaderFont=Microsoft Sans Serif, 12pt, style=Bold, HeaderText="Products" and HeaderImage=SmallProducts.png
  5. Name the second CollapsingGroupPanel panelRepairs (PanelRepairs for Visual Basic). Set the HeaderText="Repairs" and HeaderImage=SmallRepairs.png
  6. Name the third CollapsingGroupPanel panelServices (PanelServices for Visual Basic). Set the HeaderText="Services" and HeaderImage=SmallServices.png
  7. Name the fourth CollapsingGroupPanel panelTasks (PanelTasks for Visual Basic). Set the HeaderText="Tasks" and HeaderImage=SmallTasks.png
  8. Name the fifth CollapsingGroupPanel panelClients (PanelClient for Visual Basic). Set the HeaderText="Clients" and HeaderImage=SmallClients.png. The application should currently look similar to the one shown in the image below.


  9. Select the panelProducts CollapsingGroupPanel. Set the Padding = 0,4,4,4.
  10. Open panelProducts's smart tag panel. Select the Styles option on the smart tag panel. The CollapsingGroupPanel Style gallery is displayed.
  11. Choose the 'Outlook 2007 fixed blue' item in the Styles list. Click the Ok button to apply the selected style and close the dialog.
  12. Right click the panelProducts and select the Save style option on the context menu.
  13. Select the panelRepair. Set the Padding=0,4,4,4. Right click the panelRepair and select the Apply style panelProducts menu option on the context menu.
  14. Repeat this for the other three CollapsingGroupPanels.
  15. Select the Products SideBarItem. Set the Control=panelProducts. Select panelProducts and set Dock=Fill.
  16. Select the Repairs SideBarItem. Set the Control=panelRepairs. Select panelRepairs and set Dock=Fill.
  17. Select the Services SideBarItem. Set the Control=panelServices. Select panelServices and set Dock=Fill.
  18. Select the Tasks SideBarItem. Set the Control=panelTasks. Select panelTasks and set Dock=Fill.
  19. Select the Clients SideBarItem. Set the Control=panelClients. Select panelClients and set Dock=Fill.
  20. if you wish the colour transitions to have a fade effect and not appear abrupt then set the Animate property of each CollapsingGroupPanel true

Implement the ToolStripMenuItem event handlers.

  1. Implement the Click event handler for the ToolStripMenuItems as follows:
    Visual Basic
     
    Private Sub MenuItemProducts_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) _
    Handles MenuItemProducts.Click
    SideBarNavigator.SelectedItem = SideBarItemProducts
    End Sub
     
    Private Sub MenuItemRepairs_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) _
    Handles MenuItemRepairs.Click
    SideBarNavigator.SelectedItem = SideBarItemRepairs
    End Sub
     
    Private Sub MenuItemServices_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) _
    Handles MenuItemServices.Click
    SideBarNavigator.SelectedItem = SideBarItemServices
    End Sub
     
    Private Sub MenuItemTasks_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) _
    Handles MenuItemTasks.Click
    SideBarNavigator.SelectedItem = SideBarItemTasks
    End Sub
     
    Private Sub MenuItemClients_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) _
    Handles MenuItemClients.Click
    SideBarNavigator.SelectedItem = SideBarItemClients
    End Sub
    C#
     
    private void menuItemProducts_Click(object sender, EventArgs e)
    {
    sideBarNavigator.SelectedItem = sideBarItemProducts;
    }
     
    private void menuItemRepairs_Click(object sender, EventArgs e)
    {
    sideBarNavigator.SelectedItem = sideBarItemRepairs;
    }
     
    private void menuItemServices_Click(object sender, EventArgs e)
    {
    sideBarNavigator.SelectedItem = sideBarItemServices;
    }
     
    private void menuItemTasks_Click(object sender, EventArgs e)
    {
    sideBarNavigator.SelectedItem = sideBarItemTasks;
    }
     
    private void menuItemClients_Click(object sender, EventArgs e)
    {
    sideBarNavigator.SelectedItem = sideBarItemClients;
    }
  2. Select the Products SideBarItem.
  3. Select its InternalPanel. This panel is located just above the SideBar button stack size bar. Set its BackColor=White.

The walkthrough is now complete. You would proceed by adding the required controls to each SdeBarItem's Control and InternalPanel in order to implement the functionality required for each SideBar button. See the Walkthrough - Outlook 2007 style collapsing panels  for information on how to use CollapsingGroupPanel to create Outlook style collapsing groups in the InternalPanel of SideBar.