觸控式平鋪UI
觸摸應(yīng)用程序,有時被稱為混合應(yīng)用程序,是易于在桌面和觸摸設(shè)備上使用的應(yīng)用程序。構(gòu)建觸控應(yīng)用程序沒有嚴(yán)格的模式,除了應(yīng)用程序中的控制應(yīng)該針對觸控輸入進(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為WindowsFormsSettings類提供了多個靜態(tài)屬性,這些屬性影響所有DevExpress控件的外觀和操作,這些屬性允許您僅通過一個設(shè)置修改整個應(yīng)用程序,對于混合型應(yīng)用程序,有一個靜態(tài)的WindowsFormsSettingsTouchUIMode屬性。啟用此設(shè)置后,所有UI元素將傾向于增加其大小和邊距,使最終用戶使用手指更舒適。例如下圖展示了應(yīng)用TouchUI模式和不應(yīng)用TouchUI模式時的Ribbon控件。
- 觸控式滾動
將靜態(tài)WindowsFormsSettingsScrollUIMode屬性設(shè)置為Touch,以便使用觸摸手勢啟用滾動。
- Skins
使用現(xiàn)代的DevExpress皮膚(如“Office 2013”和更新的),因為它們提供“clean”和平坦的外觀。
- 隱藏控件邊界
通過禁用控件的BorderStyle或BorderVisibility屬性來隱藏不必要的邊框。
- Glyph Skinning
Glyph skin功能用這些項目的前色繪制項目圖標(biāo),從而創(chuàng)建了一個平面的單色應(yīng)用程序外觀。
內(nèi)容區(qū)
客戶端區(qū)域會顯示終端用戶當(dāng)前選擇的模塊(UserControl),用戶控件可以提供表格數(shù)據(jù)、圖表、量規(guī)、日歷、地形數(shù)據(jù)等。因此可以選擇適合您需要的任何控件。
雖然您可以啟用靜態(tài)的WindowsFormsSettings.TouchUIMode屬性來使任何DevExpress控件適合在支持觸摸的設(shè)備上使用,但一些控件最初是為適合混合應(yīng)用程序而設(shè)計的。例如,如果您希望Data Grid控件顯示來自數(shù)據(jù)源的數(shù)據(jù),請考慮使用其平鋪視圖而不是傳統(tǒng)的表格視圖。
除了顯示常規(guī)的磁貼,這個視圖還可以表示類似于Microsoft Office 365數(shù)據(jù)網(wǎng)格的數(shù)據(jù)(見下圖)。為此,將TileViewItemOptions.LayoutMode切換為“List”值。
另一個數(shù)據(jù)網(wǎng)格視圖,WinExplorer view(如下圖所示)有助于用類似Microsoft Windows Explorer的方式顯示記錄。
導(dǎo)航區(qū)
建議您使用基于磁貼的導(dǎo)航控件:由于它們的幾何形狀和大小,與傳統(tǒng)的工具欄按鈕相比,磁貼更容易用手指點擊。
TileNavPane允許您實現(xiàn)一個分層的基于tile的菜單,最多包含三個級別。內(nèi)置導(dǎo)航breadcrumbs可以幫助終端用戶跟蹤導(dǎo)航層次結(jié)構(gòu)中的當(dāng)前位置。
TileBar是 Tile Nav Pane 的簡化版,沒有breadcrumb欄,并且支持水平和垂直布局模式。
將AccordionControl切換到 Hamburger Men模式,可以隱藏不需要的導(dǎo)航元素并節(jié)省屏幕空間。要啟用此模式,請使用AccordionControl.ViewType。
Tile Control提供靜態(tài)和動態(tài)(動畫)的Tile,可以排列成多列和多行。此控件適用于構(gòu)建簡單的平鋪菜單。
模塊切換
對于多屏幕應(yīng)用程序請使用以下DevExpress內(nèi)容容器:
NavigationFrame容器可幫助您實現(xiàn)單個文檔界面 (SDI)。它的子模塊沒有導(dǎo)航按鈕或選項卡標(biāo)題,要在模塊之間切換,您必須手動更改NavigationFrame.SelectedPage屬性,提供內(nèi)置動畫效果。
TransitionManager組件為任何內(nèi)容容器提供動畫效果,當(dāng)容器更改其模塊時播放,使用導(dǎo)航框架時,不需要轉(zhuǎn)換管理器。
附加組件
下面列出了適合觸摸應(yīng)用程序的其他有用控件和組件的詳細(xì)信息。
- 按鈕和菜單
使用受 Windows 10 啟發(fā)的圓形按鈕的WindowsUIButtonPanel ,而不是標(biāo)準(zhǔn)的矩形按鈕。
使用相同的控件時您可以創(chuàng)建帶有內(nèi)置查看面板的簡單工具欄。
- 飛出和彈出式窗口
使用彈出面板組件創(chuàng)建平面飛出和彈出窗口。
- 留言
利用彈出對話框控件創(chuàng)建現(xiàn)代通知消息。
- 通知
對于受 Windows 現(xiàn)代啟發(fā)的通知,請使用Toast通知管理器組件。
- 表格布局
對于任何其他 UI 類型,請使用布局和數(shù)據(jù)布局控件在應(yīng)用程序模塊中有效地排列 UI 元素。數(shù)據(jù)布局控件可以根據(jù)給定的數(shù)據(jù)源自動生成編輯UI。
- 啟動畫面
利用啟動屏幕管理器為您的應(yīng)用程序提供啟動屏幕和等待表單。
- 分割容器
SplitContainerControl組件將表單空間分成兩個可調(diào)整大小的區(qū)域,您可以修改SplitContainerControlC.ollapsePanel屬性,用展開/折疊按鈕代替拖放分割器。
- 輔助容器
單像素邊框側(cè)面板支持面板捕捉和覆蓋調(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)用程序由多個相互連接的獨立模塊組成,并遵循MVVM模式。