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,通过属性RowDefinitionsColumnDefinitions 来添加行和列

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

 

 

 

 

打赏

免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2021 CODEPRJ.COM