UWP XAML 界面布局之 Layout Panel

更新日期: 2018-09-22 阅读次数: 2830 分类: UWP

Layout panels

布局面板。

Layout panels 就是一个容器,用于容纳 UI elements,以方便布局。

Layout panel 类似于 HTML 中的 div。把他想象成 div, 就非常容易理解了。

XAML 内置了四种 layout panels

  • RelativePanel
  • StackPanel
  • Grid
  • VariableSizedWrapGrid
  • Canvas

panel border

常用熟悉

  • BorderBrush 颜色
  • BorderThickness 边线宽度
  • CornerRadius 圆角弧度
  • Padding 大家都懂得

RelativePanel

相对布局。

即,reative panel 内部的 UI element 将采用相对布局的形式。

相对有这么几层含义

  • Panel alignment 例如,顶部与 panel 一致,AlignTopWithPanel
  • Sibling alignment 例如,左边与兄弟 UI element 对其,AlighLeftWith
  • Sibling position 例如,位于某个兄弟 UI element 的右侧,RightOf

StackPanel

堆栈布局。

顾名思义,stack panel 内的 UI element 只能并排横向,或者纵向排列。指定宽或高即可。

适合排列大量小体积的元素,例如一堆小按钮。

Grid

网格布局。

Grid 布局,类似于 HTML 中的 Table。

首先自己定义网格中 Row Column 单元的宽和高。然后每个 UI element 只需要调整 Grid.Row, Grid.Column 属性,以指定其位于网格的哪个单元即可。例如,[0, 0] 为左上角的格子,[1, 1] 为第二行第二列的格子。

若一个格子想占多个单元,可以使用 Grid.RowSpan 和 Grid.ColumnSpan 来设置。

Grid 是 XAML 的默认排版形式。写了一个自适应布局之后,感觉以 Grid 为默认项非常有道理。因为只有 Grid 最适合作为多屏幕的自适应方案。

我写的一个以 Grid 和 StackPanel 做自适应界面的例子

使用 Grid 及 StackPanel 实现 UWP 页面自适应布局

VariableSizedWrapGrid

// TODO, 这里的理解有问题,需要回头看看

VariableSizedWrapGrid 与 Grid 的区别是,每个格子所占面积都是可以调整的。

RowSpan ColumnSpan 类似于 bootstrap 中的 col-md-4,里面的数字可以随意调整。

Canvas

以坐标系为布局标准。

Canvas.Left Rigth 来指定坐标。

Canvas 最大特点是,支持 Zindex,即支持分层。

实战经验

实际项目中,这几种布局可以灵活地相互嵌套使用。

参考

https://docs.microsoft.com/en-us/windows/uwp/design/layout/layout-panels

爱评论不评论

近期节日

2019年08月23日 处暑
2019年09月03日 抗日胜利纪念日
2019年09月08日 白露
2019年09月08日 国际扫盲日
2019年09月10日 教师节
2019年09月13日 中秋节
2019年09月16日 国际臭氧层保护日
2019年09月16日 世界清洁地球日
2019年09月18日 "九一八"事变纪念日
2019年09月20日 国际爱牙日
2019年09月21日 国际和平日
2019年09月22日 世界无车日
查看更多节日