Working With Custom Windows in cTrader Algo¶

In this video and its corresponding article, we will talk about working with custom windows when creating cTrader algos. We will explain what custom windows are and how they can be used in your cBots and indicators. We will also create an example of using a custom window in a cBot.

Custom Window Example¶

We will now switch to the 'Algo' app to see an illustration of how custom windows can be used in your cBots and indicators. We will create a new indicator; in it, we will simply use a ready-made example from the documentation. Click here to access it.

Copy and paste the code from the documentation into the code editor window. Then, build the indicator and add an instance of it to a chart.

As soon as the indicator is added, we should see a custom window popping up. This window contains a complex form displaying information about the symbol to whose chart the indicator is currently attached. This form is a great example of what can be achieved with custom windows.

How to Create a Custom Window¶

We will now demonstrate how you can create a custom window from scratch. We will create a new indicator and call it Custom Window Example. In this example, we will add a custom window and then add some custom controls to it. The window itself will be declared in the Initialize() method; to show the window, we will call the window.Show() method.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

protected override void Initialize()
{
    var window = new Window
    {
        Title = "My Window",
        WindowStartupLocation = WindowStartupLocation.CenterScreen,
        Topmost = true
    };

    window.Show();
}

To see the window, we can build the indicator and add it to a chart.

How to Add Controls to a Window¶

We will now add some custom controls to the window; the controls will take the form of a text box with some text in it.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

var window = new Window
{
    Child = new TextBlock 
    {
        Text = "Hi, This is my Window!",
        VerticalAlignment = VerticalAlignment.Center,
        HorizontalAlignment = HorizontalAlignment.Center,
        FontSize = 20,
        FontWeight = FontWeight.UltraBold
    },
    Title = "My Window",
    WindowStartupLocation = WindowStartupLocation.CenterScreen,
    Topmost = true
};             

window.Show();

We will rebuild the indicator and add a new instance to see how our custom controls look like.

How to Modify Window Properties¶

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

var window = new Window
{
    Child = new TextBlock 
    {
        Text = "Hi, This is my Window!",
        VerticalAlignment = VerticalAlignment.Center,
        HorizontalAlignment = HorizontalAlignment.Center,
        FontSize = 20,
        FontWeight = FontWeight.UltraBold
    },
    Title = "My Window",
    WindowStartupLocation = WindowStartupLocation.CenterScreen,
    Topmost = true,
    Width = 800,
    Height = 800
};             

window.Show();

We will once again rebuild our indicator and add an instance. Now our window area is a rectangle area with a width and height of 800 pixels.

The next change will be to add a range in which the window can be resized. To do so, we will add the MinHeight, MaxHeight, MinWidth and MaxWidth parameters.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

var window = new Window
{
    Child = new TextBlock 
    {
        Text = "Hi, This is my Window!",
        VerticalAlignment = VerticalAlignment.Center,
        HorizontalAlignment = HorizontalAlignment.Center,
        FontSize = 20,
        FontWeight = FontWeight.UltraBold
    },
    Title = "My Window",
    WindowStartupLocation = WindowStartupLocation.CenterScreen,
    Topmost = true,
    Width = 800,
    Height = 800,
    MinHeight = 600,
    MaxHeight = 800,
    MinWidth = 600,
    MaxWidth = 800
};             

window.Show();

We will rebuild the indicator and, after an instance is added, we can attempt to try its size. We can see that resizing is only possible within the specified width and height range.

We can also change the background colour of a window and make it non-resizable.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

var window = new Window
{
    Child = new TextBlock 
    {
        Text = "Hi, This is my Window!",
        VerticalAlignment = VerticalAlignment.Center,
        HorizontalAlignment = HorizontalAlignment.Center,
        FontSize = 20,
        FontWeight = FontWeight.UltraBold
    },
    Title = "My Window",
    WindowStartupLocation = WindowStartupLocation.CenterScreen,
    Topmost = true,
    Width = 800,
    Height = 800,
    MinHeight = 600,
    MaxHeight = 800,
    MinWidth = 600,
    MaxWidth = 800,
    BackgroundColor = Color.Black,
    ResizeMode = ResizeMode.NoResize
};

After we perform the usual actions (rebuilding the indicator and adding an instance), the window should have a new background colour.

Summary¶

cTrader custom windows are flexible and can be customised to a high degree. In addition to the properties mentioned above, you can also change margins and padding, the visibility of custom windows and whether they are active under certain conditions. cTrader custom windows also expose methods to show, hide and close them in addition to several other event handlers.

To learn more about the cTrader Algo API, see our documentation or post a question on our forum.