|
Article relates to
|
RadPanelBar for WinForms
|
|
Created by
|
Nikolay Diyanov, Telerik
|
|
Last modified
|
November 14, 2007
|
|
Last modified by
|
Nikolay Diyanov, Telerik
|
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:
- The RootRadElement, which ties the control element tree to the Windows Forms architecture.
- 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.
- 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.
- 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:
| ClassSelector fillSelector = new ClassSelector("BodyFill"); |
| FillPrimitive fill = fillSelector.GetSelectedElements(this.radPanelBarGroupElement2)[0] as FillPrimitive; |
| fill.NumberOfColors = 2; |
| fill.BackColor = Color.LightSalmon; |
| fill.BackColor2 = Color.Beige; |
| |
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:
| TypeSelector buttonSelector = new TypeSelector(typeof(GroupStatePrimitive)); |
| GroupStatePrimitive groupStatePrimitive = buttonSelector.GetSelectedElements(group)[0] as GroupStatePrimitive; |
| groupStatePrimitive.AngleTransform = 90; |
| |
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.
Please
Sign In
to rate this article.