Etiquetas De Formato De HTML con C#

Hola chavos! Bueno pues en esta ocasión trabajaremos con algo un poco diferente a lo que habitualmente veníamos haciendo. Por esta vez no utilizaremos el lenguaje de programación C++ sino que utilizaremos el ya conocido C#. Supongo que ya todos deberían haber trabajado alguna vez con C# (casi siempre utilizado con la interfaz Microsoft Visual Studio),  es relativamente un lenguaje más sencillo que C++ ya que la interfaz de usuario proporciona muchísima ayuda y es muy amigable con el usuario al momento de compilar y corregir errores ya que siempre muestra en donde se encuentran éstos. Ambos lenguajes son muy parecidos el uno al otro así que no nos será muy difícil poder trabajar en ambos.

Nuestra aplicación lo que hará será probar como se vería el cuerpo de una página HTML con diferentes combinaciones de colores de fondo, color de texto, color de los links dentro de la página, color de los links activos y color de los links ya visitados. Los colores los definiremos con el famoso RGB que ya tantas veces hemos utilizado antes en C++. Una vez que hayamos encontrado la combinación de colores que más nos agrade podremos copiar el código de etiquetas para poder copiarlo dentro de un documento HTML para crear nuestra propia página.

La aplicación contendrá muchos componentes en la Forma, enseguida los enlistamos:

-2 GroupBox
-5 RadioButton
-6 Labels o etiquetas
-3 ScrollBar (TrackBar en C++ Builder)
-2 Panel
-13 TextBox (Edit en C++ Builder)
-2 botones

Al igual que siempre pueden crear el diseño como deseen, en mi caso lo realice de la siguiente manera:

Ahora comenzamos con la codificación de los componentes,para ir al código presionamos F7. Ya estando ahí lo primero que haremos será definir algunas variables y métodos que necesitaremos, comenzamos por declarar las siguiente variables globales en el Form1.cs:

private string HexBG, HexText, HexLink, HexALink, HexVLink;

Enseguida definiremos 2 métodos que utilizaremos para los colores, primero para aplicar los colores:

internal void ApplyColor()
{
            HexBG = txtBackground.Text;
            HexText = txtText.Text;
            HexLink = txtLink.Text;
            HexALink = txtActiveLink.Text;
            HexVLink = txtVisitedLink.Text;
            string strRed = Convert.ToString(255 - scrRed.Value);
            string strGreen = Convert.ToString(255 - scrGreen.Value);
            string strBlue = Convert.ToString(255 - scrBlue.Value);
            txtRed.Text = strRed;
            txtGreen.Text = strGreen;
            txtBlue.Text = strBlue;
            pnlPreview.BackColor=Color.FromArgb(255-scrRed.Value,255-scrGreen.Value,255-scrBlue.Value);
            string FmtRed = (255 - scrRed.Value).ToString("X");
            if (FmtRed.Length == 1)
                FmtRed = String.Concat("0", FmtRed);
            string FmtGreen = (255 - scrGreen.Value).ToString("X");
            if (FmtGreen.Length == 1)
                FmtGreen = String.Concat("0", FmtGreen);
            string FmtBlue = (255 - scrBlue.Value).ToString("X");
            if (FmtBlue.Length == 1)
                FmtBlue = String.Concat("0", FmtBlue);
            if (rdoBackground.Checked == true)
            {
                string BG = "#";
                BG = String.Concat(BG, FmtRed);
                BG = String.Concat(BG, FmtGreen);
                BG = String.Concat(BG, FmtBlue);
                txtBackground.Text = BG;
                pnlBody.BackColor = pnlPreview.BackColor;
                txtTextPreview.BackColor = pnlPreview.BackColor;
                txtLinkPreview.BackColor = pnlPreview.BackColor;
                txtALinkPreview.BackColor = pnlPreview.BackColor;
                txtVLinkPreview.BackColor = pnlPreview.BackColor;
                HexBG = txtBackground.Text;
            }
            else if (rdoText.Checked == true)
            {
                string Txt = "#";
                Txt = String.Concat(Txt, FmtRed);
                Txt = String.Concat(Txt, FmtGreen);
                Txt = String.Concat(Txt, FmtBlue);
                txtText.Text = Txt;
                txtTextPreview.ForeColor=Color.FromArgb(255-scrRed.Value,255-scrGreen.Value,255-scrBlue.Value);
                HexText = txtText.Text;
            }
            else if (rdoLink.Checked == true)
            {
                string TL = "#";
                TL = String.Concat(TL, FmtRed);
                TL = String.Concat(TL, FmtGreen);
                TL = String.Concat(TL, FmtBlue);
                txtLink.Text = TL;
                txtLinkPreview.ForeColor=Color.FromArgb(255-scrRed.Value,255-scrGreen.Value,255-scrBlue.Value);
                HexLink = txtLink.Text;
            }
            else if (rdoActiveLink.Checked == true)
            {
                string AL = "#";
                AL = String.Concat(AL, FmtRed);
                AL = String.Concat(AL, FmtGreen);
                AL = String.Concat(AL, FmtBlue);
                txtActiveLink.Text = AL;
                txtALinkPreview.ForeColor=Color.FromArgb(255-scrRed.Value,255-scrGreen.Value,255-scrBlue.Value);
                HexALink = txtActiveLink.Text;
            }
            else if (rdoVisitedLink.Checked == true)
            {
                string VL = "#";
                VL = String.Concat(VL, FmtRed);
                VL = String.Concat(VL, FmtGreen);
                VL = String.Concat(VL, FmtBlue);
                txtVisitedLink.Text = VL;
                txtVLinkPreview.ForeColor=Color.FromArgb(255-scrRed.Value,255-scrGreen.Value,255-scrBlue.Value);
                HexVLink = txtVisitedLink.Text;
            }
            string BD = "<body bgcolor=\"";
            BD = String.Concat(BD, HexBG);
            BD = String.Concat(BD, "\" text=\"");
            BD = String.Concat(BD, HexText);
            BD = String.Concat(BD, "\" link=\"");
            BD = String.Concat(BD, HexLink);
            BD = String.Concat(BD, "\" alink=\"");
            BD = String.Concat(BD, HexALink);
            BD = String.Concat(BD, "\" vlink=\"");
            BD = String.Concat(BD, HexVLink);
            BD = String.Concat(BD, "\">");
            txtResult.Text = BD;
}

