콘텐츠로 이동

스타일 작업

이 글과 해당 동영상에서는 cBot, 지표 및 플러그인을 통해 생성된 사용자 정의 UI 요소의 외관을 변경하기 위해 스타일을 사용하는 방법을 설명합니다.

예제 cBot 생성

cTader Algo로 이동하여 새로운 cBot을 생성하세요. 이름을 "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);

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

    }        
}

플러그인을 빌드한 후, 사용자 정의 창과 활성 심벌 패널에서 텍스트 상자를 볼 수 있어야 합니다.

요약

코드의 중복을 걱정하지 않고 사용자 정의 요소를 사용자에게 표시하려면 컨트롤 스타일링이 필수적입니다.