造輪子了！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 下載

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/101984.html

標籤：.NET Core

上一篇：[Abp vNext 原始碼分析] - 12. 后臺作業與后臺作業者

下一篇：【ASP.NET Core學習】入門