UI 布局(WPF)

友好的用户界面和良好的用户体验离不开设计精良的布局。布局元素中,既有像传统的 Windows Form 和 ASP.NET 那样使用绝对坐标进行定位的元素,也有像 HTML 页面中那样使用行列定位的元素。WPF 的布局是依靠各种布局元素实现的。

每个布局元素都有自己的特点,既有自己的优点和长处,也有自己的缺点和短处。一定要灵活的使用,切莫对每种布局控件无所不用其极。

布局元素

首先,思考一个问题:用于构成 UI 的重要控件,如 Windows 、UserControl、GroupBox、Button、Lable 等,都是集中在 ContentControl 和 HeaderedContentControl 族里,但这两族控件只能接受一个元素作为自己的 Content,如果想在这些控件里包含多个控件应该怎么做呢?

这样就要用到布局元素了。布局元素属于 Panel 族,这一族元素的内容属性是 Children ,即可以接受多个控件作为自己的内容并对这些控件进行布局控制。 WPF 的布局理念就是把一个布局元素作为 ContentControl 或 HeaderedContentControl 族控件的 Content ,再在布局元素里添加要被布局的子级控件;如果 UI 局部需要更复杂的布局,那就在这个区域放置一个子级的布局元素,形成布局元素的嵌套。

WPF 中的布局元素有如下几个:

  • Grid: 网格。可以自定义行和列并通过行列的数量、行高和列宽来调整控件的布局。
  • StackPanel: 栈式面板。可将包含的元素在竖直或水平方向上排成一条直线,当移除一个元素后,后面的元素会自动向前移动以填充空缺。
  • Canvas: 画布。内部元素可以使用以像素为单位的绝对坐标进行定位。
  • DockPanel: 泊靠式面板。内部元素可以选择停泊方向。
  • WrapPanel: 自动折行面板。内部元素在排满一行后能够自动折行。

下面就逐个研究它们的具体用法。

Grid

版权声明:本文为博主原创文章,未经博主允许不得转载。

posted @ 2015-09-24 09:13  贱贱的梦想  阅读(315)  评论(0编辑  收藏  举报