欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

造*了!NETCore跨平台UI框架,CPF

程序员文章站 2022-07-09 21:11:53
CPF(暂时命名)(Cross platform framework),模仿WPF的框架,支持NETCore的跨平台UI框架,暂时不够完善,只用于测试,暂时只支持Windows和Mac。支持数据绑定,CSS,动画。。。 可能有人会说,不是有个开源的Avalonia ,我试过,不过他的性能不行,启动速 ......

cpf(暂时命名)(cross platform framework),模仿wpf的框架,支持netcore的跨平台ui框架,暂时不够完善,只用于测试,暂时只支持windows和mac。支持数据绑定,css,动画。。。

可能有人会说,不是有个开源的avalonia ,我试过,不过他的性能不行,启动速度慢,内存占用高,附带的dll一大堆,他的是xaml来描述ui的,我的不提供xaml,直接用c#来写,以后将出设计器直接生成c#代码。

造*了!NETCore跨平台UI框架,CPF

 

cpfobject相当于wpf里的dependencyobject依赖对象。继承该类的对象,所有属性默认都是依赖属性

属性写法:

1         /// <summary>
2         /// 绑定的数据上下文
3         /// </summary>
4         [propertymetadata(null)]
5         public object datacontext
6         {
7             get { return getvalue<object>(); }
8             set { setvalue(value); }
9         }

 

属性上的特性可以是 propertymetadata或者uipropertymetadata 中的一个,默认值建议通过这两个特性来设置。如果不加这两个特性,那默认值就是null或者0

如果是复杂属性类型默认值,可以通过重写 onoverridemetadata 来设置

        protected override void onoverridemetadata(overridemetadata overridepropertys)
        {
            base.onoverridemetadata(overridepropertys);
            overridepropertys.override("strokestyle", new uipropertymetadataattribute(new stroke(1)));
        }

 

附加属性:

        /// <summary>
        /// 获取或设置元素行索引
        /// </summary>
        public static attached<int> rowindex
        {
            get { return registerattached(0); }
        }

grid.rowindex(control, 1);//使用附加属性方式设置行索引
var index = grid.rowindex(control);//获取附加属性值

数据绑定:

var bind = label[nameof(label.text)] <= "test";//右到左数据绑定,数据源是datacontext的属性
var bind = label["text"] >= "test";//左到右数据绑定,数据源是datacontext的属性
var bind = label["text"] != "test";//左到右数据绑定,只传递一次 ,数据源是datacontext的属性
var bind = label["text"] == "test";//双向绑定,数据源是datacontext的属性,双向绑定需要对象实现inotifypropertychanged


var bind = label[nameof(label.text)] <= button["test"];//右到左数据绑定
var bind = label[nameof(label.text)] >= button["test"];//左到右数据绑定
var bind = label[nameof(label.text)] != button["test"];//左到右数据绑定,只传递一次
var bind = label[nameof(label.text)] == button["test"];//双向绑定

btn.bindings.add(nameof(button.content), nameof(textblock.text), null, bindingmode.oneway, a => a.tostring());//通过bindings属性添加绑定,建议用nameof()这样不容易写错

 

命令绑定:

当事件触发或者属性变化的时候调用方法

label.commands.add(nameof(window.mousedown), nameof(window.dragmove), relation.me.parent);

new button
    {
       width = 20,
        height = 20,
        marginright = 30,
        margintop = 5,
        content = "test",
        commands = { { nameof(button.mouseup), ()=> { window.windowstate = windowstate.minimized; } } }
     }

 

布局系统

布局流程和wpf差不多,先measure再arrange,如果自定义布局容器,可以参考wpf的代码

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

marginleft,margintop,marginright,marginbottom,一般默认值是auto,当设置值之后固定对应边到父容器到内边距的距离

 

width,height,一般默认值也是auto,如果没设置,实际尺寸由内容或者子元素尺寸决定,或者由margin决定

new border { width = "100%", height = "100%", background = "#fff", }

 

属性值的自动转换:

width = "100%";
width = "auto";
width = 100;
background = color.fromrgb(100,100,100);
background = "#fff";
background =image;

 

造*了!NETCore跨平台UI框架,CPF

css样式

支持简单的选择器

textblock { foreground:rgb(255,0,0);} 选择所有textblock类型的元素

.test{foreground:rgb(255,0,0);} 选择所有包含test 类名的元素,类名通过classes属性添加

#test{foreground:rgb(255,0,0);} 选择所有name属性为test的元素

[ismouseover=true]{…}   添加触发器

button textblock{…}   button里的后代为textbox的元素,只支持两层

button>textblock{…}   button直接子元素为textbox的元素,只支持两层

 

触发器和动画

.test[ismouseover=true]{animation-name:myfirst;animation-duration:1s;animation-iteration-count: 1;}

@keyframes myfirst

{

0%   {background: #f00;}

25%  {background: #0ff;}

50%  {background: #00f;}

100% {background: #0f0;}

}

通过根元素的loadstyle方法加载样式,比如window对象

 

控件模板:

继承你要修改的控件,然后重写initializecomponent 把定义代码写在里面,不知道怎么定义?查看内置模板代码,详细模板代码看压缩包里的文档,复制过去,自己根据需要修改

 

对mac开发不熟悉,mac系统下还不能输入中文,有没有猛男赐教一下,怎么调用输入法,打开关闭输入法和控制输入法候选词位置

我感觉模板设计的不够好,还有数据绑定还可以优化一下。各位有什么想法和意见说说。

 

cpf 下载