Trabalhando com Temas

Olá a todos, recentemente em meu trabalho tive que desenvolver um Mini Tutorial de como trabalhar com temas, então vou aproveitar e postá-lo aqui, pode ser útil para alguem que ainda não trabalha com temas...

No ASP.NET 2.0 temos uma nova funcionalidade que são os Temas.
Tema é uma coleção de propriedades que define a aparência das páginas e dos controles de sua aplicação.

Um Tema pode conter arquivos do tipo .skin(1 por tema), arquivos css e Imagens.

Skins --> Arquivos do tipo .skin possuem as propriedades de configuração de aparência de seus controles(Button, Label, TextBox...), ou seja, é lá que definimos cor de fundo, bordas, cor de borda e etc..., dos controles.

Cascading Style Sheet(CSS) --> Nos arquivos .css aplicamos estilos em todas as páginas.

Imagens --> Nessa pasta, definimos apenas as imagens que aparecerão no tema em questão.

Criando os Temas da aplicação
Para criar um tema, devemos adicionar a pasta “App_Themes” (figura1.0) na solution, e na pasta criada automaticamente dentro dela, definimos um nome para o tema.

(Figura 1.0)


Definido o nome do tema, inserimos na pasta um arquivo .skin, um arquivo .css e uma nova pasta chamada “images”.

No arquivo .skin devemos configurar a aparência dos controles da aplicação(TextBox, Label, GridView e etc...) .
Essa configuração é feita colocando o controle a ser configurado e apenas as configurações de aparência dele como no exemplo abaixo:

< a s p: Label runat="server" SkinID="lbl" ForeColor="White" BackColor="Black" >

Repare que existem uma propriedade chamada SkinID, essa propriedade indica que essa configuração de aparência irá apenas ser aplicada aos controle que possuirem esse mesmo SkinID, ou seja, se em sua página aspx existir um controle Label e o mesmo deve ter a aparência padrão definida no tema, esse Label deverá conter a propriedade SkinID=”lbl” por exemplo.

Caso desejar aplicar a aparência do controle definido no .skin para todos os controles daquele tipo, basta não inserir a propriedade SkinID.

< a s p:Label runat="server" ForeColor="White" BackColor="Black" >
(no exemplo acima, todos os Labels da aplicação utilizarão cor de fundo preto e cor de texto branca)

No arquivo Css, inserimos as classes nas quais terão a necessidade de serem alteradas de acordo com o tema, e as que não terão mudanças e serão fixas independentemente do tema criamos em um arquivo .css separado que deve ser salvo fora da página App_themes.

A pasta “images” deverá ter apenas as imagens específicas daquele tema, como no caso do arquivo.css, as imagens que aparecerão independentemente do tema devem ser salvas fora da pasta App_Themes.


Definindo o Tema na Página
Com o tema criado, agora precisamos indicar que a página irá utilizar determinado tema.
Para fazer isso de maneira estática, basta inserir a propriedade Theme="Default" na Tag Page de cada página aspx, ficando assim:

"< % @ Page Language="C#" MasterPageFile="~/Inc/MasterPage.master" AutoEventWireup="true" CodeFile="RelatorioTarefas.aspx.cs" Inherits="Relatorios_RelatorioTarefas" Theme="Default % >"

Podemos também definir o tema através do Code Behind, para isso devemos inserir a seguinte linha de código no PreInit da página:

protected void Page_PreInit(object sender, EventArgs e)
{
switch (Request.QueryString["theme"])
{
case "Blue":
Page.Theme = "BlueTheme";
break;
case "Pink":
Page.Theme = "PinkTheme";
break;
}
}

No exemplo acima colocamos a situação em que pegamos via QueryString o nome do Tema e de acordo com o nome aplicamos um tema específico.