（译）使用更多的像素——Windows 8 屏幕和视觉状态适配

屏幕缩放和视觉装弹基础 （The basics of resize and view state changes）

在Windows 8 中使用 XMAL 和 HTML 处理屏幕缩放和 视觉状态变化的技术模式是一样的： 只需要简单的为在各自框架中所提供的事件提供回调函数和一些必要的查询数据。

例如： 在JAVASCRIPT 中你可以为一个基础的窗口缩放事件提供处理程序。在下面的例子中 你可以使用一个事件去检查一个应用的显示区域的变化和应用程序所使用的区域大小。

function handleResize(eventArgs) { 
var appWidth = eventArgs.view.outerWidth; 
var appHeight = eventArgs.view.outerHeight; 
    ... 
} 
 
window.addEventListener("resize", handleResize); 

同样在 在XAML 中你可以使用当前的窗口的SizeChanged 事件创建一个事件处理器：

c#

private void OnWindowSizeChanged(object sender, Windows.UI.Core.WindowSizeChangedEventArgs e) 
{ 
double AppWidth = e.Size.Width; 
double AppHeight = e.Size.Height; 
} 
 
Window.Current.SizeChanged += OnWindowSizeChanged;

var currentViewState = Windows.UI.ViewManagement.ApplicationView.value; 

var CurrentViewState = Windows.UI.ViewManagement.ApplicationView.Value; 

var isSnapped = window.msMatchMedia(“(-ms-view-state:fullscreen-landscape) and  
(min-width: 1600px”).matches; 
JavaScript 
function handleSnappedMode(mql) { 
if (mql.matches) { 
        ... 
        } 
} 
window.msMatchMedia(“(-ms-view-state:fullscreen-landscape) and (min-width:  
1600px”).addListener(handleSnappedMode); 

function handleResize(eventArgs) { 
var currentViewState = Windows.UI.ViewManagement.ApplicationView.value; 
var appHeight = eventArgs.view.outerHeight; 
var appWidth = eventArgs.view.outerWidth; 
 
// downloadImage requires accurate view state and app size! 
    downloadImage(currentViewState, appHeight, appWidth); 
} 
 
window.addEventListener("resize", handleResize); 

private void OnWindowSizeChanged(object sender, Windows.UI.Core.WindowSizeChangedEventArgs e) 
{ 
    var CurrentViewState = Windows.UI.ViewManagement.ApplicationView.Value; 
    double AppWidth = e.Size.Width; 
    double AppHeight = e.Size.Height; 
 
// DownloadImage requires accurate view state and app size! 
    DownloadImage(CurrentViewState, AppHeight, AppWidth); 
} 
 
Window.Current.SizeChanged += OnWindowSizeChanged; 

相比之下， 我们在视觉状态变化时触发的回调函数中查询应用显示区域大小（ we were to query the app display area size in a callback function triggered by a view state change）我们需要获得当前的视觉状态信息，但是应用显示区域大小并不会立即更新。 在这样的情况下， 如果我们的应用从snapped 模式过渡到 fullscreen-landscape 模式，应用宽也许是320 像素视觉状态也许是fullscreen-landscape. 如果我们根据这些信息去下载图片我们将得到一个错误的图片。

这个缩放事件（resize event ）触发回调的方式适用于太多的其他情况。比如： 在JavaScirpit中 如果你希望修改根据视觉状态修改ListView的部署从Grid 到List，那么你需要设置一个视觉状态改变的回调。 但是在屏幕改变之前设置ListView 布局会导致将两个布局传给了ListView ——一个是屏幕改变之前的一个是之后的（WinJs ListView 会自动处理缩放事件（resize event）但是不会处理视觉状态改变事件（view state change event ） ）。 还是之前那个下载图片的例子， 用户也许不会直接看到这个区别， 但是应用将会开销更多的时间处理布局，将导致运行缓慢和相应延迟。 所以 较好的方式是等待回调， 由于屏幕改变是在你查询当前视觉状态之前然后设置相应的ListView布局。

JavaScript

function handleResize(eventArgs) { 
var isSnapped = (Windows.UI.ViewManagement.ApplicationView.value ===  
Windows.UI.ViewManagement.ApplicationViewState.snapped); 
listView.layout = isSnapped ? new WinJS.UI.ListLayout() : new WinJS.UI.GridLayout(); 
} 
 
window.addEventListener("resize", handleResize); 

<VisualStateManager.VisualStateGroups> 
<!-- Visual states reflect the application's view state --> 
<VisualStateGroup> 
<VisualState x:Name="FullScreenLandscape"/> 
<VisualState x:Name="Filled"/> 
 
<!-- The entire page respects the narrower 100-pixel margin convention for portrait --> 
<VisualState x:Name="FullScreenPortrait"> 
<!-- definition of what UI elements should display or change would go here in Storyboard  
elements --> 
</VisualState> 
 
<!-- The back button and title have different styles when snapped, and the list representation  
is substituted for the grid displayed in all other view states --> 
<VisualState x:Name="Snapped"> 
<!-- definition of what UI elements should display or change would go here in Storyboard  
elements --> 
</VisualState> 
</VisualStateGroup> 
</VisualStateManager.VisualStateGroups> 

private void OnWindowSizeChanged(object sender, Windows.UI.Core.WindowSizeChangedEventArgs e) 
{ 
// get the view state after the size has changed 
string CurrentViewState = Windows.UI.ViewManagement.ApplicationView.Value.ToString(); 
 
// using VisualStateManager make sure we navigate to the correct state definition 
VisualStateManager.GoToState(this, CurrentViewState, false); 
}