Ahora para saber que opción tenemos seleccionada actualmente, si el fondo, texto, links, etc.:

internal void ClickOption(System.Drawing.Color Clr, String Result)
{
            int red, green, blue;
            pnlPreview.BackColor = Clr;
            red = 255 - pnlPreview.BackColor.R;
            green = 255 - pnlPreview.BackColor.G;
            blue = 255 - pnlPreview.BackColor.B;
            scrRed.Value = red;
            scrGreen.Value = green;
            scrBlue.Value = blue;
            txtRed.Text = red.ToString();
            txtGreen.Text = green.ToString();
            txtBlue.Text = blue.ToString();
            Result = String.Concat(Result, "#");
            Result = String.Concat(Result, red.ToString("X"));
            Result = String.Concat(Result, green.ToString("X"));
            Result = String.Concat(Result, blue.ToString("X"));
}

Ahora sí empezamos con los componentes los primeros serán los ScrollBar, he aquí el primero:

private void scrRed_Scroll(object sender, ScrollEventArgs e)
{
            ApplyColor();
}

Como el código de las 3 ScrollBar es el mismo utilizaremos el mismo evento para todos. Para hacer esto seleccionamos el segundo ScrollBar y en la ventana de Propiedades nos vamos a la pestaña Eventos (es donde está la imágen del relámpago) y en el evento Scroll seleccionamos la opción scrRed_Scroll. Realizamos lo mismo con el ScrollBar restante. Luego sigue la codificación de los RadioButton, damos doble clic en el que dice Background y escribimos el siguiente código en el evento:

private void rdoBackground_CheckedChanged(object sender, EventArgs e)
{
            Color BGColor = pnlBody.BackColor;
            pnlBody.BackColor = BGColor;
            ClickOption(pnlBody.BackColor, txtBackground.Text);
            HexBG = txtBackground.Text;
}

Ahora seleccionamos el RadioButton con la etiqueta Text:

private void rdoText_CheckedChanged(object sender, EventArgs e)
{
            Color BGColor = pnlBody.BackColor;
            txtTextPreview.BackColor = BGColor;
            ClickOption(txtTextPreview.ForeColor, txtText.Text);
            HexText = txtText.Text;
}

El que sigue es el RadioButton que tiene la etiqueta Link:

private void rdoActiveLink_CheckedChanged(object sender, EventArgs e)
{
            Color BGColor = pnlBody.BackColor;
            txtALinkPreview.BackColor = BGColor;
            ClickOption(txtALinkPreview.ForeColor, txtActiveLink.Text);
            HexALink = txtActiveLink.Text;
}

Enseguida damos doble clic en el que está etiquetado como ActiveLink:

private void rdoActiveLink_CheckedChanged(object sender, EventArgs e)
{
            Color BGColor = pnlBody.BackColor;
            txtALinkPreview.BackColor = BGColor;
            ClickOption(txtALinkPreview.ForeColor, txtActiveLink.Text);
            HexALink = txtActiveLink.Text;
}

Finalmente para terminar con los RadioButton damos doble clic en el que está etiquetado como VisitedLink:

private void rdoVisitedLink_CheckedChanged(object sender, EventArgs e)
{
            Color BGColor = pnlBody.BackColor;
            txtVLinkPreview.BackColor = BGColor;
            ClickOption(txtVLinkPreview.ForeColor, txtVisitedLink.Text);
            HexVLink = txtVisitedLink.Text;
}

Para terminar codificaremos los botones, primero escribimos el siguiente código en el botón con el texto Copy:

private void btnCopy_Click(object sender, EventArgs e)
{
            txtResult.SelectAll();
            txtResult.Copy();
}

Y por último escribimos en el botón Close el código que tenemos a continuación:

private void btnClose_Click(object sender, EventArgs e)
{
            Close();
}

Y ahora guardan su aplicación y la corren presionando ctrl+F5 o simplemente F5, el resultado será algo como lo siguiente:

Bueno amigos pues eso fue todo, espero que todo haya salido bien y que la aplicación les sirva para poder utilizarla más adelante en el diseño de alguna página web en HTML que quieran realizar. Por hoy me despido y espero que sigamos en contacto para seguir con más aplicaciones gráficas, la mayoría en C++ pero también algunas más en C#. Nos vemos chavos!.