3
A
回答
5
请参阅this关于如何捕捉视图状态更改的博文。基本上,建议归结为抓住调整大小事件,然后检查视图状态是这样的:
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期待的Windows 8 template for Javascript你会看到导航这样的事情。 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();
}
},
根据this MSDN页面,您还可以使用媒体查询时,视图状态的变化会影响在CSS中指定的CSS属性或布局。对于所有其他更改,应使用onResize。
相关问题
- 1. 在RecyclerView中更改视图的状态
- 2. 更改视图状态
- 3. WCF事务状态存储在哪里?
- 4. MVP被动视图 - 在哪里连接视图的事件?
- 5. 检测更改事件来自哪里
- 6. 更改bootstrap模态视图的形状
- 7. C#事件更改发件人状态
- 8. 在CQRS中改变事件的状态
- 9. 在哪里过滤状态?
- 10. 在Android中按压状态更改图像视图的样式
- 11. 根据父ViewGroup的状态更改视图的显示状态
- 12. 应该在哪里处理listview中的数据更改事件?
- 13. MVP Android - 在哪里保存视图状态?
- 14. 更改视图高度选择状态
- 15. 如何根据状态更改视图?
- 16. Cscore播放状态更改事件
- 17. Magento订单状态更改事件
- 18. Magento订单状态更改事件
- 19. 捕获网络状态更改事件
- 20. 动态视图?在哪里放逻辑?
- 21. 在哪里可以找到WPF图像控件的状态?
- 22. 在不同的商店视图中更改Magento产品状态
- 23. 如何在节点对象的状态更改时动态更改JTree视图?
- 24. 视图状态更换错误。 [ViewStateException:无效的视图状态。 ]
- 25. 数据库中的“状态更新历史记录”在哪里
- 26. 对stage.displayState所做的更改:事件在哪里? (Flash,AS3)
- 27. 更改树状图状态图像
- 28. 在树状视图中双击事件
- 29. 在下拉列表中selectedindexchanged事件不会更改其状态
- 30. 在Form2.Disposed事件中更改Form1.Checkbox状态
另一种选择是使用媒体选择器: var f = matchMedia(“all and(-ms-view-stated:snapped)”); f.addListener(myHandlerFn); –
@DominicHopton你可以捕捉状态变化,但是我链接的博客文章指出,当事件触发时,大小不会改变,所以如果你有任何依赖于大小的UI,那么你几乎必须等待'onResize'事件。捕捉'onResize'总是有效的。 – mydogisbox
这是消费者预览推荐; RP&RTM不再是这种情况。 –