Bỏ qua

Làm việc với kiểu dáng

Trong bài viết này và video tương ứng, chúng tôi sẽ giải thích cách bạn có thể sử dụng kiểu dáng để thay đổi giao diện của các phần tử giao diện người dùng tùy chỉnh được tạo thông qua cBot, chỉ báo và plugin.

Tạo một cBot ví dụ

Điều hướng đến cTader Algo và tạo một cBot mới. Chúng ta sẽ đặt tên nó là "Styles Example". Trong ví dụ này, chúng ta sẽ tạo ba hộp văn bản và hiển thị chúng trên biểu đồ bằng cách sử dụng một bảng xếp chồng.

Đầu tiên, chúng ta sẽ khởi tạo ba hộp văn bản. Chúng ta sẽ cấu hình giao diện của mỗi hộp văn bản bằng cách đơn giản là thiết lập từng thuộc tính của nó.

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

Chúng ta cũng sẽ khởi tạo một bảng xếp chồng.

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

Sau đó, thêm các hộp văn bản này vào bảng.

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

Cuối cùng, thêm bảng vào biểu đồ.

1
Chart.AddControl(panel);

Sau khi chúng ta xây dựng cBot, chúng ta sẽ thấy ba hộp văn bản được vẽ trực tiếp trên biểu đồ.

Sử dụng lớp Style

Mã của cBot chúng ta lặp lại vì chúng ta cấu hình từng hộp văn bản riêng lẻ và lặp lại việc khởi tạo thuộc tính cho mọi phần tử. Việc lặp lại mã có thể khiến các dự án lớn khó bảo trì và tối ưu hóa. Chúng ta có thể làm cho mã của mình ngắn gọn và dễ bảo trì hơn bằng cách sử dụng kiểu dáng để cấu hình giao diện của các điều khiển của chúng ta.

Đầu tiên, chúng ta sẽ khởi tạo một đối tượng mới của lớp Styles.

1
var textBoxStyle = new Style();

Sau đó, chúng ta sẽ cấu hình giao diện của các điều khiển liên kết với kiểu dáng này.

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

Chúng ta sẽ gán kiểu dáng này cho mỗi hộp văn bản của chúng ta và xóa việc khởi tạo các tham số.

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

Nếu chúng ta xây dựng cBot và thêm nó vào biểu đồ, chúng ta sẽ thấy rằng tất cả các hộp văn bản của chúng ta được hiển thị bình thường. Chúng ta có thể quay lại mã và thay đổi một trong các thuộc tính của đối tượng textBoxStyle, trong trường hợp đó tất cả các hộp văn bản của chúng ta sẽ được tạo kiểu khác nhau.

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

Sử dụng kiểu dáng trong cửa sổ tùy chỉnh và plugin

Kiểu dáng điều khiển cũng hoạt động khi các điều khiển được hiển thị ở những nơi khác ngoài biểu đồ, chẳng hạn như cửa sổ tùy chỉnh. Chúng ta sẽ tạo một plugin ví dụ sẽ hiển thị các hộp văn bản trong một cửa sổ tùy chỉnh và tạo kiểu cho chúng phù hợp.

Chúng ta sẽ bắt đầu bằng cách hiển thị các điều khiển của mình trong một cửa sổ tùy chỉnh.

Sau đây là mã cho plugin của chúng ta:

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

    }        
}

Sau khi xây dựng plugin, chúng ta sẽ thấy các hộp văn bản của mình trong một cửa sổ tùy chỉnh và trong Bảng ký hiệu đang hoạt động.

Tổng quan

Tạo kiểu cho các điều khiển là điều cần thiết nếu bạn muốn hiển thị các phần tử tùy chỉnh cho người dùng mà không phải lo lắng về sự dư thừa trong mã của bạn.