Curso ASP.NET 3.5 em VB.NET e C# - Themes e Skins

Utilizando o novo recurso de temas, é possível definir um padrão para toda a aplicação sem necessidade de altera qualquer página.

por Fernando Amaral

6. Themes e Skins

A formatação de suas páginas ASP.NET poderão ser feitas de diversas maneiras, entre elas:

· Uso de arquivos CSS;

· Formatação diretamente nas pagina.

Utilizando o novo recurso de temas, é possível definir um padrão para toda a aplicação sem necessidade de altera qualquer página. As possibilidades são muitas, vamos ver um exemplo prático.

Crie uma nova aplicação ASP.NET;

Crie um WebForm com os seguintes controles:

Crie a pasta App_themes. Esta é uma pasta de sistema do ASP.NET. Para criá-la acesse o menu WebSite, ASP.NET Folder, Themes.

Na caixa de dialogo Add New Item exibida em seguida, selecione Skin File, de o nome de Red.

Clique sobre o botão direito sobre a pasta Themes e crie um novo Skin, desta vez com o nome Gray.

A formatação de controles num Skin é definida usando a própria tag de definição do controle, obviamente que alguns atributos não deverão ser utilizados, como ID ou text.

No exemplo abaixo o definição para o Skin Red:

<asp:Label runat="server" Font-Names="Arial" ForeColor="Maroon" /> <asp:Button  runat="server" Font-Bold="True" ForeColor="Maroon" /> <asp:RadioButton runat="server" Font-Names="Arial" ForeColor="Maroon" /> <asp:CheckBox runat="server"  Font-Names="Arial" ForeColor="Maroon" />

Já o skin Gray fica assim:

<asp:Label runat="server" Font-Names="Verdana" ForeColor="Gray" /> <asp:Button  runat="server" Font-Bold="True" ForeColor="DimGray" /> <asp:RadioButton runat="server" Font-Names="Verdana" ForeColor="Gray" /> <asp:CheckBox runat="server"  Font-Names="Verdana" ForeColor="Gray" />

Agora vamos definir que sua página ASP.NET vai utilizar um Theme. Clique sobre o formulário e localize a propriedade Theme, note que todos os temas criados estão disponíveis:

Escolha o tema Red. Nos bastidores o tema escolhido é adicionado em uma diretiva da página:

<%@ Page Language="VB" Theme="RED" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

Rode a aplicação e observe o resultado.

Altere o tema para Gray e rode a aplicação novamente.

Definindo o tema dinamicamente

Você pode definir o tema durante a execução do programa, através de uma escolha do usuário, por exemplo. Para isto basta alterar a propriedade Theme da página:

Page.Theme = "red"

Page.Theme = "Red";

A alteração de tema dinamicamente deve ser feita no evento PreInit da página.

Definindo um tema para toda a aplicação

Você também pode definir um tema no arquivo de configuração da aplicação, no nó system.web. Esta configuração será aplicada automaticamente para todas as páginas da aplicação:

<pages theme="Red" >

O nó pages já deve existir no seu arquivo de configuração, localize-o ao invés de criar um novo nó.

Vale lembrar que uma configuração de página sobrescreve a de aplicação. Portanto se em determinada página você não quiser usar o tema padrão da aplicação, basta definir o tema desejado na página.

Apresentação diferenciada

Se você precisar dar uma apresentação diferente para um determinado controle que já esta definido no arquivo skin, você pode criar um nova definição deste controle adicionando a ele um SkinId. Para exemplificar, vamos alterar o arquivo skin Red de maneira que o titulo da página, Cadastro, seja exibido maior e de outra cor.

Primeiramente alteramos nosso arquivo Red:

<asp:Label runat="server" Font-Names="Arial" ForeColor="Maroon" /> <asp:Label SkinId="Titulo" runat="server" Font-Names="Arial" Font-Size="X-Large" ForeColor="Black" /> <asp:Button  runat="server" Font-Bold="True" ForeColor="Maroon" /> <asp:RadioButton runat="server" Font-Names="Arial" ForeColor="Maroon" /> <asp:CheckBox runat="server"  Font-Names="Arial" ForeColor="Maroon" />

Observe que foi adicionada uma nova tag asp:label, com SkinID como Titulo. Agora basta na página, alterar a propriedade SkinID do controle para Titulo:

Certifique-se que sua página esta utilizando o Skin Red. Rode a aplicação: