Como: Definir temas de página ASP.NET

No Visual Web Developer você pode definir temas de página que você pode depois aplicar a uma ou mais páginas no seu aplicativo.Você também pode criar temas no nível de máquina que podem ser usados em vários aplicativos no servidor.

Temas consistem de vários arquivos de suporte, inclusive folhas de estilo para aparência de páginas, capas de controle para definir a aparência de controles de servidor, e quaisquer outros arquivos ou imagens de suporte que compõem o tema.O conteúdo de um tema é o mesmo, seja o tema definido como um tema de página ou como um tema global.

Themes can be applied by using either the Theme or StyleSheetTheme attribute of the @ Page directive, or by setting the Páginas elemento (esquema configurações ASP.NET) element in the application configuration file.O Desenvolvedor Visual Web irá representar visualmente somente temas aplicados usando o atributo StyleSheetTheme.

Para criar um tema de página

  1. No Solution Explorer, clique com o botão direito do mouse no nome do site para o qual você deseja criar um tema de página, e clique em Add ASP.NET Folder.

  2. Clique em Theme.

    Se o diretório App_Themes não existir ainda, o Desenvolvedor Visual Web o cria.Em seguida, o Desenvolvedor Visual Web cria uma nova pasta para o tema como uma pasta filho da pasta App_Themes.

  3. Digite um nome para a nova pasta.

    O nome desta pasta é também o nome do tema de página.Por exemplo, se você criar uma pasta chamada \App_Themes\FirstTheme, o nome do seu tema é FirstTheme

  4. Adicione arquivos à sua nova pasta para capas de controle, folhas de estilos, e imagens que compõem o tema.

Para adicionar um arquivo de capa e uma capa a um tema de página

  1. No gerenciador de soluções, clicar com o botão direito do mouse no nome do seu tema e, em seguida, clique em Adicionar novo item.

  2. Na caixa de diálogo Add New Item, clique em Skin File.

  3. Na caixa Name, digite um nome para o arquivo .skin, e depois clique em Add.

    A convenção comum é criar um arquivo .capa por controle, tais sistema autônomo botão.capa ou calendário.capa.No entanto, você pode criar tantos ou tão poucos arquivos .capa conforme necessário.

  4. No arquivo .skin, adicione uma definição de controle normal usando a sintaxe declarativa, mas inclua somente as propriedades que você deseja definir para o tema.A definição de controle deve incluir o atributo , e não deve incluir o atributo ID="".

    O seguinte exemplo de código mostra uma capa de controle padrão para um controle Button, definindo a cor e a fonte para todos os controles Button no tema.

    <asp:Button  
      BackColor="Red" 
      ForeColor="White" 
      Font-Name="Arial" 
      Font-Size="9px" />
    

    Esta capa de controle Button não contém um atributo skinID.Ela será aplicada a todos os controles Button no aplicativo com tema que não especifica o atributo skinID.

    Observação:

    Uma maneira fácil de se criar uma capa de controle é adicionar o controle a uma página e configurá-lo de modo que ele tenha o aspecto que você desejar.Por exemplo, você pode adicionar um controle Calendar a uma página e definir seu cabeçalho de dia, data selecionada, e outras propriedades.Em seguida, você pode copiar a definição de controle da página para um arquivo de capa, mas você deve remover o atributo ID.

  5. Repita as etapas 2 e 3 para cada arquivo de capa de controle que você deseja criar.

    Observação:

    Você pode definir apenas uma capa padrão por controle.Use o atributo SkinID na declaração da capa de controle para criar capas nomeadas para o mesmo tipo de controle.

Para adicionar um arquivo de folha de estilo em cascata ao seu tema de página

  1. No gerenciador de soluções, clicar com o botão direito do mouse no nome do seu tema e, em seguida, clique em Adicionar novo item.

  2. Na caixa de diálogo Add New Item, clique em Style Sheet.

  3. Na caixa Name, digite um nome para o arquivo.css, e depois clique em Add.

    Quando o tema é aplicado a uma página, o ASP.NET adiciona uma referência para a folha de estilos ao elemento principal da página.Para mais informações, consulte: Como: Aplicar temas ASP.NET.

Criando temas globais

Um tema global é aplicado a todos os sites da Web em um servidor.O local em que você cria uma pasta para temas globais depende de se você estiver executando seu site da Web usando o Internet Information Services (IIS) ou testando-o usando o ASP.NET Development Server.

Observação:

Se você estiver trabalhando com um site da Web de sistema de arquivos, por padrão o Visual Web Developer executa o seu site da Web para teste iniciando o ASP.NET Development Server.Para outros tipos de sites, o Visual Web Developer executa páginas no IIS para teste.

Para criar um tema global

  1. Crie uma pasta Themes usando o seguinte caminho.

    %windows%\Microsoft.NET\Framework\version\ASP.NETClientFiles\Themes
    
    Observação:

    O nome de pasta para temas globais é Themes, e não App_Themes, assim como para temas de página.

    Crie uma subpasta da pasta Themes para armazenar os seu arquivos de tema globais.

    O nome da subpasta é o nome do tema.Por exemplo, se você criar uma pasta chamada \Themes\FirstTheme, o nome do seu tema é FirstTheme

  2. Adicione arquivos à sua nova pasta para capas de controle, folhas de estilo, e imagens que compõem o tema global.

    Observação:

    Quando você define um tema global, você não pode adicionar diretamente arquivos de capa e estilo de folha a ele usando o Visual Web Developer.Você pode achar mais fácil definir e testar o tema como um tema de página e depois copiá-lo para a pasta usada para temas globais no seu servidor Web.

  3. Se o seu site da Web for um site da Web de sistema de arquivos que você está testando com o ASP.NET Development Server, o seu tema está pronto para teste.

  4. Se você estiver testando o seu site da Web usando um site da Web do IIS local, abra uma janela de comando e execute aspnet_regiis -c para instalar o tema no servidor executando o IIS.

  5. Se você estiver testando o seu tema em um site da Web remoto ou em um site da Web de FTP, você deve criar uma pasta Themes usando o seguinte caminho manualmente.

    IISRootWeb\aspnet_client\system_web\version\Themes
    

Consulte também

Conceitos

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