乾!垃圾微軟!發佈我的Netcore跨平臺UI框架 CPF

来源:https://www.cnblogs.com/dskin/archive/2020/07/05/13192489.html

什麼鬼,我的CPF快寫好了,你居然也要搞跨平臺UI框架?什麼Maui? 之前怎麼不早說要搞跨平臺UI框架呢?看到谷歌搞flutter眼紅了?明年年底發佈?又搞這種追別人屁股的爛事情。 什麼MVU模式?模仿Dart?用C#代碼直接寫UI的模式和我的CPF很像啊。 當初我考慮過XML,Json來描述UI ...


什麼鬼,我的CPF快寫好了,你居然也要搞跨平臺UI框架?什麼Maui? 之前怎麼不早說要搞跨平臺UI框架呢?看到谷歌搞flutter眼紅了?明年年底發佈?又搞這種追別人屁股的爛事情。

什麼MVU模式?模仿Dart?用C#代碼直接寫UI的模式和我的CPF很像啊。

當初我考慮過XML,Json來描述UI,但是我感覺這些都是多餘的累贅,而且還需要學習語法,感覺Xaml很啰嗦,如果有設計器的話,直接生成對應的UI代碼不是更直接?而且用XML、Json需要多消耗解析UI代碼的資源。

所以一開始我是模仿Winform直接用C#來描述的,不過Winform生成的代碼很冗長,直接看這種代碼很費勁,所以考慮優化代碼結構,看看能否有既可以直接運行生成UI,既可以直觀描述結構的

 

 1                             new Panel
 2                             {
 3                                 ToolTip="最大化",
 4                                 Name="max",
 5                                 Width = 30,
 6                                 Height = "100%",
 7                                 Children=
 8                                 {
 9                                     new Rectangle
10                                     {
11                                         Width=14,
12                                         Height=12,
13                                         StrokeStyle="2",
14                                         StrokeFill = "#fff"
15                                     }
16                                 },
17                                 Commands =
18                                 {
19                                     {
20                                         nameof(Button.MouseDown),//可以綁定事件和屬性通知
21                                         (s,e)=>
22                                         {
23                                             (e as MouseButtonEventArgs).Handled = true;
24                                             this.WindowState= WindowState.Maximized;
25                                         }
26                                     }
27                                 },
28                                 Bindings = //數據綁定
29                                 {
30                                     {
31                                         nameof(Border.Visibility),
32                                         nameof(Window.WindowState),
33                                         this,
34                                         BindingMode.OneWay,//直接使用Lambda表達式作為數據轉換器
35                                         a => (WindowState)a == WindowState.Maximized ? Visibility.Collapsed : Visibility.Visible
36                                     }
37                                 },
38                                 Triggers=
39                                 {
40                                     new Trigger(nameof(Panel.IsMouseOver), Relation.Me)//觸發器可以設置相對位置的其他元素的屬性
41                                     {
42                                         Setters =
43                                         {
44                                             {
45                                                 nameof(Panel.Background),
46                                                 "#fff"
47                                             }
48                                         }
49                                     }
50                                 },
51                             }

 

這種結構感覺還行吧,微軟的Maui的Mvu模式,感覺和我的很像,而且mvu的最終格式還沒確定。現在maui那邊定義的規則似乎是以方法為主,而我的是以屬性為主,稍微封裝幾個擴展方法也可以變成maui那樣的。

另外Mvu模式似乎不提供拖拽的設計器,只提供預覽而已。

 

CPF的不僅可以預覽,還可以拖拽,設置屬性,生成C#代碼。支持SVG顯示。

 

 

CPF不提供Xaml描述UI,另外CPF提供CSS來描述樣式,類似於Unity3D里的USS。

為什麼使用CSS來描述?因為CSS結構簡單,簡潔明瞭,方便對多個元素聲明屬性,也方便代碼復用。比Xaml里的樣式描述簡潔多了。學習成本低,主要會幾個常用的選擇器就行

 

* {
    FontFamily: 微軟雅黑; 
}

@keyframes buttonAnimationEnter {
    0% {
        Background: #1E9FFF;
    }

    100% {
        Background: rgb(75,178,255);
    }
}

#DropDownPanel TextBlock {
    MarginLeft: 5;
}

Button {
    Background: #1E9FFF;
    Foreground: #fff;
    BorderFill: null;
}

    Button[IsMouseOver=true] {
        Background: #1E9FFF;
        animation-name: buttonAnimationEnter;
        animation-duration: 0.2s;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
    }

    Button[IsPressed=true] {
        Background: rgb(30,159,255);
    }

CheckBox #indeterminateMark {
    Fill: #1E9FFF;
}

