Answered by:
SemanticZoom with custom controls

Question
-
Hi, is there a simple way to use Semantic View on a custom control.
Here is my HTML :
<div id="semanticZoom" data-win-control="WinJS.UI.SemanticZoom"> <div id="zoomedIn"> <!-- All my zoomedIn stuff --> </div> <div id="zoomedOut"> <!-- All my zoomedOut stuff --> </div> </div>
I looked at this sample but I find it too complicated for the simple thing I want to do (I hope there is an easier way =) ) and the IZoomable reference is really unclear...
Thanks,
Halfman.
- Edited by MrHalfman Thursday, September 19, 2013 7:57 AM
Thursday, September 19, 2013 7:56 AM
Answers
-
From ui.js:
var ZoomableView = WinJS.Class.define(function ZoomableView_ctor(listView) { // Constructor this._listView = listView; }, { // Public methods getPanAxis: function () { return this._listView._getPanAxis(); }, configureForZoom: function (isZoomedOut, isCurrentView, triggerZoom, prefetchedPages) { this._listView._configureForZoom(isZoomedOut, isCurrentView, triggerZoom, prefetchedPages); }, setCurrentItem: function (x, y) { this._listView._setCurrentItem(x, y); }, getCurrentItem: function () { return this._listView._getCurrentItem(); }, beginZoom: function () { this._listView._beginZoom(); }, positionItem: function (item, position) { return this._listView._positionItem(item, position); }, endZoom: function (isCurrentView) { this._listView._endZoom(isCurrentView); } });
and your control must implement this class and make public using zoomableView property.
- Marked as answer by MrHalfman Tuesday, September 24, 2013 7:24 AM
Sunday, September 22, 2013 8:01 AM
All replies
-
You just need to define few functions for zoomableView.Thursday, September 19, 2013 8:54 AM
-
Thanks but can you be more precise ? What functions ? Where do I have to define them ?
Sorry but I'm a little bit lost with this control. (In addition I'm French and I've got a bad english :( )
Thursday, September 19, 2013 9:08 AM -
From ui.js:
var ZoomableView = WinJS.Class.define(function ZoomableView_ctor(listView) { // Constructor this._listView = listView; }, { // Public methods getPanAxis: function () { return this._listView._getPanAxis(); }, configureForZoom: function (isZoomedOut, isCurrentView, triggerZoom, prefetchedPages) { this._listView._configureForZoom(isZoomedOut, isCurrentView, triggerZoom, prefetchedPages); }, setCurrentItem: function (x, y) { this._listView._setCurrentItem(x, y); }, getCurrentItem: function () { return this._listView._getCurrentItem(); }, beginZoom: function () { this._listView._beginZoom(); }, positionItem: function (item, position) { return this._listView._positionItem(item, position); }, endZoom: function (isCurrentView) { this._listView._endZoom(isCurrentView); } });
and your control must implement this class and make public using zoomableView property.
- Marked as answer by MrHalfman Tuesday, September 24, 2013 7:24 AM
Sunday, September 22, 2013 8:01 AM -
Thanks for the answer :). I'll try it!
Monday, September 23, 2013 6:49 AM