如何使用插件添加自定义工具栏按钮

插件允许您将特定操作、任务或内容的按钮添加到 cTrader 的图表工具栏中。当点击操作按钮时，将执行编程的操作。

在本文及其对应的视频中，我们将向您展示如何使用插件将新按钮添加到图表工具栏中。

创建插件

首先，我们将创建一个插件，并编写代码以显示一个按钮，点击该按钮时将开仓。

打开 Algo 应用程序并导航到插件选项卡。点击新建按钮。选择空白模板。为您的插件输入一个名称，例如“自定义工具栏按钮”，然后点击创建。

添加工具栏按钮。

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);
}

您可以复制以下完整代码：

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
        }
    }        
}

使用 Ctrl+B 快捷键或点击构建按钮来构建插件。然后，转到交易应用程序，确认图表工具栏中已添加一个新按钮。

当您点击该按钮并授予权限时，您应该会看到一些仓位被打开。

为按钮添加自定义图像

如果您不喜欢默认图标，可以将您喜欢的图像设置为插件的图标。基于 XML 代码，SVG 图像是最常用作图标的对象。 cTrader Algo 提供了允许您指定和使用自定义 SVG 图像作为图标的命令。

获取图像代码

创建或下载您想要用作图标的 SVG 图像。在记事本、Visual Studio Code 或任何 IDE 中以 XML 模式打开 SVG 文件。使用程序中的查找和替换功能将所有双引号 " 替换为单引号 '。

您的 XML 代码不应包含双引号。

复制生成的 XML 代码。

<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>

设置新图标

返回 Algo 应用程序并打开插件的代码编辑器。

初始化一个空的 SVG 图标。

var icon = new SvgIcon();

添加您之前提取的 XML 代码。

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>");

将图标分配给按钮。

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

添加一个描述按钮功能的工具提示。

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

您可以复制以下完整代码：

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
        }
    }        
}

再次构建插件。

转到交易应用程序，确认新图标已出现。

添加带有弹出菜单的按钮

除了点击时执行特定操作的按钮外，您还可以添加显示弹出菜单的按钮。您可以自定义生成的菜单，使其显示多个按钮或一个迷你终端。

返回 Algo 应用程序中的代码编辑器，创建一个打开弹出菜单的按钮，并在该菜单中添加另一个提供平仓所有头寸功能的按钮。当点击此按钮时，所有先前打开的仓位将被平仓。

添加新的工具栏按钮。

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

创建新按钮并为其分配样式。

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 
};

声明一个堆栈面板并将按钮添加为其子项。

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

添加一个事件来处理按钮点击操作。

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

您可以复制以下完整代码：

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
        }
    }        
}

构建插件。

转到交易应用程序并使用平仓所有头寸按钮。这次，先前打开的仓位应该会被平仓。

总结

我们希望本视频和文章能帮助您了解如何将自定义按钮添加到图表工具栏中，用于操作、任务甚至弹出菜单。