Visão Geral de Temas e Aparências ASP.NET
Um tema é um conjunto de configurações de propriedade que permitem a você definir a aparência de páginas e controles, e aplicar a aparência consistentemente em páginas de um aplicativo da Web, em um aplicativo da Web inteiro, ou em todos os aplicativos da Web em um servidor.
Temas e Aparências de Controle
Temas são compostos de um conjunto de elementos: capas, folhas de estilos em cascata (CSS), imagens e outros recursos.No mínimo, um tema conterá capas.Temas são definidos em diretórios especiais no seu site ou em seu servidor Web.
Aparências
Um arquivo de aparência possui a extensão .skin no nome de arquivo e contém definições de propriedade para controles individuais como controles Button, Label, TextBox, ou Calendar.Definições de aparência de controle são como a própria marcação de controle, mas contêm somente as propriedades que você quer definir como parte do tema.Por exemplo, a seguinte é uma aparência de controle para um controle Button:
<asp:button BackColor="lightblue" ForeColor="black" />
Você cria arquivos .skin na pasta Tema.Um arquivo.skin pode conter uma ou mais aparências de controle para um ou mais tipos de controle.Você pode definir aparências em um arquivo separado para cada controle ou definir todos as aparências para um tema em um único arquivo.
Existem dois tipos de aparências de controle, aparências padrão (default skins) e aparências nomeadas (named skins):
Quando um tema é aplicado a uma página, uma aparência padrão é aplicada automaticamente a todos os controles do mesmo tipo.Uma aparência de controle é uma aparência padrão se ela não possui um atributo SkinID.Por exemplo, se você criar uma aparência padrão para um controle Calendar, a aparência de controle é aplicada para todos os controles Calendar nas páginas que usam o tema.(Aparências padrão são igualadas exatamente pelo tipo de controle, assim uma aparência de controle Button é aplicada a todos os controles Button, mas não aos controles LinkButton ou aos controles que derivam do objeto Button.)
Uma aparência nomeada é uma aparência de controle com uma definição de propriedade SkinID.Aparências nomeadas não são automaticamente aplicadas aos controles pelo tipo.Ao invés, você explicitamente aplica uma aparência nomeada a um controle definindo a propriedade SkinID do controle.Criar aparências nomeadas permite que você defina aparências diferentes para instâncias diferentes do mesmo controle em um aplicativo.
Folhas de Estilo em Cascata
Um tema também pode incluir uma folha de estilos em cascata (arquivo .css).Quando você coloca um arquivo.css na pasta do tema, a folha de estilos é aplicada automaticamente como parte do tema.Você define uma folha de estilos usando a extensão de nome de arquivo .css na pasta do tema.
Gráficos e Outros Recursos de Temas
Temas podem também incluir gráficos e outros recursos, como arquivos de script ou arquivos de som.Por exemplo, parte do seu tema de página pode incluir uma aparência para um controle TreeView.Como parte do tema, você pode incluir os gráficos utilizados para representar o botão Expandir e o botão Recolher.
Normalmente os arquivos de recursos para o tema estão na mesma pasta que os arquivos de aparências para esse tema, mas elas podem estar em outro lugar no aplicativo Web, em uma subpasta da pasta do tema, por exemplo.Para referir-se a um arquivo de recurso em uma subpasta da pasta do tema, utilize um caminho como o exibido nesta aparência de controle Image:
<asp:Image ImageUrl="ThemeSubfolder/filename.ext" />
Você também pode armazenar seus arquivos de recurso fora da pasta do tema.Se você usar a sintaxe til (~) para consultar os arquivos de recursos, o aplicativo da Web automaticamente encontrará as imagens.Por exemplo, se você colocar os recursos para um tema em uma subpasta do seu aplicativo, você pode utilizar caminhos do formulário ~/SubPasta/nomedoarquivo.ext para referir-se a arquivos de recursos, como no seguinte exemplo.
<asp:Image ImageUrl="~/AppSubfolder/filename.ext" />
Temas de Escopo
Você pode definir temas para um único aplicativo da Web, ou como temas globais que podem ser usados por todos os aplicativos em um servidor Web.Após um tema ser definido, ele pode ser colocado em páginas individuais usando o Theme ou StyleSheetTheme atributo das @ página diretiva, ou pode ser aplicado a todas as páginas em um aplicativo definindo o <pages> elemento no arquivo de configuração de aplicativo.Se o <pages> elemento é definido no arquivo computador.config, o tema será aplicado a todas as páginas em aplicativos da Web no servidor.
Temas de Página
Um tema de página é uma pasta de tema com aparências de controle, folhas de estilo, arquivos de gráficos e outros recursos criados como subpasta da pasta \App_Themes no seu Web site.Cada tema é uma subpasta diferente da pasta \App_Themes.O seguinte exemplo mostra um tema de página típico, definindo dois temas nomeados BlueTheme e PinkTheme.
MyWebSite
App_Themes
BlueTheme
Controls.skin
BlueTheme.css
PinkTheme
Controls.skin
PinkTheme.css
Temas Globais
Um tema global é um tema que você pode aplicar a todos os sites da Web em um servidor.Temas globais permitem que você defina uma aparência geral para o domínio quando você mantiver vários sites da Web no mesmo servidor.
Temas globais são como temas de página dentro dos quais eles incluem configurações de propriedade, configurações de folha de estilos, e elementos gráficos.No entanto, temas globais são armazenados em uma pasta chamada Themes que é global para o servidor Web.Qualquer site no servidor, e qualquer página em qualquer site da Web, pode referenciar um tema global.
Precedência das Configurações de Tema
Você pode especificar a prioridade que as configurações de tema têm sobre as configurações de controles locais, especificando como o tema é aplicado.
Se você define uma propriedade Theme da página, definições de controle no tema e a página são fundidos para formar as definições finais para o controle.Se uma configuração de controle for definida no controle e no tema, as configurações de controle do tema substituirão quaisquer configurações da página para o controle.Essa estratégia permite ao tema criar uma aparência consistente entre páginas, mesmo se os controles nas páginas já têm configurações de propriedade individuais.Por exemplo, ela permite a você aplicar um tema a uma página criada em uma versão anterior do ASP.NET.
Alternativamente, você pode aplicar um tema como um tema de folha de estilo, definindo a propriedade StyleSheetTheme da página.Nesse caso, as configurações de página locais têm prioridade sobre aquelas definidas no tema quando a configuração é definida nos dois lugares.Esse é o modelo usado pelas folhas de estilo em cascata.Você pode aplicar um tema como um tema de folha de estilo se você deseja ser capaz de definir as propriedades de controles individuais na página ainda enquanto aplica um tema para uma aparência geral.
Elementos de tema globais não podem ser parcialmente substituídos por elementos de temas a nível de aplicativo.Se você criar um tema a nível de aplicativo com o mesmo nome que um tema global, elementos de tema no tema a nível de aplicativo não darão override com os elementos de tema globais.
Propriedades que Você Pode Definir Usando Temas
Como regra, você pode usar temas para definir propriedades que dizem respeito à aparência ou conteúdo estático de uma página ou controle.Você pode definir apenas aquelas propriedades que possuem um atributo ThemeableAttribute definido como true na classe de controle.
Propriedades que especificam explicitamente o comportamento do controle em vez da aparência não aceitam valores de tema.Por exemplo, você não pode definir uma propriedade CommandName de controle Button utilizando um tema.Similarmente, você não pode utilizar um tema para definir uma propriedade AllowPaging de controle GridView ou propriedade DataSource.
Note que você não pode utilizar construtores de expressão, os quais geram expressões de código para designação em uma página em tempo de execução, em temas ou aparências.
Temas vs.Folhas de Estilo em Cascata
Temas são semelhantes às folhas de estilo em cascata, pois tanto os temas quanto as folhas de estilo definem um conjunto de atributos comuns que podem ser aplicados a qualquer página.Entretanto, temas diferem das folhas de estilo das seguintes maneiras:
Temas podem definir muitas propriedades de um controle ou página, não apenas propriedades de estilo.Por exemplo, utilizando temas, você pode especificar os gráficos para um controle TreeView, o layout de template de um controle GridView, e assim por diante.
Temas podem incluir elementos gráficos.
Temas não em cascata da mesma maneira folhas de estilo.Por padrão, quaisquer valores de propriedade definidas em um tema referido por Theme propriedade substituir os valores de propriedade declarativamente conjunto em um controle, a menos que explicitamente você aplicar o tema usando o StyleSheetTheme propriedade. Para mais informações, consulte a seção Precedência de Definições de Tema acima.
Somente um tema pode ser aplicado a cada página.Não é possível aplicar vários temas a uma página, diferentemente das folhas de estilo onde várias folhas de estilos podem ser aplicadas.
Considerações sobre segurança
Temas podem causar emissões de segurança quando eles são utilizados no seu Web site.Temas maliciosos podem ser utilizados para:
Altere um procedimento de controle, assim ele não procede como esperado.
Introduza script de ponto de vista de cliente, e consequentemente atribuindo um risco de scripting de site cruzado.
Altere validação.
Exponha informação sigilosa.
As mitigações para estas ameaças comuns são:
Proteja os diretórios globais e de tema de aplicativo com definições de controle de acesso próprias.Apenas usuários confiáveis devem ser permitidos a escrever arquivos aos diretórios de tema.
Não utilize temas de uma origem não confiável.Sempre examine se há código mal-intencionado em quaisquer temas de fora da sua organização antes de usá-los no seu Web site.
Não exponha o nome de tema em dados de consulta.Usuários mal-intencionados poderiam utilizar esta informação para usar temas que são desconhecidos ao desenvolvedor e, desse modo, expor informação sigilosa.