Ana içeriğe geç

Denetimler

Denetimler, cBot'lar, göstergeler ve eklentilerle ilgili belirli etkileşimleri etkinleştirir. Aşağıdaki kılavuzu kullanarak, doğrudan bir grafik üzerinde kolayca temel ve gelişmiş kullanıcı arayüzü denetimleri oluşturabilirsiniz.

Düğmeler, metin blokları, metin kutuları ve şekiller gibi popüler denetimleri temsil eden çeşitli yerleşik sınıflar vardır. Ancak, özel denetimler de oluşturabilirsiniz.

Aşağıdaki örneği inceleyin:

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

Yukarıdaki göstergeyi oluşturur ve bir örnek oluşturursanız, grafiğin tam ortasında gri bir Bana tıkla düğmesi görmelisiniz.

Denetimler ve grafik nesneleri arasındaki fark

Önceki bir bölümde grafik nesnelerini zaten ele almıştık. Denetimler, kullanıcıların cBot'lar ve göstergelerle etkileşim kurmasını sağlar. Tersine, grafik nesneleri işlem grafiğine veya ayrılmış bir gösterge çıktı penceresine bir şeyler çizme fırsatı sunar.

Grafik denetimleri ControlBase sınıfından türetilirken, grafik nesneleri ChartObject sınıfından türetilir.

Grafik denetimleri, farklı hizalama seçenekleri kullanılarak statik olarak konumlandırılır. Grafik nesneleri de aynı şekilde konumlandırılabilirken, konumları belirli X ve Y koordinatlarına bağlı olarak dinamik olarak da değişebilir.

Grafik nesnelerine benzer şekilde, grafik denetimleri hem ana grafiğe hem de herhangi bir gösterge çıktı penceresine (varsa) eklenebilir. Böyle bir konumlandırma örneği aşağıda verilmiştir:

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

Bir gösterge örneği oluşturduktan sonra, gösterge çıktı penceresinde Bana tıkla düğmesini görmelisiniz.

ColorPicker

ColorPicker denetimi, trader'ların cTrader'daki anahtar unsurlar veya nesneler için tercih ettikleri rengi seçmelerini sağlar. Örneğin, bir geliştirici, trend çizgileri çizen bir cBot'a ColorPicker denetimini entegre ederek kullanıcıların her bir trend çizgisi için tercih ettikleri rengi seçmelerini sağlayabilir. Bu kurulum, trader'ların çeşitli trend çizgisi türleri arasında ayrım yapmasını kolaylaştırır.

Grafiklere gösterge ekleyen bir eklenti de ColorPicker denetimini uygulayabilir, çünkü bu özellik kullanıcıların farklı gösterge çizgileri için bir renk seçmesine olanak tanır.

Kullanıcılar renk karesine tıkladığında, renk seçici görünür. Kullanıcılar daha sonra standart ve özel renkler arasında seçim yapabilir.

Kod örneği:

 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

The DropZone denetimi, trader'ların cBot'lar, göstergeler veya eklentiler içeren sürükle ve bırak eylemleri gerçekleştirmesini sağlar. Bu denetimi algoritmanızda uygulamak için DropZone sınıfını kullanın. DropZone denetimi, diğer tüm denetimler gibi manipüle edilebilir.

Bir kullanıcı uyumlu bir dosyayı veya klasörü kutuya bıraktığında, Dropped olayı tetiklenir. Bir kullanıcı kutuya bir klasör veya birden fazla klasör bıraktığında, yalnızca FilterExtensions içinde belirtilen uzantılara sahip uyumlu dosyalar işlenir ve kopyalanır.

Not

Bırakılan dosyalar genellikle şu konuma kopyalanır ve kaydedilir: ..\Documents\cAlgo\Data\{AlgoType}\{AlgoName}\Selected Files\

