觸控式平鋪UI

---

立即下載DevExpress WinForms

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

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

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

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

• 觸摸用戶界面模式

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

• 觸控式滾動

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

• Skins

 使用現(xiàn)代的DevExpress皮膚(如“Office 2013”和更新的)，因為它們提供“clean”和平坦的外觀。

• 隱藏控件邊界

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

• Glyph Skinning

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

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

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

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

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

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

導航區(qū)

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

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

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

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

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

模塊切換

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

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

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

附加組件

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

• 按鈕和菜單

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

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

• 飛出和彈出式窗口

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

• 留言

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

• 通知

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

• 表格布局

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

• 啟動畫面

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

• 分割容器

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

• 輔助容器

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

自動生成UI

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

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