Zum Inhalt

Arbeiten mit Styles

In diesem Artikel und dem dazugehörigen Video erklären wir, wie Sie Styles verwenden können, um das Erscheinungsbild benutzerdefinierter UI-Elemente zu ändern, die über cBots, Indikatoren und Plugins erstellt wurden.

Beispiel-cBot erstellen

Navigieren Sie zu cTrader Algo und erstellen Sie einen neuen cBot. Wir nennen ihn „Styles Example". In diesem Beispiel erstellen wir drei Textfelder und zeigen sie mithilfe eines Stack-Panels auf dem Chart an.

Zuerst initialisieren wir die drei Textfelder. Wir konfigurieren das Erscheinungsbild jedes Textfelds, indem wir einfach seine Eigenschaften nacheinander festlegen.

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

Wir initialisieren auch ein Stack-Panel.

1
2
3
4
5
6
var panel = new StackPanel
{
    Orientation = Orientation.Vertical,
    HorizontalAlignment = HorizontalAlignment.Center,
    VerticalAlignment = VerticalAlignment.Center
};

Dann fügen wir diese Textfelder zum Panel hinzu.

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

Schließlich fügen wir das Panel zum Chart hinzu.

1
Chart.AddControl(panel);

Nachdem wir unseren cBot erstellt haben, sollten wir drei Textfelder sehen, die direkt auf dem Chart gezeichnet werden.

Die Klasse Style verwenden

Der Code unseres cBots ist repetitiv, da wir jedes Textfeld einzeln konfigurieren und die Eigenschaftsinitialisierung für jedes Element wiederholen. Code-Wiederholungen können große Projekte schwer wartbar und optimierbar machen. Wir können unseren Code prägnanter und wartbarer gestalten, indem wir Styles verwenden, um das Erscheinungsbild unserer Steuerelemente zu konfigurieren.

Zuerst initialisieren wir ein neues Objekt der Klasse Styles.

1
var textBoxStyle = new Style();

Dann konfigurieren wir das Erscheinungsbild der Steuerelemente, die mit diesem Style verknüpft sind.

1
2
3
4
5
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);

Wir weisen diesen Style jedem unserer Textfelder zu und entfernen die Initialisierung der Parameter.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
var firstTextBox = new TextBox
{
    Text = "Type...",
    Style = textBoxStyle
};

var secondTextBox = new TextBox
{
    Text = "Type...",
    Style = textBoxStyle
};

var thirdTextBox = new TextBox
{
    Text = "Type...",
    Style = textBoxStyle
};

Wenn wir unseren cBot erstellen und zu einem Chart hinzufügen, werden wir sehen, dass alle unsere Textfelder normal angezeigt werden. Wir können zum Code zurückkehren und eine der Eigenschaften unseres textBoxStyle-Objekts ändern, wodurch alle unsere Textfelder anders gestylt werden.

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

Styles in benutzerdefinierten Fenstern und Plugins verwenden

Steuerelement-Styles funktionieren auch, wenn Steuerelemente an anderen Orten als dem Chart angezeigt werden, z. B. in benutzerdefinierten Fenstern. Wir erstellen ein Beispiel-Plugin, das Textfelder in einem benutzerdefinierten Fenster anzeigt und sie entsprechend stylt.

Wir beginnen damit, unsere Steuerelemente in einem benutzerdefinierten Fenster anzuzeigen.

Der folgende Code ist für unser Plugin:

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

namespace cAlgo.Plugins
{
    [Plugin(AccessRights = AccessRights.None)]
    public class StylesExample : Plugin
    {
        protected override void OnStart()
        {


            var block = Asp.SymbolTab.AddBlock("Styles Example");
            block.Index = 2;
            block.Height = 500;

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

            block.Child = panel;

            var window = new Window
            {
                Child = panel,
                Title = "My Window",
                WindowStartupLocation = WindowStartupLocation.CenterScreen,
                Topmost = true
            };

            window.Show();
        }

    }        
}

Nach dem Erstellen unseres Plugins sollten wir unsere Textfelder in einem benutzerdefinierten Fenster und im Bereich eines aktiven Symbols sehen.

Zusammenfassung

Das Styling von Steuerelementen ist unerlässlich, wenn Sie benutzerdefinierte Elemente für Benutzer anzeigen möchten, ohne sich um Redundanzen in Ihrem Code sorgen zu müssen.