觸控式平鋪UI

---

立即下載DevExpress WinForms

觸摸應(yīng)用程序，有時(shí)被稱為混合應(yīng)用程序，是易于在桌面和觸摸設(shè)備上使用的應(yīng)用程序。構(gòu)建觸控應(yīng)用程序沒有嚴(yán)格的模式，除了應(yīng)用程序中的控制應(yīng)該針對(duì)觸控輸入進(jìn)行優(yōu)化。本節(jié)描述了一種常見的應(yīng)用程序模式，并展示了一些最適合創(chuàng)建此類應(yīng)用程序的DevExpress控件。

下圖展示了DevExpress演示中心提供的“Touch-Enabled Hybrid App”演示：

常用應(yīng)用程序設(shè)置

本節(jié)列舉了開發(fā)觸控應(yīng)用程序的有用技巧。

• 觸摸用戶界面模式

DevExpress為類提供了多個(gè)靜態(tài)屬性，這些屬性影響所有DevExpress控件的外觀和操作，這些屬性允許您僅通過一個(gè)設(shè)置修改整個(gè)應(yīng)用程序，對(duì)于混合型應(yīng)用程序，有一個(gè)靜態(tài)的屬性。啟用此設(shè)置后，所有UI元素將傾向于增加其大小和邊距，使最終用戶使用手指更舒適。例如下圖展示了應(yīng)用TouchUI模式和不應(yīng)用TouchUI模式時(shí)的Ribbon控件。

• 觸控式滾動(dòng)

將靜態(tài)屬性設(shè)置為Touch，以便使用觸摸手勢(shì)啟用滾動(dòng)。

• Skins

使用現(xiàn)代的DevExpress皮膚(如“Office 2013”和更新的)，因?yàn)樗鼈兲峁癱lean”和平坦的外觀。

• 隱藏控件邊界

通過禁用控件的BorderStyle或BorderVisibility屬性來隱藏不必要的邊框。

• Glyph Skinning

Glyph skin功能用這些項(xiàng)目的前色繪制項(xiàng)目圖標(biāo)，從而創(chuàng)建了一個(gè)平面的單色應(yīng)用程序外觀。

內(nèi)容區(qū)

客戶端區(qū)域會(huì)顯示終端用戶當(dāng)前選擇的模塊(UserControl)，用戶控件可以提供表格數(shù)據(jù)、圖表、量規(guī)、日歷、地形數(shù)據(jù)等。因此可以選擇適合您需要的任何控件。

雖然您可以啟用靜態(tài)的屬性來使任何DevExpress控件適合在支持觸摸的設(shè)備上使用，但一些控件最初是為適合混合應(yīng)用程序而設(shè)計(jì)的。例如，如果您希望控件顯示來自數(shù)據(jù)源的數(shù)據(jù)，請(qǐng)考慮使用其平鋪視圖而不是傳統(tǒng)的表格視圖。

除了顯示常規(guī)的磁貼，這個(gè)視圖還可以表示類似于Microsoft Office 365數(shù)據(jù)網(wǎng)格的數(shù)據(jù)(見下圖)。為此，將切換為“List”值。

另一個(gè)數(shù)據(jù)網(wǎng)格視圖，如下圖所示)有助于用類似Microsoft Windows Explorer的方式顯示記錄。

導(dǎo)航區(qū)

建議您使用基于磁貼的導(dǎo)航控件：由于它們的幾何形狀和大小，與傳統(tǒng)的工具欄按鈕相比，磁貼更容易用手指點(diǎn)擊。

允許您實(shí)現(xiàn)一個(gè)分層的基于tile的菜單，最多包含三個(gè)級(jí)別。內(nèi)置導(dǎo)航breadcrumbs可以幫助終端用戶跟蹤導(dǎo)航層次結(jié)構(gòu)中的當(dāng)前位置。

TileBar是 Tile Nav Pane 的簡(jiǎn)化版，沒有breadcrumb欄，并且支持水平和垂直布局模式。

將AccordionControl切換到 Hamburger Men模式，可以隱藏不需要的導(dǎo)航元素并節(jié)省屏幕空間。要啟用此模式，請(qǐng)使用。

提供靜態(tài)和動(dòng)態(tài)(動(dòng)畫)的Tile，可以排列成多列和多行。此控件適用于構(gòu)建簡(jiǎn)單的平鋪菜單。

模塊切換

對(duì)于多屏幕應(yīng)用程序請(qǐng)使用以下DevExpress內(nèi)容容器：

容器可幫助您實(shí)現(xiàn)單個(gè)文檔界面 (SDI)。它的子模塊沒有導(dǎo)航按鈕或選項(xiàng)卡標(biāo)題，要在模塊之間切換，您必須手動(dòng)更改屬性，提供內(nèi)置動(dòng)畫效果。

TransitionManager組件為任何內(nèi)容容器提供動(dòng)畫效果，當(dāng)容器更改其模塊時(shí)播放，使用導(dǎo)航框架時(shí)，不需要轉(zhuǎn)換管理器。

附加組件

下面列出了適合觸摸應(yīng)用程序的其他有用控件和組件的詳細(xì)信息。

• 按鈕和菜單

使用受 Windows 10 啟發(fā)的圓形按鈕的WindowsUIButtonPanel ，而不是標(biāo)準(zhǔn)的矩形按鈕。

使用相同的控件時(shí)您可以創(chuàng)建帶有內(nèi)置查看面板的簡(jiǎn)單工具欄。

• 飛出和彈出式窗口

使用彈出面板組件創(chuàng)建平面飛出和彈出窗口。

• 留言

利用彈出對(duì)話框控件創(chuàng)建現(xiàn)代通知消息。

• 通知

對(duì)于受 Windows 現(xiàn)代啟發(fā)的通知，請(qǐng)使用組件。

• 表格布局

對(duì)于任何其他 UI 類型，請(qǐng)使用在應(yīng)用程序模塊中有效地排列 UI 元素。可以根據(jù)給定的數(shù)據(jù)源自動(dòng)生成編輯UI。

• 啟動(dòng)畫面

利用啟動(dòng)屏幕管理器為您的應(yīng)用程序提供啟動(dòng)屏幕和等待表單。

• 分割容器

組件將表單空間分成兩個(gè)可調(diào)整大小的區(qū)域，您可以修改屬性，用展開/折疊按鈕代替拖放分割器。

• 輔助容器

單像素邊框支持面板捕捉和覆蓋調(diào)整大小功能。

自動(dòng)生成UI

DevExpress Template Gallery 提供了各種模板來快速啟動(dòng)應(yīng)用程序開發(fā)。對(duì)于支持觸摸的應(yīng)用程序，請(qǐng)轉(zhuǎn)到畫廊“WinForms Popular UI | UI-ready Form”部分，并選擇“Hybrid UI”類型。

對(duì)于數(shù)據(jù)管理應(yīng)用程序，您可以利用Scaffolding Wizard根據(jù)給定的數(shù)據(jù)源自動(dòng)生成功能齊全且可供使用的應(yīng)用程序。Wizard創(chuàng)建的應(yīng)用程序由多個(gè)相互連接的獨(dú)立模塊組成，并遵循。