New to Telerik UI for WinForms? Download free 30-day trial

Working with panels

RadPictureBox offers a set of predefind panels TopPanel, BottomPanel, LeftPanel, and RightPanel that allows adding different elements to its item's collections in order to achieve a better user experience.

TopPanel and BottomPanel have RightItems, CenterItems, and LeftItems collections.
LeftPanel and RightPanel have TopItems, BottomItems, and CenterItems collectios.

Adding buttons to panels

RadButtonElement button = new RadButtonElement("Add New");
button.SvgImage = RadSvgImage.FromFile(@"..//..//PictureBox//symbol-add.svg");
button.TextImageRelation = TextImageRelation.ImageBeforeText;
this.radPictureBox1.TopPanel.LeftItems.Add(button);
button = new RadButtonElement("Download");
button.SvgImage = RadSvgImage.FromFile(@"..//..//PictureBox//symbol-download.svg");
button.TextImageRelation = TextImageRelation.ImageBeforeText;
this.radPictureBox1.TopPanel.RightItems.Add(button);
button = new RadButtonElement("Favourites");
button.SvgImage = RadSvgImage.FromFile(@"..//..//PictureBox//heart-filled.svg");
button.TextImageRelation = TextImageRelation.ImageBeforeText;
this.radPictureBox1.TopPanel.CenterItems.Add(button);

Dim button As RadButtonElement = New RadButtonElement("Add New")
button.SvgImage = RadSvgImage.FromFile("..//..//PictureBox//symbol-add.svg")
button.TextImageRelation = TextImageRelation.ImageBeforeText
Me.RadPictureBox1.TopPanel.LeftItems.Add(button)
button = New RadButtonElement("Download")
button.SvgImage = RadSvgImage.FromFile("..//..//PictureBox//symbol-download.svg")
button.TextImageRelation = TextImageRelation.ImageBeforeText
Me.RadPictureBox1.TopPanel.RightItems.Add(button)
button = New RadButtonElement("Favourites")
button.SvgImage = RadSvgImage.FromFile("..//..//PictureBox//heart-filled.svg")
button.TextImageRelation = TextImageRelation.ImageBeforeText
Me.RadPictureBox1.TopPanel.CenterItems.Add(button)

picturebox-getting-started3

Panel Display Mode

PictureBoxPanelDisplayMode enumeration defines three ways of displaying the panels:

  • Always: The panels will be displayed always.
  • OnMouseHover: The panels will be displayed only when the mouse is over the picture box. When the mouse moves out of the control the panels will auto hide.
  • None: The panels will not be displayed. Suitable to manually manage when the panels will be displayed.

The display mode can be changed through PanelDisplayMode property.

Setting PanelDisplayMode to be always visible

this.radPictureBox1.PanelDisplayMode = PictureBoxPanelDisplayMode.Always;

Me.RadPictureBox1.PanelDisplayMode = PictureBoxPanelDisplayMode.Always

When PanelDisplayMode is set to OnMouseHover, the AllowPanelAnimations property indicates whether to show animations when showing and hiding panels.

Panel Overflow Mode

If you have horizontal as well as vertical panel displayed in RadPictureBox you can define which one to overflow. This can be done by setting the PanelOverflowMode property to PictureBoxPanelOverflowMode.HorizontalOverVertical or PictureBoxPanelOverflowMode.VerticalOverHorizontal.

Setting PanelOverflowMode

this.radPictureBox1.PanelOverflowMode = PictureBoxPanelOverflowMode.HorizontalOverVertical;

Me.RadPictureBox1.PanelOverflowMode = PictureBoxPanelOverflowMode.HorizontalOverVertical

See Also

In this article
Not finding the help you need? Improve this article