DevExpress Winforms Controls 內(nèi)置140多個(gè)UI控件和庫(kù)，完美構(gòu)建流暢、美觀(guān)且易于使用的應(yīng)用程序。DevExpress WinForm v20.1全新發(fā)布，想要體驗(yàn)？點(diǎn)擊下載>>

在很多時(shí)候，我們做一些非常規(guī)化的界面的時(shí)候，往往需要?jiǎng)?chuàng)建一些用戶(hù)控件，在其中繪制好一些基礎(chǔ)的界面塊，作為后續(xù)重復(fù)使用的一個(gè)單元，用戶(hù)控件同時(shí)也可以封裝處理一些簡(jiǎn)單的邏輯。在開(kāi)發(fā)Winform各種類(lèi)型項(xiàng)目，我都時(shí)不時(shí)需要定制一些特殊的用戶(hù)控件，以方便在界面模塊中反復(fù)使用。我們一般是在自定義的用戶(hù)控件里面，添加各種各樣的界面控件元素，或者封裝一些特殊的函數(shù)處理共外部調(diào)用等。本篇隨筆主要介紹基于DevExpress的Winform開(kāi)發(fā)經(jīng)驗(yàn)，介紹一個(gè)類(lèi)似看板信息的用戶(hù)控件，并在TabelLayout和StackLayout布局控件中進(jìn)行展示。

一、用戶(hù)控件界面的處理

在偶爾的一個(gè)場(chǎng)合下，看到一個(gè)牙醫(yī)管家的軟件界面做的非常不錯(cuò)，其中有一個(gè)預(yù)約列表的界面感覺(jué)非常好，如下界面所示。

其中它的每個(gè)用戶(hù)信息列表里面，都是一個(gè)綜合信息的展示，非常直觀(guān)，估計(jì)應(yīng)該是用戶(hù)自定義控件做的。

在其中里面，有不同的字體，各式圖標(biāo)，以及內(nèi)容的信息展示， 這個(gè)我在DevExpress的列表控件里面，沒(méi)有看到可以如此定義列表內(nèi)容的，在DevExpress的GridView里面有一個(gè)看板模板的定義有點(diǎn)接近，但是試了一下，可調(diào)性不好，于是放棄尋求其他接近方案，玩遍DevExpress的控件后，發(fā)現(xiàn)最好的方式應(yīng)該是自定義用戶(hù)控件的方式來(lái)解決這個(gè)界面問(wèn)題。

花了一點(diǎn)時(shí)間，制作了一個(gè)用戶(hù)控件，在其中添加一個(gè)LayoutControl方便控制布局，添加一些標(biāo)簽以及設(shè)置了一些圖標(biāo)，得到下圖所示。

左側(cè)的顏色條由于使用Group控件，因此寬度暫時(shí)無(wú)法調(diào)整，如果介意大小，我們可以在其中在創(chuàng)建一個(gè)LayoutControl，然后在其中方式內(nèi)容即可。

我們改變布局，然后添加一個(gè)顏色塊，得到類(lèi)似界面如下所示。

我們來(lái)定義一下用戶(hù)控件的源碼部分，修改其中源碼，增加對(duì)應(yīng)的屬性，方便動(dòng)態(tài)設(shè)置用戶(hù)控件的相關(guān)屬性，如顏色塊，項(xiàng)目背景色，以及綁定的對(duì)象信息等內(nèi)容。

然后在界面加載完畢后，設(shè)置對(duì)應(yīng)的信息和顏色信息，如下代碼所示。

/// 

/// 窗口加載事件
/// 
/// 
/// 
private void UserItemControl_Load(object sender, EventArgs e)
{
BindData();
RefreshColor();
}

/// 

/// 根據(jù)用戶(hù)定義信息，顯示不同的內(nèi)容
/// 
private void BindData()
{
if(this.UserItemInfo != null)
{
var info = this.UserItemInfo;
this.lblCustomerName.Text = info.CustomerName;
this.lblMobile.Text = info.Mobile;
this.lblReceiver.Text = info.Receiver;
this.lblRecordDate.Text = info.RecordDate;
this.lblRecordNo.Text = info.RecordNo;
this.lblDealType.Text = "";
this.lblStar.ImageOptions.ImageIndex = GetStarImageIndex(info.Stars);
if (!info.IsVip)
{
this.lblVip.Visibility = LayoutVisibility.Never;
}
}
}

/// 

/// 刷新背景色
/// 
private void RefreshColor()
{
if (ItemBlockColor != Color.Empty)
{
this.itemColor.AppearanceItemCaption.BackColor = ItemBlockColor;
}
if (ItemBackColor != Color.Empty)
{
layoutControl1.BackColor = ItemBackColor;
}
}

但我們鼠標(biāo)浮動(dòng)在項(xiàng)目上或者離開(kāi)的時(shí)候，或者單擊某項(xiàng)的時(shí)候，我們變換下顏色，方便區(qū)分顯示。