CheckBox #checkBoxBorder {
    Background: #fff;
    BorderFill: #1E9FFF;
}

CheckBox[IsChecked=true] #checkBoxBorder {
    Background: #1E9FFF;
    BorderFill: #1E9FFF;
}

CheckBox Polyline {
    StrokeFill: #fff;
}

 

簡化依賴屬性寫法

        /// <summary>
        /// 前景色
        /// </summary>
        [UIPropertyMetadata(typeof(ViewFill), "Black", UIPropertyOptions.AffectsRender)]
        public ViewFill Foreground
        {
            get { return (ViewFill)GetValue(); }
            set { SetValue(value); }
        }

簡化附加屬性寫法

        /// <summary>
        /// 獲取或設置一個值,該值指示一個子元素在父級 DockPanel 中的位置。 附加屬性
        /// </summary>
        public static Attached<Dock> Dock
        {
            get
            {
                return RegisterAttached(Controls.Dock.Left, (CpfObject obj, string propertyName, object defaultValue, object oldValue, ref object newValue) =>
                {
                    if (obj is UIElement element && element.Parent != null)
                    {
                        element.Parent.InvalidateMeasure();
                    }
                });
            }
        }

var dock=DockPanel.Dock(button)//取值
DockPanel.Dock(button,Dock.Left)//設置值

 

計算屬性

計算屬性來自Vue里的computed  可綁定,只讀屬性

當SelectValue或者TextSize屬性值變化之後導致TestComputedProperty屬性值變化,有提供屬性通知

        [Computed(nameof(SelectValue), nameof(TextSize))]
        public string TestComputedProperty
        {
            get { return SelectValue == null ? "" : SelectValue.ToString() + TextSize; }
        }

 

 

CPF已經完成了Windows,Mac和Linux,PC端的跨平臺,移動端的還在計劃中。

 CPF、  Avalonia、 Maui一些對比

Avalonia是一個開源的跨平臺的UI框架,用Xaml描述UI的。

 

  CPF Avalonia Maui
