javascript - WinJs のビュー ステート変更イベントはどこにありますか?

Question

Windows 8 では、ビュー ステートがスナップからフル スクリーンに変更されたとき。

これらのイベントをキャッチして WinJs で応答するにはどうすればよいですか?

Answer 1

ビュー ステートの変更をキャッチする方法については、このブログ投稿を参照してください。基本的に、推奨事項は、サイズ変更イベントをキャッチしてから、次のようにビュー ステートをチェックすることです。

 window.addEventListener("resize", onResize);


function onResize() { 
    // Update view for the new window size 
    updateView(); 
} 

function updateView() { 
    // Query for the current view state 
    var myViewState = Windows.UI.ViewManagement.ApplicationView.value; 

    var viewStates = Windows.UI.ViewManagement.ApplicationViewState; 
    var statusText; 

    // Assign text according to view state 
    switch (myViewState) { 
        case viewStates.snapped: 
            statusText = "This app is snapped!"; 
            break; 
        case viewStates.filled: 
            statusText = "This app is in filled state!"; 
            break; 
        case viewStates.fullScreenLandscape: 
            statusText = "This app is full screen landscape!"; 
            break; 
        case viewStates.fullScreenPortrait: 
            statusText = "This app is full screen portrait!"; 
            break; 
        default: 
            statusText = "Error: Invalid view state returned."; 
            break; 
    }

Microsoft Visual Studio Express 2012 RC for Windows 8テンプレート for Javascriptを見ると、navigator.js に次のようなものが表示されます。

window.onresize = this._resized.bind(this);

_resized: function(args) {
    if (this.pageControl && this.pageControl.updateLayout) {
        this.pageControl.updateLayout.call(this.pageControl, this.pageElement, appView.value, this.lastViewstate);
    }
    this.lastViewstate = appView.value;
},

//*page*.js

updateLayout: function (element, viewState, lastViewState) {
     /// <param name="element" domElement="true" />
     var listView = element.querySelector(".itemslist").winControl;
     if (lastViewState !== viewState) {
          if (lastViewState === appViewState.snapped || viewState === appViewState.snapped) {
               var handler = function (e) {
               listView.removeEventListener("contentanimating", handler, false);
               e.preventDefault();
          }
          listView.addEventListener("contentanimating", handler, false);
          var firstVisible = listView.indexOfFirstVisible;
          this._initializeLayout(listView, viewState);
          if (firstVisible >= 0 && listView.itemDataSource.list.length > 0) {
                listView.indexOfFirstVisible = firstVisible;
           }
       }
   }
},

_initializeLayout: function (listView, viewState) {

    if (viewState === appViewState.snapped) {
        listView.layout = new ui.ListLayout();
    } else {
        listView.layout = new ui.GridLayout();
    }
},

このmsdn ページによると、ビュー ステートの変更が CSS プロパティまたは CSS で指定されたレイアウトに影響する場合、メディア クエリを使用することもできます。他のすべての変更については、onResize を使用する必要があります。