Sign in
Home Dashboard Docs Samples Downloads Support Community
Dev Center - Windows Store apps > Docs > API reference > Windows APIs > WinJS.UI > SemanticZoom object

WinJS.UI.SemanticZoom object

7 out of 10 rated this helpful - Rate this topic

Enables the user to zoom between two different views supplied by two child controls. One child control supplies the zoomed-out view and the other provides the zoomed-in view.

The SemanticZoom control. This example uses two ListView controls to provide the zoomed-in and zoomed-out views.

Syntax

HTML
Copy 

<div data-win-control="WinJS.UI.SemanticZoom">
     <!-- The control that provides the zoomed-in view goes here. -->
     <!-- The control that provides the zoomed-out view goes here. -->
</div>
JavaScript
Copy 

var object = new WinJS.UI.SemanticZoom(element, options);

Members

The SemanticZoom object has these types of members:

Events

The SemanticZoom object has these events.

EventDescription
onzoomchanged

Occurs when the control zooms in or out.

 

Methods

The SemanticZoom object has these methods.

MethodDescription
addEventListener Method

Registers an event handler for the specified event.

forceLayout

Forces the SemanticZoom to update its layout. Use this function when making the SemanticZoom visible again after its style.display property had been set to "none".

removeEventListener Method

Unregisters an event handler for the specified event.

SemanticZoom

Creates a new SemanticZoom.

 

Properties

The SemanticZoom object has these properties.

PropertyDescription

element

Gets the DOM element that hosts the SemanticZoom control.

enableButton

Gets or a sets a value that specifies whether to display the SemanticZoom zoom out button.

isDeclarativeControlContainer

Determines whether any controls contained in a SemanticZoom should be processed separately. This property is always true, meaning that the SemanticZoom takes care of processing its own controls.

locked Property

Gets or sets a value that indicates whether SemanticZoom is locked and zooming between views is disabled.

zoomedOut Property

Gets or sets a value that indicates whether the control is zoomed out.

zoomFactor

Gets or sets a value that specifies how much the scaling the cross-fade animation performs when the SemanticZoom transitions between views.

 

Remarks

SemanticZoom is used to present two levels of detail for the data or content based on a zoom factor: a zoomed in (detailed) view typically used for presenting individual items and a zoomed out (structured) view for presenting item groups based on metadata. You use two other controls to provide these zoomed-in and zoomed-out views. One control provides the zoomed-in view and the other control provides the zoomed-out view. To use a control with SemanticZoom, it must implement the IZoomableView interface.

The Windows Library for JavaScript provides one control that implements IZoomableView: the WinJS.UI.ListView control. You can also create your own custom controls that implement IZoomableView or augment an existing controls to support IZoomableView and use the with the SemanticZoom.

Styling the SemanticZoom

CSS classes

To customize the SemanticZoom, you can define your own styles for these Cascading Style Sheets (CSS) classes (defined by the Windows Library for JavaScript style sheets):

CSS classDescription

win-semanticzoom

Styles the entire SemanticZoom.

win-semanticzoom-button

Styles the SemanticZoom zoom-out button. The default style positions the button 4px from the right edge and 21px from the lower edge of the SemanticZoom div.

win-semanticzoomactive

Styles the active view.

 

Setting the height of the SemanticZoom

The SemanticZoom does not dynamically adjust its height to fit your content. For a SemanticZoom to render, you must specify an absolute value for its height. The Windows Library for JavaScript style sheets set the SemanticZoom control's height to 400 pixels.

Using placeholders

It's important for the user to be able to quickly and smoothly switch between the zoomed-in and zoomed-out views of a SemanticZoom. That means that the SemanticZoom control's child controls shouldn't make the app wait while they load their data. When using the ListView (or a version of the FlipView that you've customized to implement IZoomableView) with the SemanticZoom, use a templating function that creates placeholders when there's a chance that the items might not be available by the time the control comes into view. For more info about using placeholders in item templates, see How to create a templating function for a ListView. If you're using a custom control with the SemanticZoom, implement a progress circle and use placeholders if items might not be available.

