Customizing Appearance

This article demonstrates how you can customize the appearance of the RadLayoutControl and its items.

Customizing RadLayoutControl

You can use the PreviewRectangleFill and PreviewRectangleStroke properties to customize the drag and drop preview rectangle fill and stroke.

Setting Fill and Stroke

• C#
• VB.NET

radLayoutControl1.ContainerElement.PreviewRectangleFill = ColorTranslator.FromHtml("#008de7");
radLayoutControl1.ContainerElement.PreviewRectangleStroke = ColorTranslator.FromHtml("#e83737");

radLayoutControl1.ContainerElement.PreviewRectangleFill = ColorTranslator.FromHtml("#008de7")
radLayoutControl1.ContainerElement.PreviewRectangleStroke = ColorTranslator.FromHtml("#e83737")

Figure 1:Changed Fill and Stroke

Customizing Items

• LayoutControlLabelItem: The following snipped shows how you can change the font and the BackColor of this item.

Change BackColor and Font

• C#
• VB.NET

layoutControlLabelItem5.BackColor = ColorTranslator.FromHtml("#008de7");
layoutControlLabelItem5.GradientStyle = Telerik.WinControls.GradientStyles.Solid;
layoutControlLabelItem5.DrawFill = true;
layoutControlLabelItem5.Font = new Font("Segoe Script", 16, FontStyle.Regular);

layoutControlLabelItem5.BackColor = ColorTranslator.FromHtml("#008de7")
layoutControlLabelItem5.GradientStyle = Telerik.WinControls.GradientStyles.Solid
layoutControlLabelItem5.DrawFill = True
layoutControlLabelItem5.Font = New Font("Segoe Script", 16, FontStyle.Regular)

• LayoutControlSeparatorItem: By default this item shows only a single line, however you can customize its Thickness and BackColor.

Customize Separator Item

• C#
• VB.NET

layoutControlSeparatorItem1.Thickness = 10;
layoutControlSeparatorItem1.DrawFill = true;
layoutControlSeparatorItem1.BackColor = ColorTranslator.FromHtml("#008de7");
layoutControlSeparatorItem1.GradientStyle = Telerik.WinControls.GradientStyles.Solid;

layoutControlSeparatorItem1.Thickness = 10
layoutControlSeparatorItem1.DrawFill = True
layoutControlSeparatorItem1.BackColor = ColorTranslator.FromHtml("#008de7")
layoutControlSeparatorItem1.GradientStyle = Telerik.WinControls.GradientStyles.Solid

• LayoutControlSplitterItem: By default this element does not draw its fill. The following snippet shows how you can change its BackColor and Thickness.

Customize Splitter Item

• C#
• VB.NET

layoutControlSplitterItem1.Thickness = 10;
layoutControlSplitterItem1.DrawFill = true;
layoutControlSplitterItem1.BackColor = ColorTranslator.FromHtml("#e83737");
layoutControlSplitterItem1.GradientStyle = Telerik.WinControls.GradientStyles.Solid;

layoutControlSplitterItem1.Thickness = 10
layoutControlSplitterItem1.DrawFill = True
layoutControlSplitterItem1.BackColor = ColorTranslator.FromHtml("#e83737")
layoutControlSplitterItem1.GradientStyle = Telerik.WinControls.GradientStyles.Solid

• LayoutControlGroupItem: The following code shows how you can access and customize the group item header.

Customize Group Header

• C#
• VB.NET

this.layoutControlGroupItem1.HeaderElement.Font = new Font("Segoe Script", 14, FontStyle.Regular);
this.layoutControlGroupItem1.HeaderElement.BackColor = ColorTranslator.FromHtml("#008de7");
this.layoutControlGroupItem1.HeaderElement.GradientStyle = Telerik.WinControls.GradientStyles.Solid;
this.layoutControlGroupItem1.HeaderElement.HeaderButtonElement.DrawFill = false;
this.layoutControlGroupItem1.HeaderElement.HeaderButtonElement.DrawBorder = false;
this.layoutControlGroupItem1.ShowHeaderLine = false;

Me.layoutControlGroupItem1.HeaderElement.Font = New Font("Segoe Script", 14, FontStyle.Regular)
Me.layoutControlGroupItem1.HeaderElement.BackColor = ColorTranslator.FromHtml("#008de7")
Me.layoutControlGroupItem1.HeaderElement.GradientStyle = Telerik.WinControls.GradientStyles.Solid
Me.layoutControlGroupItem1.HeaderElement.HeaderButtonElement.DrawFill = False
Me.layoutControlGroupItem1.HeaderElement.HeaderButtonElement.DrawBorder = False
Me.layoutControlGroupItem1.ShowHeaderLine = False

• LayoutControlTabbedGroup: This item gives you access to the underlying TabStrip, this way you can customize its appearance.

Customize Tabs

• C#
• VB.NET

this.layoutControlTabbedGroup1.TabStrip.Font = new Font("Segoe Script", 14, FontStyle.Regular);
this.layoutControlTabbedGroup1.TabStrip.ItemFitMode = StripViewItemFitMode.Fill;
this.layoutControlTabbedGroup1.TabStrip.Items[0].ForeColor = ColorTranslator.FromHtml("#e83737");
this.layoutControlTabbedGroup1.TabStrip.Items[1].ForeColor = ColorTranslator.FromHtml("#008de7");

Me.layoutControlTabbedGroup1.TabStrip.Font = New Font("Segoe Script", 14, FontStyle.Regular)
Me.layoutControlTabbedGroup1.TabStrip.ItemFitMode = StripViewItemFitMode.Fill
Me.layoutControlTabbedGroup1.TabStrip.Items(0).ForeColor = ColorTranslator.FromHtml("#e83737")
Me.layoutControlTabbedGroup1.TabStrip.Items(1).ForeColor = ColorTranslator.FromHtml("#008de7")