cBot örnekleri için konum yukarıdakinden farklıdır: ..\Documents\cAlgo\Data\cBots\{cBotName}\{unique-instance-number}\Selected files\

Bu eklenti kodu, İşlem İzleme'ye bir DropZone denetimi nasıl ekleneceğini gösterir:

 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

ProgressBar denetimi, devam eden bir işlemin ilerlemesini gösterir. İlerleme çubukları, algoritmaları daha kullanıcı dostu hale getirir ve trader'ların belirli işlemler için bekleme süresine ilişkin beklentilerini yönetmeye yardımcı olur.

cTrader Algo API, geliştiricilerin iki tür ProgressBar denetimi eklemesine olanak tanır: sonsuz denetim ve belirli denetim.

Sonsuz denetim

Sonsuz denetimi aşağıdaki durumlarda kullanmak isteyebilirsiniz:

  • Bir işlem için bekleme süresini belirleyemiyorsunuz.
  • Bir işlemin ilerlemesini algılayamıyorsunuz.
  • Bir işlemin ne kadar süreceğini belirtmek istemiyorsunuz.

Image title

Belirli denetim

Bu denetimi, bir işlem için bekleme süresini belirleyebildiğinizde ve kullanıcıların bu süreye dayalı bir gösterge görmesini istediğinizde kullanmak isteyebilirsiniz.

İşlemin ilerlemesini göstermek için Value özelliğini kullanarak bir değer ayarlayın. İlerleme çubuğu yüzdesini ayarlamak için Minimum ve Maximum özelliklerini kullanın.

Image title

Aşağıdaki eklenti kodu, hem sonsuz hem de belirli (yeşil) denetimler kullanarak bir ilerleme çubuğunun nasıl oluşturulacağını gösterir:

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

İletişim kutuları

OpenFileDialog ve OpenFolderDialog

cTrader Algo API, kullanıcıların bir algoritma için dosya seçmesini sağlamak amacıyla OpenFileDialog arayüzünü sunar. Bir kullanıcı çıkan pencerede bir dosya seçtiğinde, dosya algoritmanın Selected files klasörüne kopyalanır. Bir algoritma, Selected files klasöründeki dosyalarla kısıtlama olmaksızın çalışabilir.

İpucu

Önemli veri dosyalarını, yedekleme veya yapılandırma dosyalarını, özel göstergeleri veya komut dosyalarını yüklemeniz gerektiğinde OpenFileDialog işlevini kullanın.

Aşağıdaki kod, bir göstergede OpenFileDialog iletişim kutusunun nasıl kullanılacağını gösterir:

 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, kullanıcıların bir algoritma için bir klasör belirtmesini sağlamak amacıyla OpenFolderDialog arayüzünü sunar. Bir kullanıcı çıkan pencerede bir klasör seçtiğinde, seçilen klasördeki tüm dosyalar ve dosyaları içeren klasörler algoritmanın Selected files klasörüne kopyalanır.

İpucu

Kritik veri dosyaları, yedekleme veya yapılandırma dosyaları, özel göstergeler veya komut dosyaları içeren bir klasörü yüklemeniz gerektiğinde OpenFolderDialog işlevini kullanın.

Seçilen dosyalar ve klasörler genellikle Selected files klasörüne kopyalanır, çünkü bir algoritma AccessRights değeri None olarak ayarlanmış olsa bile o klasördeki öğelerle çalışabilir.

Not

Bir algoritmanın Selected files klasörü genellikle şu yoldadır: ..\Documents\cAlgo\Data\{AlgoType}\{AlgoName}\Selected files\

Bir cBot örneği için Selected files klasörü yukarıdakinden farklıdır: ..\Documents\cAlgo\Data\cBots\{cBotName}\{Instance-Id}\Selected files\

