Partilhar via


Como: Personalizar a aparência de controles de servidor Web SiteMapPath

A aparência visual dos controles de navegação de sites pode ser personalizada definindo os atributos do controle, ou configurando os modelos que estão disponíveis para o controle.Modelos e os estilos são aplicados a links de acordo com a duas regras de precedência descritas na seção Comentários de SiteMapPath.

Como alternativa, você pode aplicar uma capa de controle ou tema a um controle, ou você pode desenvolver controles de navegação de sites personalizados, que atendam suas necessidades de processamento.Para obter mais informações sobre como aplicar temas aos controles da Web, consulte Como: Personalizar o controle CreateUserWizard ASP.NET.

O controle SiteMapPath exibe um caminho de navegação, que é também conhecido como um breadcrumb ou eyebrow, que mostra links como um caminho para voltar à página inicial do site da Web.Em um página ASP.NET, o controle SiteMapPath exibe algo parecido com o seguinte:

Página Inicial > Serviços > Treinamento

Os controles TreeView e Menu também processam dados de mapa de sites, e eles, semelhantemente ao controle SiteMapPath, podem ser personalizados, como a maioria dos outros controles da Web.Este tópico descreve como usar os seguintes recursos de personalização do controle de servidor Web SiteMapPath:

  • Especificar caracteres ou imagens exibidas entre os links.

  • Reverter a direção do caminho de navegação.

  • Especificar o número de links pai que são exibidos.

Os procedimentos neste tópico pressupõem que você já tiver criado um mapa de site e uma página que contém um controle SiteMapPath.Você pode usar o arquivo Web.sitemap exemplo no Mapas do Site do ASP.NET.

  1. Em um página Web do ASP.NET que contém um controle SiteMapPath, adicione a propriedade a seguir para o controle:

    RootNodeStyle-Font-Names="Verdana"
    RootNodeStyle-ForeColor="Orange"
    RootNodeStyle-BorderWidth=2
    

    Por exemplo, o código do seu controle SiteMapPath pode parecer com o código a seguir:

    <asp:SiteMapPath ID="SiteMapPath1" Runat="server" 
      SkipLinkText="Skip Menu"
      RootNodeStyle-Font-Names="Verdana"
      RootNodeStyle-ForeColor="Orange"
      RootNodeStyle-BorderWidth=2 >
    </asp:SiteMapPath>
    

    A maioria das propriedades descritas nas classes Style e FontInfo estão disponíveis, incluindo a propriedade CssClass.

  2. Se você desejar que o estilo de cada link seja diferente, repita a etapa anterior com as propriedades ParentNodeStyle,CurrentNodeStyle e PathSeperatorStyle do controle SiteMapPath.

    Observação:

    Para melhorar o desempenho, você pode usar o NodeTemplate para personalizar o estilo de todos os links de uma vez.Para obter mais informações, consulte Modelos de controles servidores web ASP.NET.

  • Em um página Web do ASP.NET que contém um controle SiteMapPath, adicione a propriedade PathSeparator no controle:

    Por exemplo, o código do seu controle SiteMapPath pode parecer com o código a seguir:

    <asp:SiteMapPath ID="SiteMapPath1" Runat="server" 
      PathSeparator=" :: ">
    </asp:SiteMapPath>
    

    O controle SiteMapPath exibirá algo parecido com o seguinte:

    residência :: Serviços :: Treinamento

    Você pode usar qualquer sequência para separar os links, entretanto, para usar uma imagem siga o procedimento seguinte.

  • Em um página Web do ASP.NET que contém um controle SiteMapPath, adicione as seguintes linhas de código no controle:

    <PathSeparatorTemplate>
      <asp:Image ID="Image1" Runat="Server" 
        Width="20" 
        ImageUrl="Images/PathSeparatorImage.jpg" />
      </PathSeparatorTemplate>
    </PathSeparatorTemplate>
    

    Por exemplo, o código do seu controle SiteMapPath pode parecer com o código a seguir:

    <asp:SiteMapPath ID="SiteMapPath1" Runat="server" >
      <PathSeparatorTemplate>
        <asp:Image ID="Image1" Runat="Server" 
          Width="20" 
          ImageUrl="Images/PathSeparatorImage.jpg" />
        </PathSeparatorTemplate>
      </PathSeparatorTemplate>
    </asp:SiteMapPath>
    

Para reverter a direção do caminho exibido pelo controle SiteMapPath

  • Em um página Web do ASP.NET que contém um controle SiteMapPath, adicione o PathDirection e o PathSeparator no controle:

    Por exemplo, o código do seu controle SiteMapPath pode parecer com o código a seguir:

    <asp:SiteMapPath ID="SiteMapPath1" Runat="server"
      PathDirection="CurrentToRoot"
      PathSeparator=" <-- " >
    </asp:SiteMapPath>
    
  • Em um página Web do ASP.NET que contém um controle SiteMapPath, adicione a propriedade ParentLevelsDisplayed no controle:

    Por exemplo, o código para um controle SiteMapPath que exibirá um máximo de dois links pai pode parecer com o seguinte:

    <asp:SiteMapPath ID="SiteMapPath1" Runat="server"
      ParentLevelsDisplayed="2" >
    </asp:SiteMapPath>
    

Acessibilidade

Controles de navegação de sites são usados em cada página de um site da Web.Leitores de tela e outros dispositivos assistenciais leem em voz alta o texto em um controle de navegação durante cada visita a uma página e em cada nova postagem.

Os controles de navegação por sites SiteMapPath, TreeView e Menu incluem, cada um, uma propriedade chamada SkipLinkText que permite informações repetidas serem ignorado em páginas subsequentes ou em modos de exibição da mesma página.

Para usar o recurso de ignorar a acessibilidade

  • Em um página Web do ASP.NET que contém um controle de navegação, adicione a propriedade a seguir para o controle:

    SkipLinkText="Skipped Menu"
    

    Por exemplo, o código para um controle SiteMapPath pode parecer com o código a seguir:

    <asp:SiteMapPath ID="SiteMapPath1" 
      Runat="server" 
      SkipLinkText="Skip Breadcrumb">
    </asp:SiteMapPath>
    

Consulte também

Tarefas

Como: Personalizar o controle CreateUserWizard ASP.NET

Conceitos

Visão geral sobre navegação em sites do ASP.NET

Modelos de controles servidores web ASP.NET

Visão Geral sobre o Controle SiteMapPath do Servidor Web

Personalizando a Aparência (Look and Feel) do Controle do Servidor Web TreeView

Tornando navegação em sites do ASP.NET seguro

Proteção de acesso a dados

Outros recursos

Segurança de aplicativos ASP.NET em ambientes hospedados