Usando Skin em ASP.NET

Um dos recursos que particularmente acho importante no Framework.NET e a possibilidade de criar skins para aplicações WebForm.

O skin no ASP.NET nada mais e que um conjunto de configurações visuais pré definidas composta de tags dos server controls, imagens e CSS.

O trabalho de desenvolvimento envolve vários conhecimento, dentre eles css, conhecimento prévio do próprio asp.net e muita paciência.

O que e mais interessante e que podemos utilizar esse nosso skin em outros projetos ou ate mesmo disponibilizar esse skin para outras pessoas utilizarem.

Irei explicar então como criar um skin básico para nossa aplicação.

Primeiro inicie um novo projeto ASP.NET e no WebForm Default.aspx criado por padrao.


imagem001

Adicionaremos alguns controles.

  • 1 Panel
  • 2 Label
  • 2 TextBox
  • 1 Button

imagem005

Assim criaremos como exemplo um formulário de contato.

Agora adicionaremos o diretório App_Themes e nele nosso diretorio do tema com o nome de “Default” e nesse um arquivo chamado Default.Skin.


imagem002

O diretório criado e onde iremos armazenar o nosso CSS (Cascade Style Sheet ou Folha de Estilo) e o arquivo .Skin que conterá as referencias aos Server Controls do ASP.NET utilizados no nosso projeto.

Agora abra o arquivo Default.Skin e coloque referência aos Server Controls listados anteriormente.


<asp:Panel runat="server" CssClass="formulario" />
<asp:Label runat="server" CssClass="label" />
<asp:TextBox runat="server" CssClass="textbox" />
<asp:Button runat="server" CssClass="button" />

Repare que defini o CssClass em nossos Server Controls. Esse será os estilo deles, ou seja, dentro do nosso arquivo estilo.css adicionarei classe com esses nomes contendo as configurações. Assim, se eu definir que a nossa classe textbox deverá ter bordas vermelhas de 2px (Pixels), todos os Server Controls do tipo TextBox no nosso projeto assumirá essa configuração.

Agora vamos abrir o nosso arquivo estilo.css e adicionar as configurações abaixo. Não irei abordar cada uma das configurações pois não é o objetivo inicial do artigo, mais serei mais legal e deixarei cada bloco comentado para que você possa entender e modificar como quiser.


body
{
/* Formatação da fonte do site*/
font-family: Verdana, Arial, Trebuchet MS, Sans-Serif;
}
.formulario
{
/* borda do formulario */
border: 1px solid #4B7A1C;
/* espaçamento interno do formulario (Panel) */
padding: 20px;
/* largura do formulario (Panel) */
width: 300px;
/* sem margin superior e inferior. */
/* margin esquerda e direita automatica para centralizar o formulario (Panel) */
margin: 0 auto;
}
.label
{
/* Tamanho da fonte da Label */
font-size: 12px;
/* Fonte da Label em negrito */
font-weight: bold;
/* Exibir a Label em Bloco */
display: block;
/* Espaçamento interno da Label */
padding: 10px 0 5px 5px;
}
.textbox
{
/* Tamanho do TextBox */
width: 100%;
/* Borda do TextBox */
border: 1px solid #4B7A1C;
/* Background do TextBox */
background-color: #cccccc;
}
.button
{
/* Espaçamento interno do Button */
padding: 2px 10px;
/* Borda do Button */
border: 1px solid #4B7A1C;
/* Background do Button */
background-color: #A9C016;
}

Basicamente é isso, definimos quais são os Server Controls em nosso arquivo Default.skin, a Folha de Estilo no nosso arquivo estilo.css agora é só definir em nosso arquivo Default.aspx qual o nome do tema conforme abaixo.


<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" Theme="Default" StylesheetTheme="Default" %>

Feito isso teremos o seguinte resultado.

Tema Padrão

Tema Padrão

Veja que com facilidade criei um novo tema derivado do Default e mudei as configuração de cores e obtive os resultados abaixo.

Tema Aqua

Tema Aqua

Tema Red

Tema Red

Espero que com mais esse artigo você possa criar um projeto de qualidade.
Abraço e até a próxima.

Fonte: Download