Aşağıdaki kod, bir göstergede OpenFolderDialog iletişim kutusunun nasıl kullanılacağını gösterir:

 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, kullanıcıların dosyaları (yerel olarak) bilgisayarlarına kaydetmesini sağlamak amacıyla SaveFileDialog arayüzünü sunar. İlgili pencere göründüğünde, bir kullanıcı dosyayı kaydetmek istediği klasörü seçer ve dosya için bir ad girer. Dosya daha sonra belirtilen konuma kaydedilir.

İpucu

Aşağıdakilerden herhangi birini yapmanız gerektiğinde SaveFileDialog işlevini kullanın:

  • Performans raporlarını, geriye dönük test sonuçlarını, yapılandırma dosyalarını veya optimizasyon verilerini kaydedin.
  • İşlem günlüklerini, operasyon günlüklerini veya genel kullanıcı etkinliği verilerini dışa aktarın.
  • Özel göstergeleri, grafikler ve görselleştirmeler için verileri veya bir strateji için parametreleri depolayın.

Aşağıdaki kod, bir göstergede SaveFileDialog iletişim kutusunun nasıl kullanılacağını gösterir:

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

Sürüklenebilir denetimler

Grafik alanı sürüklenebilir denetimi

ChartDraggable ve ChartDraggables arayüzleri, diğer denetimleri ve farklı öğeleri bir grafiğe barındırabilen sürüklenebilir bir denetim eklemenizi sağlayan türler sunar. Bu sürüklenebilir denetimler, kullanıcıların çeşitli grafik öğeleriyle etkileşim kurmasını kolaylaştırır.

Not

Sürüklenebilir bir denetim, yalnızca eklendiği grafik içinde taşınabilir veya yeniden konumlandırılabilir.

Bu kod, bir grafik içinde taşınabilen iki denetim ekleyen bir göstergenin nasıl oluşturulacağını gösterir:

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

Uygulama penceresi sürüklenebilir denetimi

ApplicationDraggable ve ApplicationDraggables arayüzleri, tüm cTrader uygulama penceresi boyunca ayrı ayrı taşınabilen kayan denetimler eklemek için kullanılan türleri sağlar. Bu tür denetimler, etkileşimli ve dinamik kullanıcı arayüzleri oluşturmanızı sağlar.

Not

Üç algoritma türünden yalnızca eklentilerin uygulama genelinde sürüklenebilir denetimleri uygulamasına izin verilir.

Bu kod, tüm cTrader kullanıcı arayüzü boyunca taşınabilen iki ayrı pencerede bir WebView bileşeni ve metin bloğu ekleyen bir eklentinin nasıl oluşturulacağını gösterir:

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

Sekme denetimi

TabControl sınıfı, bir algoritma için birden çok sekme oluşturmanızı sağlayan türler sunar. Bu sekmeler, ilgili öğeleri bir arada tutmak veya işlevler için ayrı görünümler sunmak amacıyla kullanılabilir.

Bu kod, Aktif Sembol Paneline eklenen bir eklentide sekmelerin nasıl kullanılacağını gösterir:

 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()
        {
        }
    }
}

Özel denetimler

Özel bir denetim, özünde birkaç önceden tanımlanmış denetimden oluşan bir denetimdir. Başka bir deyişle, içeriğini diğer denetimlerin oluşturduğu bir denetimdir.

Özel denetimler, yerleşik denetimlere benzer şekilde yeniden kullanılabilir sınıflar olarak işlev görür.

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

Bu göstergenin bir örneği, ana grafiğin tam ortasında dört metin kutusu görüntülemelidir.

Denetimleri panellerle düzenleyin

Denetimlerle çalışmayı daha kolay hale getirmek için, birkaç denetimi kullanıcı arayüzünde kendi konumuna sahip ayrı bir gruba yerleştirmek isteyebilirsiniz. Bunu yapmak için Panels sınıfını ve türevlerini kullanabilirsiniz.

