Skip to content

Custom Frame Sample

Overview

The Custom Frame Sample plugin enables basic frame management within the cTrader charting interface. It controls how custom frames appear on the chart, offering a simple way to organise visual elements and tailor your workspace through the following key functionalities:

  • Adds a custom frame to the chart interface with a single click.
  • Detaches or reattaches the frame to support multi-screen layouts and flexible workspace configurations.
  • Removes the frame when no longer needed to keep the chart area clear and focused.
  • Displays a custom text block within the frame to support real-time chart customisation and visual feedback.

This plugin creates a simple interface in Active Symbol Panel that allows you to add, remove, attach or detach a custom chart frame. Each button triggers a specific action, making it easy to manage visual elements directly on the chart. The plugin runs only while cTrader Windows or Mac is open and stops automatically when the platform is closed.

Plugin creation

Learn how to create plugins, using either C# or Python, in our step-by-step guides.

Custom Frame Sample plugin code is available in our public C# and Python repositories. The same code is provided as a template in the algorithm creation wizard in cTrader Windows or Mac, or you can simply copy and use the snippet below:

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

namespace cAlgo.Plugins
{
    [Plugin(AccessRights = AccessRights.None)]
    public class CustomFrameSample : Plugin
    {
        protected override void OnStart()
        {
            var aspBlock = Asp.SymbolTab.AddBlock("Custom Frame Sample");

            var panel = new StackPanel();

            var addCustomFrameButton = new Button { Text = "Add Custom Frame", Margin = 5 };
            addCustomFrameButton.Click += OnAddCustomFrameButtonClick;
            panel.AddChild(addCustomFrameButton);

            var removeCustomFrameButton = new Button { Text = "Remove Custom Frame", Margin = 5 };
            removeCustomFrameButton.Click += OnRemoveCustomFrameButtonClick;
            panel.AddChild(removeCustomFrameButton);

            var detachCustomFrameButton = new Button { Text = "Detach Custom Frame", Margin = 5 };
            detachCustomFrameButton.Click += OnDetachCustomFrameButtonClick;
            panel.AddChild(detachCustomFrameButton);

            var attachCustomFrameButton = new Button { Text = "Attach Custom Frame", Margin = 5 };
            attachCustomFrameButton.Click += OnAttachCustomFrameButtonClick;
            panel.AddChild(attachCustomFrameButton);

            aspBlock.Child = panel;
        }

        private void OnAttachCustomFrameButtonClick(ButtonClickEventArgs obj)
        {
            if (ChartManager.OfType<CustomFrame>().FirstOrDefault(c => !c.IsAttached) is not {} customFrame)
                return;

            customFrame.Attach();
        }

        private void OnDetachCustomFrameButtonClick(ButtonClickEventArgs obj)
        {
            if (ChartManager.OfType<CustomFrame>().FirstOrDefault(c => c.IsAttached) is not {} customFrame)
                return;

            customFrame.Detach();
        }

        private void OnRemoveCustomFrameButtonClick(ButtonClickEventArgs obj)
        {
            if (ChartManager.OfType<CustomFrame>().FirstOrDefault() is not {} customFrame)
                return;

            ChartManager.RemoveFrame(customFrame.Id);
        }

        private void OnAddCustomFrameButtonClick(ButtonClickEventArgs obj)
        {
            var customFrame = ChartManager.AddCustomFrame("Custom Frame");

            customFrame.Child = new TextBlock
            {
                Text = $"Custom Frame {customFrame.Id} Child Control",
                FontSize = 32,
                HorizontalAlignment = HorizontalAlignment.Center,
                VerticalAlignment = VerticalAlignment.Center
            };
        }
    }        
}

 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
import clr
clr.AddReference("cAlgo.API")

from cAlgo.API import *

