CPF 入门教程 - 控件布局（六）

CPF netcore跨平台桌面UI框架

系列教程

CPF 入门教程（一）

CPF 入门教程 - 数据绑定和命令绑定（二）

CPF 入门教程 - 样式和动画（三）

CPF 入门教程 - 绘图（四） 

CPF 入门教程 - 设计器和模板库的使用（五）

CPF 入门教程 - 控件布局（六）

布局流程和WPF差不多，先Measure再Arrange，如果自定义布局容器，可以参考WPF的代码

元素布局，支持百分比布局，margin调整定位，默认居中。相当于CSS里中的绝对定义position: absolute;

MarginLeft，MarginTop，MarginRight，MarginBottom，一般默认值是Auto，当设置值之后固定对应边到父容器的内边的距离

Width，Height，一般默认值也是Auto，如果没设置，实际尺寸由内容或者子元素尺寸决定，或者由Margin决定

使用百分比布局需要注意的：在某些布局容器里使用的时候尽量不使用百分比，

因为某些情况下百分比布局会有冲突。

new ListBox
{
MarginLeft = 112,
MarginTop = "10%",
Height = 122,
Width = 118,
Items =
{
"asda",
"dfss"
}
},

 设计器中四个边上的椭圆圈圈就是设置对应的Margin，设置有值的Margin圈圈里有一条线段

布局容器，基本和wpf里的一致

除了Panel，其他布局容器当布局内容超过布局容器默认是左上角的

Grid：类似于table，通过属性RowDefinitions，ColumnDefinitions 来添加行和列

grid.Children.Add(new Control { Width = "100%", Height = "100%", Background = "100,110,120,120" },1,2,1,2);

//添加控件到第2列，第3行，索引位置从0开始,跨一列，跨两行，这些位置信息是通过附加属性的方式设置的

Grid.RowIndex(control, 1);//使用附加属性方式设置行索引

var index = Grid.RowIndex(control);//获取附加属性值

new Grid
{
Children =
{
new Button
{
Attacheds =
{
{
Grid.ColumnIndex,
0
},
{
Grid.RowIndex,
1
},
},
Content = "Button",
},
},
Height = 171,
Width = 253,
},

GridSplitter

用于鼠标拖拽调整Grid的行或者列的布局范围的，

//定义一个可以拖拽调整左右尺寸的Grid
new Grid
{
IsGroup = true,
ColumnDefinitions =
{
new ColumnDefinition
{

},
new ColumnDefinition
{

},
},
Children =
{
new GridSplitter
{
Height = "100%",
MarginLeft = 0f,
Attacheds =
{
{
Grid.ColumnIndex,
1
},
},
},
},
Height = 147,
Width = 165,
}

DockPanel：支持让元素简单地停靠在整个面板的某一条边上，然后拉伸元素以填满全部宽度或高度。它也支持让一个元素填充其他已停靠元素没有占用的剩余空间。

子元素设置 DockPanel.Dock 附加属性来定义停靠方向

new DockPanel
{
Children =
{
new Button
{
Attacheds =
{
{
DockPanel.Dock,
Dock.Top
},
},
Content = "Button",
},
},
Height = 131,
Width = 205,
},

StackPanel：水平或者垂直方向的布局

WrapPanel：类似于网页中的浮动，以流的形式由左到右，由上到下显示控件

子元素都是通过Children添加

元素旋转

 设计器里可以直接通过右边旋转手柄来调整旋转角度

new Button
{
RenderTransform = new GeneralTransform
{
Angle = -9.8f,
},
Height = 44,
Width = 92,
Content = "Button",
},

RenderTransform 就是渲染的矩阵变换，还可以设置缩放，切变，平移等等。。。

ScrollViewer

表示可包含其他可视元素的可滚动区域。当你需要做内容滚动的时候，内容超过ScrollViewer范围就可以显示滚动条

内容设置给Content属性

new ScrollViewer
{
Content = new Button
{
Height = 133,
Width = 150,
Content = "Button",
},
Height = 114,
Width = 141,
},