Passo a passo: Personalizando um site usando temas no Visual Studio

Artigo
10/15/2014

Esta explicação passo a passo ilustra como usar temas para aplicar uma aparência consistente a páginas e controles em seu site.Um tema pode incluir arquivos de capa que definem um comum eis OK para controles individuais, um ou mais estilos folhas e elementos gráficos comuns para uso com controles, como o TreeView o controle.Esta explicação passo a passo mostra como trabalhar com temas ASP.NET em sites da Web

Tarefas ilustradas nesta explicação passo a passo incluem:

Aplicar temas predefinidos ASP.NET para páginas individuais e para o site como um todo.
Criando seu próprio tema que inclui capas, que são usadas para definir o aspecto dos controles individuais.

Pré-requisitos

A fim de concluir este explicação passo a passo, será necessário:

Visual Web Developer Microsoft (Visual Studio).
O .NET Framework.

Criando o Site Web

Se você já tiver Criado um site da Web em Visual Web Developer (por exemplo, seguindo as etapas em Demonstra Passo a passo: Criando uma página da Web básica no Visual Web Developer, você pode usar esse site e Ir para a Avançar seção.Caso contrário, crie um site e uma página novos, seguindo estas etapas.

Para criar um site do sistema de arquivos

Abra o Visual Web Developer.
Sobre o File Menu, clique em NovoSite.

O Novo Site da Web caixa de diálogo é exibida.
Em Modelos Visual Studio instaladoClique em Web Site ASP.NET.
Na Local Digite o nome da pasta onde você deseja manter as páginas do seu site da Web.

Por exemplo, digite o nome da pasta C:\WebSites.
Na Linguagem lista, clique na programação Idioma você preferir trabalhar no.
Clique em OK.

Visual Web Developer cria a pasta e uma nova página chamada Default.aspx.

Para começar a trabalhar com temas nessa explicação passo a passo, você configurará um Button o controle, um Calendar o controle e um Label controle, para que você possa ver como esses controles são afetados por temas.

Para colocar controles na página

Alternar para modo Design.
A partir de Padrão Grupo da ToolboxArraste um Calendar o controle, um Button o controle e um Rótulo controlar até a página.O layout exato da página não é importante.

Observação:

Não aplique qualquer formatação para qualquer um dos controles.Por exemplo, não use o AutoFormatação comando para definir a aparência das Calendar o controle.
Alterne para modo de origem.
Certifique-se de que o < Cabeçalho > Elemento da página tem o runat = "server" Atributo para que ele lê da seguinte maneira:
```
< Cabeçalho runat = "server" > < / Cabeçalho >
```
Salve a página.

Observação:
Não aplique qualquer formatação para qualquer um dos controles.Por exemplo, não use o AutoFormatação comando para definir a aparência das Calendar o controle.

Para testar a página, você desejará ver a página antes de um tema ser aplicado, e depois com diferentes temas.

Criando e aplicando um tema a uma página

O ASP.NET torna fácil aplicar um tema predefinido a uma página, ou criar um tema exclusivo.(Para obter detalhes, consulte HOW TO: Definir temas ASP.NET.) Nesta parte da explicação passo a passo, você irá criar um tema com algumas capas simples, que definem a aparência dos controles.

Para criar um novo tema

Na Visual Web Developer, clique com o botão direito do mouse no nome do seu site da Web, clique em Adicionar pasta ASP.NETe em seguida, clique em Tema.

A pasta chamada App_Themes e uma subpasta chamada Theme1 São criados.
Renomear o Theme1 Pasta sampleTema.

O nome desta pasta será o nome do tema que você criar (aqui, sampleTheme).O nome exato é não importante, mas você tem que se lembrar dele quando você for aplicar o tema personalizado.
Clique com o botão direito do mouse o SampleTheme Pasta, selecione Adicionar novo itemAdicionar arquivo de texto um novo e nomeie-sampleTheme.skin.

No arquivo sampleTheme.skin, adicione definições de capa conforme mostrado no exemplo de código a seguir.

< ASP:Label runat = "server" ForeCor = "vermelho" Fonte-Tamanho = "14 pt" Font-nomes = "Verdana" / &Gt; < ASP:Botão runat = "server" BorderEstilo = " Sólido " BorderLargura = "2px" BorderColor = "azul" BackColor = "amarelo" / >

Observação:
As características exatas que você definir não são importantes.Os valores da seleção anterior são sugestões que serão mais óbvias quando você testar o tema posteriormente.

As definições de capa são semelhantes à sintaxe para criação de um controle, exceto que as definições incluem apenas configurações que afetam a aparência do controle.Por exemplo, as definições de capa faça não Incluir uma configuração para o ID Propriedade.

Salve o arquivo de capa, e seguida, feche-o.

Agora você pode testar a página antes de que qualquer temas seja aplicado.

Observação:
Se você adicionar um arquivo Planilha de estilo em cascata (Planilhas de estilo em cascata) para sua SampleTheme pasta, ela será aplicada a todas as páginas que usam o tema.

Para testar temas

Pressione CTRL+F5 para executar a página.

Os controles são exibidos com sua aparência padrão.
Feche o navegador, e depois retorne ao Visual Web Developer.
Em Modo de exibição Source, adicione o seguinte atributo para o @ Page Diretiva:
```
< % @ Page Tema = "sampleTheme" ... %> 
```
Observação:

Você deve indicar o nome de um tema real no valor do atributo (neste caso, o arquivo sampleTheme.skin que você definiu anteriormente).
Pressione CTRL+F5 para executar a página novamente.

Desta vez, os controles são processados com o esquema de cores definido no seu tema.

O Rótulo e Button Controles será Aparecer com as configurações feitas no arquivo sampleTheme.skin.Porque você não fazer uma entrada no arquivo de sampleTheme.skin de Calendar o controle, ele será exibido com sua aparência padrão.
Em Visual Web Developer, defina o tema com o nome de outro tema, se disponível.
Pressione CTRL+F5 para executar a página novamente.

Os controles alterarão sua aparência novamente.

Observação:
Você deve indicar o nome de um tema real no valor do atributo (neste caso, o arquivo sampleTheme.skin que você definiu anteriormente).

Estilo planilha temas vs. Personalização temas

Após ter criado seu tema, você pode adaptar como ele é usado no seu aplicativo associando-o com a página tanto como um tema personalizado (como feito na seção anterior), ou como um tema de folhas de estilo.Um tema de folhas de estilo usa os mesmos arquivos de tema como um tema personalizado, mas sua prioridade nos controles e propriedades da página é inferior, equivalente a um arquivo CSS.No ASP.NET, a ordem de prioridade é:

Configurações de temas, incluindo temas definidos em seu arquivo Web.config.
Configurações de página local.
Configurações de Temas de Folhas de Estilo.

Quanto a isso, se você optar por usar um tema de folhas de estilo, as propriedades do seu tema serão substituídas por qualquer coisa declarada localmente na página.Da mesma forma, se você usar um tema personalizado, as propriedades do seu tema irão substituir qualquer coisa dentro a página local, e também em qualquer tema de folhas de estilo em uso.

Para usar um tema de folhas de estilo e consultar ordem de prioridade

Alterne para modo de origem.

Altere a declaração da página:

< % @ tema da página = "sampleTheme" % &Gt;

Para uma declaração de tema de folhas de estilo:

< % @ Page StyleSheetTheme = "sampleTheme" % &Gt;

Pressione CTRL+F5 para executar a página.

Observe que o Forecolor Propriedade das Label1 o controle é vermelho.
Alternar para modo Design.
Select Label1 e, em PropriedadesDefinido Forecolor para azul.
Pressione CTRL+F5 para executar a página.

O Forecolor Propriedade de Label1 é azul.
Alterne para modo de origem.
Altere a declaração da página para declarar um tema, em vez de um tema de folhas de estilo, alterando:
```
< % @ Page StyleSheetTheme = "sampleTheme" % &Gt;
```
De volta para:
```
< % @ tema da página = "sampleTheme" % &Gt;
```
Pressione CTRL+F5 para executar a página.

O Forecolor Propriedade de Label1 é novamente em vermelho.

Baseando um tema personalizado em controles existente

Uma maneira fácil para criar definições de capa é usar o designer para definir as propriedades de aparência, e então copiar a definição de controle em um arquivo de capas.

Para basear um tema personalizado em controles existentes

No modo de exibição de design, definir propriedades da Calendar Controle de forma que o controle tenha uma aparência diferente.As configurações a seguir são sugestões:

BackColorCiano
BorderColorVermelho
LarguraDaBorda 4
CellSpacing 8
Font-nome Arial
Font-tamanho Grande
SelectedDayStyle-BackColorVermelho
SelectedDayStyle-Cor do primeiro planoAmarelo
TodayDayStyle-BackColor Rosa

Observação:
As características exatas que você definir não são importantes.Os valores da lista anterior são sugestões que serão mais óbvios quando você testar o tema posteriormente.

Switch Para Modo de exibição Source e copiar o < ASP:Calendário > elemento e seus atributos.
Alterne para ou abra o arquivo sampleTheme.skin.
Colar o Calendar Controlar definição para o arquivo sampleTheme.skin.
Remover o ID Propriedade da definição no arquivo sampleTheme.skin.
Salve o arquivo sampleTheme.skin.
Alternar Para a página Padrão.aspx e arraste um segundo Calendar controlar até a página.Não defina qualquer outra de suas propriedades.
Execute a página Default.aspx.

Ambos Calendar controles serão exibido o mesmo.O primeiro Calendar Controle reflete as configurações que você fez explícita de propriedade.O segundo Calendar Controle herdadas suas propriedades Aparência da capa definição que você fez no arquivo sampleTheme.skin.

Aplicando temas a um site

Você pode aplicar um tema a um site inteiro, que significa que você não precisa reaplicar o tema a páginas individuais.(Se você desejar, você pode substituir as configurações dos temas em uma página.)

Para configurar um tema para um site

Crie um arquivo Web.config se um não foi adicionado automaticamente ao seu site, seguindo etapas seguintes:
1. Na Gerenciador de Soluções, clique com o botão direito do mouse no nome do seu site da Web e em seguida, clique em Adicionar Novo item.
2. Em ModelosSelecione Web Configuration Filee em seguida, clique em Adicionar.
  
  Observação Você não precisará Digite um nome, porque o arquivo é sempre denominado Web.config.
Adicionar a < páginas > Elemento se tiver não AL Pronto existe.O < páginas > Elemento deve aparecer dentro de < system.web > Elemento.
Adicione o seguinte atributo para o < páginas > Elemento.
```
< páginas tema = "sampleTheme" / &Gt; 
```
Observação:

Web.config diferencia maiúsculas de minúsculas e os valores estão caixa-mista (alta e baixa).(Por exemplo: tema e styleSheetTheme).
Salve e feche o arquivo Web.config.
Alterne para Default.aspx e alterne para o modo de origem.
Remover o tema = "themeName" Atributo da sua declaração de página.
Pressione CTRL+F5 para executar Default.aspx.

Agora a página é exibida com o tema que você especificou no arquivo Web.config.

Observação:
Web.config diferencia maiúsculas de minúsculas e os valores estão caixa-mista (alta e baixa).(Por exemplo: tema e styleSheetTheme).

Se você optar por especificar um nome de tema na declaração de sua página, ele substituirá qualquer tema especificado no seu arquivo Web.config.

Próximas etapas

O suporte ASP.NET para temas oferece uma variedade de opções para adaptar do aspecto e percepção de um aplicativo inteiro.Esta explicação passo a passo abordou algumas das noções básicas, mas você pode estar interessado em aprender mais.Por exemplo, pode desejar aprender mais sobre:

Uso de temas em geral.Para obter mais informações, consulte Visão Geral de Temas e Aparências ASP.NET
Criar seus próprios temas e capas.Para obter mais informações, consulte HOW TO: Definir temas ASP.NET
Usando temas com código.Para obter mais informações, consulte Como: Aplicar temas ASP.NET por programação

Consulte também

Conceitos

Visão Geral de Temas e Aparências ASP.NET

Compartilhar via