Telerik blogs

If you have ever used Microsoft Outlook or Windows Explorer, you have seen the use of panels to organize content.  See Outlook 2007 screenshot below:

image

This is a very useful method of organizing information that you want available to the user all the time.  Panels can house different functionality like managing options, navigating the application or displaying important details.  You can incorporate this same functionality in your applications using the RadPanelBar. 

To get started, I thought it might be nice to create a Outlook like PanelBar with a calendar inside.  My goal is not to recreate what Outlook has done, but more importantly get you working with the RadPanelBar to show what you can do in just a couple minutes.

  1. Create new Windows Forms project
  2. Drag and drop a RadPanelBar onto the form.  You will notice that you only see an outline of the control initially.  Once we get some panels added it will look more like the end result.
    image
  3. Set the "Dock" property equal to "Fill".  This is not required, it is just to make everything easily visible.
  4. You can add Items via the Smart Tag | "Edit Items" option or the "Items" collection in the properties window.  I am using the Smart Tag in the screen shot below. 
    image
  5. Add two new RadPanelBarGroupElements (Panes) to you RadPanelBar.  I set the "Caption" properties to "Inbox" and "Calendar" to differentiate the Panes.
    image
  6. Select the "Calendar" Pane, you should see the Header surrounded by a red dotted line to know it is selected.  You will notice that as you click on the Header even in design time the RadPanelBar transitions just like it would at runtime.
  7. To host controls within the Pane you need to change the "EnableHostControlMode" property equal to True.  This is important because without doing this, the Pane will not act as a container for outside controls. You can add a few control elements without this setting, but we are not using those at this time.
    image
  8. Drag a RadCalendar on the Pane area and set the "Dock" property equal to "Top".  If you switch between the Panes now you will see that RadCalendar only shows up when on the "Calendar" pane.
    image
  9. You can change the appearance of the RadPanelBar to a look by changing the "GroupStyle" property.  I am changing mine to OutlookNavPane to get the look and feel used in Outlook.
    image
  10. Run the project and click on the Calendar Header.
    image

Obviously, my example is very elementary, but it demonstrates how easy it is to get started with the RadPanelBar. 


Comments

Comments are disabled in preview mode.