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

  • Artigo

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