# LightVisualElement **LightVisualElement** is a lightweight element which is capable of displaying Text, Border and Image and can be easily customized. Here is a list of its properties allowing for fine tuning the element: * **ShouldPaint:** Indicates whether the element should be painted. Children visibility would not be affected. * **CanFocus:** Gets or sets value indicating whether an element can receive input focus. * **DrawText**, **DrawFill**, **DrawBorder** Gets or sets value indicating whether an element can receive input focus. * **BorderBoxStyle:** Defines the border rendering style – *SingleBorder*, *FourBorders*, *OuterInnerBorders* * **BorderDrawMode:** Defines drawing border corners – *HorizontalOverVertical*, *LeftOverTop*, *RightOverTop*, *RightOverBottom*, *LeftOverBottom* etc. * **BorderWidth:** Defines the width the border on each side * **BorderLeftWidth**, **BorderLeftWidth**, **BorderRightWidth**, **BorderBottomWidth** Defines the width of the border on each side independently * **BorderGradientAngle:** Defines the angle of the gradient the border uses as background. * **BorderGradientStyle:** Defines the gradient effects: *Solid*, *Linear*, *Radial*, *Glass*, *OfficeGlass*, *Gel*, and *Vista*. * **BorderColor**, **BorderColor2**, **BorderColor3**, **BorderColor4** Defines the four colors used for making gradient border background * **BorderInnerColor**, **BorderInnerColor2**, **BorderInnerColor3**, **BorderInnerColor4** Defines the four colors used for making the inner gradient border background * **BackColor**, **BackColor2**, **BackColor3**, **BackColor4** Defines the four colors used the element’s gradient background * **NumberOfColors:** Defines how many colors will be used to make the background color. If the value is ‘1’ the other three colors are ignored * **GradientStyle:** Defines the gradient effects: *Solid*, *Linear*, *Radial*, *Glass*, *OfficeGlass*, *Gel*, and *Vista*. * **GradientAngle:** Gets or sets the angle of the background gradient * **GradientPercentage:** Defines how much of the available space the first gradient color will take * **GradientPercentage2:** Defines the space available for the second gradient color * **BackgroundImage:** Gets or sets the BackgroundImage. This image fills up the entire element’s background * **Image:** Gets or sets the element’s image, the image can be resized inside the element. * **SvgImage:** Gets or sets the SVG image. * **ImageLayout:** Specifies the position of the image on the control. *None*, *Tile*, *Center*, *Stretch*, *Zoom* * **BackgroundImageLayout:** Specifies the position of the BackgroundImage on the control. *None*, *Tile*, *Center*, *Stretch*, *Zoom* * **ImageOpacity:** Specifies the opacity of the set image * **ImageAlignment**, **TextAlignment** Specifies alignment of content on the drawing surface. *TopLeft*, *TopCenter*, *TopRight*, *MiddleLeft*, *MiddleCenter*, *MiddleRight*, *BottomLeft*, *BottomCenter*, *BottomRight* * **TextImageRelation:** Specifies the position of the text and image relative to each other on a control. *Overlay*, *ImageBeforeText*, *TextBeforeImage*, *ImageAboveText*, *TextAboveImage* * **ShowHorizontalLine**, **ShowHorizontalLineColor**, **ShowHorizontalLineWidth** These properties allow you to modify a horizontal line over the element * **PaintTextFormat:** An object which Encapsulates text layout information (such as alignment, orientation and tab stops) display manipulations (such as ellipsis insertion and national digit substitution) and OpenType features * **DisableHTMLRendering:** Gets or sets the value indicating whether html tags will be rendered. * **TextBlock:** An object which contains the text and its styling. * **BorderLeftColor**, **BorderTopColor**, **BorderRightColor**, **BorderBottomColor**, **BorderLeftShadowColor**, **BorderTopShadowColor**, **BorderRightShadowColor**, **BorderBottomShadowColor** Defines border colors and shadows * **ClipText:** Determines whether text will be clipped within the calculated text paint rectangle. * **Layout:** Gets the LayoutManagerPart which is responsible for the layout. Use this property to set the margins of left, right parts separately. * **ImageTransparentColor:** Transparent color to be used for the image. * **BorderDashStyle:** Specifies the style of dashed lines drawn with a border * **EnableImageTransparency:** Gets or sets a value indicating whether image transparency is supported. * **Shadow:** Gets or Sets the *ShadowSettings* * **AutoEllipsis:** Determines whether character trimming will be automatically applied to the element if text cannot be fitted within the available space. * **UseMnemonic:** Determines whether ampersand character will be treated as mnemonic or not. * **TextWrap:** Determines whether text wrap is enabled. * **MeasureTrailingSpaces:** Indicates whether the trailing white spaces will be calculated by the layout logic * **TextParams:** Gets the *TextParams* object which defines some text settings The following example will show you how to make a simple image gallery with three LightVisualElements inside a DockLayoutPanel. ![Telerik UI for WinForms LightVisualElements displayed in a simple image gallery](https://www.telerik.com/products/winforms/documentation/assets/22c3853ae78c73d2b27f4c6cf0bc8358/tpf-primitives-lightvisualelement001.png) #### Creating a simple control with LightVisualElements ```C# public class MyLightVisualElement : RadElement { private DockLayoutPanel mainPanel; private LightVisualElement leftButtonElement; private LightVisualElement rightButtonElement; private LightVisualElement currentImageElement; private Image[] images; protected override void CreateChildElements() { this.mainPanel = new DockLayoutPanel(); this.mainPanel.LastChildFill = true; this.Children.Add(this.mainPanel); this.leftButtonElement = new LightVisualElement(); this.leftButtonElement.Text = "<--"; this.leftButtonElement.DrawBorder = true; this.mainPanel.Children.Add(this.leftButtonElement); DockLayoutPanel.SetDock(this.leftButtonElement, Telerik.WinControls.Layouts.Dock.Left); this.leftButtonElement.Click += leftButtonElement_Click; this.rightButtonElement = new LightVisualElement(); this.rightButtonElement.Text = "-->"; this.rightButtonElement.DrawFill = true; this.rightButtonElement.BackColor = Color.Green; this.mainPanel.Children.Add(this.rightButtonElement); DockLayoutPanel.SetDock(this.rightButtonElement, Telerik.WinControls.Layouts.Dock.Right); this.rightButtonElement.Click += rightButtonElement_Click; this.currentImageElement = new LightVisualElement(); this.mainPanel.Children.Add(this.currentImageElement); string imageFilesDirectory = Environment.GetFolderPath(Environment.SpecialFolder.MyPictures); string[] imageFiles = Directory.GetFiles(imageFilesDirectory, "*.jpg"); this.images = new Image[imageFiles.Length]; for (int i = 0; i < imageFiles.Length; i++) { this.images[i] = new Bitmap(Image.FromFile(imageFiles[i]), new Size(300, 100)); } if (this.images.Length >= 0) { this.currentImageElement.Image = this.images[0]; } base.CreateChildElements(); } private void rightButtonElement_Click(object sender, EventArgs e) { int currentImageIndex = Array.IndexOf(this.images, this.currentImageElement.Image); if (++currentImageIndex <= this.images.Length - 1) { this.currentImageElement.Image = this.images[currentImageIndex]; } } private void leftButtonElement_Click(object sender, EventArgs e) { int currentImageIndex = Array.IndexOf(this.images, this.currentImageElement.Image); if (--currentImageIndex >= 0) { this.currentImageElement.Image = this.images[currentImageIndex]; } } } ``` ```VB.NET Public Class MyLightVisualElement Inherits RadElement Private mainPanel As DockLayoutPanel Private leftButtonElement As LightVisualElement Private rightButtonElement As LightVisualElement Private currentImageElement As LightVisualElement Private images() As System.Drawing.Image Protected Overrides Sub CreateChildElements() Me.mainPanel = New DockLayoutPanel() Me.mainPanel.LastChildFill = True Me.Children.Add(Me.mainPanel) Me.leftButtonElement = New LightVisualElement() Me.leftButtonElement.Text = "<--" Me.leftButtonElement.DrawBorder = True Me.mainPanel.Children.Add(Me.leftButtonElement) DockLayoutPanel.SetDock(Me.leftButtonElement, Telerik.WinControls.Layouts.Dock.Left) AddHandler Me.leftButtonElement.Click, AddressOf leftButtonElement_Click Me.rightButtonElement = New LightVisualElement() Me.rightButtonElement.Text = "-->" Me.rightButtonElement.DrawFill = True Me.rightButtonElement.BackColor = System.Drawing.Color.Green Me.mainPanel.Children.Add(Me.rightButtonElement) DockLayoutPanel.SetDock(Me.rightButtonElement, Telerik.WinControls.Layouts.Dock.Right) AddHandler Me.rightButtonElement.Click, AddressOf rightButtonElement_Click Me.currentImageElement = New LightVisualElement() Me.mainPanel.Children.Add(Me.currentImageElement) Dim imageFilesDirectory As String = Environment.GetFolderPath(Environment.SpecialFolder.MyPictures) Dim imageFiles As String() = Directory.GetFiles(imageFilesDirectory, "*.jpg") ReDim images(imageFiles.Length - 1) For i As Integer = 0 To imageFiles.Length - 1 Me.images(i) = New System.Drawing.Bitmap(System.Drawing.Image.FromFile(imageFiles(i)), New System.Drawing.Size(300, 100)) Next If Me.images.Length >= 0 Then Me.currentImageElement.Image = Me.images(0) End If MyBase.CreateChildElements() End Sub Private Sub rightButtonElement_Click(sender As Object, e As EventArgs) Dim currentImageIndex As Integer = Array.IndexOf(Me.images, Me.currentImageElement.Image) If System.Threading.Interlocked.Increment(currentImageIndex) <= Me.images.Length - 1 Then Me.currentImageElement.Image = Me.images(currentImageIndex) End If End Sub Private Sub leftButtonElement_Click(sender As Object, e As EventArgs) Dim currentImageIndex As Integer = Array.IndexOf(Me.images, Me.currentImageElement.Image) If System.Threading.Interlocked.Decrement(currentImageIndex) >= 0 Then Me.currentImageElement.Image = Me.images(currentImageIndex) End If End Sub End Class ``` ## See Also * [ArrowPrimitive](https://www.telerik.com/products/winforms/documentation/telerik-presentation-framework/primitives/arrowprimitive) * [BorderPrimitive](https://www.telerik.com/products/winforms/documentation/telerik-presentation-framework/primitives/borderprimitive) * [CheckPrimitive](https://www.telerik.com/products/winforms/documentation/telerik-presentation-framework/primitives/checkprimitive) * [FillPrimitive](https://www.telerik.com/products/winforms/documentation/telerik-presentation-framework/primitives/fillprimitive) * [FocusPrimitive](https://www.telerik.com/products/winforms/documentation/telerik-presentation-framework/primitives/focusprimitive) * [GripPrimitive](https://www.telerik.com/products/winforms/documentation/telerik-presentation-framework/primitives/gripprimitive) * [ImagePrimitive](https://www.telerik.com/products/winforms/documentation/telerik-presentation-framework/primitives/imageprimitive) * [ImageShape](https://www.telerik.com/products/winforms/documentation/telerik-presentation-framework/primitives/imageshape)