private void layoutControl1_MouseLeave(object sender, EventArgs e)
{
if (!this.IsSelected)
{
this.layoutControl1.ResetBackColor();
}
}

private void layoutControl1_MouseEnter(object sender, EventArgs e)
{
if (!this.IsSelected)
this.layoutControl1.BackColor = Color.FromArgb(192, 255, 192);
}

private void layoutControl1_Click(object sender, EventArgs e)
{
this.IsSelected = true;
OnItemClick?.Invoke(this, e);
}

完成這些后，我們需要在窗體上對(duì)內(nèi)容進(jìn)行初始化。

最后我們看看界面的效果如下所示

或者下面這樣的界面布局。

如果嫌棄邊框紅色不好看，我們 可以修改邊框?yàn)榛疑{(diào)一點(diǎn)的，這樣總體看起來(lái)效果如下所示。

得到和我們最終需要的界面很接近了。

一般除了懸浮鼠標(biāo)顏色變化外，控件單擊后，我們會(huì)設(shè)置不同的背景色，以示區(qū)分。

/// 

/// 是否選中節(jié)點(diǎn)
/// 
public bool IsSelected
{
get
{
return m_IsSelected;
}
set
{
m_IsSelected = value;

this.ItemBackColor = value ? Color.FromArgb(255, 255, 192) : Color.Transparent;
this.RefreshColor();
}
}

一般列表界面中，我們除了支持鼠標(biāo)移動(dòng)、單擊變色的效果外，我們還希望支持通過(guò)鍵盤(pán)箭頭上下鍵進(jìn)行上下瀏覽項(xiàng)目。我們?nèi)绻枰褂面I盤(pán)的按鍵，需要設(shè)置窗體的KeyPreview屬性為T(mén)rue，

然后跟蹤按鍵的事件即可，如下所示。

this.KeyPreview = true;
this.KeyUp += FrmKanBan_KeyUp;

按鍵事件捕捉處理如下所示，主要就是判斷選中的用戶(hù)控件，并對(duì)面板的子控件的選中效果進(jìn)行處理。