Using the SemanticZoom with a vertical list

When you use a ListView that has its layout set to ListLayout as the zoomed-in view of a SemanticZoom, override the win-semanticzoom-button class to reposition the zoom-out button.

Using the SemanticZoom with custom control

You can also create your own custom controls that implement IZoomableView or augment an existing controls to support IZoomableView and use the with the SemanticZoom.

To use the SemanticZoom with a custom control that has custom touch interactions, add the ms-touch-action class to the control's top level container. This enables it to work properly with touch interactions.

Examples

This example creates a SemanticZoom control that uses two ListView controls to provide its zoomed-in and zoomed-out views.

HTML
Copy 

<div id="semanticZoomDiv" data-win-control="WinJS.UI.SemanticZoom">   
            
    <!-- The zoomed-in view. -->    
    <div id="zoomedInListView"
        data-win-control="WinJS.UI.ListView" 
        data-win-options="{ itemDataSource: myData.groupedItemsList.dataSource, itemTemplate: mediumListIconTextTemplate, groupHeaderTemplate: headerTemplate, groupDataSource: myData.groupedItemsList.groups.dataSource, selectionMode: 'none', tapBehavior: 'none', swipeBehavior: 'none' }"
    ></div>

    <!--- The zoomed-out view. -->
    <div id="zoomedOutListView"
        data-win-control="WinJS.UI.ListView"
        data-win-options="{ itemDataSource: myData.groupedItemsList.groups.dataSource, itemTemplate: semanticZoomTemplate, selectionMode: 'none', tapBehavior: 'invoke', swipeBehavior: 'none' }"
    ></div>

</div>

The next example creates the data used by the ListView objects in a separate file named data.js. Add a reference to this file in to your HTML page that creates the ListView.

JavaScript
Copy 


// data.js
(function () {
    "use strict";


    
    var myData = [
    { title: "Banana Blast", text: "Low-fat frozen yogurt", picture: "images/60Banana.png" },
    { title: "Banana Blast", text: "Low-fat frozen yogurt", picture: "images/60Banana.png" },
    { title: "Banana Blast", text: "Low-fat frozen yogurt", picture: "images/60Banana.png" },
    { title: "Banana Blast", text: "Low-fat frozen yogurt", picture: "images/60Banana.png" },
    { title: "Lavish Lemon Ice", text: "Sorbet", picture: "images/60Lemon.png" },
    { title: "Lavish Lemon Ice", text: "Sorbet", picture: "images/60Lemon.png" },
    { title: "Lavish Lemon Ice", text: "Sorbet", picture: "images/60Lemon.png" },
    { title: "Lavish Lemon Ice", text: "Sorbet", picture: "images/60Lemon.png" },
    { title: "Marvelous Mint", text: "Gelato", picture: "images/60Mint.png" },
    { title: "Marvelous Mint", text: "Gelato", picture: "images/60Mint.png" },
    { title: "Marvelous Mint", text: "Gelato", picture: "images/60Mint.png" },
    { title: "Marvelous Mint", text: "Gelato", picture: "images/60Mint.png" },
    { title: "Creamy Orange", text: "Sorbet", picture: "images/60Orange.png" },
    { title: "Creamy Orange", text: "Sorbet", picture: "images/60Orange.png" },
    { title: "Creamy Orange", text: "Sorbet", picture: "images/60Orange.png" },
    { title: "Creamy Orange", text: "Sorbet", picture: "images/60Orange.png" },
    { title: "Succulent Strawberry", text: "Sorbet", picture: "images/60Strawberry.png" },
    { title: "Succulent Strawberry", text: "Sorbet", picture: "images/60Strawberry.png" },
    { title: "Succulent Strawberry", text: "Sorbet", picture: "images/60Strawberry.png" },
    { title: "Succulent Strawberry", text: "Sorbet", picture: "images/60Strawberry.png" },
    { title: "Very Vanilla", text: "Ice Cream", picture: "images/60Vanilla.png" },
    { title: "Very Vanilla", text: "Ice Cream", picture: "images/60Vanilla.png" },
    { title: "Very Vanilla", text: "Ice Cream", picture: "images/60Vanilla.png" },
    { title: "Very Vanilla", text: "Ice Cream", picture: "images/60Vanilla.png" },
    { title: "Orangy Orange", text: "Sorbet", picture: "images/60Orange.png" },
    { title: "Orangy Orange", text: "Sorbet", picture: "images/60Orange.png" },
    { title: "Absolutely Orange", text: "Sorbet", picture: "images/60Orange.png" },
    { title: "Absolutely Orange", text: "Sorbet", picture: "images/60Orange.png" },
    { title: "Triple Strawberry", text: "Sorbet", picture: "images/60Strawberry.png" },
    { title: "Triple Strawberry", text: "Sorbet", picture: "images/60Strawberry.png" },
    { title: "Double Banana Blast", text: "Low-fat frozen yogurt", picture: "images/60Banana.png" },
    { title: "Double Banana Blast", text: "Low-fat frozen yogurt", picture: "images/60Banana.png" },
    { title: "Double Banana Blast", text: "Low-fat frozen yogurt", picture: "images/60Banana.png" },
    { title: "Green Mint", text: "Gelato", picture: "images/60Mint.png" }
    ];

    // Create a WinJS.Binding.List from the array. 
    var itemsList = new WinJS.Binding.List(myData);

    // Sorts the groups.
    function compareGroups(left, right) {
        return left.charCodeAt(0) - right.charCodeAt(0);
    }

    // Returns the group key that an item belongs to.
    function getGroupKey(dataItem) {
        return dataItem.title.toUpperCase().charAt(0);
    }

    // Returns the title for a group.
    function getGroupData(dataItem) {
        return {
            title: dataItem.title.toUpperCase().charAt(0)
        };
    }

    // Create the groups for the ListView from the item data and the grouping functions
    var groupedItemsList = itemsList.createGrouped(getGroupKey, getGroupData, compareGroups);



    WinJS.Namespace.define("myData",
        {
            groupedItemsList: groupedItemsList
        }); 


})();

