Lewati ke isi

Bekerja dengan gaya

Dalam artikel ini dan video terkaitnya, kami akan menjelaskan bagaimana Anda dapat menggunakan gaya untuk mengubah tampilan elemen UI kustom yang dibuat melalui cBot, indikator, dan plugin.

Buat contoh cBot

Navigasikan ke cTrader Algo dan buat cBot baru. Kita akan menamainya "Styles Example". Dalam contoh ini, kita akan membuat tiga kotak teks dan menampilkannya pada grafik menggunakan panel tumpukan.

Pertama, kita akan menginisialisasi tiga kotak teks tersebut. Kita akan mengonfigurasi tampilan setiap kotak teks dengan hanya mengatur propertinya satu per 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 menginisialisasi panel tumpukan.

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

Kemudian, tambahkan kotak-kotak teks ini ke panel.

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

Terakhir, tambahkan panel ke grafik.

1
Chart.AddControl(panel);

Setelah kita membangun cBot kita, kita seharusnya melihat tiga kotak teks yang digambar langsung pada grafik.

Gunakan kelas Style

Kode cBot kita berulang karena kita mengonfigurasi setiap kotak teks secara individual dan mengulangi inisialisasi properti untuk setiap elemen. Pengulangan kode dapat membuat proyek besar sulit untuk dikelola dan dioptimalkan. Kita dapat membuat kode kita lebih ringkas dan mudah dikelola dengan menggunakan gaya untuk mengonfigurasi tampilan kontrol kita.

Pertama, kita akan menginisialisasi objek baru dari kelas Styles.

1
var textBoxStyle = new Style();

Kemudian kita akan mengonfigurasi tampilan kontrol yang terkait 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 ke masing-masing kotak teks kita dan menghapus inisialisasi 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 membangun cBot kita dan menambahkannya ke grafik, kita akan melihat bahwa semua kotak teks kita ditampilkan secara normal. Kita dapat kembali ke kode dan mengubah salah satu properti dari objek textBoxStyle kita, dalam hal ini semua kotak teks kita akan diberi gaya berbeda.

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

Gunakan gaya dalam jendela kustom dan plugin

Gaya kontrol juga berfungsi ketika kontrol ditampilkan di tempat selain grafik, seperti jendela kustom. Kita akan membuat contoh plugin yang akan menampilkan kotak teks di jendela kustom dan memberi gaya sesuai.

Kita akan mulai dengan menampilkan kontrol kita di jendela kustom.

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

    }        
}

Setelah membangun plugin kita, kita seharusnya melihat kotak teks kita di jendela kustom dan di Panel Simbol Aktif.

Ringkasan

Memberi gaya pada kontrol sangat penting jika Anda ingin menampilkan elemen kustom kepada pengguna tanpa khawatir tentang redundansi dalam kode Anda.