انتقل إلى المحتوى

العمل مع الأنماط

في هذا المقال والفيديو المصاحب له، سنشرح كيف يمكنك استخدام الأنماط لتغيير مظهر عناصر واجهة المستخدم المخصصة التي تم إنشاؤها عبر cBots والمؤشرات والإضافات.

إنشاء مثال لخوارزمية cBot

انتقل إلى cTader Algo وقم بإنشاء cBot جديد. سنسميه "مثال الأنماط". في هذا المثال، سننشئ ثلاثة مربعات نص ونعرضها على الرسم البياني باستخدام لوحة مكدسة.

أولاً، سنقوم بتهيئة مربعات النص الثلاثة. سنقوم بتكوين مظهر كل مربع نص عن طريق تعيين خصائصه واحدة تلو الأخرى ببساطة.

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

بعد أن نبني cBot الخاص بنا، يجب أن نرى ثلاثة مربعات نص مرسومة مباشرة على الرسم البياني.

استخدام فئة Style

إن كود cBot الخاص بنا متكرر حيث نقوم بتكوين كل مربع نص بشكل فردي ونكرر تهيئة الخصائص لكل عنصر. يمكن أن يجعل تكرار الكود المشاريع الكبيرة صعبة الصيانة والتحسين. يمكننا جعل الكود الخاص بنا أكثر إيجازًا وقابلية للصيانة باستخدام الأنماط لتكوين مظهر عناصر التحكم لدينا.

أولاً، سنقوم بتهيئة كائن جديد من فئة 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
};

إذا قمنا ببناء cBot الخاص بنا وإضافته إلى رسم بياني، سنرى أن جميع مربعات النص لدينا يتم عرضها بشكل طبيعي. يمكننا العودة إلى الكود وتغيير إحدى خصائص كائن 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();
        }

    }        
}

بعد بناء الإضافة الخاصة بنا، يجب أن نرى مربعات النص الخاصة بنا في نافذة مخصصة وفي لوحة الرمز النشط.

الملخص

إن تنسيق عناصر التحكم أمر ضروري إذا كنت ترغب في عرض عناصر مخصصة للمستخدمين دون القلق بشأن التكرارات في الكود الخاص بك.