How to Add Custom Toolbar Buttons with Plugins¶

Plugins allow you to add buttons for specific actions, tasks, or content to the Chart Toolbar in cTrader. When an action button is clicked, the programmed operation will be executed.

In this article and its corresponding video, we plan to show you how to add new buttons to the Chart Toolbar using a plugin.

Creating a Plugin¶

First, let's create a plugin and code it to display a button that opens positions when it is clicked.

Open the 'Algo' app and navigate to the 'Plugins' tab. Click the 'New' button.

Select the 'Blank' template. Type in a name for your plugin, such as 'Custom Toolbar Button', and click the 'Create' button.

Add the toolbar button.

Commands.Add(CommandType.ChartContainerToolbar, OpenPositions);

Create a method that will handle the button-click event and open some positions:

private void OpenPositions(CommandArgs args) 
{
    ExecuteMarketOrder(TradeType.Buy, "EURUSD", 1000); 
    ExecuteMarketOrder(TradeType.Buy, "USDJPY", 1000); 
    ExecuteMarketOrder(TradeType.Buy, "EURGBP", 1000);
}

You can copy the full code below:

using System;
using cAlgo.API;
using cAlgo.API.Collections;
using cAlgo.API.Indicators;
using cAlgo.API.Internals;

namespace cAlgo.Plugins
{
    [Plugin(AccessRights = AccessRights.None)]
    public class TestPlug : Plugin
    {
        protected override void OnStart()
        {
            Commands.Add(CommandType.ChartContainerToolbar, OpenPositions);
        }
        private void OpenPositions(CommandArgs args) 
        {
            ExecuteMarketOrder(TradeType.Buy, "EURUSD", 1000);
            ExecuteMarketOrder(TradeType.Buy, "USDJPY", 1000); 
            ExecuteMarketOrder(TradeType.Buy, "EURGBP", 1000);
        }
        protected override void OnStop()
        {
            // Handle Plugin stop here
        }
    }        
}

You can build the plugin now. Use the Ctrl+B hotkeys or click the 'Build' button.

Now, go to the 'Trade' app and confirm that a new button has been added to the Chart Toolbar.

When you click the button and grant permission, you should see some positions open.

Adding a Custom Image for the Button¶

If you don't like the default icon, you can set your preferred image as the icon for your plugin. Based on XML code, SVG images are the objects most commonly used as icons.

cTrader Algo provides commands that allow you to specify and use custom SVG images as icons.

Obtaining the Image Code¶

Create or download the SVG image you want to use as an icon. Open the SVG file in XML mode in Notepad, Visual Studio Code or any IDE.

Use the 'Find and Replace' functionality in the programme to replace all double quotation marks " with single quotation marks '. Your XML code should not contain double quotation marks.

Copy the resulting XML code.

<svg class='w-6 h-6 text-gray-800 dark:text-white' aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'>
<path stroke='#BFBFBF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M11 6.5h2M11 18h2m-7-5v-2m12 2v-2M5 8h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1Zm0 12h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1Zm12 0h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1Zm0-12h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1Z'/>
</svg>

Setting the New Icon¶

Go back to the 'Algo' app and open the code editor for your plugin.

Initialise an empty SVG icon.

var icon = new SvgIcon();

Add the XML code you extracted earlier.

