码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2014-12-10 01:43:38      阅读:328      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   io   ar   color   os   使用   sp   

一、预备知识

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

二、什么是我们需要做的

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

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

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

bubuko.com,布布扣

系统会自动根据不同的设备调用不同的图像资源给页面的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;

以上内容只是相互学习的参考内容,如有出错,请指出。

 

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

标签:style   blog   http   io   ar   color   os   使用   sp   

原文地址:http://www.cnblogs.com/NEIL-X/p/4154546.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!