11/14/24, 10:12 AM Working With Styles - cTrader Algo

Working With Styles

Working with Styles in cTrader Automate

In this video and its corresponding article we will explain how you can use
styles to change the appearance of custom UI elements created via cBots,
indicators, and plugins.

Creating an Example cBot

Let's switch to the 'Algo' app in cTrader and create a new cBot. We will name it
'Styles Example'. In this example, we will create three text boxes and we will
display them on the chart using a stack panel.

First, we will initialise the three text boxes. We will configre the appearance of
each text box by simply setting its properties one by one.

1 var firstTextBox = new TextBox

2 {
3 ForegroundColor = Color.Red,
4 Margin = 5,

https://help.ctrader.com/ctrader-algo/articles/for-developers/working-with-styles/ 1/6
11/14/24, 10:12 AM Working With Styles - cTrader Algo

5 FontFamily = "Cambria",
6 FontSize = 12,
7 Text = "Type...",
8 Width = 150
9 };
10
11 var secondTextBox = new TextBox
12 {
13 ForegroundColor = Color.Red,
14 Margin = 5,
15 FontFamily = "Cambria",
16 FontSize = 12,
17 Text = "Type...",
18 Width = 150
19 };
20
21 var thirdTextBox = new TextBox
22 {
23 ForegroundColor = Color.Red,
24 Margin = 5,
25 FontFamily = "Cambria",
26 FontSize = 12,
27 Text = "Type...",
28 Width = 150
29 };

We will also initialise a stack panel.

1 var panel = new StackPanel

2 {
3 Orientation = Orientation.Vertical,
4 HorizontalAlignment = HorizontalAlignment.Center,
5 VerticalAlignment = VerticalAlignment.Center
6 };

At last, add these text boxes to the panel.

1 panel.AddChild(firstTextBox);
2 panel.AddChild(secondTextBox);
3 panel.AddChild(thirdTextBox);

And, finally, add the panel to the chart.

https://help.ctrader.com/ctrader-algo/articles/for-developers/working-with-styles/ 2/6
11/14/24, 10:12 AM Working With Styles - cTrader Algo

1 Chart.AddControl(panel);

After we build our cBot, we should see three text boxes drawn directly on the
chart.

Using the Styles Class

The code of our cBot is repetitive as we configure each text box individually and
repeat property initialisation for every element. Code repetition can make large
projects hard to maintain and optimise. We can make our code more concise
and maintainable by using styles to configure the appearance of our controls.

First, we will initialise a new object of the Styles class.

1 var textBoxStyle = new Style();

We will then configure the appearance of controls associated with this style.

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

We will assign this style to each of our text boxes and remove the initialisation
of parameters.

1 var firstTextBox = new TextBox

2 {
3 Text = "Type...",
4 Style = textBoxStyle
5 };
6
7 var secondTextBox = new TextBox
8 {
9 Text = "Type...",

https://help.ctrader.com/ctrader-algo/articles/for-developers/working-with-styles/ 3/6
11/14/24, 10:12 AM Working With Styles - cTrader Algo

10 Style = textBoxStyle
11 };
12
13 var thirdTextBox = new TextBox
14 {
15 Text = "Type...",
16 Style = textBoxStyle
17 };

If we build our cBot and add it to a chart, we will see that all our text boxes are
displayed normally. We can go back to the code and change one of the
properties of our textBoxStyle object, in which case all our text boxes will be
styled differently.

1 textBoxStyle.Set(ControlProperty.ForegroundColor,
Color.Yellow, ControlState.Hover);

Styles in Custom Windows and Plugins

Control styles also work when controls are displayed in places other than the
chart including custom windows. We will create an example plugin that will
display text boxes in a custom window and style them accordingly.

Let's start by displaying our controls in a custom window.

Here is the code of our plugin.

1 using cAlgo.API;
2
3 namespace cAlgo.Plugins
4 {
5 [Plugin(AccessRights = AccessRights.None)]
6 public class StylesExample : Plugin
7 {
8 protected override void OnStart()
9 {
10
11
12 var block = Asp.SymbolTab.AddBlock("Styles

https://help.ctrader.com/ctrader-algo/articles/for-developers/working-with-styles/ 4/6
11/14/24, 10:12 AM Working With Styles - cTrader Algo

13 Example");
14 block.Index = 2;
15 block.Height = 500;
16
17 var textBoxStyle = new Style();
18
19
20 textBoxStyle.Set(ControlProperty.ForegroundColor,
21 Color.Red);
22 textBoxStyle.Set(ControlProperty.Margin,
23 5);
24
25 textBoxStyle.Set(ControlProperty.FontFamily,
26 "Cambria");
27 textBoxStyle.Set(ControlProperty.FontSize,
28 12);
29 textBoxStyle.Set(ControlProperty.Width,
30 150);
31
32 textBoxStyle.Set(ControlProperty.ForegroundColor,
33 Color.Yellow, ControlState.Hover);
34
35
36 var firstTextBox = new TextBox
37 {
38 Text = "Type...",
39 Style = textBoxStyle
40 };
41
42 var secondTextBox = new TextBox
43 {
44 Text = "Type...",
45 Style = textBoxStyle
46 };
47
48 var thirdTextBox = new TextBox
49 {
50 Text = "Type...",
51 Style = textBoxStyle
52 };
53
54 var panel = new StackPanel
55 {
56 Orientation = Orientation.Vertical,
57 HorizontalAlignment =
58 HorizontalAlignment.Center,

https://help.ctrader.com/ctrader-algo/articles/for-developers/working-with-styles/ 5/6
11/14/24, 10:12 AM Working With Styles - cTrader Algo

59 VerticalAlignment =
60 VerticalAlignment.Center
61 };
62
63 panel.AddChild(firstTextBox);
64 panel.AddChild(secondTextBox);
65 panel.AddChild(thirdTextBox);
66
67 block.Child = panel;
68
69 var window = new Window
{
Child = panel,
Title = "My Window",
WindowStartupLocation =
WindowStartupLocation.CenterScreen,
Topmost = true
};

window.Show();
}

}
}

After building our pluign, we should see our text boxes in a custom window and
in the 'Active Symbol Panel'.

Summary
Styling controls is essential if you want to display custom elements to users
without worrying about redundancies in your code. If you want to learn more
about working with algo trading in cTrader, click on the button below to
subscribe to our YouTube channel.

Subscribe to our YouTube channel

November 6, 2024

https://help.ctrader.com/ctrader-algo/articles/for-developers/working-with-styles/ 6/6