The last example defines CSS styles for the SemanticZoom and ListView controls.

CSS
Copy 

/* Template for headers in the zoomed-in ListView */
.simpleHeaderItem
{
    width: 50px;
    height: 50px;
    padding: 8px;
}   

/* Template for items in the zoomed-in ListView */  
.mediumListIconTextItem
{
    width: 282px;
    height: 70px;
    padding: 5px;
    overflow: hidden;
    display: -ms-box;
}

    .mediumListIconTextItem img.mediumListIconTextItem-Image 
    {
        width: 60px;
        height: 60px;
        margin: 5px;
        -ms-grid-column: 1;
    }

    .mediumListIconTextItem .mediumListIconTextItem-Detail
    {
        margin: 5px;
        -ms-grid-column: 2;
    }

/* Template for items in the zoomed-out ListView */
.semanticZoomItem
{
    width: 130px;
    height: 130px;
    background-color: rgba(38, 160, 218, 1.0);
}   

    .semanticZoomItem .semanticZoomItem-Text
    {
        padding: 10px;
        line-height: 150px;
        white-space: nowrap;
        color: white;
    }

/* CSS for the zoomed-in ListView */
#zoomedInListView
{
    width: 600px;
    height: 300px;
    border: solid 2px rgba(0, 0, 0, 0.13);
}

#semanticZoomDiv 
{
    width: 600px;
    height: 300px;
    border: solid 2px rgba(0, 0, 0, 0.13);
}

For a walkthrough of this code, see Quickstart: Adding SemanticZoom controls.

Requirements

Minimum supported client

Windows 8 [Windows Store apps only]

Minimum supported server

Windows Server 2012 [Windows Store apps only]

Namespace

WinJS.UI

Library
Ui.js

See also

Quickstart: Adding SemanticZoom controls
CSS classes
HTML ListView grouping and SemanticZoom sample
HTML SemanticZoom for custom controls sample

 

 

Build date: 12/5/2012

Did you find this helpful?
(1500 characters remaining)
© 2013 Microsoft. All rights reserved.