create a windows phone like menu, with a semantic zoom and two listview


  • Hi !

    I'm actually doing some tests with windows 8, and I would like to create a specific menu on my app: a windows phone 7 like menu !

    I mean, I would like to obtain the same result as the contact menu in windows phone 7 (the contact are organised inside groups, sort by alphabetical order, and when you press the name of one group, it displays all the groups)

    So I create a SemanticZoom, witch contains 2 ListView, one for the "zoom in" state and the other for the "zoom out". Now it looks like the menu I want to have. Inside each "zoom out" element, I create a button and the onclick event of the button is binded with a function.

    But (here's my problem), I don't know why, my function is never called.

    I think, no I'm sure that it comes from the binding I have made, but I don't know why...

    Here's an extract of my code :

    <div id="headerTemplate" data-win-control="WinJS.Binding.Template" style="display:none"> <button data-win-bind="onclick: zoomOutAction"> <img src="#" data-win-bind="src: pictureSrc"/> </button> </div>

    function HeaderData(title, pictureSrc, zoomOutFct) {
        this.title = title;
        this.pictureSrc = pictureSrc;
        this.zoomOutAction = zoomOutFct;
    function Content(headerData, txt) {
        this.headerData = headerData;
        this.txt = txt;
    function zoomOutDefault() {
        // I put a breakpoint here, the app never stops
    // the categories..
    var cat1 = new HeaderData("cat1", "/images/picture1.png", zoomOutDefault),
        cat2 = new HeaderData("cat2", "/images/picture2.png", zoomOutDefault);
    // the data..
    var data = [
    new Content(cat1, "A"),
    new Content(cat1, "B"),
    new Content(cat1, "C"),
    new Content(cat1, "D"),
    new Content(cat2, "A"),
    new Content(cat2, "B"),
    new Content(cat2, "C"),
    new Content(cat2, "D")
    // no tricks, this is the same as the semantic zoom sample
    var itemsList = new WinJS.Binding.List(data);
    var grouped = itemsList.createGrouped(function (item) {
        return item.headerData.title.toUpperCase();
    function (item) {
        return {
           title: item.headerData.title,
           pictureSrc: item.headerData.pictureSrc
    function (left, right) {
        return left.charCodeAt(0) - right.charCodeAt(0);
    WinJS.Namespace.define("myData", {
        groupedList: grouped

    I really don't know where is my error...if you have any idea...I'm here ! =)

    Friday, August 31, 2012 2:09 PM


All replies

  • Instead of using the binding syntax have you tried just setting the onclick attribute on the element to your function? e.g.

    <div id="headerTemplate" data-win-control="WinJS.Binding.Template" style="display:none">
        <button onclick="zoomOutFct">
            <img src="#" data-win-bind="src: pictureSrc"/>

    Friday, August 31, 2012 8:30 PM
  • Well, I tried and it works.

    But my binding problem is general. I tried to bind the same function with the onmouseover event, and it does not work too.

    I would like to have a very generic code, depending on the categories I have. For example if one day I would like to display or show something depending on the category when there is a onclick event, I cannot..

    Saturday, September 1, 2012 10:39 AM
  • You could discover that information by looking at the eventargs on the handler functions and getting information from the source element.

    Alternatively you could wire these events up with a custom binding action (a.k.a initializer).

    Example here: http://social.msdn.microsoft.com/Forums/en-US/winappswithhtml5/thread/4948f9be-c87a-4650-8023-c2a26a2382a2

    Tuesday, September 4, 2012 8:28 PM