Usando Themes ASP.NET 2.0 (Parte 2)

Anteriormente falei e mostrei o conceito, problema e solução usando o "themes" do Visual Studio.NET 2005. Para quem quiser verificar sobre a "Parte 1", favor acessa o link abaixo:

Uma nova característica e do ASP.NET 2.0 é deixar os usuários terem mais controle no visual onde possa sentir e ver uma página web. Um tema pode ser definido cores, nome de fontes, tamanho e estilo de cada controle. O novo "skin" suportado no ASP.NET 2.0 é uma extensão da mesma idéia do CSS.

Usuários individuais podem selecionar um tema para várias opções avaliadas para o mesmo, e especificar o tema deles escolhendo determinado "skin". O "skin" é um cliente servidor relativo como se fosse um CSS stylesheet, ou seja, é similar a um arquivo CSS mas diferente, um "skin" pode sobrescrever várias propriedades visuais daquele específico controle de um página ou de várias páginas.

Você pode armazenar várias versões de imagens para o tema, cada tema uma imagem diferente ou atribuir várias imagens para todos os temas baseado no corrente "skin" usado.

Os temas ficam dentro da pasta /App_Themes, e contém os seguintes itens:

- Stylesheet.css (arquivo que define a aparência dos objetos HTMLs);

- Skin File – (Eles são arquivos que definem a aparência de controles clientes servidores ASP.NET. Você pode pensar deles como se fossem arquivos stylesheet clientes servidores;

- Outros recursos como imagens.

Preciso diferenciar os meus componentes de tela usando "stylesheet", ou seja, um TextBox quero que tenha a letra em azul e outro tracejado. Preciso adicionar vários componentes diferentes na tela usando ou não estilo "stylesheet.css". Além de mudar os estilos, preciso adicionar os "themes" para todas as páginas dentro do meu projeto.

O primeiro de tudo é criar um "Estilo.css", o passo seguinte é colocar dentro do "skin" a "CssClass" para atribuir os estilos de cores e fontes. Cliquei com o botão direito do mouse em cima da pasta "Themes" e escolhi a opção "Add New Item...". (Referência Theme2.1.1)

Referência: Theme2.1.1

A tela seguinte escolhi o tipo de arquivo na tela de  "templates". O tipo escolhido foi "Style Sheet". (Referência Theme2.1.2).

Referência: Theme2.1.2

Coloquei o nome do arquivo de "Estilo.css". Em seguida cliquei no botão ADD, o mesmo foi adicionado dentro da tela de Solution Explorer e dentro da página Theme. Dentro do arquivo "css" adicionei uma classe para configurar um label. (Referência Theme2.1.3).

Referência: Theme2.1.3

O "background-color: Blue" coloca o fundo da cor azul, o "font-size:20px" define o tamanho da fonte mostrada em tela.

Na "Parte 1" mostrei como criar o "skin" do projeto, o passo seguinte é adicionar um "label" dentro do arquivo criado anteriormente chamado "SkinFile.skin". (Referência Theme2.1.4)

Referência: Theme2.1.4

Adicionei o código da referência (Theme2.1.4) dentro do skin e agora adicionarei  uma tag dentro do arquivo de configuração chamado web.config. Neste arquivo de configuração e dentro da tag <system.web>, adicionei uma tag para utilizar em todas as páginas automaticamente os estilos adicionados no skin do projeto. (Referência Theme2.1.5).