首页 > 代码库 > WP8.1 UI 编程 三、布局

WP8.1 UI 编程 三、布局

1. Panel是所有布局面板的父类。常用的布局面板:

Canvas,子元素可以根据区域内坐标定位。

StackPanel,栈面板,布局结构就像一个栈,只有水平竖直两种方向。

Grid,网格,子元素可以根据行列布局。

如果不需要进行复杂的布局,应尽量用相对简单的布局面板以提升表现,如用Canvas替代Grid。

布局是一个递归系统,先进行测量,再进行排列。测量是测量子元素所需大小,排列是最终子元素大小及位置。

应尽量减少重新布局,以提升表现。

UI元素有两个重要的类UIElement和FrameworkElement,继承结构如下:

Windows.UI.Xaml.DependencyObject

  Windows.UI.Xaml.UIElement:具有Measure和Arrange方法

    Windows.UI.Xaml.FrameworkElement:具有两个虚方法MeasureOverride和ArrangeOverride

测量和排列的递归:

先后调用Measure和Arrange;

Measure会先调用MeasureOverride(如果实现了此方法),如果元素有子对象,MeasureOverride再调用子对象的Measure;

Arrange会先调用ArrangeOverride(如果实现了此方法),如果元素有子对象,ArrangeOverride再调用子对象的Arrange。

 

对不同分辨率上进行布局,应避免硬编码像素数。

也可以用Windows.UI.Xaml.Window.Current.Bounds类的Height和Width属性获取手机分辨率及比例,从而根据实际分辨率进行动态适配。

 

2. 以上面为基础,可以实现自定义布局规则。

先继承Panel来自定义布局面板。

如果传递一些参数来实现特殊的布局(如圆形环绕布局需要半径值),当布局根据参数动态变化时,要使用InvalidateArrange方法重新排列。

接着重写MeasureOverride和ArrangeOverride方法。

WP8.1 UI 编程 三、布局