Cómo: Personalizar la apariencia de los controles SiteMapPath de servidor Web

Actualización: noviembre 2007

El aspecto visual de los controles de exploración del sitio puede personalizarse configurando los atributos del control o las plantillas que están disponibles para el control. Las plantillas y los estilos se aplican a los vínculos en función de dos reglas de prioridad que se describen en la sección Comentarios de SiteMapPath.

Si lo desea, puede aplicar también un tema o una máscara a un control, o puede desarrollar controles de exploración del sitio personalizados que satisfagan sus necesidades de representación. Para obtener más información sobre cómo aplicar los temas a controles Web, vea Cómo: Personalizar el control CreateUserWizard de ASP.NET.

El control SiteMapPath muestra una ruta de desplazamiento que, a su vez, muestra los vínculos como una ruta de acceso de la página actual a la página principal del sitio Web. En una página ASP.NET, el control SiteMapPath muestra algo parecido a:

Home > Services > Training

Los controles TreeView y Menu también representan los datos del mapa del sitio, que, al igual que el control SiteMapPath, se pueden personalizar como la mayoría de los controles Web. En este tema se describe cómo se utilizan las siguientes características de personalización del control SiteMapPath de servidor Web:

• Especificar caracteres o imágenes que aparezcan entre los vínculos.

• Invertir la dirección de la ruta de desplazamiento.

• Especificar el número de vínculos primarios que se van a mostrar.

En los procedimientos incluidos en este tema, se presupone que ya ha creado un mapa del sitio y una página que contiene un control SiteMapPath. Puede utilizar el archivo Web.sitemap de ejemplo de Mapas de sitio de ASP.NET.

Para personalizar las propiedades de estilo de un vínculo

1. En una página Web ASP.NET que contenga un control SiteMapPath, agregue las siguiente propiedades al control:

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

   Por ejemplo, el código del control SiteMapPath podría ser similar al siguiente:

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

   La mayoría de las propiedades descritas en las clases Style y FontInfo están disponibles, incluida la propiedad CssClass.

2. Si desea que el estilo de cada vínculo sea diferente, repita el paso anterior con las propiedades ParentNodeStyle, CurrentNodeStyle y PathSeperatorStyle del control SiteMapPath.

   Nota:
   Con el fin de mejorar el rendimiento, puede utilizar NodeTemplate para personalizar el estilo de todos los vínculos al mismo tiempo. Para obtener más información, vea Cómo: Crear plantillas de controles de servidor Web ASP.NET.

Para personalizar un carácter que aparece entre los vínculos

• En una página Web ASP.NET que contenga un control SiteMapPath, agregue la propiedad PathSeparator al control.

  Por ejemplo, el código del control SiteMapPath podría ser similar al siguiente:

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

  El control SiteMapPath mostrará algo parecido a lo siguiente:

  Home :: Services :: Training

  Puede utilizar cualquier cadena para separar los vínculos; sin embargo, para utilizar una imagen, siga el procedimiento siguiente.

Para especificar una imagen que aparece entre los vínculos

• En una página Web ASP.NET que contenga un control SiteMapPath, agregue las siguiente líneas de código al control:

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

  Por ejemplo, el código del control SiteMapPath podría ser similar al siguiente:

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

Para invertir la dirección de la ruta de acceso mostrada por el control SiteMapPath

• En una página Web ASP.NET que contenga un control SiteMapPath, agregue las propiedades PathDirection y PathSeparator al control.

  Por ejemplo, el código del control SiteMapPath podría ser similar al siguiente:

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

Para limitar el número de vínculos primarios que se van a mostrar

• En una página Web ASP.NET que contenga un control SiteMapPath, agregue la propiedad ParentLevelsDisplayed al control.

  Por ejemplo, el código de un control SiteMapPath que mostrará un máximo de dos vínculos primarios podría parecerse a:

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

Accesibilidad

Los controles de exploración del sitio normalmente se utilizan en cada página de un sitio Web. Los lectores de pantalla y otros dispositivos de ayuda leen el texto de un control de exploración durante cada visita a una página y en cada devolución de datos.

Los controles de exploración del sitio SiteMapPath, TreeView y Menu incluyen una propiedad denominada SkipLinkText que permite omitir la información repetida en páginas posteriores o en vistas de la misma página.

Para utilizar la característica de omisión de accesibilidad

• En una página Web ASP.NET que contenga un control de desplazamiento, agregue las siguientes propiedades al control:

  SkipLinkText="Skipped Menu"
  

  Por ejemplo, el código de un control SiteMapPath podría ser similar al siguiente:

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

Vea también

Tareas

Cómo: Personalizar el control CreateUserWizard de ASP.NET

Conceptos

Información general sobre la exploración del sitio de ASP.NET

Información general sobre SiteMapPath (Control de servidor Web)

Personalizar el aspecto y el estilo del control TreeView de servidor Web

Proteger la exploración del sitio de ASP.NET

Proteger el acceso a datos

Otros recursos

Cómo: Crear plantillas de controles de servidor Web ASP.NET

Seguridad de aplicaciones ASP.NET en entornos alojados en host