Lewati ke isi

Kontrol

Kontrol memungkinkan interaksi tertentu yang melibatkan cBot, indikator, dan plugin. Dengan menggunakan panduan di bawah ini, Anda dapat dengan mudah membuat kontrol UI dasar dan lanjutan langsung pada grafik.

Ada beberapa kelas bawaan yang mewakili kontrol populer seperti tombol, blok teks, kotak teks, dan bentuk. Namun, Anda juga dapat membuat kontrol kustom.

Perhatikan contoh berikut:

 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
using cAlgo.API;

namespace ChartControlsTest
{
    [Indicator(IsOverlay = true, AccessRights = AccessRights.None)]
    public class ChartControls : Indicator
    {
        [Parameter(DefaultValue = "Click Me")]
        public string Text { get; set; }

        [Parameter(DefaultValue = HorizontalAlignment.Center)]
        public HorizontalAlignment HorizontalAlignment { get; set; }

        [Parameter(DefaultValue = VerticalAlignment.Center)]
        public VerticalAlignment VerticalAlignment { get; set; }

        protected override void Initialize()
        {
            var button = new Button
            {
                Text = Text,
                HorizontalAlignment = HorizontalAlignment,
                VerticalAlignment = VerticalAlignment
            };

            button.Click += Button_Click;

            Chart.AddControl(button);
        }

        private void Button_Click(ButtonClickEventArgs obj)
        {
            obj.Button.Text = "You clicked me, thanks";
        }

        public override void Calculate(int index)
        {
        }
    }
}

Jika Anda membangun indikator di atas dan membuat instance, Anda akan melihat tombol abu-abu Click me tepat di tengah grafik.

Perbedaan antara kontrol dan objek grafik

Dalam bagian sebelumnya, kita telah membahas objek grafik. Kontrol memungkinkan pengguna untuk berinteraksi dengan cBot dan indikator. Sebaliknya, objek grafik memberikan kesempatan untuk menggambar sesuatu pada grafik trading atau di jendela keluaran indikator yang terpisah.

Kontrol grafik berasal dari kelas ControlBase sementara objek grafik berasal dari kelas ChartObject.

Kontrol grafik diposisikan secara statis dengan menggunakan berbagai opsi perataan. Sementara objek grafik dapat diposisikan dengan cara yang sama persis, posisi mereka juga dapat berubah secara dinamis tergantung pada koordinat X dan Y tertentu.

Serupa dengan objek grafik, kontrol grafik dapat ditambahkan baik ke grafik utama maupun jendela keluaran indikator mana pun (jika ada). Contoh penempatan seperti itu diberikan di bawah ini:

 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
using cAlgo.API;

namespace ChartControlsTest
{
    [Indicator(IsOverlay = false, AccessRights = AccessRights.None)]
    public class ChartControls : Indicator
    {
        [Parameter(DefaultValue = "Click Me")]
        public string Text { get; set; }

        [Parameter(DefaultValue = HorizontalAlignment.Center)]
        public HorizontalAlignment HorizontalAlignment { get; set; }

        [Parameter(DefaultValue = VerticalAlignment.Center)]
        public VerticalAlignment VerticalAlignment { get; set; }

        protected override void Initialize()
        {
            var button = new Button
            {
                Text = Text,
                HorizontalAlignment = HorizontalAlignment,
                VerticalAlignment = VerticalAlignment
            };

            button.Click += Button_Click;

            IndicatorArea.AddControl(button);
        }

        private void Button_Click(ButtonClickEventArgs obj)
        {
            obj.Button.Text = "You clicked me, thanks";
        }

        public override void Calculate(int index)
        {
        }
    }
}

Setelah membuat instance indikator, Anda akan melihat tombol Klik saya di jendela keluaran indikator.

ColorPicker

Kontrol ColorPicker memungkinkan trader untuk memilih warna pilihan mereka untuk elemen atau objek kunci di cTrader. Misalnya, pengembang dapat mengintegrasikan kontrol ColorPicker ke dalam cBot yang menggambar garis tren sehingga pengguna dapat memilih warna pilihan mereka untuk setiap garis tren. Pengaturan ini memudahkan trader untuk membedakan antara berbagai jenis garis tren.

Plugin yang menambahkan indikator ke grafik juga dapat menerapkan kontrol ColorPicker karena fitur ini memungkinkan pengguna untuk memilih warna untuk berbagai garis indikator.

Ketika pengguna mengklik kotak warna, pemilih warna muncul. Pengguna kemudian dapat memilih antara warna standar dan kustom.

