CPF netcore跨平台UI框架
系列教程
CPF 入門教程 - 設計器和模板庫的使用(五)
注意:免費模式里無法使用這些功能。
先打開一個CPF設計視圖,右鍵可以看到模板庫選項。
其中模板庫里有控件組和控件模板兩種類型。
控件組:由Panel包裹的一組控件,並且Panel的IsGroup屬性為true。這個時候控件組可以看做一個整體,默認鼠標點擊子元素拖動是直接拖到Panel,需要按Alt才能通過鼠標拖動子元素或者直接用鍵盤調子元素的位置還是可以的。
控件組的意義在於,界面代碼的復用,同時兼顧各個元素可以獨立調整。比如做一個按鈕里面包含圖片和文字,一般開發者習慣編輯這個按鈕的模板來實現,但是需要同時支持圖片和文字,那就需要另外定義圖片屬性和文字屬性來實現單獨的設置,或者對圖片和文字定義綁定的字段。而且,如果不同地方需要復用這個代碼,同時可能還需要調整字體,圖片位置等等,這樣代碼量比較大。但是如果用控件組的話,就不需要這么麻煩了。自帶圖片和文字的控件組,如果沒有你想要的,你也可以自己設計控件組,添加到庫里,方便以后復用。
選中按鈕,右鍵,模板庫,控件組,圖片+文字,自動添加圖片和文字的控件。然后你可以單獨對圖片和文字設置,改顏色,位置...你想要怎么調整都行。
除了按鈕之外,像TabItem里,TreeViewItem里等等,很多地方都可以這樣使用,選項卡里加文字圖片關閉按鈕等等,都很方便。
控件模板:
這里的控件模板主要是InitializeComponent 整個方法。一般的UI代碼都寫在InitializeComponent,這樣可以方便子類覆蓋重寫。兼顧UI的自定義和功能的復用。一般簡單的UI代碼復用用控件組,復雜的就用控件模板來實現,已經需要數據綁定做列表,表格等等內容的時候也需要用模板來實現。
其中基礎控件模板里包含里幾乎所有內置控件的模板代碼。假如你需要對某個自帶控件深度定制的話,可以先VS添加個CPF控件,修改繼承類型為你需要重寫的。
雙擊打開設計界面,右鍵,模板庫,選擇基礎控件模板,找到對應的控件模板,VS會自動將內置控件的模板代碼添加到InitializeComponent ,這樣你就可以根據內置的控件模板代碼來改成你需要的,相當於WPF里的編輯模板副本,自動生成當前控件的模板。
添加自己設計的控件組和模板到庫
假如自己設計了個控件組,最底層的控件必須是Panel或者Panel的子類,把改成true,然后控件右鍵,就有添加到模板庫
填寫模板名稱,點確認添加就行了。會自動把預覽圖和代碼保存到模板庫里。
如果是模板的話,直接先選中當前設計器的根元素控件,右鍵,添加模板庫。 就會把整個InitializeComponent() 方法的代碼保存起來。
這些模板代碼和圖片保存在開發者工具目錄里的,你可以根據自己的需求對模板代碼修改。如果要修改圖片,需要關閉VS。
設計器里的一些使用細節
1,快速使用svg圖標,一般到 阿里巴巴的 www.iconfont.cn 搜索你要的圖標,找到圖標之后,選擇下載,然后選擇復制SVG代碼。這樣你就可以直接粘貼到設計界面里,會自動生成SVG元素。需要注意的是,不能支持顯示復雜的svg,復制的內容必須是<svg開頭和</svg>結尾的,如果svg內容太長,建議把svg保存到單獨的svg文件里。再通過svg控件引用這個svg文件。
使用svg文件資源
2.寫CSS的時候,記得要開啟關鍵詞提示
3.生成控件字段
設置好Name,然后把GenerateMember改成true
如果生成字段了,需要重命名,需要用VS的Ctrl+R+R來重命名才行。
4.生成事件命令方法
點開命令集合,
添加一個命令,EventName里選擇你要綁定的事件或者屬性變化通知,填好需要生成的MethodName方法名。點確定,就會自動生成對應的方法。