costom control

Question

if I want to learn costom control ,where can I find more information?

at present , my demo is as follows:

In HTMl:

   <div class="HomePage_Div_BookShelfContent">
                <header role="banner">
                    <h2 class="Common_GroupTitle HomePage_Div_BookShelfTitle"><span>书架</span>
                    </h2>
                </header>
                <section role="main">
                    <div class="HomePage_Div_BookShelfBodyLeft">
                        <div class="HomePage_Div_BookShelf"></div>
                        <div class="HomePage_Div_BookShelfBook1"></div>
                        <div class="HomePage_Div_BookShelfMore"></div>
                    </div>
                    <div class="HomePage_Div_BookShelfBodyRight">
                        <div class="HomePage_Div_BookShelfBook2"></div>
                        <div class="HomePage_Div_BookShelfBook3"></div>
                    </div>
                </section>
            </div>

How can I convert the demo into costom control?

Is the idea feasible?

My ultimate goal is that   incorporate "custom controls" that implement theIZoomableViewso they can be used with the SemanticZoom control.

Answer 1

Hi Kevin,

There is a sample that will show you how to use the IZoomableView interface:

HTML SemanticZoom for custom controls sample

In particular the control is defined on this line in MyControl.js:

var ZoomableView = WinJS.Class.define(function (timeline) {

-Jeff

---

Jeff Sanders (MSFT)

Answer 2

Hi Kevin,

There is a sample that will show you how to use the IZoomableView interface:

HTML SemanticZoom for custom controls sample

In particular the control is defined on this line in MyControl.js:

var ZoomableView = WinJS.Class.define(function (timeline) {

-Jeff

---

Jeff Sanders (MSFT)

yes,I've seen the sample. But  I  get into trouble for these ways of how to use the methods, such as ,

beginZoom	Initiates semantic zoom on the custom control.
configureForZoom Method	Initializes the semantic zoom state for the custom control.
endZoom Method	Terminates semantic zoom on the zoomed in or zoomed out child of the custom control.
getCurrentItem Method	Retrieves the current item of the zoomed in or zoomed out child of the custom control.
getPanAxis Method	Retrieves the panning axis of the zoomed-in or zoomed-out child of the custom control.
handlePointer Method	Manages pointer input for the custom control.
positionItem Method	Positions the specified item within the viewport of the child control when panning or zooming begins.
setCurrentItem Method	Selects the item closest to the specified screen coordinates.

Is there a detailed explanation   or  a piece of code .

if  I  want to realize the following functions,  can I  provide me a simlpe demo  about  the following functions  :

In JavaScrpt:

ZoomedIn:

winJS.Namespace.define("CustomControls", {
    Timeline: WinJS.Class.define(function (element, options) {
        this._element = element;

        this._element.className = "timeline";

        this._viewport = document.createElement("div");
        this._element.appendChild(this._viewport);
        this._viewport.className = "color";      

        var that = this;

        this._element.winControl = this;
    }, {

zoomout:

inJS.Namespace.define("CustomControls1", {
    Timeline: WinJS.Class.define(function (element, options) {
        this._element = element;

        this._element.className = "timeline";

        this._viewport = document.createElement("div");
        this._element.appendChild(this._viewport);
        this._viewport.className = "color1";

        var that = this;
        this._element.winControl = this;
    }

The above code can be how to perfect, in order to realize the function of the below   thanks!

Answer 3

The IZoomableView interface has these  methods , as  follows:
beginZoomcon ,    figureForZoom  Method   , endZoom  Method ,  getCurrentItem Method，getPanAxis Method, handlePointer Method   , positionItem Method ,  setCurrentItem Method Who can help me introduce these methods,  and had better have some simple demo  , in particular   “getCurrentItem Method” “positionItem Method ”，“setCurrentItem Method”
I have seen the example  SemanticZoom for custom controls sample.  But I don't quite understand  with no explain.

Answer 4

Hi Kevin,

You can override each of these if you wish to change the behavior of the control is when used in as a semantic zoom control.  To see what the behavior is for listview or the sample, you can trace into both of these cases to see what this is (ListView is in ui.js and MyControl.JS has the sample code).

I looked at these properites and they seem well documented, do you have a specific question?

I am not sure where to start for you.  There is no tutorial or walkthrough other than the sample available.  Can you let us know what your specific problem is with each of these methods?  Did you walk through each of these yet in the debugger to see what they each do?

-Jeff

---

Jeff Sanders (MSFT)