创建宽度高度自适应的 Windows Phone App 界面布局
[1] 利用好 Grid 的分行/分列功能
Grid 提供了分行/分列的属性,示例代码如下:
<Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> <RowDefinition Height="2*"/> </Grid.RowDefinitions>
其中行高(列宽)有几种取值方式:
- 直接指定数值。此方式最直接,将直接指定具体高度或宽度。
- 使用
Auto
值。使用Auto
的话,Grid 将根据该行/列内容计算其占据空间的大小。 - 使用
*
值。使用*
的话,Grid 将根据其他的行/列占据空间后剩余的空间来计算此行/列的大小。此值还支持比例计算,如示例代码中的2*
,表示 Grid 的空间在第一行计算完成后,剩余空间将均分为3份,第二行占据一份,第三行占据两份。
分行/分列的属性在实现页面基础布局的情况下十分有用。但需要注意不要在数据模板中使用过于复杂的 Grid 结构,否则会导致大量计算资源消耗在计算 Grid 布局上。
相关资料:《关于 WPF 中的面板性能分析》
[2] 注意对齐属性的区别
-
HorizontalAlignment
/VerticalAlignment
(水平对齐和垂直对齐)HorizontalAlignment
和VerticalAlignment
是 FrameworkElement 中定义的两个属性。当 FrameworkElement 位于面板或项控件中时,这两个属性将会有应用,设置后影响此元素的布局。默认值是Stretch
,如果需要建立一个自适应的布局,最好不要修改此值。HorizontalAlignment
取值:Left
/Right
/Center
/Stretch
。VerticalAlignment
取值:Top
/Bottom
/Center
/Stretch
。
当前元素没有设置宽度(或高度)时,如使用除
Stretch
以外的值,会导致元素的大小变为该元素内部的元素占据的大小。如:<Border Height="50" BorderBrush="White" BorderThickness="3" Background="Red" HorizontalAlignment="Left"> </Border>
则此
Border
的宽度将变为0。因此,注意Stretch
的使用。 -
HorizontalContentAlignment
/VerticalContentAlignment
(内容水平对齐和内容垂直对齐)HorizontalContentAlignment
和VerticalContentAlignment
是 Control 中实现的两个属性,主要影响控件内元素的排列位置,默认值分别是HorizontalAlignment.Left
和VerticalAlignment.Top
。同样地,如果将属性设置为Stretch
的话,则内部元素在没有设置固定大小时将会得到拉伸处理。HorizontalContentAlignment
取值:Left
/Right
/Center
/Stretch
。HorizontalContentAlignment
取值:Top
/Bottom
/Center
/Stretch
。
强调这两个属性的原因是,当我们需要实现弹性布局时,使用 Stretch
可以免除频繁设置元素大小的困扰。