Bir paneli, içeriği başka denetimler olan bir denetim olarak düşünün. cTrader, temel Panels sınıfından (ki bu sınıfın kendisi Control sınıfından miras alır) miras alan beş farklı sınıfı destekler:

  • Canvas
  • DockPanel
  • Grid
  • StackPanel
  • WrapPanel

Yukarıdaki sınıfların her biri, aşağıda tartışıldığı gibi farklı panel düzenleri ve konumlandırma stratejileri kullanır.

Tuval

Tuval, denetimlerin belirli X ve Y koordinatlarına göre konumlandırılmasına olanak tanıyan bir paneldir.

Özellikle, X ve Y eksenleri, grafik nesneleri veya çizimler tarafından kullanılanlardan farklıdır. Canvas sınıfı tarafından kullanılan X ve Y koordinatları, grafiğin sol üst köşesinden (0, 0) başlayarak sayısal değerleri temsil eder.

Aşağıdaki örneği inceleyin:

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

Yukarıdaki göstergenin bir örneğini oluşturduğunuzda, grafiğin sol üst köşesinde Bana tıkla düğmesini görmelisiniz.

Bir denetimin Top özelliği, Y eksenindeki konumunu belirler. Buna karşılık, Left özelliği, X eksenindeki konumunu tanımlar.

Yukarıdaki kod ayrıca Padding ve Margin özelliklerini de kullanır. Padding, denetim içeriği ile dış kenarlıkları arasındaki mesafeyi ifade eder. Margin, denetim ile üst öğesinin kenarlıkları arasındaki mesafedir. Padding ve Margin özellikleri, yalnızca tuval sınıfı için değil, tüm paneller için geçerlidir. Denetimleriniz arasındaki boşluğu yönetmek için kullanışlıdırlar.

Çoğu durumda, Canvas sınıfı yalnızca az sayıda denetimi gruplandırmak için kullanılır.

Yerleştirme paneli

DockPanel sınıfı, bir denetimi grafikte statik bir konuma yerleştirmek (dock) için kullanılır. Dört olası yerleştirme konumu vardır:

  • Üst
  • Alt
  • Sol
  • Sağ

Her denetimin bir Dock özelliği vardır. DockPanel sınıfını kullanırken, bir denetimi bir DockPanel içine konumlandırmak için bu özelliği kullanabilirsiniz. Bu, aşağıdaki örnekte gösterilmiştir:

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

Bu göstergenin bir örneğini oluşturduğunuzda, grafiğin merkezinde bir metin alanı ve tıklanabilir bir düğme içeren bir yerleştirme paneli görmelisiniz.

Yerleştirme panellerinin yatay veya dikey olarak doldurulabileceğini unutmayın. Bu hizalamaların ikisini aynı anda kullanamazsınız. Yerleştirme paneli yönü, bir DockPanel içindeki ilk denetim ayarlanırken otomatik olarak belirlenir. İlk denetimin Dock özelliği Top veya Bottom olarak ayarlanırsa, tüm DockPanel dikey olarak yönlendirilir ve bunun tersi de geçerlidir.

Yığın paneli

Yığın panelleri, basitlikleri ve kullanılabilirlikleri nedeniyle en sık kullanılan denetimlerden biridir. Yığın panelleri, alt denetimleri yatay veya dikey olarak tek tek hizalar. Aşağıda gösterildiği gibi, yalnızca yönünü ayarlamanız gerekir ve sınıf geri kalanını yönetir:

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

Bir gösterge örneği oluşturduktan sonra, ana grafiğin sağ alt köşesinde iki metin alanı ve bir Gönder düğmesi içeren yatay bir yığın paneli görmelisiniz.

Sarma paneli

Sarma panelleri çoğunlukla yığın panelleriyle aynıdır. Ancak, bir sarma panelinin tüm öğelerini sığdırmak için yeterli alan olmadığında, kalan denetimleri Y eksenindeki bir sonraki satıra otomatik olarak sarar.

Izgara

