CPF C#跨平台UI框架开源了

郑子铭

发布于 2023-12-06 16:42:10

2910

发布于 2023-12-06 16:42:10

文章被收录于专栏：DotNet NB && CloudNativeDotNet NB && CloudNative

C#跨平台UI框架

提供NETStandard2.0和net4的库，通过Netcore可以跨平台，支持Windows、Mac、Linux，Net4的可以支持XP。

各个平台运行效果一致，不依赖系统控件。支持窗体，控件任意透明，支持异形窗体，支持SVG图标显示。

支持动画，数据绑定，Mvvm模式，CSS等，简化依赖属性，数据绑定的写法，提供数据上下文和命令上下文来绑定。

直接用CSS和C#代码描述，提供设计器生成C#代码和开发者工具查看和调试元素。

和WPF一样的理念，任何控件都可以任意设计模板来实现各种效果除了使用平台相关API之外，基本可以实现一次编写，到处运行。

全面支持国产化，支持国产Linux + 龙芯、飞腾、兆芯、海光等CPU平台

软件架构说明

CPF为主要框架，CPF.Skia为用skia做图形适配，CPF.Windows、CPF.Linux、CPF.Mac、CPF.Android为各个平台的适配器。

所有控件采用自绘，可以保证各个平台渲染一致性。可以开启skia的硬件加速。Windows端还可以选择GDI+作为图形渲染

C#描述UI

public class Window1 : Window
{
    protected override void InitializeComponent()
    {
        LoadStyleFile("res://测试/Stylesheet1.css");
        Title = "标题";
        Width = 500;
        Height = 400;
        Background = null;
        Children.Add(new WindowFrame(this, new Panel
        {
            Width = "100%",
            Height = "100%",
            Children =
            {
                new StackPanel{
                    Size = SizeField.Fill,
                    Children = {
                        new Label{
                            Text = "标签",
                            Bindings = {
                                {nameof(Label.Text),nameof(MainModel.Test) },
                                //{ nameof(Label.Text), nameof(MainModel.Test), null, BindingMode.OneWay, (string a)=>a+"转换器" }
                            },
                        },
                        new Button{
                            Content="按钮",
                            Bindings = {
                                {nameof(Label.Text),nameof(MainModel.Test) }
                            },
                        }
                    },
                },
            }
        }));
    }
}

CSS描述样式

需要注意的是这里只是用到CSS的格式，并不是兼容网页的CSS

Button 
{
    BorderFill: #DCDFE6;
    IsAntiAlias: True;
    CornerRadius: 4,4,4,4;
    Background: #FFFFFF;
}

Button[IsMouseOver=true] 
{
    BorderFill: rgb(198,226,255);
    Background: rgb(236,245,255);
    Foreground: rgb(64,158,255);
}

Button[IsPressed=true] 
{
    BorderFill: rgb(58,142,230);
}