Hi pual,
Thanks for posting!
I think you need to achive one picture zoom,then to achive the list view effect.
Blew is my test code,you can refer it.
Default html code:
<head>
<meta charset="utf-8" />
<title>TestZoonInJS</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<script src="/js/matrix-helpers.js"></script>
<script src="/js/mouseAndKeyboard.js"></script>
<!-- TestZoonInJS references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
</head>
<body>
<div id="zoomElement" class="ManipulationContainer zoomElement">
<img alt="Cliff" src="/images/Cliff.jpg" />
</div>
</body>
</html>
<script src="/js/matrix-helpers.js"></script>
<script src="/js/mouseAndKeyboard.js"></script>
Those two file is must use,Please rember it.
Default css:
.zoomElement {
overflow: auto;
-ms-content-zooming: zoom;
-ms-scroll-rails: none;
-ms-content-zoom-limit-min: 100%;
-ms-content-zoom-limit-max: 500%;
}
JS code:
var page = WinJS.UI.Pages.define("default.html", {
processed: function (element, options) {
// WinJS.UI.processAll() is automatically called by the Pages infrastructure by the time this
// function gets called, and it has processed the div with data-win-control="WinJS.UI.FlipView"
// Attach Necessary Event Handlers to control changing the snap point type
attachMouseKeyboard("zoomElement");
}
});
Add this code in default.js
Then you run this project,you can achive the single picture zoom.
After this,you can achive listview.
Hope this helps!
