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,
},
