当前位置： 移动技术网 > IT编程>开发语言>.net > 造轮子了！NETCore跨平台UI框架，CPF

造轮子了！NETCore跨平台UI框架，CPF

2019年10月26日  | 移动技术网IT编程  | 我要评论

丹道仙途,李开复创新工厂,大岭山森林公园好玩吗

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

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

 

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;

 



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 下载

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网