Aller au contenu

Utiliser les styles

Dans cet article et sa vidéo correspondante, nous expliquerons comment vous pouvez utiliser les styles pour modifier l'apparence des éléments d'interface utilisateur personnalisés créés via des cBots, des indicateurs et des plug-ins.

Créer un exemple de cBot

Accédez à cTader Algo et créez un nouveau cBot. Nous le nommerons "Styles Example". Dans cet exemple, nous créerons trois zones de texte et les afficherons sur le graphique à l'aide d'un panneau empilé.

Tout d'abord, nous initialiserons les trois zones de texte. Nous configurerons l'apparence de chaque zone de texte en définissant simplement ses propriétés une par une.

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

Nous initialiserons également un panneau empilé.

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

Ensuite, nous ajouterons ces zones de texte au panneau.

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

Enfin, nous ajouterons le panneau au graphique.

1
Chart.AddControl(panel);

Après avoir construit notre cBot, nous devrions voir trois zones de texte dessinées directement sur le graphique.

Utiliser la classe Style

Le code de notre cBot est répétitif car nous configurons chaque zone de texte individuellement et répétons l'initialisation des propriétés pour chaque élément. La répétition du code peut rendre les grands projets difficiles à maintenir et à optimiser. Nous pouvons rendre notre code plus concis et plus facile à maintenir en utilisant des styles pour configurer l'apparence de nos contrôles.

Tout d'abord, nous initialiserons un nouvel objet de la classe Styles.

1
var textBoxStyle = new Style();

Nous configurerons ensuite l'apparence des contrôles associés à ce style.

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

Nous attribuerons ce style à chacune de nos zones de texte et supprimerons l'initialisation des paramètres.

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

Si nous construisons notre cBot et l'ajoutons à un graphique, nous verrons que toutes nos zones de texte s'affichent normalement. Nous pouvons revenir au code et modifier l'une des propriétés de notre objet textBoxStyle, auquel cas toutes nos zones de texte seront stylisées différemment.

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

Utiliser des styles dans les fenêtres personnalisées et les plug-ins

Les styles de contrôle fonctionnent également lorsque les contrôles sont affichés dans des emplacements autres que le graphique, tels que les fenêtres personnalisées. Nous allons créer un exemple de plug-in qui affichera des zones de texte dans une fenêtre personnalisée et les stylisera en conséquence.

Nous commencerons par afficher nos contrôles dans une fenêtre personnalisée.

Voici le code de notre plug-in :

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

    }        
}

Après avoir créé notre plug-in, nous devrions voir nos zones de texte dans une fenêtre personnalisée et dans le Panneau de symbole actif.

Résumé

Le stylage des contrôles est essentiel si vous souhaitez afficher des éléments personnalisés aux utilisateurs sans vous soucier des redondances dans votre code.