Conceitos e Exemplos: Themes e Skins

Olá pessoal, neste artigo veremos os conceitos e exemplos com os Themes e Skins do ASP.NET. Acompanhem:

Themes – Os Themes do ASP.NET são uma forma de aplicar estilos comuns aos elementos de cada página que compõe um site. Eles têm a função parecida com a das CSS (CascadingStyleSheets– Folhas de Estilo em Cascata), porém oferecem um pouco mais, relacionados à definição de estilos visuais de páginas da web.

 Os temas são colocados dentro de uma pasta especial do ASP.NET chamada App_Themes. Dentro desta pasta existem subpastas com o nome definido pelo usuário e, dentro destas pastas, as folhas de estilo, imagens e o que for necessário para definir a aparência do site.

 Para definir um tema devemos fazer a seguinte ordem:

1.    Abrir a Solution Explorer;

2.    Clicar com o botão direito no título do WebSite ou Web Application;

3.    Se for WebSite é só clicar na opção Add ASP.NET Folder e escolher a opção Theme; Se for Web Application é só clicar em Add>Add ASP.NET Folder >Theme;

4.    Definir um nome para o tema, por exemplo, Azul.

 Devem-se repetir esses passos a cada vez que for incluir um tema na aplicação. Para adicionar um CSS ao tema, é só clicar com o botão direito em cima do tema criado, clicar em Add> New Item e escolher o template StyleSheet. Veja na imagem abaixo que temos outros templates que podemos adicionar aos temas:

 Agora podemos inserir estilos personalizados em nossa página, com o arquivo que criamos. Caso desejemos definir um tema para uma página devemos defini-lo na propriedade Theme, como a imagem abaixo mostra:

 Para definir um tema para todas as páginas, devemos inseri-lo no arquivo de configuração do site, que é o Web.Config. Para isso, devemos fazer o seguinte:

<pagestheme="Azul">

 Lembre-se de usar o nome exato, para que o Web.Config reconheça corretamente o tema.

 Obs: se não houver um arquivo de configuração no site, só adiciona-lo clicando em Add> New Item, escolhendo a categoria Web e o templateWeb Configuration File.

Skins –Outro recurso disponível para gerenciar o estilo de um site diz respeito às Skins, com as quais podemos obter diversas opções de aparência aplicáveis a muitos controles, sem precisarmos nos ater a certos detalhes e gerenciar as propriedades de controle individualmente.

 As Skins são representadas por arquivos de extensão .skin. Um arquivo Skin tem como tarefa predefinir as propriedades de estilo de um determinado controle.

 Junto aos Themes e às Master Pages, as Skins proporcionam o gerenciamento do estilo dos sites.

 Para adicionar um Skin devemos seguir as instruções abaixo:

1.    Clicar com o botão direito em um Tema no Solution Explorer

2.    Clicar em Add> New Item, escolher Skin File e dar um nome a ele

3.    No arquivo de skin, configurar o código HTML de um WebControl para ter a aparência desejada. Não incluir o atributo ID, e sim o SkinID. Veja um exemplo:

<asp:Labelrunat="server"SkinID="Skin"Text="Texto"/>

Para que uma Skin seja aplicada em um controle, devemos definir a propriedade SkinId do controle para o nome do SkinID definido no arquivo de Skin.

 Um exemplo de algo parecido com skin é quando alteramos a propriedade AutoFormat de um GridView, por exemplo. O conjunto de itens definido no AutoFormat é uma espécie de skin definida dentro do ambiente do Visual Studio, veja as comparações:

GridView sem formatação:

GridViewcom formatação:

Assim finalizo o artigo. Muito obrigado a todos!

Um abraço, e até o próximo artigo

Wellington Balbo de Camargo

wellingtonbalbo@gmail.com