造*了!NETCore跨平台UI框架,CPF
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系统下还不能输入中文,有没有猛男赐教一下,怎么调用输入法,打开关闭输入法和控制输入法候选词位置
我感觉模板设计的不够好,还有数据绑定还可以优化一下。各位有什么想法和意见说说。