スタイルを使用する

この記事と対応するビデオでは、cBot、インジケーター、プラグインを介して作成されたカスタムUI要素の外観を変更するためにスタイルを使用する方法を説明します。

例の cBot を作成する

cTrader Algoに移動し、新しいcBotを作成します。これを「Styles Example」と名付けます。この例では、3つのテキストボックスを作成し、スタックパネルを使用してチャート上に表示します。

まず、3つのテキストボックスを初期化します。各テキストボックスの外観を設定するために、そのプロパティを1つずつ設定します。

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をビルドすると、チャート上に直接描画された3つのテキストボックスが表示されるはずです。

`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オブジェクトのプロパティの1つを変更すると、すべてのテキストボックスのスタイルが異なるように変更されます。

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`クラスを使用する