コントロール

はじめに

コントロールは、cBot/インジケーターとのインタラクションを可能にします。以下のガイドを使用することで、基本的なものから高度なUIコントロールまで、チャート上で直接簡単に作成できます。

ボタン、テキストブロック、テキストボックス、シェイプなどの人気のあるコントロールを表すいくつかの組み込みクラスがありますが、カスタムコントロールを作成することもできます。

次の例を見てみましょう。

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

上記のインジケーターをビルドしてインスタンスを作成すると、チャートの中心に灰色の「Click Me」ボタンが表示されるはずです。

コントロールとチャートオブジェクトの違い

前のセクションで、チャートオブジェクトについて説明しました。コントロールは、cBot/インジケーターとインタラクションを可能にします。一方、チャートオブジェクトは、取引チャートや分離されたインジケーター出力ウィンドウに何かを描画する機会を提供します。

チャートコントロールはControlBaseクラスから派生しており、チャートオブジェクトはChartObjectクラスから派生しています。

チャートコントロールは、異なる整列オプションを使用して静的に配置されます。チャートオブジェクトも同じ方法で配置できますが、特定のXおよびY座標に基づいて動的に位置を変更することもできます。

チャートオブジェクトと同様に、チャートコントロールも「メイン」チャートおよび/または任意のインジケーター出力ウィンドウ(存在する場合)に追加できます。以下にそのような配置の例を示します。

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

インジケーターのインスタンスを作成した後、インジケーター出力ウィンドウに「Click Me」ボタンが表示されるはずです。

パネルを使ったコントロールの整理

コントロールをより便利に操作するために、複数のコントロールをUIの独自の位置に持つ「グループ」に配置することを検討するかもしれません。これを実現するために、Panelsクラスおよびその派生クラスを使用できます。

パネルは、他のコントロールをそのコンテンツとして持つコントロールと考えてください。cTraderは、基本のPanelsクラス(自体がControlクラスから派生しています)から派生する5つの異なるクラスをサポートしています。

  • Canvas
  • DockPanel
  • Grid
  • StackPanel
  • WrapPanel

上記の各クラスは、以下で説明する異なるパネルレイアウトおよび配置戦略を使用します。

Canvas

キャンバスは、特定のXおよびY座標に基づいてコントロールを配置できるパネルです。

特に、XおよびY軸はチャートオブジェクト/描画で使用されるものとは異なります。Canvasクラスで使用されるXおよびY座標は、チャートの左上隅からの数値で表されます。

以下の例を考えてみましょう。

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

上記のインジケーターのインスタンスを作成すると、チャートの左上隅に「Click Me」ボタンが表示されるはずです。

コントロールのTopプロパティは、Y軸上の位置を決定します。それに対して、Leftプロパティは、X軸上の位置を定義します。

上記のコードでは、PaddingおよびMarginプロパティも使用しています。Paddingは、コントロールの内容とその外枠との間の距離を指します。Marginは、コントロールとその「親」との間の距離です。PaddingおよびMarginプロパティは、キャンバスクラスだけでなくすべてのパネルに適用されます。これらは、コントロール間の間隔を管理するのに便利です。

ほとんどの場合、Canvasクラスは、少数のコントロールをグループ化するために使用されます。

ドックパネル

DockPanelクラスは、コントロールをチャート上の静的な位置に「ドック」するために使用されます。利用可能なドック位置は4つです。

  • Top(上)
  • Bottom(下)
  • Left(左)
  • Right(右)

各コントロールにはDockプロパティがあります。DockPanelクラスを使用する際には、このプロパティを使用して、DockPanel内にコントロールを配置することができます。これについては、以下の例で示します。

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

このインジケーターのインスタンスを作成すると、チャートの中央にテキストフィールドとクリック可能なボタンを含むドックパネルが表示されるはずです。

ドックパネルは水平または垂直にコントロールを配置できます。これらの配置を同時に使用することはできません。最初のコントロールをDockPanelに設定する際に、ドックパネルの向きが自動的に設定されます。最初のコントロールのDockプロパティがTopまたはBottomに設定されている場合、DockPanel全体が垂直に配置され、逆も同様です。

スタックパネル

スタックパネルは、そのシンプルさと使いやすさから最も頻繁に使用されるコントロールの一つです。スタックパネルは、’子’コントロールを水平または垂直に1つずつ並べます。以下に示すように、パネルの向きを設定するだけで、クラスが残りの管理を行います。

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

インジケーターのインスタンスを作成すると、メインチャートの右下に2つのテキストフィールドと「送信」ボタンを含む水平スタックパネルが表示されるはずです。

ラップパネル

ラップパネルは、スタックパネルとほとんど同じですが、すべての要素を収めるのに十分なスペースがない場合、残りのコントロールをY軸の次の行に自動的に「ラップ」します。

グリッド

グリッドは、一定の列と行を持つスプレッドシートのように考えてください。グリッドを使用すると、各セルにコントロールを追加できます。

以下に示すように、Gridクラスのインスタンスを作成する際には、その行と列の数をinteger引数として渡します。新しい「子」やコントロールを追加する際も、同様に「子」行と列の数を指定する必要があります。

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

上記のインジケーターのインスタンスを作成すると、チャートの中心に10×2のグリッドが表示されるはずです。

価格と時間の座標内でのコントロールの配置

パネルコントロールに加えて、cTraderでは、チャートエリア内でコントロールの価格と時間の座標を直接指定することもできます。これには、AddControl()およびMoveControl()メソッドを使用します。

