使用样式

在本文及其对应的视频中，我们将解释如何使用样式来更改通过 cBot、指标和插件创建的自定义 UI 元素的外观。

创建示例 cBot

导航到 cTader Algo 并创建一个新的 cBot。我们将其命名为“样式示例”。在此示例中，我们将创建三个文本框，并使用堆栈面板将它们显示在图表上。

首先，我们将初始化三个文本框。我们将通过逐个设置其属性来配置每个文本框的外观。

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

我们还将初始化一个堆栈面板。

var panel = new StackPanel
{
    Orientation = Orientation.Vertical,
    HorizontalAlignment = HorizontalAlignment.Center,
    VerticalAlignment = VerticalAlignment.Center
};

然后，将这些文本框添加到面板中。

panel.AddChild(firstTextBox);
panel.AddChild(secondTextBox);
panel.AddChild(thirdTextBox);

最后，将面板添加到图表中。

Chart.AddControl(panel);

构建 cBot 后，我们应该看到三个文本框直接绘制在图表上。

使用 `Style` 类

我们的 cBot 代码是重复的，因为我们单独配置每个文本框，并为每个元素重复属性初始化。代码重复会使大型项目难以维护和优化。我们可以通过使用样式来配置控件的外观，使代码更加简洁和可维护。

首先，我们将初始化 Styles 类的一个新对象。

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

我们将此样式分配给每个文本框，并删除参数的初始化。

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 对象的一个属性，在这种情况下，所有文本框将以不同的样式显示。

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

在自定义窗口和插件中使用样式

控件样式在控件显示在图表以外的位置（例如自定义窗口）时也有效。我们将创建一个示例插件，该插件将在自定义窗口中显示文本框并相应地设置它们的样式。

我们将首先在自定义窗口中显示我们的控件。

以下是我们插件的代码：

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

    }        
}

构建插件后，我们应该在自定义窗口和活跃交易品种面板中看到我们的文本框。

摘要

如果您想向用户显示自定义元素而不必担心代码中的冗余，设置控件样式是必不可少的。

使用样式

创建示例 cBot

使用 Style 类

在自定义窗口和插件中使用样式

摘要

使用 `Style` 类