Izgaraları, belirli sayıda sütun ve satıra sahip elektronik tablolar olarak düşünün. Izgaraları kullanırken, her ayrı hücreye denetim ekleyebilirsiniz.

Aşağıda gösterildiği gibi, Grid sınıfının bir örneğini oluşturduğunuzda, satır ve sütun sayısını integer argümanları olarak geçirirsiniz. Yeni alt öğeler veya denetimler eklerken, benzer şekilde alt satır ve sütun sayısını belirtmeniz gerekir.

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

Yukarıdaki göstergenin bir örneğini oluşturduğunuzda, grafiğin tam merkezinde 10x2'lik bir ızgara görmelisiniz.

Denetimleri fiyat ve zaman koordinatları içinde konumlandırma

Panel denetimlerine ek olarak, cTrader denetimler için fiyat ve zaman koordinatlarının doğrudan grafik alanında belirtilmesine olanak tanır. AddControl() ve MoveControl() yöntemleri, algo geliştiricilerine bu işlevselliği sağlar.

Grafik denetimlerinizin koordinatlarını tercihlerinize göre yönetmek için aşağıdaki yöntem aşırı yüklemelerini kullanın.

Mutlak çubuk dizini ve fiyat (x, y) koordinatlarında grafiğe veya gösterge alanına bir grafik denetimi eklemek için.

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

Mutlak çubuk dizini ve fiyat (x, y) koordinatlarında grafiğe veya gösterge alanına bir grafik denetimi taşımak için.

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

Mutlak zaman ve fiyat (x, y) koordinatlarında grafiğe veya gösterge alanına bir grafik denetimi eklemek için.

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

Mutlak zaman ve fiyat (x, y) koordinatlarında grafiğe veya gösterge alanına bir grafik denetimi taşımak için.

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

Mutlak zaman (x) koordinatında grafiğe veya gösterge alanına bir grafik denetimi eklemek için.

1
void AddControl(ControlBase control, DateTime time)

Mutlak zaman (x) koordinatında grafiğe veya gösterge alanına bir grafik denetimi taşımak için.

1
void MoveControl(ControlBase control, DateTime time)

Mutlak çubuk dizini (x) koordinatında grafiğe veya gösterge alanına bir grafik denetimi eklemek için.

1
void AddControl(ControlBase control, int barIndex)

Mutlak çubuk dizini (x) koordinatında grafiğe veya gösterge alanına bir grafik denetimi taşımak için.

1
void MoveControl(ControlBase control, int barIndex)

Mutlak fiyat (y) koordinatında grafiğe veya gösterge alanına bir grafik denetimi eklemek için.

1
void AddControl(ControlBase control, double y)

Mutlak fiyat (y) koordinatında grafiğe veya gösterge alanına bir grafik denetimi taşımak için.

1
void MoveControl(ControlBase control, double y)

ControlBase parametre sınıfı, yukarıdaki imzalar uyarınca çağrılacak yöntem için başka herhangi bir alt sınıfı (Control, Button, vb.) içerebilir.

Aşağıdaki cBot örneği, grafikteki son çubuğun üzerine Bana tıkla! düğmesini ekler. Düğme, eklenen her yeni çubukla birlikte ileriye doğru hareket ettirilir. Düğmeye tıkladıktan sonra ekranda bir mesaj kutusu belirir.

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

Uyarı

Olası performans sorunları nedeniyle bir grafiğe eklenecek kök denetim sayısı 100 ile sınırlıdır. Bu sınırlama yalnızca bir algoritma örneği ve fiyata ve çubuklara bağlı denetimler için geçerlidir.

İç boşluk ve kenar boşluğu özellikleri

Margin özelliği, bir Control nesnesinin kenarlıkları ile üst öğesi (bir grafik, bir panel, bir kenarlık vb.) arasındaki boşluğu tanımlar.

