Metro JavaScript： viewState changes

Question

hi guys~

I can use this function updates the page layout in response to viewState changes

updateLayout: function (element, viewState) {

if (viewState === appViewState.snapped || viewState === appViewState.fullScreenPortrait){

.......

}else{

.......

}
},

But as we can see from the picture blow:

first, viewState is fullScreenLandscape:

and the current "element" of ready function is

Answer 1

then I switch to fullScreenPortrait

the current "element" of updataLayout function is

the current "element" of updataLayout function is change in the state before，

How to obtain the “clientHeight” and “clientWidth” Whenever the viewState has changed ？

Answer 2

thanks~

Answer 3

Hi Sith,

Why do you want to know these dimensions?  You can use CSS and Grid to postion everything automatically.  Can you give some more details on what you are trying to accomplish?

-Jeff

---

Jeff Sanders (MSFT)

Answer 4

Hi Sith,

Why do you want to know these dimensions?  You can use CSS and Grid to postion everything automatically.  Can you give some more details on what you are trying to accomplish?

-Jeff

---

Jeff Sanders (MSFT)

There is a slider control in reading page：

I bind the scroll bar of reading page and slider control like this：

When the slider sliding the scroll bar of the page followed by the sliding~

To achieve binding, I have to get the “slider.max” of current ViewState.

How  to get the “slider.max” of current ViewState  Whenever the viewState has changed ？

or Is there other way to achieve binding between the scroll bar of the page and slider control？

I asked a similar question：

http://social.msdn.microsoft.com/Forums/en-US/winappswithhtml5/thread/d7d26a86-d4ed-47d4-9d27-81a92aa8650c

Answer 5

From the information you provided so far, I think a scroll view would fit your needs:

http://msdn.microsoft.com/en-us/library/windows/apps/hh465451.aspx

-Jeff

---

Jeff Sanders (MSFT)

Answer 6

Hi Sith,

Actually... I noticed your layout was similar to the Grid template detail.  You can use CSS media selectors to get your desired effect.  Manually trying to calculate the scroll bar is incredibly difficult and not very modern!

To see this, create an application using the Grid template.

Then modifiy the itemDetailPage.css file and replace the fullscreen portrait media query with this:

@media screen and (-ms-view-state: fullscreen-portrait) {
    .olditemdetailpage section[role=main] article {
        margin-left: 100px;
    }
    .itemdetailpage section[role=main] article {
        /* Define a single column, vertically scrolling article in snapped mode. */
        -ms-grid-columns: 1fr 20px;
        -ms-grid-row: 2;
        -ms-grid-rows: auto 60px;
        display: -ms-grid;
        height: 100%;
        margin-left: 20px;
        overflow-x: hidden;
        overflow-y: auto;
        width: auto;
    }
        .itemdetailpage section[role=main] article .item-image {
            height: 140px;
            width: 280px;
        }

        .itemdetailpage section[role=main] article .item-content {
            padding-bottom: 60px;
        }

}

Then use the simulator to see the effect.

-Jeff

---

Jeff Sanders (MSFT)

Answer 7

thanks a lot jpsanders~  It really useful~  :)