Contoh kode:

 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 ColorPickerTest : Plugin
    {
        protected override void OnStart()
        {
            var aspBlock = Asp.SymbolTab.AddBlock("Color Picker");

            var colorPicker = new ColorPicker {IsStretched = true, SelectedColor = Color.Red, Height = 20, Width = 20, HorizontalAlignment = HorizontalAlignment.Center, VerticalAlignment = VerticalAlignment.Center};

            aspBlock.Child = colorPicker;

            colorPicker.SelectedColorChanged += colorPicker_SelectedColorChanged;

        }

        private void colorPicker_SelectedColorChanged(ColorPickerSelectedColorChangedEventArgs obj)
        {
            Print($"colorPicker_SelectedColorChanged, NewSelectedColor: {obj.NewSelectedColor} | PreviousSelectedColor: {obj.PreviousSelectedColor}");
        }

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

Image title

DropZone

Kontrol DropZone memungkinkan trader untuk melakukan aksi seret dan lepas yang melibatkan cBot, indikator, atau plugin. Untuk menerapkan kontrol ini dalam algoritma Anda, gunakan kelas DropZone. Kontrol DropZone dapat dimanipulasi seperti kontrol lainnya.

Ketika pengguna menjatuhkan file atau folder yang kompatibel ke dalam kotak, event Dropped dihasilkan. Ketika pengguna menjatuhkan folder atau beberapa folder ke dalam kotak, hanya file yang kompatibel dengan ekstensi yang ditentukan dalam FilterExtensions yang diproses dan disalin.

Catatan

File yang dijatuhkan biasanya disalin dan disimpan di lokasi ini: ..\Documents\cAlgo\Data\{AlgoType}\{AlgoName}\Selected Files\

Lokasi untuk instance cBot berbeda dari yang di atas: ..\Documents\cAlgo\Data\cBots\{cBotName}\{unique-instance-number}\Selected files\

Kode plugin ini menunjukkan cara menambahkan kontrol DropZone ke Trade Watch:

 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
using System;
using System.Drawing;
using cAlgo.API;
using cAlgo.API.Collections;
using cAlgo.API.Indicators;
using cAlgo.API.Internals;

namespace cAlgo.Plugins
{
    [Plugin(AccessRights = AccessRights.None)]
    public class TradeWatchTabSample : Plugin
    {
        protected override void OnStart()
        {
            var tab = TradeWatch.AddTab("DropZone");

            var _border = new Border
            {
                BorderThickness = 3,
                BorderColor = Color.DarkGray,
                Opacity = 0.7,
                HorizontalAlignment = HorizontalAlignment.Center,
                VerticalAlignment = VerticalAlignment.Center,
                Height = 200,
                Width = 350,
                BackgroundColor = Color.LightGray
            };

            var _textBlock = new TextBlock
            {
                Text = "Drag your files here",
                Opacity = 1,
                ForegroundColor = Color.DarkGray,
                FontSize = 16,
                VerticalAlignment = VerticalAlignment.Center,
                HorizontalAlignment = HorizontalAlignment.Center
            };

            var _dropzone = new DropZone
            {
                FilterExtensions = new string[] { "txt", "algo", "csv" },
                IsDirectoryDropAllowed = true,
                IsVisible = true,
                IsEnabled = true
            };
            _border.Child = _textBlock;
            _dropzone.Child = _border;
            //   _dropzone.Child = _textBlock;
            tab.Child = _dropzone;

            _dropzone.Dropped += Dropped_file;
        }

        private void Dropped_file(DroppedEventArgs obj)
        {
            Print("File has been added!");
        }
    }
}

Image title

ProgressBar

Kontrol ProgressBar menampilkan perkembangan operasi yang sedang berlangsung. Bar kemajuan membuat algoritma lebih ramah pengguna dan membantu mengelola ekspektasi trader mengenai waktu tunggu untuk operasi tertentu.

cTrader Algo API memungkinkan pengembang untuk menambahkan dua jenis kontrol ProgressBar: kontrol tak terbatas dan kontrol tertentu.

Kontrol tak terbatas

Anda mungkin ingin menggunakan kontrol tak terbatas dalam situasi berikut:

  • Anda tidak dapat menentukan waktu tunggu untuk suatu operasi.
  • Anda tidak dapat mendeteksi perkembangan suatu operasi.
  • Anda tidak ingin menunjukkan berapa lama suatu operasi akan berlangsung.

Image title

Kontrol tertentu

Anda mungkin ingin menggunakan kontrol ini ketika Anda dapat menentukan waktu tunggu untuk suatu operasi dan ingin pengguna melihat indikator berdasarkan waktu tersebut.

Untuk menampilkan kemajuan operasi, gunakan properti Value untuk mengatur angka. Untuk mengatur persentase bar kemajuan, gunakan properti Minimum dan Maximum.

Image title

Kode plugin di bawah ini menunjukkan cara membuat bar kemajuan menggunakan kontrol tak terbatas dan tertentu (hijau):

 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
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 ProgressBarTest : Plugin
    {
        private ProgressBar _infiniteProgressBar;
        private ProgressBar _determinateProgressBar;

        protected override void OnStart()
        {
            var aspBlock = Asp.SymbolTab.AddBlock("Progress bar");

            var panel = new StackPanel() {Height = 200, Width = 200, Orientation = Orientation.Vertical};

            _infiniteProgressBar = new ProgressBar {IsIndeterminate = true, Height = 20};

            panel.AddChild(_infiniteProgressBar);

            _determinateProgressBar = new ProgressBar {IsIndeterminate = false, Height = 20};

            panel.AddChild(_determinateProgressBar);

            var autoProgressButton = new Button {Text = "Start"};

            autoProgressButton.Click += AutoProgressButton_Click;

            panel.AddChild(autoProgressButton);

            aspBlock.Child = panel;

        }

        private void AutoProgressButton_Click(ButtonClickEventArgs obj)
        {
            Timer.Start(1);
        }

        protected override void OnTimer()
        {
            _determinateProgressBar.Value++;

            Print($"Value: {_determinateProgressBar.Value}");
        }

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

Dialog

OpenFileDialog dan OpenFolderDialog

cTrader Algo API menyediakan antarmuka OpenFileDialog untuk memungkinkan pengguna memilih file untuk algoritma. Ketika pengguna memilih file di jendela yang dihasilkan, file tersebut disalin ke folder Selected files algoritma. Algoritma dapat bekerja dengan file di dalam folder Selected files-nya tanpa batasan.

Kiat

Gunakan fungsionalitas OpenFileDialog ketika Anda perlu memuat file data penting, file cadangan atau konfigurasi, indikator kustom atau skrip.

Kode di bawah ini menunjukkan cara menggunakan dialog OpenFileDialog dalam indikator:

 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
using System;
using cAlgo.API;
using System.Text;

namespace cAlgo
{
    [Indicator(AccessRights = AccessRights.None, IsOverlay = true)]
    public class OpenFileDialogExample : Indicator
    {
        private OpenFileDialog _openFileDialog;

        protected override void Initialize()
        {
            _openFileDialog = new OpenFileDialog()
            {
                InitialDirectory = Environment.GetFolderPath(Environment.SpecialFolder.MyDocuments),
                Multiselect = true,
                Title = "My Open File Dialog Title"
            };

            var showOpenFileDialog = new Button { Text = "Show Open File Dialog" };
            showOpenFileDialog.Click += showOpenFileDialog_Click;

            var panel = new StackPanel
            {
                Orientation = Orientation.Vertical,
                HorizontalAlignment = HorizontalAlignment.Center,
                VerticalAlignment = VerticalAlignment.Center
            };

            panel.AddChild(showOpenFileDialog);
            Chart.AddControl(panel);
        }

        private void showOpenFileDialog_Click(ButtonClickEventArgs obj)
        {
            var result = _openFileDialog.ShowDialog();
            Print($"Result: {result} | FileName: {_openFileDialog.FileName} | FileNames: {string.Join(',', _openFileDialog.FileNames)}");
        }

        public override void Calculate(int index)
        {
        }
    }
}

Image title

cTrader Algo API menyediakan antarmuka OpenFolderDialog untuk memungkinkan pengguna menentukan folder untuk algoritma. Ketika pengguna memilih folder di jendela yang dihasilkan, semua file dan folder dengan file di dalamnya yang dipilih disalin ke folder Selected files algoritma.

Kiat

Gunakan fungsionalitas OpenFolderDialog ketika Anda perlu memuat folder yang berisi file data penting, file cadangan atau konfigurasi, indikator kustom atau skrip.

File dan folder yang dipilih biasanya disalin ke folder Selected files karena algoritma dapat bekerja dengan item di dalam folder tersebut bahkan ketika AccessRights-nya diatur ke None.

Catatan

Folder Selected files algoritma biasanya berada di jalur ini: ..\Documents\cAlgo\Data\{AlgoType}\{AlgoName}\Selected files\

Folder Selected files untuk instance cBot berbeda dari yang di atas: ..\Documents\cAlgo\Data\cBots\{cBotName}\{Instance-Id}\Selected files\

Kode di bawah ini menunjukkan cara menggunakan dialog OpenFolderDialog dalam indikator:

 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
using System;
using cAlgo.API;

namespace cAlgo
{
    [Indicator(AccessRights = AccessRights.None, IsOverlay = true)]
    public class OpenFolderDialogExample : Indicator
    {
        private OpenFolderDialog _openFolderDialog;

        protected override void Initialize()
        {
            _openFolderDialog = new OpenFolderDialog()
            {
                InitialDirectory = Environment.GetFolderPath(Environment.SpecialFolder.MyDocuments),
                Title = "My Open Folder Dialog Title"
            };

            var showOpenFolderDialog = new Button { Text = "Show Open Folder Dialog" };
            showOpenFolderDialog.Click += showOpenFolderDialog_Click;

            var panel = new StackPanel
            {
                Orientation = Orientation.Vertical,
                HorizontalAlignment = HorizontalAlignment.Center,
                VerticalAlignment = VerticalAlignment.Center
            };

            panel.AddChild(showOpenFolderDialog);
            Chart.AddControl(panel);
        }

        private void showOpenFolderDialog_Click(ButtonClickEventArgs obj)
        {
            var result = _openFolderDialog.ShowDialog();
            Print($"Result: {result} | FolderName: {_openFolderDialog.FolderName}");
        }

        public override void Calculate(int index)
        {
        }
    }
}

Image title

SaveFileDialog

cTrader Algo API menyediakan antarmuka SaveFileDialog untuk memungkinkan pengguna menyimpan file (secara lokal) ke komputer mereka. Ketika jendela yang relevan muncul, pengguna memilih folder tempat mereka ingin menyimpan file dan memasukkan nama untuk file tersebut. File kemudian disimpan di lokasi yang ditentukan.

Kiat

Gunakan fungsionalitas SaveFileDialog ketika Anda perlu melakukan salah satu dari hal berikut:

  • Menyimpan laporan kinerja, hasil backtesting, file konfigurasi atau data optimisasi.
  • Mengekspor log trading, jurnal operasi atau data aktivitas pengguna umum.
  • Menyimpan indikator kustom, data untuk grafik dan visualisasi atau parameter untuk strategi.

Kode di bawah ini menunjukkan cara menggunakan dialog SaveFileDialog dalam indikator:

 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
using System;
using cAlgo.API;
using System.Text;

namespace cAlgo
{
    [Indicator(AccessRights = AccessRights.None, IsOverlay = true)]
    public class SaveFileDialogExample : Indicator
    {
        private SaveFileDialog _saveFileDialog;

        protected override void Initialize()
        {
            _saveFileDialog = new SaveFileDialog()
            {
                InitialDirectory = Environment.GetFolderPath(Environment.SpecialFolder.MyDocuments),
                Title = "My Save File Dialog Title"
            };

            var showSaveFileDialogText = new Button { Text = "Show Save File Dialog (Set Content as text)" };
            var showSaveFileDialogBytes = new Button { Text = "Show Save File Dialog (Set Content as bytes)" };

            showSaveFileDialogText.Click += showSaveFileDialogText_Click;
            showSaveFileDialogBytes.Click += showSaveFileDialogBytes_Click;

            var panel = new StackPanel
            {
                Orientation = Orientation.Vertical,
                HorizontalAlignment = HorizontalAlignment.Center,
                VerticalAlignment = VerticalAlignment.Center
            };
            panel.AddChild(showSaveFileDialogText);
            panel.AddChild(showSaveFileDialogBytes);
            Chart.AddControl(panel);
        }

        private void showSaveFileDialogText_Click(ButtonClickEventArgs obj)
        {
            var result = _saveFileDialog.ShowDialog();
            Print($"Result: {result}");
            if (result != FileDialogResult.Cancel)
            {
                _saveFileDialog.WriteToFile("Test in text");
            }
        }

        private void showSaveFileDialogBytes_Click(ButtonClickEventArgs obj)
        {
            var result = _saveFileDialog.ShowDialog();
            Print($"Result: {result}");
            if (result != FileDialogResult.Cancel)
            {
                _saveFileDialog.WriteToFile(Encoding.UTF8.GetBytes("Test in bytes"));
            }
        }

        public override void Calculate(int index)
        {
        }
    }
}

Kontrol yang dapat diseret

Kontrol yang dapat diseret di area grafik

Antarmuka ChartDraggable dan ChartDraggables menyediakan tipe yang memungkinkan Anda menambahkan kontrol yang dapat diseret yang mampu menampung kontrol lain dan elemen berbeda ke grafik. Kontrol yang dapat diseret ini memudahkan pengguna untuk berinteraksi dengan berbagai elemen grafik.

Catatan

Kontrol yang dapat diseret hanya dapat dipindahkan atau diposisikan ulang dalam grafik tempat kontrol tersebut ditambahkan.

Kode ini menunjukkan cara membuat indikator yang menambahkan dua kontrol yang dapat dipindahkan dalam grafik:

 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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
using System;
using cAlgo.API;
using cAlgo.API.Collections;
using cAlgo.API.Indicators;
using cAlgo.API.Internals;

namespace cAlgo
{
    [Indicator(AccessRights = AccessRights.None)]
    public class DragControl : Indicator
    {
        protected override void Initialize()
        {
            var draggable = Chart.Draggables.Add();
            var draggable2 = IndicatorArea.Draggables.Add();

            draggable.Child = GetDraggableChildWebView();
            draggable2.Child = GetDraggableChildText();

            draggable.LocationChanged += draggable_LocationChanged;
            draggable2.LocationChanged += draggable2_LocationChanged;
        }

        public override void Calculate(int index)
        {
            // Calculate value at specified index
            // Result[index] = 
        }

        private StackPanel GetDraggableChildWebView()
        {
            var stackPanel = new StackPanel
            {
                HorizontalAlignment = HorizontalAlignment.Center,
                VerticalAlignment = VerticalAlignment.Center,
                BackgroundColor = Color.Gold
            };

            var webView = new WebView() {Height = 500, Width = 300};

            webView.Loaded += webView_Loaded;

            stackPanel.AddChild(webView);

            return stackPanel;
        }

        private StackPanel GetDraggableChildText()
        {
            var stackPanel = new StackPanel
            {
                HorizontalAlignment = HorizontalAlignment.Center,
                VerticalAlignment = VerticalAlignment.Center,
                BackgroundColor = Color.Gold
            };
            var text_block = new TextBlock
                 {
                     Text = "Testing draggable controls",
                     Margin = 5,
                     ForegroundColor = Color.Black,
                     FontWeight = FontWeight.ExtraBold
                 };

            stackPanel.AddChild(text_block);

            return stackPanel;
        }


        private void webView_Loaded(WebViewLoadedEventArgs obj)
        {
            obj.WebView.NavigateAsync("https://www.youtube.com/");
        }

        private void draggable_LocationChanged(ChartDraggableLocationChangedEventArgs obj)
        {
            Print($"Draggable '{obj.Draggable.Id}' location changed to: ({obj.Draggable.X}, {obj.Draggable.Y})");
        }

        private void draggable2_LocationChanged(ChartDraggableLocationChangedEventArgs obj)
        {
            Print($"Draggable '{obj.Draggable.Id}' location changed to: ({obj.Draggable.X}, {obj.Draggable.Y})");
        }
    }
}

Kontrol yang dapat diseret di jendela aplikasi

Antarmuka ApplicationDraggable dan ApplicationDraggables menyediakan tipe yang digunakan untuk menambahkan kontrol mengambang yang dapat dipindahkan secara individual di seluruh jendela aplikasi cTrader. Kontrol seperti itu memungkinkan Anda untuk membuat antarmuka pengguna yang interaktif dan dinamis.

Catatan

Dari tiga jenis algoritma, hanya plugin yang diizinkan untuk menerapkan kontrol yang dapat diseret di seluruh aplikasi.

Kode ini menunjukkan cara membuat plugin yang menambahkan komponen WebView dan blok teks dalam dua jendela terpisah, yang dapat dipindahkan di seluruh UI cTrader:

 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
64
65
66
67
68
using System;
using cAlgo.API;
using cAlgo.API.Internals;

namespace cAlgo.Plugins
{
    [Plugin(AccessRights = AccessRights.None)]
    public class ApplicationLevelDraggables : Plugin
    {
        private ApplicationDraggable _webDraggable;
        private ApplicationDraggable _textDraggable;

        protected override void OnStart()
        {
            _webDraggable = Application.Draggables.Add();
            _webDraggable.Child = GetDraggableChildWebView();
            _webDraggable.LocationChanged += OnDraggableLocationChanged;

            _textDraggable = Application.Draggables.Add();
            _textDraggable.Child = GetDraggableChildText();
            _textDraggable.LocationChanged += OnDraggableLocationChanged;
        }

        private void OnDraggableLocationChanged(ApplicationDraggableLocationChangedEventArgs args)
        {
            Print($"Draggable '{args.Draggable.Id}' location changed to: ({args.Draggable.X}, {args.Draggable.Y})");
        }

        private StackPanel GetDraggableChildWebView()
        {
            var stackPanel = new StackPanel
            {
                HorizontalAlignment = HorizontalAlignment.Center,
                VerticalAlignment = VerticalAlignment.Center,
                BackgroundColor = Color.Gold
            };

            var webView = new WebView { Width = 300, Height = 200 };
            webView.Loaded += (args) => args.WebView.NavigateAsync("https://www.youtube.com/");

            stackPanel.AddChild(webView);

            return stackPanel;
        }

        private StackPanel GetDraggableChildText()
        {
            var stackPanel = new StackPanel
            {
                HorizontalAlignment = HorizontalAlignment.Center,
                VerticalAlignment = VerticalAlignment.Center,
                BackgroundColor = Color.Gold
            };

            var textBlock = new TextBlock
            {
                Text = "Testing Application-level draggable",
                Margin = 5,
                ForegroundColor = Color.Black,
                FontWeight = FontWeight.ExtraBold
            };

            stackPanel.AddChild(textBlock);

            return stackPanel;
        }
    }
}

Kontrol tab

Kelas TabControl menyediakan tipe yang memungkinkan Anda membuat beberapa tab untuk sebuah algoritma. Tab-tab ini dapat digunakan untuk menyatukan elemen-elemen terkait atau menampilkan tampilan terpisah untuk berbagai fungsionalitas.

Kode ini menunjukkan cara menggunakan tab dalam plugin yang ditambahkan ke Panel Simbol Aktif:

 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
using System;
using System.Linq;
using cAlgo.API;
using cAlgo.API.Internals;

namespace cAlgo.Plugins
{
    [Plugin(AccessRights = AccessRights.FullAccess)]
    public class TabControlSimple : Plugin
    {
        private TabControl _tabControl;

        protected override void OnStart()
        {
            _tabControl = new TabControl
            {
                Height = 200,
                TabStripPlacement = Dock.Left 
            };

            var firstTab = new TabItem
            {
                Header = new TextBlock { Text = "First Tab" },
                Content = new TextBlock { Text = "First Tab Content", BackgroundColor = Color.Red }
            };

            var secondTab = new TabItem
            {
                Header = new TextBlock { Text = "Second Tab" },
                Content = new TextBlock { Text = "Second Tab Content" }
            };

            _tabControl.AddTab(firstTab);
            _tabControl.AddTab(secondTab);

            _tabControl.SelectedTabChanged += TabControl_SelectedTabChanged;

            _tabControl.SelectedTab = secondTab;

            var panel = new StackPanel { Orientation = Orientation.Vertical };
            panel.AddChild(_tabControl);

            var asp = Asp.SymbolTab.AddBlock("Simple Tab Control");
            asp.Child = panel;
            asp.Height = 300;
        }

        private void TabControl_SelectedTabChanged(TabControlSelectedTabChangedEventArgs obj)
        {
            Print($"Selected tab changed to: {obj.SelectedTab?.UniqueId}");
        }

        protected override void OnStop()
        {
        }
    }
}

Kontrol kustom

Kontrol kustom adalah kontrol yang pada dasarnya terdiri dari beberapa kontrol yang telah ditentukan sebelumnya. Dengan kata lain, ini adalah kontrol yang isinya terdiri dari kontrol-kontrol lain.

Kontrol kustom bertindak sebagai kelas yang dapat digunakan kembali, mirip dengan kontrol bawaan.

 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
using cAlgo.API;

namespace ChartControlsTest
{
    [Indicator(IsOverlay = true, AccessRights = AccessRights.None)]
    public class ChartControls : Indicator
    {
        [Parameter("# Of Text Areas", DefaultValue = 4)]
        public int NumberOfTextAreas { get; set; }

        protected override void Initialize()
        {
            var panel = new WrapPanel
            {
                Orientation = Orientation.Horizontal,
                HorizontalAlignment = HorizontalAlignment.Center,
                VerticalAlignment = VerticalAlignment.Center
            };

            for (int i = 0; i < NumberOfTextAreas; i++)
            {
                var textArea = new TextArea
                {
                    HorizontalAlignment = HorizontalAlignment.Right,
                    VerticalAlignment = VerticalAlignment.Stretch,
                    Margin = 5,
                };

                panel.AddChild(textArea);
            }

            Chart.AddControl(panel);
        }

        public override void Calculate(int index)
        {
        }
    }

    public class TextArea : CustomControl
    {
        private readonly TextBox _textBox;

        public TextArea()
        {
            _textBox = new TextBox
            {
                TextAlignment = TextAlignment.Left,
                TextWrapping = TextWrapping.Wrap,
                AcceptsReturn = true,
                AcceptsTab = true,
                Width = 300,
                Height = 200,
            };

            AddChild(_textBox);
        }
    }
}

Sebuah instance dari indikator ini harus menampilkan empat kotak teks langsung di tengah grafik utama.

Atur kontrol dengan panel

Untuk membuat penggunaan kontrol lebih nyaman, Anda mungkin ingin menempatkan beberapa kontrol ke dalam grup yang berbeda dengan posisinya sendiri di UI. Untuk melakukan ini, Anda dapat menggunakan kelas Panels dan turunannya.

Anggap panel sebagai kontrol dengan kontrol lain sebagai isinya. cTrader mendukung lima kelas berbeda yang mewarisi dari kelas dasar Panels (yang sendirinya mewarisi dari kelas Control):

  • Canvas
  • DockPanel
  • Grid
  • StackPanel
  • WrapPanel

Masing-masing kelas di atas menggunakan tata letak panel dan strategi penempatan yang berbeda seperti yang dibahas di bawah ini.

Canvas

Canvas adalah panel yang memungkinkan penempatan kontrol berdasarkan koordinat X dan Y tertentu.

Perlu diperhatikan bahwa sumbu X dan Y berbeda dari yang digunakan oleh objek grafik atau gambar. Koordinat X dan Y yang digunakan oleh kelas Canvas mewakili nilai numerik yang dimulai dari (0, 0) dari sudut kiri atas grafik.

Perhatikan contoh berikut:

 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
using cAlgo.API;

namespace ChartControlsTest
{
    [Indicator(IsOverlay = true, AccessRights = AccessRights.None)]
    public class ChartControls : Indicator
    {
        [Parameter(DefaultValue = "Click Me")]
        public string Text { get; set; }

        [Parameter(DefaultValue = 0)]
        public double Left { get; set; }

        [Parameter(DefaultValue = 0)]
        public double Top { get; set; }

        [Parameter(DefaultValue = 0)]
        public double Margin { get; set; }

        [Parameter(DefaultValue = 10)]
        public double Padding { get; set; }

        protected override void Initialize()
        {
            var button = new Button
            {
                Text = Text,
                Left = Left,
                Top = Top,
                Margin = Margin,
                Padding = Padding
            };

            button.Click += Button_Click;

            var canvas = new Canvas();

            /* We add our button control to the canvas
            panel. */
            canvas.AddChild(button);

            // We add our canvas panel to the chart.
            Chart.AddControl(canvas);
        }

        private void Button_Click(ButtonClickEventArgs obj)
        {
            obj.Button.Text = "You clicked me, thanks";
        }

        public override void Calculate(int index)
        {
        }
    }
}

Setelah membuat instance dari indikator di atas, Anda akan melihat tombol Click me di sudut kiri atas grafik.

Properti Top dari sebuah kontrol menentukan posisinya pada sumbu Y. Sebaliknya, properti Left menentukan posisinya pada sumbu X.

Kode di atas juga menggunakan properti Padding dan Margin. Padding mengacu pada jarak antara isi kontrol dan batas luarnya. Margin adalah jarak antara kontrol dan batas induknya. Properti Padding dan Margin berlaku untuk semua panel, tidak hanya kelas canvas. Keduanya berguna untuk mengatur jarak antar kontrol Anda.

Dalam kebanyakan kasus, kelas Canvas digunakan untuk mengelompokkan hanya sejumlah kecil kontrol.

Panel dock

Kelas DockPanel digunakan untuk menempatkan (dock) sebuah kontrol di lokasi statis pada grafik. Ada empat posisi dock yang mungkin:

  • Atas
  • Bawah
  • Kiri
  • Kanan

Setiap kontrol memiliki properti Dock. Saat menggunakan kelas DockPanel, Anda dapat menggunakan properti ini untuk memposisikan kontrol di dalam DockPanel. Hal ini diilustrasikan dalam contoh berikut:

 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
using cAlgo.API;

namespace ChartControlsTest
{
    [Indicator(IsOverlay = true, AccessRights = AccessRights.None)]
    public class ChartControls : Indicator
    {
        [Parameter(DefaultValue = Dock.Top)]
        public Dock TextBoxDock { get; set; }

        [Parameter(DefaultValue = Dock.Bottom)]
        public Dock ButtonDock { get; set; }

        private TextBox _textBox;

        protected override void Initialize()
        {
            _textBox = new TextBox
            {
                Margin = 5,
                Text = "Write here...",
                ForegroundColor = Color.Yellow,
                Dock = TextBoxDock,
                Width = 200
            };

            var button = new Button
            {
                Text = "Tell what I wrote?",
                Dock = ButtonDock,
                Width = 200
            };

            button.Click += Button_Click;

            var dockPanel = new DockPanel
            {
                HorizontalAlignment = HorizontalAlignment.Center,
                VerticalAlignment = VerticalAlignment.Center,
            };

            dockPanel.AddChild(_textBox);
            dockPanel.AddChild(button);

            Chart.AddControl(dockPanel);
        }

        private void Button_Click(ButtonClickEventArgs obj)
        {
            obj.Button.Text = $"You wrote: {_textBox.Text}";
        }

        public override void Calculate(int index)
        {
        }
    }
}

Saat membuat instance dari indikator ini, Anda akan melihat panel dock di tengah grafik yang berisi bidang teks dan tombol yang dapat diklik.

Perhatikan bahwa panel dock dapat diisi baik secara horizontal maupun vertikal. Anda tidak dapat menggunakan kedua penyejajaran ini secara bersamaan. Orientasi panel dock diatur secara otomatis saat menyiapkan kontrol pertama dalam DockPanel. Jika properti Dock dari kontrol pertama diatur ke Top atau Bottom, seluruh DockPanel akan berorientasi vertikal, dan sebaliknya.

Panel tumpuk

Panel tumpuk adalah salah satu kontrol yang paling sering digunakan karena kesederhanaan dan kegunaannya. Panel tumpuk menyejajarkan kontrol anak baik secara horizontal maupun vertikal satu per satu. Seperti yang ditunjukkan di bawah, Anda hanya perlu mengatur orientasinya dan kelas akan mengatur sisanya:

 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
using cAlgo.API;

namespace ChartControlsTest
{
    [Indicator(IsOverlay = true, AccessRights = AccessRights.None)]
    public class ChartControls : Indicator
    {
        [Parameter(DefaultValue = Orientation.Vertical)]
        public Orientation Orientation { get; set; }

        protected override void Initialize()
        {
            var firstNameTextBox = new TextBox
            {
                Margin = 5,
                Text = "First Name...",
                Width = 200
            };

            var lastNameTextBox = new TextBox
            {
                Margin = 5,
                Text = "Last Name...",
                Width = 200
            };

            var isMarriedCheckBox = new CheckBox
            {
                Text = "Is Married?",
                Margin = 5,
            };

            var submitButton = new Button
            {
                Text = "Submit",
                Margin = 5
            };

            var stackPanel = new StackPanel
            {
                Orientation = Orientation,
                HorizontalAlignment = HorizontalAlignment.Right,
                VerticalAlignment = VerticalAlignment.Bottom,
                BackgroundColor = Color.FromArgb(80, Color.Gold),
                Margin = 20
            };

            stackPanel.AddChild(firstNameTextBox);
            stackPanel.AddChild(lastNameTextBox);
            stackPanel.AddChild(isMarriedCheckBox);
            stackPanel.AddChild(submitButton);

            Chart.AddControl(stackPanel);
        }

        public override void Calculate(int index)
        {
        }
    }
}

Setelah membuat instance indikator, Anda akan melihat panel tumpuk horizontal dengan dua bidang teks dan tombol 'Submit' di sudut kanan bawah grafik utama.

Panel bungkus

Panel bungkus sebagian besar identik dengan panel tumpuk. Namun, ketika tidak ada cukup ruang untuk memuat semua elemen panel bungkus, ia akan secara otomatis membungkus kontrol yang tersisa ke baris berikutnya pada sumbu Y.

Grid

Anggap grid sebagai spreadsheet dengan jumlah kolom dan baris yang telah ditentukan. Saat menggunakan grid, Anda dapat menambahkan kontrol ke setiap sel terpisah.

Seperti yang ditunjukkan di bawah, ketika Anda membuat instance dari kelas Grid, Anda memasukkan jumlah baris dan kolomnya sebagai argumen integer. Saat menambahkan anak atau kontrol baru, Anda juga harus menentukan jumlah baris dan kolom anak.

 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
using cAlgo.API;

namespace ChartControlsTest
{
    [Indicator(IsOverlay = true, AccessRights = AccessRights.None)]
    public class ChartControls : Indicator
    {
        [Parameter("Grid Rows #", DefaultValue = 10)]
        public int GridRowsNumber { get; set; }

        [Parameter("Grid Columns #", DefaultValue = 2)]
        public int GridColumnsNumber { get; set; }

        protected override void Initialize()
        {
            var grid = new Grid(GridRowsNumber, GridColumnsNumber)
            {
                BackgroundColor = Color.Gold,
                Opacity = 0.6,
                HorizontalAlignment = HorizontalAlignment.Center,
                VerticalAlignment = VerticalAlignment.Center,
                ShowGridLines = true
            };

            for (int iRow = 0; iRow < GridRowsNumber; iRow++)
            {
                for (int iColumn = 0; iColumn < GridColumnsNumber; iColumn++)
                {
                    grid.AddChild(new TextBlock
                    {
                        Text = string.Format("Row {0} and Column {1}", iRow, iColumn),
                        Margin = 5,
                        ForegroundColor = Color.Black,
                        FontWeight = FontWeight.ExtraBold
                    }, iRow, iColumn);
                }
            }

            Chart.AddControl(grid);
        }

        public override void Calculate(int index)
        {
        }
    }
}

Saat membuat instance dari indikator di atas, Anda akan melihat grid 10x2 tepat di tengah grafik.

Posisikan kontrol dalam koordinat harga dan waktu

Selain kontrol panel, cTrader memungkinkan untuk menentukan koordinat harga dan waktu untuk kontrol langsung di area grafik. Metode AddControl() dan MoveControl() menyediakan fungsionalitas ini bagi pengembang algo.

Gunakan overload metode berikut untuk mengelola koordinat kontrol grafik Anda sesuai preferensi Anda.

Untuk menambahkan kontrol grafik ke area grafik atau indikator pada koordinat indeks bar absolut dan harga (x, y).

1
void AddControl(ControlBase control, int barIndex, double y)

Untuk memindahkan kontrol grafik ke area grafik atau indikator pada koordinat indeks bar absolut dan harga (x, y).

1
void MoveControl(ControlBase control, int barIndex, double y)

Untuk menambahkan kontrol grafik ke area grafik atau indikator pada koordinat waktu absolut dan harga (x, y).

1
void AddControl(ControlBase control, DateTime time, double y)

Untuk memindahkan kontrol grafik ke area grafik atau indikator pada koordinat waktu absolut dan harga (x, y).

1
void MoveControl(ControlBase control, DateTime time, double y)

Untuk menambahkan kontrol grafik ke area grafik atau indikator pada koordinat waktu absolut (x).

1
void AddControl(ControlBase control, DateTime time)

Untuk memindahkan kontrol grafik ke area grafik atau indikator pada koordinat waktu absolut (x).

1
void MoveControl(ControlBase control, DateTime time)

Untuk menambahkan kontrol grafik ke area grafik atau indikator pada koordinat indeks bar absolut (x).

1
void AddControl(ControlBase control, int barIndex)

Untuk memindahkan kontrol grafik ke area grafik atau indikator pada koordinat indeks bar absolut (x).

1
void MoveControl(ControlBase control, int barIndex)

Untuk menambahkan kontrol grafik ke area grafik atau indikator pada koordinat harga absolut (y).

1
void AddControl(ControlBase control, double y)

Untuk memindahkan kontrol grafik ke area grafik atau indikator pada koordinat harga absolut (y).

1
void MoveControl(ControlBase control, double y)

Parameter kelas ControlBase dapat mencakup kelas bawahan lainnya (Control, Button, dll.) agar metode dapat dipanggil sesuai dengan tanda tangan di atas.

Contoh cBot berikut menambahkan tombol Click me! di atas bar terakhir pada grafik. Tombol tersebut bergerak maju bersama dengan setiap bar baru yang ditambahkan. Setelah mengklik tombol, kotak pesan muncul di layar.

 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
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using cAlgo.API;
using cAlgo.API.Collections;
using cAlgo.API.Indicators;
using cAlgo.API.Internals;

namespace cAlgo.Robots
{
    [Robot(AccessRights = AccessRights.None)]
    public class ButtonTest : Robot
    {
        [Parameter(DefaultValue = "Hello world!")]
        public string Message { get; set; }

        Button button;

        protected override void OnStart() 
        {
            button = new Button
            {
                Text = "Click me!"
            };

            button.Click += Button_Click;

            Chart.AddControl(button, Bars.Count - 1);
        }

        protected override void OnBar() 
        {
            Chart.MoveControl(button, Bars.Count - 1);
        }

        private void Button_Click(ButtonClickEventArgs obj)
        {
            MessageBox.Show(Message, "Title/Caption");
        }
    }
}

Peringatan

Jumlah kontrol akar yang dapat ditambahkan pada grafik dibatasi hingga 100 karena kemungkinan masalah kinerja. Batasan ini hanya berlaku untuk satu instance algoritma dan kontrol yang terpasang pada harga dan bar.

Properti padding dan margin

Properti Margin menentukan ruang antara batas objek Control dan induknya (grafik, panel, batas, dll.).

Sebaliknya, properti Padding menentukan ruang antara isi kontrol dan batasnya. Anda dapat memvariasikan nilai properti sehingga semuanya berbeda untuk sisi yang berbeda.

 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
64
65
66
67
68
69
70
using cAlgo.API;

namespace ChartControlsTest
{
    [Indicator(IsOverlay = true, AccessRights = AccessRights.None)]
    public class ChartControls : Indicator
    {
        [Parameter(DefaultValue = "Click Me")]
        public string Text { get; set; }

        [Parameter(DefaultValue = 0)]
        public double Left { get; set; }

        [Parameter(DefaultValue = 0)]
        public double Top { get; set; }

        [Parameter(DefaultValue = 0, Group = "Margin")]
        public double LeftMargin { get; set; }

        [Parameter(DefaultValue = 0, Group = "Margin")]
        public double TopMargin { get; set; }

        [Parameter(DefaultValue = 0, Group = "Margin")]
        public double RightMargin { get; set; }

        [Parameter(DefaultValue = 0, Group = "Margin")]
        public double BottomMargin { get; set; }

        [Parameter(DefaultValue = 5, Group = "Padding")]
        public double LeftPadding { get; set; }

        [Parameter(DefaultValue = 5, Group = "Padding")]
        public double TopPadding { get; set; }

        [Parameter(DefaultValue = 5, Group = "Padding")]
        public double RightPadding { get; set; }

        [Parameter(DefaultValue = 5, Group = "Padding")]
        public double BottomPadding { get; set; }

        protected override void Initialize()
        {
            var button = new Button
            {
                Text = Text,
                Left = Left,
                Top = Top,
                Margin = new Thickness(LeftMargin, TopMargin, RightMargin, BottomMargin),
                Padding = new Thickness(LeftPadding, TopPadding, RightPadding, BottomPadding)
            };

            button.Click += Button_Click;

            var canvas = new Canvas();

            canvas.AddChild(button);

            Chart.AddControl(canvas);
        }

        private void Button_Click(ButtonClickEventArgs obj)
        {
            obj.Button.Text = "You clicked me, thanks";
        }

        public override void Calculate(int index)
        {
        }
    }
}

Sebuah instance dari indikator ini akan membuat tombol abu-abu Click me di sudut kiri atas grafik. Ubah parameter di jendela Add instance atau Modify parameters untuk melihat bagaimana nilai margin dan padding yang berbeda mengubah tampilan kontrol.

Gaya

Saat menggunakan gaya, Anda dapat memberikan tampilan serupa pada beberapa jenis kontrol yang berbeda. Hal ini sangat berguna ketika berurusan dengan sejumlah besar (lima atau lebih) kontrol.

Kelas Style memungkinkan pengaturan nilai untuk berbagai properti kontrol seperti Margin atau BackgroundColor. Setelah itu, Anda dapat menggunakan kembali nilai-nilai ini sebagai template untuk beberapa kontrol lainnya.

Kita juga dapat membuat tampilan yang konsisten untuk beberapa kontrol tanpa menggunakan kelas Style sama sekali.

 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
using cAlgo.API;

namespace ChartControlsTest
{
    [Indicator(IsOverlay = true, AccessRights = AccessRights.None)]
    public class ChartControls : Indicator
    {
        protected override void Initialize()
        {
            var firstTextBox = new TextBox
            {
                ForegroundColor = Color.Red,
                Margin = 5,
                FontFamily = "Cambria",
                FontSize = 12,
                Text = "Type...",
                Width = 150
            };

            var secondTextBox = new TextBox
            {
                ForegroundColor = Color.Red,
                Margin = 5,
                FontFamily = "Cambria",
                FontSize = 12,
                Text = "Type...",
                Width = 150
            };

            var thirdTextBox = new TextBox
            {
                ForegroundColor = Color.Red,
                Margin = 5,
                FontFamily = "Cambria",
                FontSize = 12,
                Text = "Type...",
                Width = 150
            };

            var panel = new StackPanel
            {
                Orientation = Orientation.Vertical,
                HorizontalAlignment = HorizontalAlignment.Center,
                VerticalAlignment = VerticalAlignment.Center
            };

            panel.AddChild(firstTextBox);
            panel.AddChild(secondTextBox);
            panel.AddChild(thirdTextBox);

            Chart.AddControl(panel);
        }

        public override void Calculate(int index)
        {
        }
    }
}

Berikut adalah cara penggunaan kelas Style dapat menyederhanakan pekerjaan dengan beberapa kontrol.

 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
using cAlgo.API;

namespace ChartControlsTest
{
    [Indicator(IsOverlay = true, AccessRights = AccessRights.None)]
    public class ChartControls : Indicator
    {
        protected override void Initialize()
        {
            var textBoxStyle = new Style();

            textBoxStyle.Set(ControlProperty.ForegroundColor, Color.Red);
            textBoxStyle.Set(ControlProperty.Margin, 5);
            textBoxStyle.Set(ControlProperty.FontFamily, "Cambria");
            textBoxStyle.Set(ControlProperty.FontSize, 12);
            textBoxStyle.Set(ControlProperty.Width, 150);

            var firstTextBox = new TextBox
            {
                Text = "Type...",
                Style = textBoxStyle
            };

            var secondTextBox = new TextBox
            {
                Text = "Type...",
                Style = textBoxStyle
            };

            var thirdTextBox = new TextBox
            {
                Text = "Type...",
                Style = textBoxStyle
            };

            var panel = new StackPanel
            {
                Orientation = Orientation.Vertical,
                HorizontalAlignment = HorizontalAlignment.Center,
                VerticalAlignment = VerticalAlignment.Center
            };

            panel.AddChild(firstTextBox);
            panel.AddChild(secondTextBox);
            panel.AddChild(thirdTextBox);

            Chart.AddControl(panel);
        }

        public override void Calculate(int index)
        {
        }
    }
}

Kedua cuplikan kode di atas seharusnya menampilkan kontrol yang sama jika Anda meluncurkan instance indikator masing-masing.

Anda juga dapat menggunakan kelas Style untuk mengubah tampilan kontrol berdasarkan statusnya.

 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
using cAlgo.API;

namespace ChartControlsTest
{
    [Indicator(IsOverlay = true, AccessRights = AccessRights.None)]
    public class ChartControls : Indicator
    {
        protected override void Initialize()
        {
            var textBoxStyle = new Style();

            textBoxStyle.Set(ControlProperty.ForegroundColor, Color.Red);
            textBoxStyle.Set(ControlProperty.Margin, 5);
            textBoxStyle.Set(ControlProperty.FontFamily, "Cambria");
            textBoxStyle.Set(ControlProperty.FontSize, 12);
            textBoxStyle.Set(ControlProperty.Width, 150);
            // Here we change the foreground color to Yellow if mouse hover over the textbox
            textBoxStyle.Set(ControlProperty.ForegroundColor, Color.Yellow, ControlState.Hover);

            var firstTextBox = new TextBox
            {
                Text = "Type...",
                Style = textBoxStyle
            };

            var secondTextBox = new TextBox
            {
                Text = "Type...",
                Style = textBoxStyle
            };

            var thirdTextBox = new TextBox
            {
                Text = "Type...",
                Style = textBoxStyle
            };

            var panel = new StackPanel
            {
                Orientation = Orientation.Vertical,
                HorizontalAlignment = HorizontalAlignment.Center,
                VerticalAlignment = VerticalAlignment.Center
            };

            panel.AddChild(firstTextBox);
            panel.AddChild(secondTextBox);
            panel.AddChild(thirdTextBox);

            Chart.AddControl(panel);
        }

        public override void Calculate(int index)
        {
        }
    }
}

Gambar

Kontrol Image dapat digunakan untuk menampilkan gambar yang disimpan secara lokal. Kontrol Image menggunakan kelas Bitmap .NET, yang berarti mendukung sebagian besar format gambar populer seperti berikut:

  • .PNG
  • .JPG
  • .BMP
  • .GIF
  • .TIFF

Lihat dokumentasi kelas Bitmap .NET untuk mempelajari lebih lanjut tentangnya.

Untuk menggunakan kontrol Image, atur properti Source ke data file gambar dalam array byte (byte[]).

 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
using cAlgo.API;
using System.IO;

namespace cAlgo
{
    [Indicator(IsOverlay = true, TimeZone = TimeZones.UTC, AccessRights = AccessRights.FullAccess)]
    public class ImageSample : Indicator
    {
        [Parameter("Image File Path")]
        public string ImageFilePath { get; set; }

        protected override void Initialize()
        {
            if (File.Exists(ImageFilePath) is false)
            {
                Print($"Image not found: {ImageFilePath}");

                return;
            }

            var imageBytes = File.ReadAllBytes(ImageFilePath);

            var image = new Image
            {
                Source = imageBytes,
                Width = 200,
                Height = 200,
                HorizontalAlignment = HorizontalAlignment.Center,
                VerticalAlignment = VerticalAlignment.Center
            };

            Chart.AddControl(image);
        }

        public override void Calculate(int index)
        {
        }
    }
}

Setelah meluncurkan instance indikator di atas, Anda seharusnya tidak melihat hal baru pada grafik utama. Namun, masukkan jalur file yang valid sebagai nilai parameter (Image File Path), dan Anda seharusnya melihat gambar yang dipilih ditampilkan di tengah layar.

Anda juga dapat menggunakan sumber daya proyek Anda untuk menyimpan gambar dan menampilkannya melalui kontrol Image. Untuk melakukannya, buka sumber daya proyek di Visual Studio dan beralih ke tab Resources. Di dalamnya, buat sumber daya baru dan tambahkan gambar yang sudah ada. Setelah itu, Anda akan dapat menggunakan gambar ini sebagai sumber di kontrol Image mana pun melalui properti Project_Name_Space.Properties.Resources._Image_Name.

Sebagai contoh, salin gambar di bawah ini dan simpan sebagai "image.png" di sistem Anda:

Image title

Buat indikator baru di cTrader, atur namanya menjadi "Image Sample", dan buka melalui Visual Studio. Setelah itu, tambahkan indikator logo proyek sebagai sumber daya. Untuk melakukannya, klik kanan proyek Anda, pilih Properties dan klik Resources, lalu klik Create and manage assembly resources. Salin file logo.png ke tab yang baru dibuka.

Salin kode di bawah ini ke file kode sumber utama indikator Anda:

 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
using cAlgo.API;

namespace cAlgo
{
    [Indicator(IsOverlay = true, TimeZone = TimeZones.UTC, AccessRights = AccessRights.None)]
    public class ImageSample : Indicator
    {
        protected override void Initialize()
        {
            var image = new Image
            {
                Source = Image_Sample.Properties.Resources.logo,
                Width = 200,
                Height = 200,
                HorizontalAlignment = HorizontalAlignment.Center,
                VerticalAlignment = VerticalAlignment.Center
            };

            Chart.AddControl(image);
        }

        public override void Calculate(int index)
        {
        }
    }
}

Setelah membuat instance indikator ini, Anda seharusnya melihat output berikut.

Image title

Catatan

Ukuran maksimum untuk gambar adalah 10 MB.