Saltar a contenido

Trabajar con estilos

En este artículo y su video correspondiente, explicaremos cómo puede utilizar estilos para cambiar la apariencia de elementos de interfaz de usuario personalizados creados a través de cBots, indicadores y plugins.

Crear un cBot de ejemplo

Navegue a cTader Algo y cree un nuevo cBot. Lo llamaremos "Styles Example". En este ejemplo, crearemos tres cuadros de texto y los mostraremos en el gráfico utilizando un panel de pila.

Primero, inicializaremos los tres cuadros de texto. Configuraremos la apariencia de cada cuadro de texto simplemente estableciendo sus propiedades una por una.

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

También inicializaremos un panel de pila.

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

Luego, añadiremos estos cuadros de texto al panel.

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

Finalmente, añadiremos el panel al gráfico.

1
Chart.AddControl(panel);

Después de construir nuestro cBot, deberíamos ver tres cuadros de texto dibujados directamente en el gráfico.

Usar la clase Style

El código de nuestro cBot es repetitivo ya que configuramos cada cuadro de texto individualmente y repetimos la inicialización de propiedades para cada elemento. La repetición de código puede hacer que los proyectos grandes sean difíciles de mantener y optimizar. Podemos hacer que nuestro código sea más conciso y mantenible utilizando estilos para configurar la apariencia de nuestros controles.

Primero, inicializaremos un nuevo objeto de la clase Styles.

1
var textBoxStyle = new Style();

Luego configuraremos la apariencia de los controles asociados con este estilo.

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

Asignaremos este estilo a cada uno de nuestros cuadros de texto y eliminaremos la inicialización de parámetros.

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

Si construimos nuestro cBot y lo añadimos a un gráfico, veremos que todos nuestros cuadros de texto se muestran normalmente. Podemos volver al código y cambiar una de las propiedades de nuestro objeto textBoxStyle, en cuyo caso todos nuestros cuadros de texto tendrán un estilo diferente.

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

Usar estilos en ventanas personalizadas y plugins

Los estilos de control también funcionan cuando los controles se muestran en lugares distintos al gráfico, como las ventanas personalizadas. Crearemos un plugin de ejemplo que mostrará cuadros de texto en una ventana personalizada y les dará estilo en consecuencia.

Empezaremos mostrando nuestros controles en una ventana personalizada.

El siguiente es el código de nuestro plugin:

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

    }        
}

Después de construir nuestro plugin, deberíamos ver nuestros cuadros de texto en una ventana personalizada y en el Panel de símbolo activo.

Resumen

Dar estilo a los controles es esencial si quiere mostrar elementos personalizados a los usuarios sin preocuparse por redundancias en su código.