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

CPF netcore跨平台桌面UI框架

 

系列教程

CPF 入门教程（一）

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

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

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