你的位置:首页 > ASP.net教程

[ASP.net教程]UWP开发入门(九)——简单界面的布局技巧及屏幕适应


  嘿嘿嘿,题目比较绕哈。本篇主要讨论一般情况下,页面的布局技巧,怎么将元素的展现尽量做到分辨率无关。基本的思路仍然是尽量少的标定具体的数字,而是用比列来标注各元素占据的空间。

  这里我打算用易信的名片页来举例:

  

  Phone的界面看起来不错,大致以纵向排列。最上方是标题栏,头像部分居中,下面的文字以列表形式靠左对齐,最下部为留白。考虑到标题栏需要锚定在顶部,不参与比例分配。头像,文字和留白的占比大致为2.5:4:3。XAML中的Grid定义如下:

    <Grid.RowDefinitions>      <RowDefinition Height="Auto"></RowDefinition>      <RowDefinition Height="2.5*"></RowDefinition>      <RowDefinition Height="*"></RowDefinition>      <RowDefinition Height="*"></RowDefinition>      <RowDefinition Height="*"></RowDefinition>      <RowDefinition Height="*"></RowDefinition>      <RowDefinition Height="3*"></RowDefinition>    </Grid.RowDefinitions>

  按比例而不是写死每一行的高度,好处在于屏幕大小变化时,甚至屏幕的纵横比变化时,各元素能按相对位置来布局,减少了因为屏幕空间不够而截断或互相遮盖的问题。

  看过了总体的纵向比例,再确认第0行的标题栏的横向布局。三个元素要以左左右的顺序排列。这里给出一种方案: 

    <Grid Grid.Row="0">      <Grid.ColumnDefinitions>        <ColumnDefinition Width="Auto"></ColumnDefinition>        <ColumnDefinition Width="*"></ColumnDefinition>        <ColumnDefinition Width="Auto"></ColumnDefinition>      </Grid.ColumnDefinitions>      <FontIcon Grid.Column="0" Glyph="&#xE00E;" />      <TextBlock Grid.Column="1" Style="{StaticResource SubtitleTextBlockStyle}" HorizontalAlignment="Left">个人名片</TextBlock>      <TextBlock Grid.Column="2" Style="{StaticResource CaptionTextBlockStyle}" VerticalAlignment="Center" >编辑</TextBlock>    </Grid>

  再来是头像部分,共分四行,最上留白(不用Margin是因为考虑横屏的时候,Margin写死数字会相对占用很大的空间),头像,姓名和易信号。 

    <Grid Grid.Row="1">      <Grid.RowDefinitions>        <RowDefinition Height="*"></RowDefinition>        <RowDefinition Height="Auto"></RowDefinition>        <RowDefinition Height="*"></RowDefinition>        <RowDefinition Height="*"></RowDefinition>      </Grid.RowDefinitions>      <Ellipse Grid.Row="1" Width="60" Height="60" >        <Ellipse.Fill>          <ImageBrush ImageSource="Assets/xingzheng.jpg" ></ImageBrush>        </Ellipse.Fill>      </Ellipse>      <StackPanel Grid.Row="2" Orientation="Horizontal" HorizontalAlignment="Center">        <TextBlock Style="{StaticResource SubtitleTextBlockStyle}" VerticalAlignment="Center">邢政</TextBlock>        <FontIcon Glyph="&#xE1D1;"></FontIcon>      </StackPanel>      <StackPanel Grid.Row="3" Orientation="Horizontal" HorizontalAlignment="Center">        <TextBlock Style="{StaticResource BodyTextBlockStyle}" Foreground="LightGray">易信号:</TextBlock>        <TextBlock Style="{StaticResource BodyTextBlockStyle}" Foreground="LightGray">manupstairs</TextBlock>      </StackPanel>    </Grid>

  这里可以看到头像Image的Width和Height写死了。这是考虑到头像应该和文字一样保持大小不变,而不是头像根据屏幕缩放,在整个页面字号不改变的情况下,单独变头像感觉会比较奇怪。

  再往下的列表和留白比较简单,不多做介绍,直接放出Phone页面的效果图和原版对比:   

    

  看小图几乎一模一样了,当然易信的图标俺没有,俺用的系统自带的。

  既然要Adaptive UI,自然要能无缝切换到PC模式,还是先看原版截图。

  PC的部分依然是同样的布局,但因为纵横比例反过来了,所以横向自适应的部分将右边整个画面拉宽了。截图是窗口模式,如果放到全屏,右边会越发的宽。

  

  这种保持元素尺寸及相对位置不变,将背景进行横向或纵向的拉伸实现的自适应布局是最为常见的。

  我们之前的代码基本不存在写死的数值,都是按比例布局。所以无需修改直接将窗口拖大看看效果吧。

  

  平移上去比对可以看到效果基本是类似的。那是不是本文到这里就结束了呢?曾经我以为是,感觉Adaptive UI一般做到这种程度就可以了。最多只是细节上调一调,整体布局是不会动的。

  但是美术不是这样的想的啊,她们突发其想说PC上我要下面这种效果,系统自带的哟……

  

  PC我要靠左对齐……靠左……靠左……当时感觉头要炸了。介于平时我的宣传口径是“没有不能做的”。这尼玛硬着头皮也要上啊。仔细想想也很简单啊,加一层VisualState就可以了啊:

    <VisualStateManager.VisualStateGroups>      <VisualStateGroup>        <VisualState >          <VisualState.StateTriggers>            <AdaptiveTrigger MinWindowWidth="769" />          </VisualState.StateTriggers>          <VisualState.Setters>            <Setter Target="GridRootLayout.HorizontalAlignment" Value="Left"></Setter>            <Setter Target="GridRootLayout.VerticalAlignment" Value="Top"></Setter>            <Setter Target="GridRootLayout.Width" Value="320"></Setter>            <Setter Target="GridRootLayout.Height" Value="640"></Setter>          </VisualState.Setters>        </VisualState>      </VisualStateGroup>    </VisualStateManager.VisualStateGroups>

  这里的769是针对1520这样的1080p 6寸机器。目前常见的机型中就1520 Width最大达到了768这个数值。769就成了区分手机和PC,Tablet的分界值。效果图如下,相当于把720p机型的屏幕复制过来贴靠到左上角显示:

    

  至于有没有比刚才更好看么,美术说了算。

  大体上就是这样吧,最后必须得总结一下XAML UI布局的技巧:

  1. 尽量不要使用具体的数字
  2. 使用Grid来划分行列,通过行列之间的比例来控制整体的布局
  3. 需要保持大小不变的元素,可以使用数值,比如上文的头像
  4. Margin这种不存在相对位置的,仅表示固定间距,大可以写死数值(特别是最外层的Margin)
  5. 总体呈纵向排列的页面,横向可以考虑写数值(因为横向没几个元素,也就没有相对位置的概念),反之亦然。
  6. 暂时就这么多吧,等我想到再补充。

  最后是惯例的彩蛋:俺这个写法支持手机横屏哦,原版就不行的啦。

  GayHub地址:

  https://github.com/manupstairs/UWPSamples