The UiListBar is a container for ListBarGroups which can host UiItemsView panels to provide grouped lists of items or host any other control.

This walkthrough illustrates how to set up a basic Windows XP Outlook-style ListBar panel.

This walkthrough is split up into the following activities:

• Adding a Windows Form to a Visual Studio project
• Adding the UiListBar and UiListBarGroups
• Adding an imagelist and the first UiItemsView panel
• Adding a second imagelist and a second UiItemsView panel
• Adding a third UiItemsView panel
• Setting the HostedControl properties of the UiListBarGroups
• Running the project

When you have completed this walkthrough, you will have an application that looks similar to the following.

Adding a Windows Form to a Visual Studio project

To add a Windows Form to your project

1. Open a new project in Visual Studio.
2. Click on Project > Add > Add Windows Form.
3. Click Open.

Adding the UiListBar and UiListBarGroups

To add the UiListBar and UiListBarGroups

1. Drag a UiListBar to Form1.
2. Change the Name property to lbOutlook. 
3. Set the FlatStyle property to LightThreeD.
4. Open the UiListBarGroup Collection by clicking the ellipsis for the Groups (Collection) property.
5. Add three Groups to the collection and change the Text property for each one, respectively, to the following: Outlook Shortcuts, My Shortcuts, and Other Shortcuts.
6. Click OK to close the UiListBarGroup Collection Editor.
7. Set the Spacing property for X and Y to 2.
8. Set the TextAlignment property to Center. 

Adding an imagelist and the first UiItemsView

To add an imagelist and the first UiItemsView

1. Drag a Windows Forms imagelist to Form1. Change the Name property to ilOutlookLarge. Change the ImageSize property for Width to 32 and for Height to 32.
2. Add 10 32 x 32 images to ilOutlookLarge for: Outlook Today, Inbox, Calendar, Contacts, Tasks, Notes, Deleted Items, My Computer, My Documents, and My Network Places (see panels 1 and 3 in the walkthrough screenshot above). 
3. Drag and drop a UiItemsView from the appropriate toolbox to Form1 and change the Name property for the UiItemsView panel to ivOutlookShortcuts. 
4. Change the DockPadding property for All to 5. 
5. Change the FlatStyle property for ivOutlookShortcuts to Flat. 
6. Set the ImagePosition property to Above, the ItemAlignment property to Center, and the ItemHighlight property to ImageOnly.
7. Set the LargeIcons property to True and the LargeImageList property to ilOutlookLarge.
8. Open the UiItem Collection Editor by clicking the ellipsis for the Items (Collection) property. Add the following items with corresponding Text and LargeImageIndex properties to the collection:
   • Outlook Today--0
   • Inbox--1
   • Calendar--2
   • Contacts--3
   • Tasks--4
   • Notes--5
   • Deleted Items--6
9. Click OK to close the UiItem Collection Editor.
10. Set the Spacing property for Y to 5.

Adding a second imagelist and a second UiItemsView

To add a second imagelist and a second UiItemsView

1. Drag a Windows Forms imagelist to Form1. Change the Name property to ilOutlookSmall. 
2. Add five 16 x 16 images to ilOutlookSmall for: Drafts, Outbox, Sent Items, Journal, and Outlook Updates (see panel 2 of the walkthrough screenshot above). 
3. Drag a UiItemsView panel from the appropriate toolbox to Form1 and change the Name property for the UiItemsView panel to ivMyShortcuts. 
4. Change the DockPadding property for All to 5.
5. Change the FlatStyle property to Flat.
6. Set the ItemHighlight property to ImageOnly.
7. Set the SmallImageList property to ilOutlookSmall.
8. Open the UiItem Collection Editor by clicking the ellipsis button for the Items (Collection) property.
9. Add the following items with corresponding Text and SmallImageIndex properties to the collection:
   • Drafts--0
   • Outbox--1
   • Sent Items--2
   • Journal--3
   • Outlook Updates--4
10. Click OK to close the UiItem Collection Editor.

Adding a third UiItemsView

To add a third UiItemsView

1. Drag a UiItemsView panel from the appropriate toolbox to Form1 and change the Name property for the UiItemsView to ivOtherShortcuts. 
2. Change the DockPadding property for All to 10. 
3. Change the FlatStyle property to Flat.
4. Set the ImagePosition property to Above, the ItemAlignment property to Center, and the ItemHighlight property to ImageOnly.
5. Set the LargeIcons property to True and the LargeImageList property to ilOutlookLarge. 
6. Open the UiItem Collection Editor by clicking the ellipsis button for the Items (Collection) property.
7. Add the following items with corresponding Text and LargeImageIndex properties to the collection:
   • My Computer--7
   • My Documents--8
   • Favorites--9
8. Click OK to close the UiItem Collection Editor.

Setting the UiListBarGroups HostedControl properties

To set the UiListBarGroups HostedControl properties

1. Click on lbOutlook to select it. 
2. Open the UiListBarGroup Collection Editor by clicking on the ellipsis for the Groups (Collection) property.
3. Select the "Outlook Shortcuts" group and set the HostedControl property to ivOutlookShortcuts. 
4. Select the "My Shortcuts" group and set the HostedControl property to ivMyShortcuts.
5. Select the "Other Shortcuts" group and set the HostedControl property to ivOtherShortcuts.
6. Click OK to close the UiListBarGroup Collection Editor. 

Running the project

To run the project

• Press F5 to run the project.  

Walkthrough: UiItemsView | Walkthrough: UiTabView | Walkthrough: UiTaskBar

 

 

---

Copyright © 2002-2006 Data Dynamics, Ltd. All rights reserved.