以下のメソッドオーバーロードを使用して、好みに応じてチャートコントロールの座標を管理できます。

絶対バーインデックスと価格 (x, y) 座標にチャートコントロールを追加するには:

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

絶対バーインデックスと価格 (x, y) 座標にチャートコントロールを移動するには:

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

絶対時間と価格 (x, y) 座標にチャートコントロールを追加するには:

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

絶対時間と価格 (x, y) 座標にチャートコントロールを移動するには:

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

絶対時間 (x) 座標にチャートコントロールを追加するには:

1
void AddControl(ControlBase control, DateTime time)

絶対時間 (x) 座標にチャートコントロールを移動するには:

1
void MoveControl(ControlBase control, DateTime time)

絶対バーインデックス (x) 座標にチャートコントロールを追加するには:

1
void AddControl(ControlBase control, int barIndex)

絶対バーインデックス (x) 座標にチャートコントロールを移動するには:

1
void MoveControl(ControlBase control, int barIndex)

絶対価格 (y) 座標にチャートコントロールを追加するには:

1
void AddControl(ControlBase control, double y)

絶対価格 (y) 座標にチャートコントロールを移動するには:

1
void MoveControl(ControlBase control, double y)

ControlBaseパラメータクラスには、ControlButtonなどの他のサブクラスを含めることができ、上記のシグネチャに従ってメソッドを呼び出すことができます。

以下のcBotの例では、チャートの最後のバーの上に「クリックしてみてください!」ボタンを追加します。ボタンは新しいバーが追加されるたびに一緒に移動します。ボタンをクリックすると、画面にメッセージボックスが表示されます。

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

警告

チャートに追加できるルートコントロールの数は、パフォーマンスの問題の可能性があるため、100に制限されています。この制限は、1つのアルゴリズムインスタンスと、価格および/またはバーに添付されたコントロールにのみ適用されます。

「Padding」と「Margin」プロパティ

Marginプロパティは、Controlオブジェクトの境界とその親(例えば、チャート、パネル、ボーダーなど)との間のスペースを定義します。

それに対して、Paddingプロパティは、コントロールの内容とその境界との間のスペースを決定します。プロパティ値は、異なる側で異なるように変更することができます。

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

このインジケーターのインスタンスを作成すると、チャートの左上隅に灰色の「Click Me」ボタンが作成されます。「Add instance」/「Modify parameters」ウィンドウでパラメータを変更して、マージンやパディングの値がコントロールの表示にどのように影響するかを確認してください。

カスタムコントロール

カスタムコントロールとは、実質的には複数の事前定義されたコントロールで「構成されている」コントロールです。言い換えれば、他のコントロールがそのコンテンツを構成するコントロールです。

カスタムコントロールは、ビルトインコントロールと同様に再利用可能なクラスとして機能します。

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

このインジケーターのインスタンスは、メインチャートの中央に直接4つのテキストボックスを表示します。

スタイル

スタイルを使用すると、異なるタイプのコントロールに似た外観を与えることができます。これは、コントロールが多数(5つ以上)の場合に特に便利です。

Style」クラスを使用すると、MarginBackgroundColor などのコントロールの異なるプロパティの値を一度設定できます。その後、これらの値を複数の他のコントロールのテンプレートとして再利用することができます。

Style」クラスを使用せずに、複数のコントロールに一貫した外観を作成することもできます。

 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」クラスを使用すると、複数のコントロールを扱う際にどのように簡素化できるかは次の通りです。

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

上記の両方のコードスニペットは、それぞれのインジケーターインスタンスを起動すると、同じコントロールが表示されるはずです。

また、Style クラスを使用して、コントロールの状態に基づいて外観を変更することもできます。

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

画像

Image コントロールは、ローカルに保存された画像を表示するために使用できます。Image コントロールは .NET の Bitmap クラスを使用しており、以下のような一般的な画像フォーマットのほとんどをサポートしています。

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

詳細については .NET の Bitmap クラスのドキュメントを参照してください。

Image コントロールを使用するには、その Source プロパティをバイト配列 (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)
        {
        }
    }
}

上記のインジケーターのインスタンスを起動すると、メインチャート上に新しい表示は見られないはずです。しかし、「画像ファイルパス」パラメータに有効なファイルパスを入力すると、選択した画像が画面の中央に表示されます。

プロジェクトリソースを使用して画像を保存し、Image コントロールを介して表示することもできます。

そのためには、Visual Studio でプロジェクトリソースを開き、「リソース」タブに切り替えます。そこに新しいリソースを作成し、既存の画像を追加します。

その後、画像を Project_Name_Space.Properties.Resources._Image_Name プロパティを介して Image コントロールのソースとして使用できるようになります。

例として、以下の画像を image.png としてシステムに保存してください。

以下の画像をコピーして、システムに「image.png」として保存します:

Image title

新しいインジケーターを cTrader で作成し、名前を「Image Sample」に設定して Visual Studio で開きます。その後、ロゴインジケーター プロジェクトをリソースとして追加します。これを行うには、プロジェクトを右クリックして「プロパティ」を選択し、「リソース」をクリックし、その後「アセンブリリソースの作成と管理」をクリックします。新しく開いたタブに logo.png ファイルをコピーします。

以下のコードをインジケーターのメインソースコードファイルにコピーします。

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

このインジケーターのインスタンスを作成すると、以下の出力が表示されるはずです。

Image title

画像の最大サイズは 10 MB です。

目次

このページについて