Перейти к содержанию

Работа со стилями

В этой статье и соответствующем видео мы объясним, как вы можете использовать стили для изменения внешнего вида пользовательских элементов интерфейса, созданных с помощью сиБотов, индикаторов и плагинов.

Создайте пример сиБота

Перейдите в cTader Algo и создайте новый сиБот. Мы назовем его "Styles Example". В этом примере мы создадим три текстовых поля и отобразим их на графике с помощью панели стека.

Сначала мы инициализируем три текстовых поля. Мы настроим внешний вид каждого текстового поля, просто устанавливая его свойства одно за другим.

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

Мы также инициализируем панель стека.

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

Затем добавим эти текстовые поля на панель.

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

Наконец, добавим панель на график.

1
Chart.AddControl(panel);

После сборки нашего сиБота мы должны увидеть три текстовых поля, нарисованных непосредственно на графике.

Используйте класс Style

Код нашего сиБота повторяется, поскольку мы настраиваем каждое текстовое поле отдельно и повторяем инициализацию свойств для каждого элемента. Повторение кода может затруднить поддержку и оптимизацию крупных проектов. Мы можем сделать наш код более кратким и удобным для поддержки, используя стили для настройки внешнего вида наших элементов управления.

Сначала мы инициализируем новый объект класса Styles.

1
var textBoxStyle = new 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);

Мы назначим этот стиль каждому из наших текстовых полей и удалим инициализацию параметров.

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

Если мы соберем наш сиБот и добавим его на график, мы увидим, что все наши текстовые поля отображаются нормально. Мы можем вернуться к коду и изменить одно из свойств нашего объекта textBoxStyle, и в этом случае все наши текстовые поля будут оформлены по-другому.

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

Используйте стили в пользовательских окнах и плагинах

Стили элементов управления также работают, когда элементы управления отображаются в местах, отличных от графика, например в пользовательских окнах. Мы создадим пример плагина, который будет отображать текстовые поля в пользовательском окне и соответствующим образом оформлять их.

Мы начнем с отображения наших элементов управления в пользовательском окне.

Ниже приведен код нашего плагина:

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

    }        
}

После сборки нашего плагина мы должны увидеть наши текстовые поля в пользовательском окне и на Панели активного инструмента.

Обзор

Оформление элементов управления необходимо, если вы хотите отображать пользовательские элементы пользователям, не беспокоясь об избыточности в вашем коде.