Agregar controles de zoom semántico (HTML)

[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows Runtime. Si estás desarrollando para Windows 10, consulta la documentación más reciente ]

El control SemanticZoom permite que el usuario haga zoom entre dos vistas distintas del mismo contenido. Te vamos a enseñar a usar el control SemanticZoom.

Un control SemanticZoom con vistas reducidas y ampliadas

Mira este breve vídeo para ver una descripción general del zoom semántico y cómo implementarlo con JavaScript y HTML.

Para hacer un zoom semántico, el usuario debe hacer el gesto de reducir (acercar los dedos aleja el zoom y alejar los dedos lo acerca), mantener presionada la tecla CTRL mientras desplaza la rueda del mouse o mantener presionadas la tecla CTRL y la tecla + o - al mismo tiempo. El SemanticZoom también proporciona un botón para alejar cuando se muestra la vista de cerca.

Zoom sobre el contenido

El zoom semántico es muy útil para desplazarse rápidamente en un movimiento panorámico por el contenido. Pulsar el contenido en una vista alejada aplica zoom en la vista y la mueve panorámicamente hasta el punto pulsado, como se muestra aquí.

Reducida, todo el contenido puede ser un objetivo táctil:

Reducida, todo el contenido puede ser un objetivo táctil.

Una pulsación en una sección del contenido:

 Una pulsación en una sección del contenido.

Ampliada y desplazada a la zona donde se pulsó:

Ampliada y desplazada a la zona donde se pulsó.

Se usa una animación encadenada suave para hacer la transición de un zoom semántico a otro. Este es el comportamiento táctil predeterminado y no se puede personalizar.

En esta sección

Tema Descripción

Inicio rápido: agregar SemanticZoom

Aprende a usar el control SemanticZoom para usar el zoom entre dos vistas del mismo contenido.

Plantillas de SemanticZoom

Plantillas de elemento que puedes usar con un ListView que proporciona la vista alejada para un control SemanticZoom.