Tutorial de ASP.NET
Vista Previa de ASP.NET 2.0

Aplicando Estilos a Controles

La Web es un entorno flexible para las interfaces de usuario, con variaciones extremas en el aspecto de diferentes Web Sites. La adopción generalizada de "Cascading Style Sheets" (CSS) es la responsable de los ricos diseños que podemos encontrar en la Web. Todos los controles de servidor de ASP.NET y los controles de servidor web has sido diseñados para soportar los estilos CSS de primera clase. Esta sección discute cómo utilizar estos estilos junto con controles de servidor y nos muestra el buen control que nos proporcionan sobre la apariencia de nuestros Formularios Web.

Aplicando Estilos a Controles HTML

Las etiquetas estándar HTML soportan CSS a través del atributo "style" (estilo), que se puede fijar a una lista de parejas atributo/valor delimitada por puntos y comas. Para más información sobre los atributos CSS soportados por el navegador Internet Explorer, visitad la página Referencia de Atributos CSS del MSDN. Todos los controles HTML de servidor de ASP.NET pueden aceptar estilos de la misma forma que las etiquetas HTML estándares. El siguiente ejemplo varios estilos aplicados a diferentes controles de servidor. Si observamos el código fuente de la página devuelta al cliente, veremos que estos estilos se pasan al navegador en la representación de los controles.

C# Style1.aspx



CSS también defina un atributo de clase que puede puede fijarse a una definición de estilo CSS contenida en una sección <style>...</style> del documento. El atributo de clase hace más sencillo definir los estilos una vez y aplicarlos a diferentes etiquetas sin tener que redefinir el estilo. Los estilos en controles HTML de servidor también se pueden establecer de esta forma, tal y como muestra el siguiente ejemplo.

C# Style2.aspx


Cuando se analiza una página ASP.NET, la información de estilo se rellena dentro de una propiedad Style (del tipo CssStyleCollection) dentro de la clase System.Web.UI.HtmlControls.HtmlControl. Esta propiedad es, esencialmente, un diccionario que muestra los estilos del control como grupos de valores indexados por cadenas, para cada clave de "style-attibute". Por ejemplo, podemos usar el siguiente código para fijar y, consecuentemente, obtener el atributo de estilo "width " (ancho) de un control de servidor HtmlInputText.
<script language="C#" runat="server" >

void Page_Load(Object sender, EventArgs E) {
MyText.Style["width"] = "90px";
Response.Write(MyText.Style["width"]);
}

</script>

<input type="text" id="MyText" runat="server"/>
El siguiente ejemplo muestra cómo podemos manipular de forma programada el estilo de un control HTML de servidor mediante la propiedad de grupo de "Style" (estilos).

C# Style3.aspx


Aplicando Estilos a Controles Web de Servidor

Los controles Web de Sevidor proporcionan un nivel adicional de soporte para estilos, añadiendo varias propiedades fuertemente tipadas para los ajustes de estilos más usados, tales como color de fondo, nombre y tamaño de la fuente, etc. Estas propiedades de estilo representan un subconjunto de los comportamientos de estilo disponibles en HTML y se representan como propiedades llanas accesibles directamente a través de la clase base System.Web.UI.WebControls.WebControl. La ventaja de usar estas propiedades es que proporcionan comprovación en tiempo de compilación y finalización de declaraciones en herramientas de desarrollo como Microsoft Visual Studio .NET.

El siguiente ejemplo muesta un control WebCalendar con varios estilos aplicados a él (se incluye un calendatio sin estilos aplicados para contrastar). Observad que al fijar una propiedad que es un tipo de clase, por ejemplo Font, necesitamos usar la sintaxis de subpropiedad PropertyName-SubPropertyName.

C# Style4.aspx



El espacio de nombres System.Web.UI.WebControls incluye una clase base Style que encapsula los atributos de estilo comunes (las clases adicionales de estilo, como TableStyle y TableItemStyle heredan de esta clase base común). Varios controles Web de servidor dan acceso a ropiedades de este tipo para especificar el estilo de elementos individuales de representación del control. Por ejemplo, -- da acceso a propiedades de acceso como: DayStyle, WeekendDayStyle, TodayDayStyle, SelectedDayStyle, OtherMonthDayStyle y NextPrevStyle. Podemos fijar propiedades individuales para estos estilos mediante la sintaxis de subpropiedad PropertyName-SubPropertyName, como muestra el siguiente ejemplo.

C# Style5.aspx



Una sintaxis ligeramente diferente permite declarar cada propiedad de Style como un elemento hijo, anidado dentro de las etiquetas del control Web de servidor.
<ASP:Calendar ... runat="server">
<TitleStyle BorderColor="darkolivegreen" BorderWidth="3"
BackColor="olivedrab" Height="50px" />
</ASP:Calendar>


El siguiente ejemplo muestra una sintaxis alternativa, cuya funcionalidad es equivalente a la anterior.

C# Style6.aspx



De la misma forma que con los controles HTML de servidor, podemos aplicar estilos a controles Web de servidor mediante una definición de clase CSS. La clase base WebControl permite el acceso a una propiedad String llamada CssClass para establecer la clase estilo.

C# Style7.aspx



Si se establece un atributo en un control de servidor que no correspondo a una propiedad fuertemente tipada del control, el atributo y el valor se rellenan en el grupo Attributes del control. Por defecto, los controles de servidor representarán estos atributos sin modificarlos en el HTML devuelto al navegador cliente que los haya pedido. Ésto significa que los atributos de estilo y clase se pueden establecer directamente en controles Web de servidor, en lugar de usar las propiedades fuertemente tipadas. Mientras que ésto requiere algo de comprensión de la representación real del control, también puede ser una forma flexible de aplicar estilos. Ésto es especialmente útil para los controles de entrada de formulario estándaresm cómo veremos en el siguiente ejemplo.

C# Style8.aspx



Los estilos de los controles Web de servidor se pueden establecer mediante código utilizando el método ApplyStyle de la clase base WebControl, cómo vemos en el siguiente código.
<script language="C#" runat="server">
void Page_Load(Object Src, EventArgs E ) {
Style style = new Style();
style.BorderColor = Color.Black;
style.BorderStyle = BorderStyle.Dashed;
style.BorderWidth = 1;

MyLogin.ApplyStyle (style);
MyPassword.ApplyStyle (style);
MySubmit.ApplyStyle (style);
}
</script>

Login: <ASP:TextBox id="MyLogin" runat="server" />/<p/>
Password: <ASP:TextBox id="MyPassword" TextMode="Password" runat="server" />
View: <ASP:DropDownList id="MySelect" runat="server"> ... </ASP:DropDownList>
El siguiente ejemplo ejemplifica el código anterior.

C# Style9.aspx