RadPanelBar Control Structure

 

HOW-TO
Understand the RadPanelBar control structure.

DESCRIPTION
In order to let you achieve a great-looking design of RadPanelBar, it allows you to modify a number of aspects of its visual appearance through a rich set of properties. The purpose of this article is to enable you to understand the structure of the control and allow you to quickly achieve the appearance you desire.

General RadControls structure

Let’s start by describing the different types of nodes, marked with different icons in the Control Structure tree. There are four types of nodes in the tree:

1. The RootRadElement, which ties the control element tree to the Windows Forms architecture.
2. The RadElement class (such as RadPanelBarElement). It represents the smallest discrete element of any control managed by the Telerik Presentation Framework. It defines general properties and behaviors for these elements, such as their maximum and minimum size, their visibility, and whether they should handle mouse input.
3. Panels and Layouts (such as RadScrollLayoutPanel). Layouts are the elements in the control element tree that dictate the layout of their content . Layouts are responsible for determining both the size and position of the elements they contain. Layouts can be nested to create arbitrarily complex layouts.
4. Primitives (such as FillPrimitive, TextPrimitive, BorderPrimitive) are directly responsible for painting elements of a control to the screen.

The Control Structure of RadPanelBar

We will inspect a RadPanelBar instance that contains three panel groups (of type RadPanelBarGroupElement). The screenshot below shows the RadPanelBar Control Structure tree.

RadPanelBarElement (1), which actually represents the RadPanelBar, is on top of the element hierarchy. RadPanelBar has its own BorderPrimitive and FillPrimitive, corresponding to the main border and fill of the RadPanelBar.

RadPanelBarLayout handles the layout of the groups within the RadPanelBar. It contains RadPanelBarGroupElements (2). RadPanelBarGroupElement (2) also has its own BorderPrimitive and FillPrimitive. It also contains ElementWIthCaptionLayoutPanel that dictates the size and position of both parts of the group – caption area and content area.

Caption Area

The caption area consists of a FillPrimitive that contains the RadCaptionLayout, which layouts TextPrimitive (5), ImagePrimitive (4) and RadPanelBarCaptionButton.

Content Area

The content in a RadPanelBarGroupElement is hold by RadPanelBarGroupLayout. In our case, we have different types of RadButtons in the second RadPanelBarGroupElement.

Scroll Bars

If you go up a little in the hierarchy, you would notice that there are RadScrollBarElements - one for the vertical and one for the horizontal scroll. Each of them has a RadScrollBarThumb and two RadScrollBarButtons.

Custom Modifications

If you would like to modify the visual appearance of RadPanelBar, but there is no public API that allows that, you can use a ClassSelector or a TypeSelector.

Here is a code snippet:

In the example above, a reference to the fill primitive of the second group is obtained by getting the first occurrence of an element with a class of “BodyFill”. Then you set properties for the fill primitive and get this result:

If you want to change the arrow direction of the RadPanelbarCaptionButton from down to right, you can use a TypeSelector to search for elements of type GroupStatePrimitive:

 

Please, note that if no elements are found down in the hierarchy, an exception will be thrown.

For additional information on the structure of other RadControls you can refer to the Architecture section of the documentation.