Adicionando controles SemanticZoom (HTML)

[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente ]

O controle SemanticZoom permite que o usuário aplique zoom entre dois diferentes modos de exibição do mesmo conteúdo. Aqui mostramos como usar o controle SemanticZoom.

Exibições ampliada e reduzida de um controle SemanticZoom

Assista a este vídeo curto para ter uma visão geral do Zoom Semântico e de como implementá-lo em JavaScript e HTML.

Um usuário executa o zoom semântico fazendo o gesto de pinçagem (a aproximação dos dedos diminui e o afastamento dos dedos aumenta o zoom), mantendo pressionada a tecla CTRL enquanto rola a roda de rolagem do mouse ou mantendo pressionada a tecla CTRL e pressionando a tecla + ou -. O SemanticZoom também fornece um botão para diminuir o zoom durante a exibição ampliada.

Aplicando zoom pelo conteúdo

O zoom semântico é útil para aplicar movimento panorâmico rapidamente pelo conteúdo. Tocar no conteúdo em uma exibição com zoom aumentado irá aproximar a exibição e fazer o movimento panorâmico no ponto tocado, como mostrado aqui.

Menos zoom, o conteúdo todo pode ser um destino de toque:

Menos zoom, o conteúdo todo pode ser um destino de toque.

Um toque em uma seção do conteúdo:

 toque em uma seção do conteúdo.

Menos zoom e movimento panorâmico na área tocada:

Menos zoom e movimento panorâmico na área tocada.

Uma animação de fading cruzado faz a transição de um zoom semântico para outro. Este é o comportamento padrão de toque e não é possível personalizá-lo.

Nesta seção

Tópico Descrição

Guia de início rápido: adicionando um Zoom Semântico

Saiba como usar o controle SemanticZoom para aplicar zoom entre exibições do mesmo conteúdo.

Modelos de SemanticZoom

Modelos de itens que você pode usar com um ListView que oferece a visualização com menos zoom de um controle SemanticZoom.