最低框架依賴 .net standard2.0/netcore2.0  | net4(支持XP .net standard2.0/netcore2.0 Net6
當前狀態 可用 可用 未發佈,需要明年年底
獨立發佈的程式包大小

較小,依賴少,附帶dll少,Windows端手動裁剪可以到20多M,包含運行時。

如果用net4版,可以更小,不過只能Windows端

稍微大一些,附帶的dll多

估計會比較大,畢竟高版本的框架。

功能也更多。

UI開發模式 C#+CSS Xaml Xaml MVU(C#)
支持平臺 Windows,Mac,Linux,移動端暫時不支持 Windows,Mac,Linux,移動端支持 PC和移動端都支持
一些細節問題 多平臺支持中文輸入法,暫時不支持觸摸事件,暫時不支持硬體加速 輸入法支持度不夠,支持觸摸事件,支持硬體加速 支持
設計器 預覽和拖拽 預覽 xaml預覽和拖拽,mvu預覽

 

 

 

 

佈局控制項

 

 

 

運行的時候,查看元素和調試

cpf元素查看和調試

 

一份代碼,兩個目標框架支持,一部分代碼通過編譯條件符來區分

 

 我也不敢說我的CPF有多完善,至少常用控制項基本都有了,寫寫小工具,小應用還是可以的。之後會進一步完善。如果你想使用CPF,必須用VS2019,才能安裝插件來做設計器預覽,才能發佈Netcore3。

dll免費,可以商業開發。

 

官網:http://cpf.cskin.net/

 

 以後會陸續發佈一些cpf的教程

 

 

 

 

 

 


您的分享是我們最大的動力!

更多相關文章
  • 方法重載(Overload): 兩同(同一個類、同一個方法名)三不同(參數列表不同:;類型、個數、順序) 返回值不同,構成重載嗎? No 形參名稱不同,構成重載嗎? No 方法重寫(0verride): 子類定義一個和父類方法名,參數完全相同的方法。 =: 方法名保持一致 >=: 子類許可權修飾符可以 ...
  • 上篇文章提到FFmpeg解決項目中視頻和語音問題,說道C#和FFmpeg不得不提的2個類庫。1、Xabe.FFmpeg簡單查看了下源碼和demo,發現基於ffmpeg.exe的命令行參數進行處理。2、FFmpeg.AutoGen 把C語言對外API和類型翻譯成C#的API和對象。看了一下這個源碼生成... ...
  • 只讀成員 private struct Point { public Point(double x, double y) { X = x; Y = y; } private double X { get; set; } private double Y { get; set; } private r ...
  • 在斷斷續續的瞭解c#中,最先想到的就是ASP.NET開發了,在C2中應用也慢慢開始比較廣泛了,比如Covenant,有跨平臺的特性,值得看一看。 ...
  • 基礎概念 Microsoft中間語言(MSIL),也成為通用中間語言(CIL),是一組與平臺無關的指令,由特定於語言的編譯器從源代碼生成。MSIL是獨立於平臺的,因此,他可以在任何公共語言基礎架構支持特定的環境上執行。 通過JIT編譯器將MSIL轉換為特定電腦環境的特定機器代碼。這是在執行MSIL ...
  • 項目背景: 工作之餘兼職一家公司(方向是工業4.0)給做IM系統,主要功能包括:文字、 圖片、文件傳輸、遠程協助、視頻語音等等。這些功能都是基於群會話, 比如工廠操作工人遇到問題,請求遠程專家,這個初級專家不能解決問題,會邀請一個高級專家進來解決。開發過程中主要遇到的問題是視頻和語音這一塊,像其他的... ...
  • 一、前言 回顧:認證授權方案之授權初識 從上一節中,我們在對授權系統已經有了初步的認識和使用,可以發現,asp.net core為我們提供的授權策略是一個非常強大豐富且靈活的認證授權方案,能夠滿足大部分的授權場景。 在ConfigureServices中配置服務:將授權服務添加到容器 public ...
  • 寫在前面 Docker作為開源的應用容器引擎,可以讓我們很輕鬆的構建一個輕量級、易移植的容器,通過Docker方式進行持續交付、測試和部署,都是極為方便的,並且對於我們開發來說,最直觀的優點還是解決了日常開發中的環境配置與部署環境配置上的差異所帶來的種種疑難雜症,從此推脫產品的措辭也少了——“我電腦 ...
一周排行
  • 比如要拆分“呵呵呵90909086676喝喝999”,下麵當type=0返回的是中文字元串“呵呵呵,喝喝”,type=1返回的是數字字元串“90909086676,999”, private string GetStrings(string str,int type=0) { IList<strin ...
  • Swagger一個優秀的Api介面文檔生成工具。Swagger可以可以動態生成Api介面文檔,有效的降低前後端人員關於Api介面的溝通成本,促進項目高效開發。 1、使用NuGet安裝最新的包:Swashbuckle.AspNetCore。 2、編輯項目文件(NetCoreTemplate.Web.c ...
  • 2020 年 7 月 30 日, 由.NET基金會和微軟 將舉辦一個線上和為期一天的活動,包括 微軟 .NET 團隊的演講者以及社區的演講者。本次線上大會 專註.NET框架構建微服務,演講者分享構建和部署雲原生應用程式的最佳實踐、模式、提示和技巧。有關更多信息和隨時瞭解情況:https://focu... ...
  • #abp框架Excel導出——基於vue #1.技術棧 ##1.1 前端採用vue,官方提供 UI套件用的是iview ##1.2 後臺是abp——aspnetboilerplate 即abp v1,https://github.com/aspnetboilerplate/aspnetboilerp ...
  • 前言 本文的文字及圖片來源於網路,僅供學習、交流使用,不具有任何商業用途,版權歸原作者所有,如有問題請及時聯繫我們以作處理。 作者:碧茂大數據 PS:如有需要Python學習資料的小伙伴可以加下方的群去找免費管理員領取 input()輸入 Python提供了 input() 內置函數從標準輸入讀入一 ...
  • 從12年到20年,python以肉眼可見的趨勢超過了java,成為了當今It界人人皆知的編程語言。 python為什麼這麼火? 網路編程語言搜索指數 適合初學者 Python具有語法簡單、語句清晰的特點,這就讓初學者在學習階段可以把精力集中在編程對象和思維方法上。 大佬都在用 Google,YouT ...
  • 在社會上存在一種普遍的對培訓機構的學生一種歧視的現象,具體表現在,比如:當你去公司面試的時候,一旦你說了你是培訓機構出來的,那麼基本上你就涼了,那麼你瞞著不說,然後又通過了面試成功入職,但是以後一旦在公司被髮現有培訓經歷,可能會面臨被降薪,甚至被辭退,培訓機構出來的學生,在用人單位眼裡就是能力低下的 ...
  • from typing import List# 這道題看了大佬寫的代碼,經過自己的理解寫出來了。# 從最外圍的四周找有沒有為O的,如果有的話就進入深搜函數,然後深搜遍歷# 判斷上下左右的位置是否為Oclass Solution: def solve(self, board: List[List[s ...
  • import requests; import re; import os; # 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, li ...
  • import requests; import re; import os; import parsel; 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537. ...