.NET??Smobiler的復(fù)雜控件的由來與創(chuàng)造
存在意義
Smobiler的復(fù)雜控件即利用自定義控件的方式組合控件,來使控件成為一個有機整體,里面的控件可相互協(xié)作交互,并使其達(dá)到高可用。
在Smobiler中有許多基礎(chǔ)控件,TextBox文本輸入框控件可以調(diào)用輸入法在界面上自由輸入文字,Image圖片顯示控件可以在界面的任意位置顯示圖片,Label文本顯示控件可以在界面的任意位置顯示文本,Panel容器控件可存放其他控件。這些控件都是單獨的功能,而我們設(shè)計界面不可能只有使用一個控件,這時我們就需要組合相同與不同的控件來為我們服務(wù)。比如需要一個可顯示圖片并且圖片下方有文字注釋,并且當(dāng)點擊圖片時可觸發(fā)點擊事件來跳轉(zhuǎn)另一個詳細(xì)的介紹界面,此時就需要使用Panel、Image、Label這些基礎(chǔ)的控件來組合使用。
那么問題來了,當(dāng)我同一個界面需要多次使用上面的Image組合控件,我是否需要一次又一次的手動組合控件呢?那我整個項目中不同的界面中又需要無數(shù)次的使用上面的Image組合控件,是否需要做無數(shù)次的相同工作?答案是:并不需要!Smobiler中有自定義控件的功能,顧名思義自定義控件就是用戶可根據(jù)自己的需要定制自己的控件,自定義的控件可在工具箱中顯示。
當(dāng)你在界面中需要運用多個相同的或者不同的控件,組合成一個各個控件相互關(guān)聯(lián)的大整體,并且實現(xiàn)了高復(fù)用。你可以設(shè)計方法,設(shè)計屬性,設(shè)計回調(diào)事件,使用這些隨心所欲控制自己定制的復(fù)雜控件。
可實現(xiàn)的場景
復(fù)雜控件即可滿足多種多樣復(fù)雜場景。
下面以一部分Smobiler官方推出的復(fù)雜控件為例:
AlbumView控件 —— 相冊控件,可設(shè)置縮略圖點擊后查看原圖。用戶可使用該控件展示圖片。AlbumView控件主要由Panel、Image、PageView、Button、FontIcon基礎(chǔ)控件組合而成。
ImageButton控件 —— 含圖片的按鈕控件,可點擊圖片觸發(fā)點擊事件。
ImageButton控件主要由Panel、Image、Label基礎(chǔ)控件組合而成。
ListMenuView控件 —— 列表菜單控件,可快速顯示列表信息。
ListMenuView控件主要由Panel、Label、ImageButton、ImageEx組成。
Numeric控件 —— 數(shù)量控件。即可輸入數(shù)量,又可以點擊按鈕增加或減少數(shù)量。Numeric控件主要由TextBox、FontIcon組成。
Poplist控件 —— 彈出列表選擇控件,可在選擇在界面彈出選擇框選擇相應(yīng)的信息。Poplist控件主要由Panel、Label、FontIcon、Button組成。
Radiogroup控件 —— 選擇控件,同樣功能不同樣式的選擇控件。RadioGroup控件主要由CheckBox、Label組成。
RatingBar控件 —— 評價控件,評分條控件可進(jìn)行評價打分。RatingBar控件主要由Panel、FontIcon組成
TableView控件 —— 表格控件,可以表格的樣式顯示信息。TableView控件主要由Panel、Button、Image、CheckBox、Label、TextBox組成。
ToolBar控件 —— 工具欄控件,此控件可應(yīng)用于底部點擊顯示不同的界面。ToolBar控件主要由Panel、ImageEx、Label組成。
施展創(chuàng)造
樣式
下面我們就仿照Numeric控件的樣式不使用設(shè)計器以純代碼的方式做一個復(fù)雜控件。
首先我們創(chuàng)建一個新的類取名為Numeric,如下圖:
之后代碼中取名為數(shù)量控件。
/// <summary> /// 數(shù)量控件 /// </summary> //下面代碼可使控件顯示在工具箱中。 [System.ComponentModel.ToolboxItem(true), System.ComponentModel.ToolboxItemFilter("Smobiler.Core.Controls")] //取名,繼承MobileLayoutControl布局控件、IMobileBindableControl數(shù)據(jù)綁定控件接口 public class Numeric : MobileLayoutControl, IMobileBindableControl { }
接下來我們就需要設(shè)計顯示Numeric了。Numeric控件時由Panel、FontIcon、TextBox組成,先創(chuàng)建下列控件。
//Numeric中間的輸入框 private TextBox txtValue; //Numeric左邊的減少的圖標(biāo) private FontIcon fontMinus; //Numeric右邊的增加的圖標(biāo) private FontIcon fontPlus; //使左邊圖標(biāo)可點擊 private Panel Minus; //使右邊圖標(biāo)可點擊 private Panel Plus;
主要控件創(chuàng)建完畢后,就需要設(shè)計這個基礎(chǔ)控件的顯示樣式了。
/// <summary> /// 初始化Numeric類的一個新實例 /// </summary> public Numeric() { //本界面使用相對布局的方式,可按照自己順手方式。 this.Layout = LayoutPosition.Relative; //最外層添加一個Panel裝所有的控件。 Panel NPanel = new Panel(); NPanel.Layout = LayoutPosition.Relative; //numeric需要橫向排列設(shè)置容器主軸方向為Row。 NPanel.Direction = LayoutDirection.Row; //在相對布局下使用Flex屬性撐滿界面 NPanel.Flex = 1; NPanel.Width = 0; //設(shè)計左邊可點擊的Panel樣式 Minus = new Panel(); Minus.Touchable = true; Minus.Layout = LayoutPosition.Relative; Minus.Flex = 1; Minus.Height = 0; Minus.Padding = new Padding(5, 0, 0, 0); Minus.BackColor = System.Drawing.Color.Transparent; //設(shè)計左邊的減少的圖標(biāo)的樣式 fontMinus = new FontIcon { FontName = FontIconName.FontAwesome, ResourceID = "minus-circle", ForeColor = System.Drawing.Color.DarkGray, Width = 0, Flex = 1 }; //設(shè)計完樣式之后把圖標(biāo)放入Panel容器中,即右邊點擊圖標(biāo)部分即完成了。 Minus.Controls.Add(fontMinus); //以同樣的方式設(shè)計右邊的點擊圖標(biāo)。 ....... ....... Plus.Controls.Add(fontPlus); //設(shè)計中間的TextBox的樣式。 txtValue = new TextBox(); txtValue.Text = mValue.ToString(); //相對布局中設(shè)置txtValue的Flex為3,則對比Minus與Plus的1,表示txtValue為同一容器中大小占據(jù)3的份額,Minus與Plus個占據(jù)1. txtValue.Flex = 3; txtValue.Height = 0; txtValue.FontSize = 18; txtValue.KeyboardType = KeyboardType.Numeric; txtValue.HorizontalAlignment = HorizontalAlignment.Center; txtValue.BackColor = System.Drawing.Color.Transparent; //所有的樣式都設(shè)計完了,這時就可以組合在一起了。 NPanel.Controls.AddRange(new MobileControl[] { Minus, txtValue, Plus }); //自定義控件需要添加在SmobilerUserControl。 var mControls = new MobileControlCollection(); //注冊控件的集合 base.RegisterControls(mControls); mControls.Add(NPanel); }
內(nèi)部功能
此時與Numeric相同的樣式即實現(xiàn)了。但是相同的樣式并不能滿足需求,我們還需要實現(xiàn)里面的邏輯,使之成為有功能的Numeric。
實現(xiàn)panel中的點擊事件:
Minus.Press += (obj, args) => { if (string.IsNullOrEmpty(txtValue.Text.Trim()) == false) { decimal inputValue = 0; if (decimal.TryParse(txtValue.Text, out inputValue) == true) { Value = inputValue - Variation; initValue = Value; } else { Value = Value; } } else{ Value = mMinValue; } };
實現(xiàn)txtValue原本的事件:
txtValue.TextChanged += (obj, args) => { ...... }; txtValue.TouchEnter += (obj, args) => { ...... }; txtValue.TouchLeave += (obj, args) => { ...... };
屬性
添加Numeric的屬性Value,可通過屬性設(shè)置顯示的值。
private decimal mValue = 0; /// <summary> /// 設(shè)置控件顯示的默認(rèn)值 /// </summary> [Browsable(true), Category("Behavior"), DefaultValue(typeof(decimal), "0"), Description("顯示默認(rèn)值")] public decimal Value { get { return mValue; } set { //添加判斷 value = (decimal)Math.Round(value, mDecimals); if (this.Parent != null && this.Parent.Controls.Contains(this) == true && (value > mMaxValue)) value = MaxValue; else if (this.Parent != null && this.Parent.Controls.Contains(this) == true && (value < mMinValue)) value = MinValue; if (initValue==value) { TextChanged = false; mValue = value; } else if (mValue != value||TextChanged==true) { TextChanged = false; mValue = value; //if (ValueChanged != null) //ValueChanged.Invoke(this, new EventArgs()); } //給txtValue賦值顯示。 txtValue.Text = mValue.ToString("f" + Decimals); } }
方法
可以上面的方式添加不同的屬性。
也可添加控件的方法:
/// <summary> /// 使控件獲取焦點。 /// </summary> public void Focus() { txtValue.Focus(); } /// <summary> /// 使控件失去焦點。 /// </summary> public void Blur() { txtValue.Blur(); }
綁定的屬性
另外可實現(xiàn)綁定的屬性,即可使用綁定的方式賦值
private string mDisplayMember = ""; /// <summary> /// 獲取和設(shè)置顯示綁定字段。 /// </summary> [Browsable(true), Category("Data"), Description("顯示綁定字段"), DefaultValue("")] public string DisplayMember { get { return mDisplayMember; } set { mDisplayMember = value; } } ....... [Browsable(false), DesignerSerializationVisibility(DesignerSerializationVisibility.Hidden)] public object BindDisplayValue { get { return Value; } set { if (value != null) { this.Value = decimal.Parse(value.ToString()); } } }
這樣一個大致的Numeric的樣式與功能有已實現(xiàn)完畢,重新生成項目即可在工具箱中找到它了。
知識拓展
控件中還可以添加事件,當(dāng)達(dá)到某些條件時觸發(fā)。
以Numeric中為例添加值改變時發(fā)生的事件。
/// <summary> /// 值改變時發(fā)生 /// </summary> [Description("值改變時發(fā)生")] public event EventHandler ValueChanged;
并且在Value值改動時使用該事件。
if (ValueChanged != null) ValueChanged.Invoke(this, new EventArgs());
結(jié)語
Smobiler的復(fù)雜控件既豐富Smobiler的控件,又可讓用戶根據(jù)自己的需要定制自己的控件提高了UI的多樣性,豐富用戶使用場景,其高可用又大大節(jié)約了用戶的開發(fā)時間。
到此這篇關(guān)于.NET Smobiler的復(fù)雜控件的由來與創(chuàng)造的文章就介紹到這了,更多相關(guān).NET Smobiler復(fù)雜控件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
.NET 6新特性試用Timer類之PeriodicTimer?
這篇文章主要介紹了.NET 6新特性試用Timer類之PeriodicTimer,PeriodicTimer與其他Timer需要創(chuàng)建事件回調(diào)不同,下,下面文章詳細(xì)介紹PeriodicTimer的使用方式,需要的朋友可以參考一下2022-02-02asp.net core使用DevExtreme20將int列轉(zhuǎn)為checkbox方法示例
這篇文章主要為大家介紹了asp.net core使用DevExtreme20將int列轉(zhuǎn)為checkbox方法示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08ASP.NET?Core使用Middleware設(shè)置有條件允許訪問路由
這篇文章主要介紹了ASP.NET?Core使用Middleware設(shè)置有條件允許訪問路由,文章圍繞主題相關(guān)資料展開學(xué)習(xí)內(nèi)容,需要的小伙伴可以參考一下,希望對你的學(xué)習(xí)有所幫助2022-02-02.Net Core HttpClient處理響應(yīng)壓縮詳細(xì)
.Net Core作為后起之秀直接將HttpClient扶正,并且在此基礎(chǔ)上改良了HttpClientFactory,接下來我們就來探究一下在.Net Core中使用HttpClient處理響應(yīng)壓縮的機制。,需要的朋友可以參考下面文章的具體內(nèi)容2021-09-09ASP.NET學(xué)習(xí)中常見錯誤總結(jié)歸納
這篇文章主要介紹了asp.net學(xué)習(xí)過程中碰到的常見錯誤的解決方法,通讀本篇對大家的學(xué)習(xí)或工作具有一定的價值,需要的朋友可以參考下2021-09-09ASP.NET Web API教程 創(chuàng)建域模型的方法詳細(xì)介紹
本文將介紹幾種常見的創(chuàng)建域模型的方法,有需要的朋友可以適當(dāng)?shù)膮⒖?/div> 2012-11-11利用ASP.NET技術(shù)動態(tài)生成HTML頁面
利用ASP.NET技術(shù)動態(tài)生成HTML頁面...2006-07-07最新評論