布局

作者: 万州大牛 | 来源:发表于2017-10-17 23:23 被阅读0次

布局容器

布局容器有自己的放置控件的逻辑,比如水平顺序放置,垂直顺序放置,网格放置

所有布局容器

继承自 System.Windows.Controls.Panel

布局容器有 children 属性,是 UIElement 集合。所有控件继承UIElement ,可以作为布局容器的元素。Panel继承UIElement,所以布局容器可以嵌套

DockPanel,StackPanel,WrapPanel,Grid,Canvas,UniformGrid

布局过程

分为测量阶段,排列阶段
测量阶段,是容器了解子元素的期望
排列阶段,决定子元素位置大小

布局原则

(1)不要设定控件大小,设定最大值,最小值
(2)不要设定控件位置,位置由布局容器特性,按顺序,大小,比例自动确定
(3)嵌套使用布局容器,大区块分割用grid,小区块布局用stack,wrap,dock

流式布局
现代布局系统,讲究自适应,也就是所谓的尺寸大小不固定,位置不固定,通过按顺序,以及设置最大值,最小值的方式来确定控件界面

核心布局容器

(1)StackPanel
单行,单列,顺序放置控件,通常用来布局用户界面一小部分区块,很少单独使用

(2)WrapPanel
自动换行,换列,顺序放置控件,通常用来布局用户界面一小部分区块,很少单独使用

(3)DockPanel
停靠的顺序很重要,举例先左停靠,后下停靠就不会占有左下角,支持多个停靠到同一边缘,按顺序摆放,很少单独使用
控件元素使用 DockPanel.Dock
记住,左右上下,上下左右,就是指,停靠左右,宽度自适应,高度默认冲满。

(4)Grid(重要,后续详解)
比较常用,网格

(5)UniformGrid
(6)Canvas

其他布局容器

(1)TabPanel
(2)ToolbarPanel
(3)ToolbarOverflowPanel
(4)VirtualizingStackPanel
(5)InkCanvas

再谈布局过程

布局容器,容器内控件
(1)布局容器,是第一责任主体
(2)容器内控件,可以要求自己期望的布局

布局属性(自己)
容器和控件,用来表达各自的期望,先决定宽高多少,再决定对齐。
HorizontalAlignment
VerticalAlignment
Margin
MinWidth,MinHeight
MaxWidth,MaxHeight
Width,Height

边框 Border 控件

经常和容器一起使用,容器的外层嫁衣

嵌套布局容器

实践,stack 放按钮,stack 外层是 dock

Grid 容器(重要)

用来分割空间,以便其他布局容器可以在小区块布局,通常也就是stack,wrap,dock
(1)网格,单元格内会重叠,单元格内通常一个子元素
(2)元素使用 Grid.Row,Grid.Column,从 0 开始
(3)Grid ShowGridLines
(4)Grid.RowDefinitions
(5)Grid.ColumnDefinitions
(6)ColumnDefinition Width(*,2*,500,auto)
(7)RowDefinition Height(*,2*,500,auto)
(8)Grid.RowSpan(跨行)
(9)Grid.ColumnSpan(跨列)

3种尺寸方式
绝对设置(最无用)
自动设置(宽高刚好满足内容,最适用)
按比例设置(按比例分割剩余空间)
(混合使用)

Grid 分割窗口,GridSplitter

必须设置
grid 预留行或列放分割条,且宽高为auto
始终贯穿整行,整列,colspan,rowspan
设置分割条拉伸,并固定宽或高
设置分割条居中(垂直|水平)

其他
样式背景,showspreview预览分割

StackPanel


效果

边距效果


边框效果

WrapPanel


效果

DockPanel




效果

嵌套布局容器


效果

Grid布局


效果
和前面的对话框一样

布局舍入

简单举例就是,9个像素平分,不可能有4.5个像素。

Grid跨行跨列


效果
和前面一样,不过这个版本不好,因为第2列,第3列宽度由按钮决定,不灵活。
最佳实践
一组控件,一个区域,还是采用嵌套布局容器,stack,wrap,dock

Grid分割条





效果

滚动条


效果

相关文章

  • css经典布局总结

    布局类型 浮动布局 流式布局 定位布局 flex布局 grid布局 布局详解 1.浮动布局。 浮动布局是利用flo...

  • 布局小结

    布局方式 静态布局 浮动布局 定位布局 自适应布局 流式布局(百分比布局) 响应式布局 弹性布局 悬挂布局 圣杯布...

  • 常用的五大布局

    常用的五大布局(线性布局,相对布局,帧布局,表格布局,绝对布局) 1,线性布局 LinearLayout ...

  • 实现三栏布局的六种方式

    六种布局方式总结:圣杯布局、双飞翼布局、Flex布局、绝对定位布局、表格布局、网格布局。 圣杯布局 圣杯布局是指布...

  • CSS3开发常用核心技能

    基础网页布局 布局分类 一列布局 两列布局 三列布局 多列布局 一列布局: 二列布局: 三列布局: ⚠️ midd...

  • 移动端页面布局

    七大布局:流线布局、等比缩放拓展布局、分栏布局、流动布局、重复布局、固定布局1.流线布局流线布局指在界面中的内容元...

  • 前端网站5种布局

    前端基本布局分大致5种,table布局,float 布局,absolute布局,flexbox布局,grid布局。...

  • 2019-08-25

    布局 说法一 浮动布局 绝对定位布局 Flex布局 Table-cell表格布局 网格布局 说法二 静态布局 流式...

  • flex布局的几种典型布局方式

    flex布局的典型布局方式有哪些? 网格布局 固定底栏布局 圣杯布局 输入框布局 悬挂布局 网格布局 最简单的网格...

  • css3设计模式,常用布局

    1.css3常用的布局有多栏布局、多列布局、弹性布局、流式布局、瀑布流布局和响应式布局。2.float浮动布局,a...

网友评论

      本文标题:布局

      本文链接:https://www.haomeiwen.com/subject/lmhruxtx.html