# ImageAndTextLayoutPanel The purpose of the ImageAndTextLayoutPanel is to arrange an image and a string in a box. The real holder of the image should be an ImagePrimitive and the holder of the string should be a TextPrimitive. When these two primitives are set as Children of the panel, you are able to control their position\visibility by a number of useful properties that the ImageAndTextLayoutPanel provides. ## ImageAndTextLayoutPanel Behavior ImageAndTextLayoutPanel defines two areas (or boxes) - one for the ImagePrimitive and one for the TextPrimitive. The layout of ImageAndTextLayoutPanel allow you to reposition the ImagePrimitive and the TextPrimitive boxes in relation to each other. At the same time, you can set the position of the image and text within their respective areas. ## ImageAndTextLayoutPanel Properties Let’s assume that we have an ImageAndTextLayoutPanel that holds and ImagePrimitive and a TextPrimitive. The TextPrimitive has its Text property set to "Hard Drive" and the ImagePrimitive has its Image property set to an image of a hard drive. The following properties of the layout panel will allow you to control the position and the visibility of the text and image objects: * **DisplayStyle:** Determines which of the objects (image\text) will be visible. You can choose from one of the following values: * **ImageAndText:** Both objects (image and text) are being displayed. This is the default value. ![Telerik UI for WinForms ImageAndTextLayoutPanel displaying a hard drive image and text](https://www.telerik.com/products/winforms/documentation/assets/03fa471902278478f28bbb6ab56aad7b/tpf-layout-predefined-layout-panels-imageandtextlayoutpanel001.png) * **Image:** Only the image is being displayed. ![Telerik UI for WinForms ImageAndTextLayoutPanel displaying only the hard drive image](https://www.telerik.com/products/winforms/documentation/assets/99511b91614a61e2572d06f2138c1f0b/tpf-layout-predefined-layout-panels-imageandtextlayoutpanel002.png) * **Text:** Only the text is being displayed. ![Telerik UI for WinForms ImageAndTextLayoutPanel displaying only the Hard Drive text](https://www.telerik.com/products/winforms/documentation/assets/54398f15ccf0f5ce0fe9b2dd0f165ca4/tpf-layout-predefined-layout-panels-imageandtextlayoutpanel003.png) * **None:** None of the objects (image and text) are being displayed. ![Telerik UI for WinForms ImageAndTextLayoutPanel with image and text hidden](https://www.telerik.com/products/winforms/documentation/assets/d3fa72d045e7e69f2952d934f0e85011/tpf-layout-predefined-layout-panels-imageandtextlayoutpanel004.png) * **TextImageRelation:** Determines the way in which the text and the image are positioned in relation to each other. You can choose from one of the following properties: * **Overlay:** The text and the image are overlapping each other. This is the default value. ![Telerik UI for WinForms ImageAndTextLayoutPanel with image and text overlaid](https://www.telerik.com/products/winforms/documentation/assets/03fa471902278478f28bbb6ab56aad7b/tpf-layout-predefined-layout-panels-imageandtextlayoutpanel005.png) * **ImageAboveText:** The image is positioned above the text. ![Telerik UI for WinForms ImageAndTextLayoutPanel with image above text](https://www.telerik.com/products/winforms/documentation/assets/698fd2c28df001e3f419485478c3325a/tpf-layout-predefined-layout-panels-imageandtextlayoutpanel006.png) * **ImageBeforeText:** The image is positioned on the left side of the text (in RightToLeft = No). ![Telerik UI for WinForms ImageAndTextLayoutPanel with image before text](https://www.telerik.com/products/winforms/documentation/assets/c9f6472efb422e76db5a394c7cf989d8/tpf-layout-predefined-layout-panels-imageandtextlayoutpanel007.png) * **TextAboveImage:** The text is positioned on top of the image. ![Telerik UI for WinForms ImageAndTextLayoutPanel with text above image](https://www.telerik.com/products/winforms/documentation/assets/f0434d1d77370ba22ba587de0cea3294/tpf-layout-predefined-layout-panels-imageandtextlayoutpanel008.png) * **TextBeforeImage** The text is positioned on the left side of the image (in RightToLeft = No). ![Telerik UI for WinForms ImageAndTextLayoutPanel with text before image](https://www.telerik.com/products/winforms/documentation/assets/e9c0d6af5266b9cf1b1168c119d5ed5b/tpf-layout-predefined-layout-panels-imageandtextlayoutpanel009.png) The next two properties also determine the position of the text and image within their respective areas. * **ImageAlignment:** determines the position of the image. It has the following values: * **TopCenter:** Aligns the image top-center in the image box. * **TopLeft:** Aligns the image top-left in the image box. * **TopRight:** Aligns the image top-right in the image box. * **MiddleCenter:** Aligns the image middle-center in the image box. * **MiddleLeft:** The default value - aligns the image middle-left in the image box. * **MiddleRight:** Aligns the image middle-right in the image box. * **BottomCenter:** Aligns the image bottom-center in the image box. * **BottomLeft:** Aligns the image bottom-left in the image box. * **BottomRight:** Aligns the image bottom-right in the image box. | | | | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ![Telerik UI for WinForms ImageAndTextLayoutPanel image aligned top left](https://www.telerik.com/products/winforms/documentation/assets/578f609d276a9de73a3bc4fddbd6c1e4/tpf-layout-predefined-layout-panels-imageandtextlayoutpanel010.png) *TopLeft* | ![Telerik UI for WinForms ImageAndTextLayoutPanel image aligned top center](https://www.telerik.com/products/winforms/documentation/assets/2692e3c50fe00ba4307ecb624ab2974c/tpf-layout-predefined-layout-panels-imageandtextlayoutpanel011.png) *TopCenter* | ![Telerik UI for WinForms ImageAndTextLayoutPanel image aligned top right](https://www.telerik.com/products/winforms/documentation/assets/1ae00d0840c57597ef1355e4841eaf3c/tpf-layout-predefined-layout-panels-imageandtextlayoutpanel012.png) *TopRight* | | ![Telerik UI for WinForms ImageAndTextLayoutPanel image aligned middle left](https://www.telerik.com/products/winforms/documentation/assets/698fd2c28df001e3f419485478c3325a/tpf-layout-predefined-layout-panels-imageandtextlayoutpanel013.png) *MiddleLeft* | ![Telerik UI for WinForms ImageAndTextLayoutPanel image aligned middle center](https://www.telerik.com/products/winforms/documentation/assets/812b33dccd13e8f6998c1f57bb68aa7c/tpf-layout-predefined-layout-panels-imageandtextlayoutpanel014.png) *MiddleCenter* | ![Telerik UI for WinForms ImageAndTextLayoutPanel image aligned middle right](https://www.telerik.com/products/winforms/documentation/assets/1d4fc3890f1f5a6214172b0a5e0c3c05/tpf-layout-predefined-layout-panels-imageandtextlayoutpanel015.png) *MiddleRight* | | ![Telerik UI for WinForms ImageAndTextLayoutPanel image aligned bottom left](https://www.telerik.com/products/winforms/documentation/assets/3bbd589a143896a5857df3151c22698c/tpf-layout-predefined-layout-panels-imageandtextlayoutpanel016.png) *BottomLeft* | ![Telerik UI for WinForms ImageAndTextLayoutPanel image aligned bottom center](https://www.telerik.com/products/winforms/documentation/assets/cda1395cd4d8a895010f7d45053db810/tpf-layout-predefined-layout-panels-imageandtextlayoutpanel017.png) *BottomCenter* | ![Telerik UI for WinForms ImageAndTextLayoutPanel image aligned bottom right](https://www.telerik.com/products/winforms/documentation/assets/d8ef1b77f1367a336aae8e81792edd22/tpf-layout-predefined-layout-panels-imageandtextlayoutpanel018.png) *BottomRight* | * **TextAlignment:** determines the position of the text. It has the following values: * **TopCenter:** Aligns the text top-center in the text box. * **TopLeft:** Aligns the text top-left in the text box. * **TopRight:** Aligns the text top-right in the text box. * **MiddleCenter:** Aligns the text middle-center in the text box. * **MiddleLeft:** The default value - aligns the text middle-left in the text box. * **MiddleRight:** Aligns the text middle-right in the text box. * **BottomCenter:** Aligns the text bottom-center in the text box. * **BottomLeft:** Aligns the text bottom-left in the text box. * **BottomRight:** Aligns the text bottom-right in the text box. | | | | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ![Telerik UI for WinForms ImageAndTextLayoutPanel text aligned top left](https://www.telerik.com/products/winforms/documentation/assets/99da82aabc07d369a6cc1cc1bfaad5b9/tpf-layout-predefined-layout-panels-imageandtextlayoutpanel020.png) *TopLeft* | ![Telerik UI for WinForms ImageAndTextLayoutPanel text aligned top center](https://www.telerik.com/products/winforms/documentation/assets/ed03a9c80f6963259dc0fad50d5427f1/tpf-layout-predefined-layout-panels-imageandtextlayoutpanel019.png) *TopCenter* | ![Telerik UI for WinForms ImageAndTextLayoutPanel text aligned top right](https://www.telerik.com/products/winforms/documentation/assets/345ec0d9f643ac3bab68e5c20429b5aa/tpf-layout-predefined-layout-panels-imageandtextlayoutpanel021.png) *TopRight* | | ![Telerik UI for WinForms ImageAndTextLayoutPanel text aligned middle left](https://www.telerik.com/products/winforms/documentation/assets/698fd2c28df001e3f419485478c3325a/tpf-layout-predefined-layout-panels-imageandtextlayoutpanel023.png) *MiddleLeft* | ![Telerik UI for WinForms ImageAndTextLayoutPanel text aligned middle center](https://www.telerik.com/products/winforms/documentation/assets/2d590a67962598fd3f6f5fd4465739c4/tpf-layout-predefined-layout-panels-imageandtextlayoutpanel022.png) *MiddleCenter* | ![Telerik UI for WinForms ImageAndTextLayoutPanel text aligned middle right](https://www.telerik.com/products/winforms/documentation/assets/cb69e33f054f4c10e79f7bac2b728ee1/tpf-layout-predefined-layout-panels-imageandtextlayoutpanel024.png) *MiddleRight* | | ![Telerik UI for WinForms ImageAndTextLayoutPanel text aligned bottom left](https://www.telerik.com/products/winforms/documentation/assets/db61b5736e7afca62a47d1866dc50990/tpf-layout-predefined-layout-panels-imageandtextlayoutpanel027.png) *BottomLeft* | ![Telerik UI for WinForms ImageAndTextLayoutPanel text aligned bottom center](https://www.telerik.com/products/winforms/documentation/assets/61325b2d35dcab588d5d55c7bb0ceaaa/tpf-layout-predefined-layout-panels-imageandtextlayoutpanel025.png) *BottomCenter* | ![Telerik UI for WinForms ImageAndTextLayoutPanel text aligned bottom right](https://www.telerik.com/products/winforms/documentation/assets/db61b5736e7afca62a47d1866dc50990/tpf-layout-predefined-layout-panels-imageandtextlayoutpanel027.png) *BottomLeft* | ## Employing ImageAndTextLayoutPanel in RadControl As mentioned at the beginning of the article, ImageAndTextLayoutPanel defines the layout of an ImagePrimitive (for the image) and TextPrimitive (for the text). However, the layout panel does contain these two primitives by default. Moreover, an ImageAndTextLayoutPanel is usable only when it resides in a RadControl. The purpose of this section is to demonstrate how you can add ImagePrimitive and TextPrimitive to the layout panel and how you can add the panel to your own RadControl. 1\. First, we have to create a RadElement descendant and put an ImageAndTextLayoutPanel instance in it. In addition, we should create one TextPrimitive instance and one ImagePrimitive instance. In order to make the ImageAndTextLayoutPanel recognize the TextPrimitive and ImagePrimitive as the primitives that it should arrange, we have to call the **SetValue** method of the primitives, passing *ImageAndTextLayoutPanel.IsImagePrimitiveProperty* and *ImageAndTextLayoutPanel.IsTextPrimitiveProperty* for the ImagePrimitive and TextPrimitive respectively. Finally, the primitives should be added to the ImageAndTextLayoutPanel. All these actions should happen in the CreateChildElements method. (The BorderPrimitive is added just to outline the whole ImageAndTextLayoutPanelElement): ```C# public class ImageAndTextLayoutPanelElement : RadElement { TextPrimitive textPrim; ImagePrimitive imagePrim; ImageAndTextLayoutPanel imgTxtLayoutPanel; BorderPrimitive borderPrim; protected override void CreateChildElements() { base.CreateChildElements(); this.textPrim = new TextPrimitive(); this.imagePrim = new ImagePrimitive(); this.imgTxtLayoutPanel = new ImageAndTextLayoutPanel(); this.imagePrim.SetValue(ImageAndTextLayoutPanel.IsImagePrimitiveProperty, true); this.textPrim.SetValue(ImageAndTextLayoutPanel.IsTextPrimitiveProperty, true); this.imgTxtLayoutPanel.Children.Add(this.imagePrim); this.imgTxtLayoutPanel.Children.Add(this.textPrim); this.Children.Add(this.imgTxtLayoutPanel); borderPrim = new BorderPrimitive(); borderPrim.ForeColor = Color.Red; this.Children.Add(borderPrim); } public ImageAndTextLayoutPanel LayoutPanel { get { return this.imgTxtLayoutPanel; } } public TextPrimitive TextElement { get { return this.textPrim; } } public ImagePrimitive ImageElement { get { return this.imagePrim; } } } ``` ```VB.NET Public Class ImageAndTextLayoutPanelElement Inherits RadElement Private textPrim As TextPrimitive Private imagePrim As ImagePrimitive Private imgTxtLayoutPanel As ImageAndTextLayoutPanel Private borderPrim As BorderPrimitive Protected Overrides Sub CreateChildElements() MyBase.CreateChildElements() Me.textPrim = New TextPrimitive() Me.imagePrim = New ImagePrimitive() Me.imgTxtLayoutPanel = New ImageAndTextLayoutPanel() Me.imagePrim.SetValue(ImageAndTextLayoutPanel.IsImagePrimitiveProperty, True) Me.textPrim.SetValue(ImageAndTextLayoutPanel.IsTextPrimitiveProperty, True) Me.imgTxtLayoutPanel.Children.Add(Me.imagePrim) Me.imgTxtLayoutPanel.Children.Add(Me.textPrim) Me.Children.Add(Me.imgTxtLayoutPanel) borderPrim = New BorderPrimitive() borderPrim.ForeColor = Color.Red Me.Children.Add(borderPrim) End Sub Public ReadOnly Property LayoutPanel() As ImageAndTextLayoutPanel Get Return Me.imgTxtLayoutPanel End Get End Property Public ReadOnly Property TextElement() As TextPrimitive Get Return Me.textPrim End Get End Property Public ReadOnly Property ImageElement() As ImagePrimitive Get Return Me.imagePrim End Get End Property End Class ``` 2\. In order to be able to use our ImageAndTextLayoutPanelElement, we can either add it in an existing RadControl, or encapsulate it in a new RadControl descendant: ```C# [ToolboxItem(true)] public class ImageAndTextLayoutPanelControl : RadControl { private ImageAndTextLayoutPanelElement mainElement; public ImageAndTextLayoutPanelControl() { this.AutoSize = true; } public ImageAndTextLayoutPanelElement MainElement { get { return this.mainElement; } } protected override Size DefaultSize { get { return new Size(160, 80); } } protected override void CreateChildItems(RadElement parent) { this.mainElement = new ImageAndTextLayoutPanelElement(); this.RootElement.Children.Add(mainElement); base.CreateChildItems(parent); } } ``` ```VB.NET Public Class ImageAndTextLayoutPanelControl Inherits RadControl Private _mainElement As ImageAndTextLayoutPanelElement Public Sub New() Me.AutoSize = True End Sub Public ReadOnly Property MainElement() As ImageAndTextLayoutPanelElement Get Return Me._mainElement End Get End Property Protected Overrides ReadOnly Property DefaultSize() As Size Get Return New Size(160, 80) End Get End Property Protected Overrides Sub CreateChildItems(ByVal parent As RadElement) Me._mainElement = New ImageAndTextLayoutPanelElement() Me.RootElement.Children.Add(_mainElement) MyBase.CreateChildItems(parent) End Sub End Class ``` This is it! In addition to the obligatory steps, as you can notice, we have added convenient API that will allow us to easily use the layout features of the ImageAndTextLayoutPanel. ## See Also * [BoxLayout](https://www.telerik.com/products/winforms/documentation/telerik-presentation-framework/layout/predefined-layout-panels/boxlayout) * [DockLayout](https://www.telerik.com/products/winforms/documentation/telerik-presentation-framework/layout/predefined-layout-panels/docklayout) * [GridLayout](https://www.telerik.com/products/winforms/documentation/telerik-presentation-framework/layout/predefined-layout-panels/gridlayout) * [StackLayoutPanel](https://www.telerik.com/products/winforms/documentation/telerik-presentation-framework/layout/predefined-layout-panels/stacklayoutpanel) * [WrapLayoutPanel](https://www.telerik.com/products/winforms/documentation/telerik-presentation-framework/layout/predefined-layout-panels/wraplayoutpanel)