var icon = new SvgIcon(@"<svg class='w-6 h-6 text-gray-800 dark:text-white' aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'>
<path stroke='#BFBFBF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M11 6.5h2M11 18h2m-7-5v-2m12 2v-2M5 8h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1Zm0 12h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1Zm12 0h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1Zm0-12h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1Z'/>
</svg>");

Assign the icon to the button.

Commands.Add(CommandType.ChartContainerToolbar, OpenPositions, icon);

Add a tooltip that describes the button functionality.

var command = Commands.Add(CommandType.ChartContainerToolbar, OpenPositions, icon);
command.ToolTip = "Open Positions";

You can copy the full code:

using System;
using cAlgo.API;
using cAlgo.API.Collections;
using cAlgo.API.Indicators;
using cAlgo.API.Internals;

namespace cAlgo.Plugins
{
    [Plugin(AccessRights = AccessRights.None)]
    public class CustomToolbarButton : Plugin
    {
        protected override void OnStart()
        {
            var icon = new SvgIcon(@"<svg class='w-6 h-6 text-gray-800 dark:text-white' aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'>
    <path stroke='#BFBFBF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M11 6.5h2M11 18h2m-7-5v-2m12 2v-2M5 8h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1Zm0 12h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1Zm12 0h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1Zm0-12h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1Z'/>
    </svg>");

            var command = Commands.Add(CommandType.ChartContainerToolbar, OpenPositions, icon);
            command.ToolTip = "Open Positions";
        }

        private void OpenPositions(CommandArgs args) 
        {
            ExecuteMarketOrder(TradeType.Buy, "EURUSD", 1000); 
            ExecuteMarketOrder(TradeType.Buy, "USDJPY", 1000); 
            ExecuteMarketOrder(TradeType.Buy, "EURGBP", 1000);
        }

        protected override void OnStop()
        {
            // Handle Plugin stop here
        }
    }        
}

Build the plugin again.

Go to the 'Trade' app to confirm that the new icon has appeared.

Besides buttons that execute specific operations when clicked, you can add buttons that display a popup menu. You can customise the resulting menu to make it show several buttons or a single mini terminal.

Let's return to the code editor in the 'Algo' app, create a button that opens a popup menu and add another button that provides the 'Close All Positions' functionality inside that menu. When this button is clicked, all previously opened positions will be closed.

Add a new toolbar button.

Commands.Add(CommandType.ChartContainerToolbar, OnIconClicked, icon);

Create the new button and assign styles to it.

var buttonStyle = new Style();

buttonStyle.Set(ControlProperty.Margin, new Thickness(0, 5, 0, 0)); 
buttonStyle.Set(ControlProperty.Width, 150);

var closePositionsButton = new Button 
{ 
    Text = "Close All Positions", Style = buttonStyle 
};

Declare a stack panel and add the button as a child.

var stackPanel = new StackPanel();
stackPanel.AddChild(closePositionsButton);

Add an event to handle the button click action.

closePositionsButton.Click += args => 
{
    foreach (var position in Positions)
    {
        position.Close();
    }
};

You can copy the full code:

using System;
using cAlgo.API;
using cAlgo.API.Collections;
using cAlgo.API.Indicators;
using cAlgo.API.Internals;

namespace cAlgo.Plugins
{
    [Plugin(AccessRights = AccessRights.None)]
    public class CustomToolbarButton : Plugin
    {
        protected override void OnStart()
        {
            var icon = new SvgIcon(@"<svg class='w-6 h-6 text-gray-800 dark:text-white' aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'>
    <path stroke='#BFBFBF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M11 6.5h2M11 18h2m-7-5v-2m12 2v-2M5 8h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1Zm0 12h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1Zm12 0h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1Zm0-12h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1Z'/>
    </svg>");

            var command = Commands.Add(CommandType.ChartContainerToolbar, OpenPositions, icon);
            command.ToolTip = "Open Positions";

            Commands.Add(CommandType.ChartContainerToolbar, CloseAllPositions, icon);
        }

        private CommandResult CloseAllPositions (CommandArgs args)
        {
            var buttonStyle = new Style();

            buttonStyle.Set(ControlProperty.Margin, new Thickness(0, 5, 0, 0));
            buttonStyle.Set(ControlProperty.Width, 150);

            var closePositionsButton = new Button
            {
                Text = "Close All Positions", 
                Style = buttonStyle  
            };

            closePositionsButton.Click += args =>
            {
                foreach (var position in Positions)
                {
                    position.Close();
                }
            };

            var stackPanel = new StackPanel();
            stackPanel.AddChild(closePositionsButton);

            return new CommandResult(stackPanel);
        }

        private void OpenPositions(CommandArgs args) 
        {
            ExecuteMarketOrder(TradeType.Buy, "EURUSD", 1000); 
            ExecuteMarketOrder(TradeType.Buy, "USDJPY", 1000); 
            ExecuteMarketOrder(TradeType.Buy, "EURGBP", 1000);  
        }

        protected override void OnStop()
        {
            // Handle Plugin stop here
        }
    }        
}

Build the plugin.

Go to the 'Trade' app and use the 'Close All Positions' button. This time, the previously opened positions should close.

Summary¶

We hope this video and article have helped you understand how to add custom buttons for operations, tasks, and even popup menus to the Chart Toolbar. If you want to learn more about cTrader Algo, read our documentation or post a question on our forum.

Subscribe to our YouTube channel