AUTHOR: Desislava Yordanova
DATE POSTED: March 27, 2015
This article demonstrates how to achieve the collapsible menu from Demo application.
Firstly, you should create a new project with a RadForm. Afterwards, drag a RadCollapsiblePanel and a RadPanorama from the Toolbox and drop them onto the form. You need to insert a RadListControl in the RadCollapsiblePanel.
Then, you should change the RadCollapsiblePanel.ExpandDirection to Right and customize its style by changing the header font, fore color, rotate the text etc. We should apply a specific image to the HeaderButtonElement for the expanded and collapsed state. We will use LightVisualElements for the up and down arrows added to the CollapsiblePanelElement.HeaderElement.Children collection. In order to customize the RadListControl, we can use the VisualItemFormatting event.
Font font =
new
Font(
"Arial"
, 14f);
Font itemsFont =
, 11f);
public
Form1()
{
InitializeComponent();
this
.BackColor = Color.White;
.radCollapsiblePanel1.Width = 250;
.radCollapsiblePanel1.Dock = DockStyle.Left;
.radCollapsiblePanel1.ExpandDirection = Telerik.WinControls.UI.RadDirection.Right;
.radPanorama1.Dock = DockStyle.Fill;
.radPanorama1.PanoramaElement.BackColor = Color.Transparent;
.radCollapsiblePanel1.HeaderText =
"ALL CONTROLS"
;
.radCollapsiblePanel1.CollapsiblePanelElement.HeaderElement.Margin =
Padding(0, 0, -5, 0);
.radCollapsiblePanel1.CollapsiblePanelElement.HeaderElement.HeaderTextElement.AngleTransform = 180;
.radCollapsiblePanel1.CollapsiblePanelElement.HeaderElement.HeaderTextElement.Font = font;
.radCollapsiblePanel1.CollapsiblePanelElement.HeaderElement.HeaderTextElement.ForeColor = Color.White;
.radCollapsiblePanel1.CollapsiblePanelElement.HeaderElement.HeaderTextElement.StretchHorizontally =
true
.radCollapsiblePanel1.CollapsiblePanelElement.HeaderElement.HeaderTextElement.StretchVertically =
.radCollapsiblePanel1.CollapsiblePanelElement.ShowHeaderLine =
false
.radCollapsiblePanel1.ControlsContainer.PanelElement.Border.Visibility = Telerik.WinControls.ElementVisibility.Collapsed;
.radCollapsiblePanel1.Collapsed += radCollapsiblePanel1_Collapsed;
.radCollapsiblePanel1.Expanded += radCollapsiblePanel1_Expanded;
.radCollapsiblePanel1.CollapsiblePanelElement.HeaderElement.HeaderButtonElement.MinSize =
Size(40, 40);
.radCollapsiblePanel1.CollapsiblePanelElement.HeaderElement.HeaderButtonElement.Image = Properties.Resources.chevron_left;
.radCollapsiblePanel1.CollapsiblePanelElement.HeaderElement.HeaderButtonElement.ImageLayout = ImageLayout.Zoom;
.radCollapsiblePanel1.CollapsiblePanelElement.HeaderElement.HeaderButtonElement.Shape =
null
.radCollapsiblePanel1.CollapsiblePanelElement.HeaderElement.HeaderButtonElement.DrawFill =
.radCollapsiblePanel1.CollapsiblePanelElement.HeaderElement.HeaderButtonElement.DrawBorder =
Color greenColor = Color.FromArgb(55, 155, 83);
.radCollapsiblePanel1.CollapsiblePanelElement.HeaderElement.BackColor = greenColor;
.radCollapsiblePanel1.PanelContainer.BackColor = greenColor;
.radCollapsiblePanel1.PanelContainer.Margin =
Padding(20, 0, 0, 0);
.radCollapsiblePanel1.CollapsiblePanelElement.HeaderElement.GradientStyle = Telerik.WinControls.GradientStyles.Solid;
LightVisualElement upButton =
LightVisualElement();
upButton.StretchVertically =
upButton.MaxSize = upButton.MinSize =
System.Drawing.Size(50, 35);
upButton.Click += upButton_Click;
upButton.Image = Properties.Resources.arrow_up;
upButton.MouseEnter += upButton_MouseEnter;
upButton.MouseLeave += upButton_MouseLeave;
.radCollapsiblePanel1.CollapsiblePanelElement.HeaderElement.Children.Add(upButton);
LightVisualElement downButton =
downButton.StretchVertically =
downButton.MaxSize = downButton.MinSize =
downButton.Click += downButton_Click;
downButton.Image = Properties.Resources.arrow_down;
downButton.MouseEnter += downButton_MouseEnter;
downButton.MouseLeave += downButton_MouseLeave;
.radCollapsiblePanel1.CollapsiblePanelElement.HeaderElement.Children.Add(downButton);
radListControl1.ListElement.BackColor = Color.Transparent;
radListControl1.ItemHeight = 40;
radListControl1.VisualItemFormatting += listControl_VisualItemFormatting;
radListControl1.Dock = DockStyle.Fill;
radListControl1.ListElement.DrawBorder =
for
(
int
i = 0; i < 50; i++)
radListControl1.Items.Add(
"Item"
+ i);
}
radListControl1.ListElement.Scroller.ScrollState = ScrollState.AlwaysHide;
radListControl1.SelectedIndexChanged += radListControl1_SelectedIndexChanged;
.radCollapsiblePanel1.PanelContainer.Controls.Add(radListControl1);
private
void
radListControl1_SelectedIndexChanged(
object
sender, Telerik.WinControls.UI.Data.PositionChangedEventArgs e)
.radPanorama1.Items.Clear();
i = 0; i < 5; i++)
RadTileElement tile =
RadTileElement();
tile.Text =
"Tile"
+ e.Position +
"."
+ i;
.radPanorama1.Items.Add(tile);
radCollapsiblePanel1_Expanded(
sender, EventArgs e)
radCollapsiblePanel1_Collapsed(
.radCollapsiblePanel1.CollapsiblePanelElement.HeaderElement.HeaderButtonElement.Image = Properties.Resources.chevron_right;
downButton_Click(
DoScrollList(
);
upButton_Click(
bool
scrollUp)
if
(scrollUp)
.radListControl1.ListElement.VScrollBar.Value >=
.radListControl1.ListElement.ItemHeight)
.radListControl1.ListElement.VScrollBar.Value -=
.radListControl1.ListElement.ItemHeight;
else
.radListControl1.ListElement.VScrollBar.Value = 0;
.radListControl1.ListElement.VScrollBar.Value <
.radListControl1.ListElement.VScrollBar.Maximum -
.radListControl1.ListElement.VScrollBar.LargeChange)
p =
.radListControl1.ListElement.VScrollBar.Value +
p = Math.Min(p,
.radListControl1.ListElement.VScrollBar.LargeChange);
.radListControl1.ListElement.VScrollBar.Value = p;
listControl_VisualItemFormatting(
sender, VisualItemFormattingEventArgs args)
args.VisualItem.ForeColor = Color.White;
args.VisualItem.Font = itemsFont;
args.VisualItem.DrawBorder =
args.VisualItem.BorderBoxStyle = Telerik.WinControls.BorderBoxStyle.FourBorders;
args.VisualItem.BorderBottomWidth = 0.5f;
args.VisualItem.BorderBottomColor = Color.White;
args.VisualItem.BorderTopWidth = 0;
args.VisualItem.BorderLeftWidth = 0;
args.VisualItem.BorderRightWidth = 0;
args.VisualItem.DrawFill =
(args.VisualItem.Selected)
args.VisualItem.Image = Properties.Resources.active_tab_arrow_menu_1;
args.VisualItem.ImageAlignment = ContentAlignment.MiddleRight;
args.VisualItem.TextImageRelation = TextImageRelation.TextBeforeImage;
args.VisualItem.GradientStyle = Telerik.WinControls.GradientStyles.Linear;
args.VisualItem.BackColor = Color.FromArgb(26, 155, 86);
args.VisualItem.BackColor2 = Color.FromArgb(24, 149, 81);
args.VisualItem.BackColor3 = Color.FromArgb(21, 143, 74);
args.VisualItem.BackColor4 = Color.FromArgb(20, 138, 70);
args.VisualItem.ResetValue(LightVisualElement.ImageProperty, Telerik.WinControls.ValueResetFlags.Local);
args.VisualItem.ResetValue(LightVisualElement.TextImageRelationProperty, Telerik.WinControls.ValueResetFlags.Local);
args.VisualItem.ResetValue(LightVisualElement.BackColorProperty, Telerik.WinControls.ValueResetFlags.Local);
args.VisualItem.BackColor = Color.Transparent;
args.VisualItem.GradientStyle = Telerik.WinControls.GradientStyles.Solid;
downButton_MouseLeave(
LightVisualElement btn = sender
as
LightVisualElement;
btn.Image = Properties.Resources.arrow_down;
downButton_MouseEnter(
btn.Image = Properties.Resources.arrow_down_hover;
upButton_MouseLeave(
btn.Image = Properties.Resources.arrow_up_hover;
upButton_MouseEnter(
btn.Image = Properties.Resources.arrow_up;
Private
font
As
New
, 14.0F)
itemsFont
, 11.0F)
Public
Sub
()
InitializeComponent()
Me
.BackColor = Color.White
.RadCollapsiblePanel1.Width = 250
.RadCollapsiblePanel1.Dock = DockStyle.Left
.RadCollapsiblePanel1.ExpandDirection = Telerik.WinControls.UI.RadDirection.Right
.RadPanorama1.Dock = DockStyle.Fill
.RadPanorama1.PanoramaElement.BackColor = Color.Transparent
.RadCollapsiblePanel1.HeaderText =
.RadCollapsiblePanel1.CollapsiblePanelElement.HeaderElement.Margin =
Padding(0, 0, -5, 0)
.RadCollapsiblePanel1.CollapsiblePanelElement.HeaderElement.HeaderTextElement.AngleTransform = 180
.RadCollapsiblePanel1.CollapsiblePanelElement.HeaderElement.HeaderTextElement.Font = font
.RadCollapsiblePanel1.CollapsiblePanelElement.HeaderElement.HeaderTextElement.ForeColor = Color.White
.RadCollapsiblePanel1.CollapsiblePanelElement.HeaderElement.HeaderTextElement.StretchHorizontally =
True
.RadCollapsiblePanel1.CollapsiblePanelElement.HeaderElement.HeaderTextElement.StretchVertically =
.RadCollapsiblePanel1.CollapsiblePanelElement.ShowHeaderLine =
False
.RadCollapsiblePanel1.ControlsContainer.PanelElement.Border.Visibility = Telerik.WinControls.ElementVisibility.Collapsed
AddHandler
.RadCollapsiblePanel1.Collapsed,
AddressOf
radCollapsiblePanel1_Collapsed
.RadCollapsiblePanel1.Expanded,
radCollapsiblePanel1_Expanded
.RadCollapsiblePanel1.CollapsiblePanelElement.HeaderElement.HeaderButtonElement.MinSize =
Size(40, 40)
.RadCollapsiblePanel1.CollapsiblePanelElement.HeaderElement.HeaderButtonElement.Image = My.Resources.chevron_left
.RadCollapsiblePanel1.CollapsiblePanelElement.HeaderElement.HeaderButtonElement.ImageLayout = ImageLayout.Zoom
.RadCollapsiblePanel1.CollapsiblePanelElement.HeaderElement.HeaderButtonElement.Shape =
Nothing
.RadCollapsiblePanel1.CollapsiblePanelElement.HeaderElement.HeaderButtonElement.DrawFill =
.RadCollapsiblePanel1.CollapsiblePanelElement.HeaderElement.HeaderButtonElement.DrawBorder =
Dim
greenColor
Color = Color.FromArgb(55, 155, 83)
.RadCollapsiblePanel1.CollapsiblePanelElement.HeaderElement.BackColor = greenColor
.RadCollapsiblePanel1.PanelContainer.BackColor = greenColor
.RadCollapsiblePanel1.PanelContainer.Margin =
Padding(20, 0, 0, 0)
.RadCollapsiblePanel1.CollapsiblePanelElement.HeaderElement.GradientStyle = Telerik.WinControls.GradientStyles.Solid
upButton
LightVisualElement()
upButton.MaxSize =
System.Drawing.Size(50, 35)
upButton.MinSize = upButton.MaxSize
upButton.Click,
upButton_Click
upButton.Image = My.Resources.arrow_up
upButton.MouseEnter,
upButton_MouseEnter
upButton.MouseLeave,
upButton_MouseLeave
.RadCollapsiblePanel1.CollapsiblePanelElement.HeaderElement.Children.Add(upButton)
downButton
downButton.MaxSize =
downButton.MinSize = downButton.MaxSize
downButton.Click,
downButton_Click
downButton.Image = My.Resources.arrow_down
downButton.MouseEnter,
downButton_MouseEnter
downButton.MouseLeave,
downButton_MouseLeave
.RadCollapsiblePanel1.CollapsiblePanelElement.HeaderElement.Children.Add(downButton)
RadListControl1.ListElement.BackColor = Color.Transparent
RadListControl1.ItemHeight = 40
RadListControl1.VisualItemFormatting,
listControl_VisualItemFormatting
RadListControl1.Dock = DockStyle.Fill
RadListControl1.ListElement.DrawBorder =
For
i
Integer
= 0
To
49
RadListControl1.Items.Add(
& i)
Next
RadListControl1.ListElement.Scroller.ScrollState = ScrollState.AlwaysHide
RadListControl1.SelectedIndexChanged,
radListControl1_SelectedIndexChanged
.RadCollapsiblePanel1.PanelContainer.Controls.Add(RadListControl1)
End
radListControl1_SelectedIndexChanged(sender
Object
, e
Telerik.WinControls.UI.Data.PositionChangedEventArgs)
.RadPanorama1.Items.Clear()
4
tile
RadTileElement()
& e.Position &
& i
.RadPanorama1.Items.Add(tile)
radCollapsiblePanel1_Expanded(sender
EventArgs)
radCollapsiblePanel1_Collapsed(sender
.RadCollapsiblePanel1.CollapsiblePanelElement.HeaderElement.HeaderButtonElement.Image = My.Resources.chevron_right
downButton_Click(sender
)
upButton_Click(sender
DoScrollList(scrollUp
Boolean
If
scrollUp
Then
.RadListControl1.ListElement.VScrollBar.Value >=
.RadListControl1.ListElement.ItemHeight
.RadListControl1.ListElement.VScrollBar.Value -=
Else
.RadListControl1.ListElement.VScrollBar.Value = 0
.RadListControl1.ListElement.VScrollBar.Value <
.RadListControl1.ListElement.VScrollBar.Maximum -
.RadListControl1.ListElement.VScrollBar.LargeChange
p
=
.RadListControl1.ListElement.VScrollBar.Value +
.RadListControl1.ListElement.VScrollBar.LargeChange)
.RadListControl1.ListElement.VScrollBar.Value = p
listControl_VisualItemFormatting(sender
, args
VisualItemFormattingEventArgs)
args.VisualItem.ForeColor = Color.White
args.VisualItem.Font = itemsFont
args.VisualItem.BorderBoxStyle = Telerik.WinControls.BorderBoxStyle.FourBorders
args.VisualItem.BorderBottomWidth = 0.5F
args.VisualItem.BorderBottomColor = Color.White
args.VisualItem.BorderTopWidth = 0
args.VisualItem.BorderLeftWidth = 0
args.VisualItem.BorderRightWidth = 0
args.VisualItem.Selected
args.VisualItem.Image = My.Resources.active_tab_arrow_menu_1
args.VisualItem.ImageAlignment = ContentAlignment.MiddleRight
args.VisualItem.TextImageRelation = TextImageRelation.TextBeforeImage
args.VisualItem.GradientStyle = Telerik.WinControls.GradientStyles.Linear
args.VisualItem.BackColor = Color.FromArgb(26, 155, 86)
args.VisualItem.BackColor2 = Color.FromArgb(24, 149, 81)
args.VisualItem.BackColor3 = Color.FromArgb(21, 143, 74)
args.VisualItem.BackColor4 = Color.FromArgb(20, 138, 70)
args.VisualItem.ResetValue(LightVisualElement.ImageProperty, Telerik.WinControls.ValueResetFlags.Local)
args.VisualItem.ResetValue(LightVisualElement.TextImageRelationProperty, Telerik.WinControls.ValueResetFlags.Local)
args.VisualItem.ResetValue(LightVisualElement.BackColorProperty, Telerik.WinControls.ValueResetFlags.Local)
args.VisualItem.BackColor = Color.Transparent
args.VisualItem.GradientStyle = Telerik.WinControls.GradientStyles.Solid
downButton_MouseLeave(sender
btn
LightVisualElement = TryCast(sender, LightVisualElement)
btn.Image = My.Resources.arrow_down
downButton_MouseEnter(sender
btn.Image = My.Resources.arrow_down_hover
upButton_MouseLeave(sender
btn.Image = My.Resources.arrow_up_hover
upButton_MouseEnter(sender
btn.Image = My.Resources.arrow_up
Resources Buy Try