locked
A Bug of FilpView when change view from snap to fill view

    Question

  • Need Help.

    I have added a flipview to html and it work well in fill view.

    when i try to change the view from snap to fill,  the currentPage will change to 0 or the index lower automaticly . 

    Here is the code;

    default.html:

       <div id="ItemTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
                        <div class="overlaidItemTemplate">
                            <img class="image" data-win-bind="src: picture" />
                        </div>
                </div>
                <div id="-SlideShow-Container">
                    <div id="-SlideShow-View" class="flipView"
                            data-win-control="WinJS.UI.FlipView"
                            data-win-options="{ itemDataSource: dataList.dataSource,  itemTemplate: ItemTemplate }">
                    </div>
                </div>

    default.js:

    var myData = [
            { type: "item", title: "Sunset1", picture: "http://www.jiujiuba.com/xxpict2/picnews/5232128245.jpg", presrc: "/images/blank.gif" },
            { type: "item", title: "Sunset2", picture: "http://teacher.whsh.tc.edu.tw/huanyin/f2blog/attachments/200707/0023261173.jpg", presrc: "/images/blank.gif" },
            { type: "item", title: "Sunset3", picture: "http://www.xd.gov.cn/edit/uploadfile/2007228102028965.JPG" },
            { type: "item", title: "Sunset4", picture: "http://kepi-isigaki20050421.up.seesaa.net/image/B2E8C1FC20010.jpg" },
            { type: "item", title: "Sunset5", picture: "http://blogcache.artron.net/201111/18/534972_132159487187iU.jpg" },
                { type: "item", title: "Cliff6", picture: "http://slidesjs.com/img/slide-1.jpg" },
                { type: "item", title: "Grapes7", picture: "http://slidesjs.com/img/slide-2.jpg" },
                { type: "item", title: "Rainier8", picture: "http://slidesjs.com/img/slide-3.jpg" },
                { type: "item", title: "Sunset9", picture: "http://slidesjs.com/img/slide-4.jpg" },
                { type: "item", title: "Valley0", picture: "http://slidesjs.com/img/slide-5.jpg" }
    ];

    var dataList = new WinJS.Binding.List(myData);
    (function () {
        "use strict";
        function ready(element, options) {
            WinJS.UI.processAll();
        }
        WinJS.UI.Pages.define("/html/default.html", {
            ready: ready
        });
    })();

    default.css:

    #-SlideShow-Container {

        -ms-grid-columns: 2fr 8fr 2fr;
        -ms-grid-rows: 3fr 25fr 3fr;
        display: -ms-grid;
        width: 100%;
        height: 100%;
        
    }
    #-SlideShow-View
    {
        -ms-grid-column: 2;
        -ms-grid-row: 2;
        -ms-grid-column-span: 1;
        -ms-grid-row-span: 1;
        width: 100%;
        height: 100%;
    }

    For example :

    If i use mouse to crawl the page to left, the page will change to snapview. Then i click the right Arrow to select the picture "Sunset3".

    It's ok now.

    Then I try to slide the edge of app to right , and the app will change to fill view.

    Then the flipview will show picture "Sunset1" , not expected "Sunset3".

    Friday, May 11, 2012 8:50 AM

All replies

  • After I fix the CSS  like below , it works well.

        

    #-SlideShow-Container {
        -ms-grid-columns: 2fr 8fr 2fr;
        -ms-grid-rows: 2fr 25fr 2fr;
        display: -ms-grid;
        width: 100%;
        height: 100%;

    }

    I think it's a bug on filpview.  

    Do anyone else have the same trouble and how to do with it?

    Thanks!

    Friday, May 11, 2012 8:53 AM
  • I am glad you were able to work around the problem.

    Can you share or send me a project that reproduces the problem with all the resources?

    Contact info: http://blogs.msdn.com/jpsanders/contact.aspx


    Jeff Sanders (MSFT)

    Monday, May 14, 2012 5:59 PM
    Moderator