class CustomFrameSample():
    def on_start(self):
        aspBlock = api.Asp.SymbolTab.AddBlock("Custom Frame Sample");

        panel = StackPanel()

        addCustomFrameButton = Button()
        addCustomFrameButton.Text = "Add Custom Frame"
        addCustomFrameButton.Margin = Thickness(5)    
        addCustomFrameButton.Click += self.on_add_custom_frame_button_click

        panel.AddChild(addCustomFrameButton)

        removeCustomFrameButton = Button()
        removeCustomFrameButton.Text = "Remove Custom Frame"
        removeCustomFrameButton.Margin = Thickness(5) 
        removeCustomFrameButton.Click += self.on_remove_custom_frame_button_click

        panel.AddChild(removeCustomFrameButton)

        detachCustomFrameButton = Button()
        detachCustomFrameButton.Text = "Detach Custom Frame"
        detachCustomFrameButton.Margin = Thickness(5) 
        detachCustomFrameButton.Click += self.on_detach_custom_frame_button_click

        panel.AddChild(detachCustomFrameButton);

        attachCustomFrameButton = Button()
        attachCustomFrameButton.Text = "Attach Custom Frame"
        attachCustomFrameButton.Margin = Thickness(5) 
        attachCustomFrameButton.Click += self.on_attach_custom_frame_button_click

        panel.AddChild(attachCustomFrameButton)

        aspBlock.Child = panel

    def on_add_custom_frame_button_click(self, args):
        customFrame = api.ChartManager.AddCustomFrame("Custom Frame");

        textBlock = TextBlock()
        textBlock.Text = f"Custom Frame {customFrame.Id} Child Control"
        textBlock.FontSize = 32
        textBlock.HorizontalAlignment = HorizontalAlignment.Center
        textBlock.VerticalAlignment = VerticalAlignment.Center

        customFrame.Child = textBlock

    def on_remove_custom_frame_button_click(self, args):
        for frame in api.ChartManager:
            if isinstance(frame.__implementation__, CustomFrame) == False:
                continue
            customFrame = CustomFrame(frame)
            api.ChartManager.RemoveFrame(customFrame.Id)
            break

    def on_detach_custom_frame_button_click(self, args):
        for frame in api.ChartManager:
            if isinstance(frame.__implementation__, CustomFrame) == False:
                continue
            customFrame = CustomFrame(frame)
            if customFrame.IsAttached == False:
                continue
            customFrame.Detach()
            break

    def on_attach_custom_frame_button_click(self, args):
        for frame in api.ChartManager:
            if isinstance(frame.__implementation__, CustomFrame) == False:
                continue
            customFrame = CustomFrame(frame)
            if customFrame.IsAttached == True:
                continue
            customFrame.Attach()
            break

Customisation options

Custom Frame Sample includes control buttons that let you add, remove and interact with a custom frame directly on the chart. The table below outlines its key components and their functions:

Parameter Description Possible values
panel Adds or reorders buttons for additional frame actions or UI options. stackpanel [panel]
Text Edits button text for clarity. Add custom frame, Remove custom frame, Detach custom frame, Attach custom frame
Margin Changes margins for visual balance. 5, 8, 12, etc.
AddCustomFrame Modifies the frame title to reflect purpose or symbol. chartmanager.addcustomframe(Custom frame)
TextBlock.Text Changes the message to reflect context or identifier. Custom frame sample
FontSize Adjusts size for clarity and layout fit. 32, 36, 40, etc.
HorizontalAlignment Adjusts alignment to change horizontal content presentation. horizontalalignment.center
VerticalAlignment Adjusts alignment to change vertical content presentation. verticalalignment.center
Attach() Adds a message when the frame is reattached to the chart. customframe.attach()
Detach() Adds a message when the frame is detached from the chart. customframe.detach()
RemoveFrame Renames the button to reflect its purpose. chartmanager.removeframe(customframe.id)

Use cases

Custom Frame Sample enables interactive chart management without requiring external services. The following use cases show how the plugin can enhance the trading experience.

Use case Scenario Value
Highlight trading signals Add a frame with a message such as Watch for breakout on EURUSD. Draws attention to chart-specific alerts or user notes.
Multi-screen management Detach frames and move them to other screens. Expands chart visibility and supports multi-screen trading setups.
Custom workspace organisation Organise the chart area using frames to match your personal trading workflow. Helps you organise the chart area based on your personal trading workflow.
Custom visual markers Manually add frames with notes to highlight chart events like order entries. Provides a flexible way to label key points on the chart without permanent drawings.

Summary

This plugin offers a practical way to manage custom frames directly on cTrader charts. With simple controls to add, remove, attach or detach frames, it helps you personalise your workspace, highlight key information and organise chart layouts easily.

For further development details, refer to our plugin documentation.