private void FrmKanBan_KeyUp(object sender, KeyEventArgs e)
{
//單擊鼠標(biāo)或者切換按鍵，會(huì)觸發(fā)用戶(hù)控件獲得selectItem對(duì)象，可以進(jìn)行箭頭上下移動(dòng)
if (selectItem != null)
{
var panel = selectItem.Parent;
if (panel != null)
{
//獲取操作項(xiàng)的索引值
int oldIndex = panel.Controls.IndexOf(selectItem);
if (e.KeyCode == Keys.Up)
{
if (oldIndex > 0)
{
//通過(guò)序號(hào)獲得新的控件，并單擊它觸發(fā)選擇事件
var newCtrl = panel.Controls[oldIndex - 1];
Item_OnItemClick(newCtrl, new EventArgs());
}
}
else if (e.KeyCode == Keys.Down)
{
if (oldIndex < (panel.Controls.Count - 1)) { //通過(guò)序號(hào)獲得新的控件，并單擊它觸發(fā)選擇事件 var newCtrl = panel.Controls[oldIndex + 1]; Item_OnItemClick(newCtrl, new EventArgs()); } } } } }

界面中用戶(hù)控件的切換選中效果，需要先清空之前所有的選擇，然后在設(shè)置新的選中控件，所以還需要對(duì)控件觸發(fā)單擊事件進(jìn)行處理，如下所示。

/// 

/// 選中的用戶(hù)控件對(duì)象實(shí)例
/// 
UserItemControl selectItem = null;
/// 

/// 單擊用戶(hù)控件，觸發(fā)清除所有標(biāo)記后，再次設(shè)置選中的項(xiàng)目標(biāo)記
/// 
private void Item_OnItemClick(object sender, EventArgs e)
{
//清空所有控件的選中標(biāo)記
var panel = (PanelControl)((Control)sender).Parent;
foreach (Control ctrl in panel.Controls)
{
var item = ctrl as UserItemControl;
if(item != null)
{
item.IsSelected = false;
}
}

//設(shè)置選中控件
selectItem = ((UserItemControl)sender);
selectItem.IsSelected = true;
this.Text = selectItem.UserItemInfo.CustomerName + "-選中";

//如果在面板中遮擋，移動(dòng)滾動(dòng)條，可以查看到完整用戶(hù)控件界面
panel.ScrollControlIntoView(selectItem);
}

如下效果所示。

二、TabelLayout和StackLayout布局控件的介紹和使用

我們?cè)谧鯳inform開(kāi)發(fā)的時(shí)候，一般知道，微軟傳統(tǒng)Winform的布局提供兩個(gè)控件，F(xiàn)lowLayoutPanel和TableLayoutPanel，一個(gè)是流式布局，一個(gè)是表格布局，各有各的用處。流式布局主要就是按照順序挨個(gè)放置控件，表格布局主要按照表格的定義的行列單元格，嚴(yán)格放置控件，表格單元格控制強(qiáng)度更大，而且控件具有拉伸效果。

對(duì)于DevExpress，我們一般還是傾向于采用它提供給的控件來(lái)做界面，可以很好融合它的皮膚效果，相對(duì)于Winform傳統(tǒng)兩個(gè)布局控件，DevExpress提供了兩個(gè)封裝效果相當(dāng)?shù)目丶季諷tackPanel和 TablePanel，他們的效果實(shí)現(xiàn)大同效果，不過(guò)調(diào)用的接口不同。

對(duì)于兩個(gè)控件，我們希望里面的內(nèi)容自動(dòng)出現(xiàn)滾動(dòng)條，那么設(shè)置屬性AutoScroll 為T(mén)rue即可，如下代碼所示。

panel.AutoScroll = true;

 而StackPanel另外需要LayoutDirection，也就是控件順序展現(xiàn)的方式，如下代碼所示。

panel.LayoutDirection = StackPanelLayoutDirection.TopDown;

使用StackPanel面板來(lái)測(cè)試展示用戶(hù)控件列表的界面代碼如下所示。

/// 

/// 使用StackPanel對(duì)用戶(hù)控件布局進(jìn)行處理
/// 
private void InitPanel(StackPanel panel)
{
panel.AutoScroll = true;//面板自動(dòng)出現(xiàn)滾動(dòng)條
panel.LayoutDirection = StackPanelLayoutDirection.TopDown;//從上往下展示
panel.Controls.Clear();//清空界面

var list = GetInfoList(); //獲取用戶(hù)控件綁定的對(duì)象信息列表
for (int i = 0; i < list.Count; i++) { //定義用戶(hù)控件實(shí)例 var item = new UserItemControl(); item.UserItemInfo = list[i];//綁定對(duì)象信息 item.Anchor = AnchorStyles.Top | AnchorStyles.Left | AnchorStyles.Right; item.ItemBlockColor = colors[i %10]; //變化顏色 item.OnItemClick += Item_OnItemClick;//觸發(fā)選中事件 panel.Controls.Add(item); } }

對(duì)于表格布局TablePanel控件來(lái)說(shuō)，使用初始化控件的方式也差不多，不過(guò)有個(gè)別地方注意即可。

/// 

/// 使用TablePanel對(duì)用戶(hù)控件布局進(jìn)行處理
/// 
private void InitPanel(TablePanel panel)
{
panel.AutoScroll = true;//面板自動(dòng)出現(xiàn)滾動(dòng)條
panel.Controls.Clear();//清空界面
panel.Rows.Clear();//清空行
panel.Columns.Clear();//清空列

//添加列定義（增加一個(gè)列即可）
panel.Columns.Add(new TablePanelColumn(TablePanelEntityStyle.Relative, 55F));
var list = GetInfoList(); //獲取用戶(hù)控件綁定的對(duì)象信息列表
for (int i = 0; i < list.Count; i++) { //定義行信息 panel.Rows.Add(new TablePanelRow(TablePanelEntityStyle.AutoSize, 100F)); //定義用戶(hù)控件實(shí)例 var item = new UserItemControl(); item.UserItemInfo = list[i]; //定義拉伸效果 item.Anchor = AnchorStyles.Top | AnchorStyles.Left | AnchorStyles.Right; item.ItemBlockColor = colors[i % 10]; //變化顏色 item.OnItemClick += Item_OnItemClick;//觸發(fā)選中事件 //先添加控件到面板集合中 panel.Controls.Add(item); //設(shè)置控件的單元格位置 panel.SetCell(item, i, 0); } //添加多一行，確保布局 panel.Rows.Add(new TablePanelRow(TablePanelEntityStyle.AutoSize, 100F)); }

添加控件的時(shí)候，需要注意下面的代碼，才能正常展示控件信息，否則無(wú)法看到用戶(hù)控件。

//先添加控件到面板集合中
panel.Controls.Add(item);
//設(shè)置控件的單元格位置
panel.SetCell(item, i, 0);

最后對(duì)比下效果，左邊是TablePanel，右邊是StackPanel展現(xiàn)出來(lái)的效果。

以上就是界面如何在DevExpress開(kāi)發(fā)中使用各種用戶(hù)控件進(jìn)行用戶(hù)控件的創(chuàng)建、以及實(shí)現(xiàn)鼠標(biāo)進(jìn)入、移出、單擊的不同效果，以及實(shí)現(xiàn)鍵盤(pán)上下箭頭按鍵的事件選中效果，并介紹DevExpress中兩個(gè)布局控件TabelPanel和StackPanel的正常使用，達(dá)到展示控件信息的作用。

本文轉(zhuǎn)載自

DevExpress技術(shù)交流群2：775869749      歡迎一起進(jìn)群討論