1. 程式人生 > >造輪子了!NETCore跨平臺UI框架,CPF

造輪子了!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系統下還不能輸入中文,有沒有猛男賜教一下,怎麼呼叫輸入法,開啟關閉輸入法和控制輸入法候選詞位置

我感覺模板設計的不夠好,還有資料繫結還可以優化一下。各位有什麼想法和意見說說。

 

CPF