Langkau tajuk talian

Bekerja dengan gaya

Dalam artikel ini dan video yang berkaitan, kami akan menerangkan bagaimana anda boleh menggunakan gaya untuk mengubah penampilan elemen UI tersuai yang dicipta melalui cBot, indikator dan plugin.

Cipta contoh cBot

Navigasi ke cTader Algo dan cipta cBot baharu. Kita akan menamakan ia "Contoh Gaya". Dalam contoh ini, kita akan mencipta tiga kotak teks dan memaparkannya pada carta menggunakan panel tindanan.

Pertama, kita akan memulakan tiga kotak teks. Kita akan mengkonfigurasi penampilan setiap kotak teks dengan hanya menetapkan sifat-sifatnya satu demi satu.

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

Kita juga akan memulakan panel tindanan.

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

Kemudian, tambah kotak teks ini ke panel.

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

Akhir sekali, tambah panel ke carta.

1
Chart.AddControl(panel);

Selepas kita membina cBot kita, kita sepatutnya melihat tiga kotak teks dilukis terus pada carta.

Gunakan kelas Style

Kod cBot kita berulang kerana kita mengkonfigurasi setiap kotak teks secara individu dan mengulangi pemulaan sifat untuk setiap elemen. Pengulangan kod boleh menjadikan projek besar sukar untuk dikekalkan dan dioptimumkan. Kita boleh menjadikan kod kita lebih ringkas dan mudah dikekalkan dengan menggunakan gaya untuk mengkonfigurasi penampilan kawalan kita.

Pertama, kita akan memulakan objek baharu kelas Styles.

1
var textBoxStyle = new Style();

Kita kemudian akan mengkonfigurasi penampilan kawalan yang berkaitan dengan gaya ini.

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

Kita akan menetapkan gaya ini kepada setiap kotak teks kita dan membuang pemulaan 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
};

Jika kita membina cBot kita dan menambahnya ke carta, kita akan melihat bahawa semua kotak teks kita dipaparkan secara normal. Kita boleh kembali ke kod dan mengubah salah satu sifat objek textBoxStyle kita, dalam kes ini semua kotak teks kita akan digayakan secara berbeza.

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

Gunakan gaya dalam tetingkap tersuai dan plugin

Gaya kawalan juga berfungsi apabila kawalan dipaparkan di tempat selain carta, seperti tetingkap tersuai. Kita akan mencipta contoh plugin yang akan memaparkan kotak teks dalam tetingkap tersuai dan menggayakannya dengan sewajarnya.

Kita akan mula dengan memaparkan kawalan kita dalam tetingkap tersuai.

Berikut adalah kod untuk plugin kita:

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

    }        
}

Selepas membina plugin kita, kita sepatutnya melihat kotak teks kita dalam tetingkap tersuai dan dalam Panel Simbol Aktif.

Ringkasan

Menggayakan kawalan adalah penting jika anda ingin memaparkan elemen tersuai kepada pengguna tanpa perlu risau tentang keberulangan dalam kod anda.