انتقل إلى المحتوى

كيفية إضافة أزرار شريط الأدوات المخصصة باستخدام الإضافات

تسمح الإضافات بإضافة أزرار لإجراءات أو مهام أو محتوى محدد إلى شريط أدوات الرسم البياني في cTrader. عند النقر على زر الإجراء، يتم تنفيذ العملية المبرمجة.

في هذه المقالة والفيديو المصاحب لها، سنوضح لك كيفية إضافة أزرار جديدة إلى شريط أدوات الرسم البياني باستخدام إضافة.

إنشاء إضافة

أولاً، سنقوم بإنشاء إضافة وبرمجتها لعرض زر يفتح مراكز عند النقر عليه.

افتح تطبيق Algo وانتقل إلى علامة التبويب Plugins. انقر على زر New. حدد قالب Blank. اكتب اسمًا لإضافتك، مثل "Custom Toolbar Button"، ثم انقر على Create.

أضف زر شريط الأدوات.

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

قم بإنشاء طريقة ستتعامل مع حدث النقر على الزر وتفتح بعض المراكز.

1
2
3
4
5
6
private void OpenPositions(CommandArgs args) 
{
    ExecuteMarketOrder(TradeType.Buy, "EURUSD", 1000); 
    ExecuteMarketOrder(TradeType.Buy, "USDJPY", 1000); 
    ExecuteMarketOrder(TradeType.Buy, "EURGBP", 1000);
}

يمكنك نسخ الكود الكامل أدناه:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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 أو بالنقر على زر Build. ثم، انتقل إلى تطبيق Trade وتأكد من إضافة زر جديد إلى شريط أدوات الرسم البياني.

عند النقر على الزر ومنح الإذن، يجب أن ترى بعض المراكز المفتوحة.

إضافة صورة مخصصة للزر

إذا لم يعجبك الأيقونة الافتراضية، يمكنك تعيين الصورة التي تفضلها كأيقونة لإضافتك. استنادًا إلى كود XML، تعد صور SVG هي الكائنات الأكثر استخدامًا كأيقونات. يوفر cTrader Algo أوامر تسمح لك بتحديد واستخدام صور SVG مخصصة كأيقونات.

الحصول على كود الصورة

قم بإنشاء أو تنزيل صورة SVG التي تريد استخدامها كأيقونة. افتح ملف SVG في وضع XML في Notepad أو Visual Studio Code أو أي بيئة تطوير متكاملة. استخدم وظيفة البحث والاستبدال في البرنامج لاستبدال جميع علامات الاقتباس المزدوجة " بعلامات اقتباس فردية '.

يجب ألا يحتوي كود 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 فارغة.

1
var icon = new SvgIcon();

أضف كود XML الذي استخرجته سابقًا.

1
2
3
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>");

قم بتعيين الأيقونة للزر.

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

أضف تلميحًا يصف وظيفة الزر.

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

يمكنك نسخ الكود الكامل أدناه:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
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
        }
    }        
}

قم ببناء الإضافة مرة أخرى.

انتقل إلى تطبيق Trade للتأكد من ظهور الأيقونة الجديدة.

إضافة زر مع قائمة منبثقة

بالإضافة إلى الأزرار التي تنفذ عمليات محددة عند النقر عليها، يمكنك إضافة أزرار تعرض قائمة منبثقة. يمكنك تخصيص القائمة الناتجة لعرض عدة أزرار أو محطة صغيرة واحدة.

عد إلى محرر الكود في تطبيق Algo، وقم بإنشاء زر يفتح قائمة منبثقة وأضف زرًا آخر يوفر وظيفة إغلاق جميع المراكز داخل تلك القائمة. عند النقر على هذا الزر، سيتم إغلاق جميع المراكز المفتوحة سابقًا.

أضف زر شريط أدوات جديد.

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

قم بإنشاء الزر الجديد وتعيين الأنماط له.

1
2
3
4
5
6
7
8
9
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 
};

قم بإعلان لوحة مكدسة وأضف الزر كعنصر فرعي.

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

أضف حدثًا للتعامل مع إجراء النقر على الزر.

1
2
3
4
5
6
7
closePositionsButton.Click += args => 
{
    foreach (var position in Positions)
    {
        position.Close();
    }
};

يمكنك نسخ الكود الكامل أدناه:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
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
        }
    }        
}

قم ببناء الإضافة.

انتقل إلى تطبيق Trade واستخدم زر إغلاق جميع المراكز. هذه المرة، يجب أن تغلق المراكز المفتوحة سابقًا.

الملخص

نأمل أن يكون هذا الفيديو والمقال قد ساعداك على فهم كيفية إضافة أزرار مخصصة للعمليات والمهام وحتى القوائم المنبثقة إلى شريط أدوات الرسم البياني.