Edit this page

Add Custom Element in the ToolBox

This article demonstrates how to add a custom UIElement in the NewItems section of the LayoutControlToolBoxView which is located under the Items tab.

Figure 1: The default toolbox items

The default toolbox items

To add a new element in the toolbox you can use the NewItems collection of LayoutControlToolBoxView and insert a new LayoutControlHierarchicalNodeProxy object. The proxy has several properties that describe the toolbox item - header, element type and element instance - which will be used when the item is dropped in the layout control. Example 1 and 2 show how to set up the proxy and add it in the NewItems collection.

[XAML] Example 1: Example LayoutControlToolBoxView definition

<telerik:LayoutControlToolBoxView x:Name="toolBoxView" LayoutControl="{Binding ElementName=layoutControl}">

[C#] Example 2: Creat item proxies and add them in the NewItems collection

LayoutControlHierarchicalNodeProxy buttonToolBoxProxy = new LayoutControlHierarchicalNodeProxy();
buttonToolBoxProxy.Header = "Button";
buttonToolBoxProxy.OriginalItemType = typeof(Button);
buttonToolBoxProxy.OriginalItem = new Button() { Content = "Button" };

LayoutControlHierarchicalNodeProxy textBoxToolBoxProxy = new LayoutControlHierarchicalNodeProxy();
textBoxToolBoxProxy.Header = "TextBox";
textBoxToolBoxProxy.OriginalItemType = typeof(TextBox);
textBoxToolBoxProxy.OriginalItem = new TextBox() { Text = "Your input.." };


In Example 2 we add two additional proxies in the collection and they represent a TextBox and a Button which can be dragged and dropped from the toolbox to the layout control.

Figure 2: The toolbox with two additional items

The toolbox with two additional items

The custom items will be drawn using the default toolbox item icon. You can find a runnable project showing how to alter this and also the approach described in the article in our GitHub SDK repository.

See Also