Control Manipulation: Force Layout


forceLayout() is a function that forces the control to update its layout. While not all elements have or need this method, it becomes very useful when you want “show” or “hide” certain elements on a page. While a control is hidden, it is unable to query the browser for its layout information. Even when made visible again, the control won't receive info about its current layout and will have an invalid layout. You can fix the issue by calling forceLayout() when you make the control visible again.

function updateMyLayout() {

    //switches the flipView from being hidden to being shown
    document.body.classList.add("show-flipview");
    document.body.classList.remove("hide-flipview");
    flipViewElt.winControl.forceLayout();//helps the control to update its layout

    //update the Rating control
    var ratingElt = document.body.querySelector(".rating");
    ratingElt.winControl.averageRating = trail.averageRating;
}

Try It Out

Check It Out

Here we're going to add a FlipView to our app. A FlipView lets the user click through images like a photo album, using Binding Templates to get the data. The FlipView will showcase pictures of the trail the user is currently looking at. We have already created the FlipView for you. Now, lets write a function that updates the FlipView with different pictures depending on the trail and helps the browser render the new changes by using forceLayout().

In the JS:

  1. In the updateUI() function, add in a line of code that updates the images in the FlipView. updateUI() gets passed in the trail that was just clicked (updateUI() is called in the SplitView event handler trailClicked). This trail has a member variable called pictureArray that is an array of images that the FlipView should be updated to display. Create a new Binding List out of this array and set it to be the new itemDataSource for the FlipView control.
  2. //update Flipview
    var flipViewElt =
        document.body.querySelector(".flipView");
    flipViewElt.winControl.itemDataSource = new
        WinJS.Binding.List(trail.pictureArray).dataSource;
  3. Now, add in a line of code that helps the browser render the FlipView to reflect the changes you just made.
  4. flipViewElt.winControl.forceLayout();//helps the control to update its layout

Check the output, to see if the FlipView shows on the different trail pages.

Clicking "Yes" will replace the code in the editor with the correct code.
Are you sure you want to do this?