# Embedded Tools

Several controls in Wisej.NET support the **Tools** property, which allows an application to "insert" custom tool buttons inside the control. It's an extremely efficient way to build flexible and modern controls in a web application.

Tool buttons can be located to the left or right of the target control, can be enabled or disabled, can automatically hide when the control loses the focus, can be always hidden, can be toggled on or off, and can have their own tooltip.

<div align="left"><img src="https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-a57cc2945590aca8cb47a9d2233180b4d64d9a7d%2Fimage.png?alt=media" alt=""></div>

* **Image** and **ImageSource** indicate the icon of the tool.
* **Name** is the name that your app can use to identify which tool has been clicked when handling the **ToolClick** event.
* **ToolTipText** shows a tooltip when the pointer is over the tool.
* **AutoHide** hides the tool when the target control is not focused.
* **Enabled** can enable or disable the tool.
* **Position** indicates where inside the control to locate the tool.
* **Pushed** sets the theme state of the tool to "pushed".
* **Visible** can show or hide the tool.

When a control has the **Tools** property it also implements the **ToolClick** event. Some controls implement the additional **ToolPosition** property allowing the application to move the tools to the *Top*, *Bottom*, *Left* (vertical layout), or *Right* (vertical layout).

{% embed url="<https://youtu.be/L6fDxBziOqE>" %}

## Supported Controls

These controls support the **Tools** system in the predefined position, inside the control.

* TextBox
* TagTextBox
* MaskedTextBox
* DateTimePicker
* ComboBox
* ListBox
* TreeView

<div align="left"><img src="https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-b1d63636f009704c907c9dfd1a97aebfc6d4d653%2Fimage.png?alt=media" alt=""></div>

Panels support the **Tools** system only when the header is visible, and automatically change the orientation of the tools when the panel is collapsed to the left or right side:

* Panel
* FlowLayoutPanel
* TableLayoutPanel
* FlexLayoutPanel
* AccordionPanel

<div align="left"><img src="https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-46c45d4f432473a62663423e5281f92d083fa458%2Fimage.png?alt=media" alt=""></div>

These controls support the **Tools** system at one of the four positions (*Top*, *Left*, *Right*, *Bottom*) indicated by the **ToolPosition** property:

* DataGridView
* ListView
* MonthCalendar

<div align="left"><img src="https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-c08be329e5230c586e4d4b6ed04fa5545714287e%2Fimage.png?alt=media" alt=""></div>

<div align="left"><img src="https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-d062f9db787c48b51728f9dc2038ab692be869b4%2Fimage.png?alt=media" alt=""></div>

Forms support the Tools system in their caption, next to the standard buttons.

<div align="left"><img src="https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-52d270b5b855885c29df3aa768a4c660fadf3475%2Fimage.png?alt=media" alt=""></div>

## Styling

Tools are styled independently in the theme. You can, however, style the container of the tools and the child tool icons depending on where they are used.

The container of the tools uses the "toolcontainer" appearance and its child buttons use the "toolcontainer/button" appearance. In addition to the default states, the control that implements the tools adds these states, allowing the theme to adapt the tool container to the type of control:

| Control       | State      |
| ------------- | ---------- |
| Form          | "caption"  |
| Panels        | "panel"    |
| Editors       | "editor"   |
| ListBox       | "listbox"  |
| DataGridView  | "datagrid" |
| MonthCalendar | "calendar" |
| ListView      | "listview" |
| TreeView      | "treeview" |

When the toolcontainer is positioned to the *Top* or *Bottom* it\_ \_also has the state "horizontal", when it's positioned to the *Left* or *Right*, it has the state "vertical".

## ToolClick Event

All the controls that support the Tools system, also implement the **ToolClick** event. When you handle the **ToolClick** event you can determine which tool was clicked by testing the Name property.

{% tabs %}
{% tab title="C#" %}

```csharp
private void panel1_ToolClick(object sender, ToolClickEventArgs e)
{
	switch (e.Tool.Name)
	{
		case "Add":
			break;

		case "Delete":
			break;
	}
}
```

{% endtab %}

{% tab title="VB.NET" %}

```visual-basic
Private Sub Panel1_ToolClick(sender As Object, e As ToolClickEventArgs) _
						Handles ComboBox1.ToolClick

	Select Case e.Tool.Name

		Case "Add"

		Case "Delete"

	End Select

End Sub
```

{% endtab %}
{% endtabs %}

If you add the tools programmatically, you can also detect the clicked tool by comparing the **e.Tool** reference.