wp8.1 Study9：针对不同的屏幕和手机方向调整UI

浏览数：25 / 时间：2015年06月11日

一、预备知识

　　现在不同屏幕大小WP8.1手机越来越多，那么在设计UI时，这需要我们考虑这个问题。在WP中，比例因子（a scale factor）能很好的解决问题，而且在微软系统的PC/平板/手机都是这样做的。scale factor是根据物理的手机屏幕尺寸等参数计算出来的，有具体的计算公式，在这里不一一介绍。

二、什么是我们需要做的

1、提供位图图像给系统的缩放

比如在页面中，有一个Image控件来展示图像，我们为了让它在不同屏幕大小显示同样的清晰，我们需要在系统文件中提供相对应比例因子的图像给它。

步骤只有一步新建Images文件夹，把相应的图片放进去，如图：

系统会自动根据不同的设备调用不同的图像资源给页面的Image控件。

注：xaml代码为

<Image Source="/Images/resolution.png" Stretch="None" />

2、构建能够适应可用的屏幕大小的UI

（1）我们在进行页面布局时，大多数会用到Grid，此时在定义行和列时，尽量规定行和列是按相关比例放置的（不是绝对的），比如：

<Grid.RowDefinitions>
            <RowDefinition Height="1*"/>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

利用*，Auto，会很有用的。

（2）使用ViewBox

ViewBox是可拉伸和缩放唯一子项并将填满可用空间的一个内容修饰器；在一些地方使用ViewBox控件，会使内容在不同的情况下更好显示。比如在手机由垂直放置变成横向放置，ViewBox里面的控件会相对应变化。例子如下：

xaml代码：

<Viewbox Grid.Row="0">
            <TextBlock x:Name="HelloTextBox" Text="This text fills in." />
        </Viewbox>

TextBlock内容将根据手机放置情况变化。

3、应对手机放置变化

如果手机支持portrait 和 landscape，这是很必须的。举例子如下：

可以在页面中加入类似，xaml代码：

<VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="VisualSizeStateGroup">
                <VisualState x:Name="Portrait">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="MonaLisaDetails">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Collapsed</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Landscape">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="MonalisaImage">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <x:Double>300</x:Double>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

而在C#中加入：

private void DisplayInfoOrientationChanged(DisplayInformation sender, object args)
        {
            var orientation = sender.CurrentOrientation;
            if (orientation == DisplayOrientations.Landscape || orientation == DisplayOrientations.LandscapeFlipped)
            {
                var res = VisualStateManager.GoToState(this, "Landscape", true);
            }
            if (orientation == DisplayOrientations.Portrait || orientation == DisplayOrientations.PortraitFlipped)
            {
                var res = VisualStateManager.GoToState(this, "Portrait", false);
            }
        }

  public ContentOverflow()
        {
            this.InitializeComponent();
            VisualStateManager.GoToState(this, "Portrait", false);
            DisplayInformation displayInfo = DisplayInformation.GetForCurrentView();
            displayInfo.OrientationChanged += DisplayInfoOrientationChanged;
        }

其中VisualStateManager是管理状态和逻辑转换的。学习它十分有用，MSDN：http://msdn.microsoft.com/zh-cn/library/system.windows.visualstatemanager(v=vs.110).aspx

三、显示信息等查询

使用DisplayInformation类，代码如下：

DisplayInformation displayInfo = DisplayInformation.GetForCurrentView();

// NB: not all properties/events shown - take care with deprecated properties
// such as ResolutionScale
var nativeOrientation = displayInfo.NativeOrientation;
var currentOrientation = displayInfo.CurrentOrientation;
var rawPixelsPerViewPixel = displayInfo.RawPixelsPerViewPixel;
var viewPixelsDPI = displayInfo.LogicalDpi;
var rawDpiX = displayInfo.RawDpiX;
var rawDpiY = displayInfo.RawDpiY;