Buna karşılık, Padding özelliği, denetim içeriği ile kenarlıkları arasındaki boşluğu belirler. Özellik değerlerini, farklı kenarlar için hepsinin farklı olacak şekilde değiştirebilirsiniz.

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

Bu göstergenin bir örneği, grafiğin sol üst köşesinde gri bir Bana tıkla düğmesi oluşturacaktır. Farklı kenar boşluğu ve iç boşluk değerlerinin denetimin nasıl görüntülendiğini tam olarak nasıl değiştirdiğini görmek için Örnek ekle veya Parametreleri değiştir pencerelerindeki parametreleri değiştirin.

Stiller

Stilleri kullanırken, birkaç farklı denetim türüne benzer bir görünüm verebilirsiniz. Bu, çok sayıda (beş veya daha fazla) denetimle uğraşırken özellikle kullanışlıdır.

Style sınıfı, Margin veya BackgroundColor gibi denetimlerin farklı özellikleri için değerler ayarlamaya olanak tanır. Daha sonra, bu değerleri birden çok başka denetim için bir şablon olarak yeniden kullanabilirsiniz.

Style sınıfını hiç kullanmadan birden çok denetim için tutarlı bir görünüm de oluşturabiliriz.

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

Style sınıfını kullanmak, birden çok denetimle çalışmayı nasıl basitleştirebilir, işte burada.

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

Yukarıdaki her iki kod parçacığı da, ilgili gösterge örneklerini başlatırsanız aynı denetimleri görüntülemelidir.

Bir denetimin görünümünü durumuna göre değiştirmek için Style sınıfını da kullanabilirsiniz.

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

Görsel

Image kontrolü, yerel olarak depolanan bir görseli görüntülemek için kullanılabilir. Image kontrolü, .NET Bitmap sınıfını kullanır, bu da aşağıdaki gibi popüler görsel formatlarının çoğunu desteklediği anlamına gelir:

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

Daha fazla bilgi edinmek için .NET Bitmap sınıfı belgelerine bakın.

Bir Image kontrolünü kullanmak için Source özelliğini bir bayt dizisindeki (byte[]) görsel dosyası verilerine ayarlayın.

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

Yukarıdaki göstergenin bir örneğini başlattıktan sonra ana grafikte yeni bir şey görmemelisiniz. Ancak, (Görsel Dosya Yolu) parametresinin değeri olarak geçerli bir dosya yolu girerseniz, seçilen görseli ekranın ortasında görüntülenmiş olarak görmelisiniz.

Görselleri depolamak ve Image kontrolü aracılığıyla görüntülemek için proje kaynaklarınızı da kullanabilirsiniz. Bunu yapmak için Visual Studio'da proje kaynaklarını açın ve Kaynaklar sekmesine geçin. İçinde yeni bir kaynak oluşturun ve mevcut bir görseli ekleyin. Daha sonra, bu görseli Project_Name_Space.Properties.Resources._Image_Name özelliği aracılığıyla herhangi bir Image kontrolünde kaynak olarak kullanabileceksiniz.

Örnek olarak aşağıdaki görseli kopyalayın ve sisteminize "image.png" olarak kaydedin:

Image title

cTrader'da yeni bir gösterge oluşturun, adını "Görsel Örneği" olarak ayarlayın ve Visual Studio aracılığıyla açın. Daha sonra, logo göstergesi projesini bir kaynak olarak ekleyin. Bunu yapmak için projenize sağ tıklayın, Özellikler'i seçin ve Kaynaklar'a tıklayın, ardından Derleme kaynaklarını oluştur ve yönet'e tıklayın. logo.png dosyasını yeni açılan sekmeye kopyalayın.

Aşağıdaki kodu gösterge ana kaynak kodu dosyanıza kopyalayın:

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

Bu göstergenin bir örneğini oluşturduktan sonra aşağıdaki çıktıyı görmelisiniz.

Image title

Not

Görseller için maksimum boyut 10 MB'tır.