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:
|
|
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:
|
|
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:
