碼上快樂

相關內容    簡體    繁體

DevExpress Applications<3>

本文轉載自   查看原文   2019-12-09 18:33   357    DevExpress/ 自學

Project

Template

Project Template Information

img

Template Name Template Description Controls and Components in Use
WinForms Common group
Blank Application 具有可換膚主表格的空應用程序。 XtraForm
Toolbar Based Application 具有可換膚主窗體的應用程序，該窗體包含三個欄-主菜單欄，常規工具欄和狀態欄。 XtraForm, BarManager
Ribbon Based Application 具有功能區感知形式的應用程序，用於封裝功能區本身。 RibbonForm, RibbonControl, RibbonStatusBar
Tabbed UI Application 具有選項卡式主窗體的應用程序，該應用程序實現流行的Web瀏覽器中的Tab UI。 TabForm
WinForms Business Solutions group
Word Processing Application Microsoft Word啟發的應用程序。 RichEditControl, RibbonControl, RibbonForm
Scheduling Application 受 Microsoft Outlook啟發的應用程序。 SchedulerControl, NavBarControl, DateNavigator, RibbonControl, RibbonForm
Spreadsheet Application 具有Ribbon UI的電子表格應用程序。 SpreadsheetControl, RibbonControl, RibbonForm
PdfViewer Applicaiton 基於功能區UI的應用程序，用於瀏覽.PDF文件。 PdfViewer, RibbonControl, RibbonForm
Map Application 具有Ribbon UI的地圖瀏覽器。 MapControl, RibbonControl, RibbonForm
WinForms Popular UIs group
Grid Based UI 具有表格數據表示的簡單數據編輯應用程序。 GridControl, RibbonControl, RibbonForm
Grid Based UI (Office 365 Inspired) 數據編輯應用程序。數據網格控件切換到平鋪視圖，並模仿Microsoft Outlook的“緊湊視圖”選項。 GridControl, RibbonControl, RibbonForm
UI-ready Form 這些模板使您可以添加單獨的應用程序模塊，這些模塊可以組合成一個可靠的多屏應用程序。共有三種應用程序模塊類型。Navigation Container - 一個啟動中心頁面，允許最終用戶導航到Business Object Collection頁面。
Business Object Collection - 第二層應用程序頁面，顯示來自特定集合的所有數據記錄（例如，*“客戶”*數據表中的所有實體）。
Business Object - 用於查看和編輯單個數據記錄（例如，有關特定客戶的信息）的第三層應用程序頁面。
根據所選的UI類型，可以對每個模塊進行不同的設計。
Outlook Inspired UI
Tabbed MDI
Hybrid UI		 Depends on the selected UI type
WinForms Windows UI Applications group
Blank Application 一個空的應用程序，用於構建Windows Moder UI應用程序。 DocumentManager (WindowsUIView), XtraForm
Tile Application 綁定到示例數據源的多屏幕Windows Modern UI應用程序。請參閱如何：使用模板庫創建Windows Modern UI應用程序以了解更多信息。 DocumentManager (WindowsUIView), XtraForm
Wizard Application 模擬Windows 10樣式的安裝向導的應用程序。 DocumentManager (WindowsUIView), XtraForm

Item Template Information

Template Name Template Description Controls and Components in Use
WinForms Common group
User Control 可換膚的用戶控件。 XtraUserControl
Form A skinnable form. XtraForm
Ribbon Form 設計用於功能區控件的form。 RibbonForm
Splash Screen 帶有預定義內容模板的初始屏幕窗口。 SplashScreen
Progress Indicator 帶有預定內容模板的字幕進度欄初始屏幕。 WaitForm
Logify group
24x7 App Monitoring Template 設置您的應用程序，以便它向DevExpress Logify Alert服務報告未處理的異常。Logify Alert是付費訂閱，應單獨購買。 None
WinForms Popular UIs group
UI-ready User Control,UI-ready Form 這些模板使您可以添加單獨的應用程序模塊，這些模塊可以組合成一個可靠的多屏應用程序。共有三種應用程序模塊類型。
Navigation Container - 一個啟動中心頁面，允許最終用戶導航到Business Object Collection頁面。
Business Object Collection - 第二層應用程序頁面，顯示來自特定集合的所有數據記錄（例如，*“客戶”*數據表中的所有實體）。
Business Object - 用於查看和編輯單個數據記錄（例如，有關特定客戶的信息）的第三層應用程序頁面.
根據所選的UI類型，可以對每個模塊進行不同的設計.
Outlook Inspired UI
Tabbed MDI
Hybrid UI		 Depends on the selected UI type
WinForms MVVM group
Blank View ModelView & View Model 添加一個表示MVVM就緒視圖模型的類。（可選）添加一個XtraUserControl，它是與此視圖模型相關的視圖。視圖模型可以是常規視圖模型，也可以是POCO視圖模型（請參閱*“* 數據綁定和通知”文章的*“ POCO屬性”*部分，以了解有關POCO類的更多信息）。 only for the "View & View Model" template: MvvmContext, XtraUserControl
WinForms Custom Solutions group
Custom Data Editor 添加一個單獨的類，該類定義從選定的DevExpress編輯器派生的自定義數據編輯器。提供用於為您的自定義編輯器實現自定義基礎結構類（繪畫和視圖信息）的選項。 None
Custom Data Grid 允許您使用所需的基礎結構類生成自定義的Data Grid控件后代。 None
WinForms Reporting group
Report Wizard 在將報表添加到項目之前，運行報表向導來設置報表。 None
Scheduler Report 添加專門的 DevExpress報告，該報告提供調度程序/日歷報告功能。 XtraSchedulerReport
Dashboards group
Dashboard An empty DevExpress Dashboard that can be customized at design time. Dashboard
Scaffolding group
Tabbed MDI View,Hybrid UI View,Outlook Inspired UI View Runs the Scaffolding Wizard, which generates a ready-to-use application based on the data source. Choose a template depending on the UI type to be implemented. Depends on the selected UI type.
Data Model Scaffolding Runs the Scaffolding Wizard to generate the Data Model application layer only; neither Views nor View Models that work with this Data Model are added. Review the first MVVM tutorial to learn more. None

Layout Assistant Extension

DevExpress WinForms組件安裝會自動將布局助手擴展添加到Visual Studio。啟用后，擴展程序將為表單和用戶控件提供智能標記和鏈接，並允許您使用此擴展程序。

img

img

智能標記包含以下項目

  • Instant Layout Assistant - 調用Instant Layout Assistant指南.
  • Predefined Form (User Control) Templates - 使用可直接應用於此表單（用戶控件）的UI就緒模板調用模板庫.
  • Show Actions in Design Surface - 將前兩個智能標記項移動到表單（用戶控件）上。要撤消此操作，請單擊“ **隱藏對智能標簽的操作”**鏈接。

img

Instant Layout Assistant

Instant Layout Assistant（ILA）是設計時幫助程序，可讓您構建表單（用戶控件）布局而無需在Visual Studio工具箱中搜索DevExpress控件。激活 ILA后，它將窗體的可用空間分成五個抽象區域（請參見下面的動畫）。此標記適合傳統的UI，在窗體的頂部具有命令區域，在窗體的兩側具有導航控件，在窗體的底部停靠有一個狀態面板或其他導航控件，並且在中間顯示了主要的窗體內容。

img

the three buttons visible next to the form are as follows:

  • The “close” button - 放棄之前的所有修改並隱藏ILA界面（再次單擊Instant Layout Assistant鏈接以重新顯示帶有五個空白默認區域的ILA）。
  • The “apply” button -關閉ILA界面並應用您的布局；除非單擊此按鈕，否則修改后的布局將被視為草稿。
  • The “add” button - 允許您添加非可視組件，例如工作區管理器或拼寫檢查器。

當您將鼠標懸停在某個區域上時，ILA將顯示多個可用操作（請參見下文）。

img

  • 單擊刪除區域鏈接將刪除該區域。其余區域將相應地調整大小以占據此可用空間。刪除中心區域將在左側和右側ILA區域之間留出空隙。
  • “ **在Dock面板中包裝”**鏈接添加Dock Manager組件並創建一個Dock面板。您可以通過錯誤的面板標題識別包裹在面板中的區域（請參見下圖）。該選項在中部地區不可用。

img

單擊“ 添加控件”鏈接后顯示的控件按用途分組。根據地區，ILA將顯示內部帶有不同控件的不同組。例如，側面區域提供了一個導航組，可讓您添加 Accordion Control, Navigation Bar, Navigation Pane, Tree List, Tile Bar, Tile Control or GalleryControl.“后退”按鈕從當前查看的控制組導航回到根目錄。

img

若要更改應在區域內顯示的控件，請將鼠標懸停在該區域上，然后單擊“ **更改控件”**選項。

img

如果ILA已自動添加了Application UI Manager，但您的中央區域托管了任何其他控件（例如Data Grid），則該控件將顯示在Application UI Manager中。有關更多詳細信息，請參見非文檔模式文章。

自定義並填充所有必需的ILA區域后，請單擊“應用”按鈕立即添加所有控件和組件。如果您的表單上沒有剩余空間，則調用ILA的操作將在表單表面和表單智能標記上均不可用。否則，您可以再次單擊“ **即時布局助手”**鏈接以分解剩余空間。下圖說明了帶有填充的側面和底部區域的表單；ILA將剩余空間標記為另外五個區域。

img

您可以在應用程序的DevExpress圖像庫中使用DevExpress圖標。

img

img

img

img

img

img

Applications

Office Inspired UI

DevExpress WinForms控件使您可以構建外觀受Microsoft Office應用程序（如Word，Excel，PowerPoint和Visio）啟發的UI，如下圖所示。

img

下圖顯示了典型的Office風格應用程序的元素。

img

使用以下DevExpress控件在您的應用程序中模擬Office風格的UI。

  • Ribbon Control + Ribbon Status Bar

    The Ribbon Control, introduced in Microsoft Office 2007, replaced traditional toolbars and is now used throughout all Office applications. The RibbonStatusBar displayed at the bottom of an application form is used to display various types of information (document status, page number, etc.).

  • Navigation Controls

    允許最終用戶在應用程序內容區域中切換內容或執行其他任務的多個導航控件之一。導航控件允許最終用戶更改顯示在主應用程序區域中的內容。

    • Navigation Bar - 傳統的側欄控件，具有可擴展的組和可單擊的項目。它具有三種內置樣式，可以改變其行為和外觀。
    • AccordionControl - 導航欄的現代替代品，它使您可以創建組和項目的多級層次結構；
    • NavigationPane - 類似於Adobe Reader中使用的側欄。包括在可擴展區域中顯示的垂直對齊的選項卡，這些選項卡可以調整大小，最大化或折疊。

  • Content Area Controls

    Office風格的控件，用於顯示主要應用程序內容。

    • Data Grid -一個供最終用戶顯示數據的編輯和整形組件。提供具有各種視圖的靈活UI，包括帶狀網格視圖，高級帶狀網格視圖，卡片視圖，布局視圖，WinExplorer視圖和圖塊視圖；
    • Rich Text Editor - 用於Microsoft Word風格的應用程序的文字處理器組件；
    • Scheduler - Microsoft Outlook樣式的調度組件；
    • Spreadsheet - 一種電子表格組件，用於創建，查看和編輯外觀類似於Microsoft Excel的文檔。

  • Notifications

    通知使您可以將應用程序中發生的重要事件傳達給最終用戶。它們顯示為小窗口，在屏幕頂部或底部彈出，並在指定的時間長度后消失。

    • Alert Windows - Windows-具有類似於Microsoft Outlook電子郵件警報的傳統外觀的通知；
    • Toast Notifications - 具有Windows 10風格的通知，外觀現代，扁平。

  • OfficeNavigationBar

    模擬Outlook 2013中引入的Microsoft導航控件，該控件顯示導航鏈接（項目）以調用特定功能。該控件與導航欄集成在一起

  • Additional Controls and Components

    • RibbonForm - 替代默認表單，設計用於Ribbon Control。RibbonForm共享Ribbon使用的標題欄。
    • Layout and Data Layout Controls - 允許您在應用程序表單中安排多個組件。
    • 其他實用程序和多用途控件，使您可以實現以下功能，例如啟動屏幕，自定義等待表單，拼寫檢查和Windows任務欄中使用的多功能按鈕，UI項上方繪制的裝飾元素等。

或者，您可以使用DevExpress模板庫來實現DevExpress Office風格的UI控件。

  • Word Processing Application - 創建一個MS Word風格的應用程序；
  • Scheduling Application - 使用集成的日歷，導航欄和功能區創建計划應用程序。

手動創建 an Office-inspired UI

img

  1. 在Visual Studio中，轉到*“文件|新建|項目”，或按CTRL + SHIFT + N*來創建一個新項目。選擇默認的Visual Studio *“ Windows窗體應用程序”*模板，然后單擊“ 確定”。

img

  1. Use the Visual Studio Toolbox to add Navigation Frame, Navigation Bar and Office Navigation Bar controls to your form.

img

  1. 如下圖所示排列控件。

img

  1. Use the Navigation Bar smart tag to switch the bar to the Navigation Pane View.

img

  1. change captions for automatically created NavBarGroup and NavigationPage controls to "Employees" and "Customers". 將相同的文本字符串分配給兩個頁面的Tag屬性，如下面的代碼所示
navigationPage1.Tag = navBarGroup1.Caption = navigationPage1.Caption = "Employees";
navigationPage2.Tag = navBarGroup2.Caption = navigationPage2.Caption = "Customers";
  1. 單擊導航框架的人字形按鈕以選擇不同的頁面，然后在每個頁面上放置一個LabelControl，然后自定義標簽標題。在運行時，這些標簽將允許您標識導航框架頁面。

img

  1. 使用Office導航欄智能標記可刪除自動生成的*“ Item1”和“ Item2”*元素。

img

  1. Assign the Navigation Bar to the OfficeNavigationBar.NavigationClient property to bind both controls together. 注意到，該欄現在具有基於現有導航欄組的*“雇員”和“客戶”*元素。啟動應用程序，然后單擊一個元素以查看相應的組是否已激活。

img

  1. Handle the NavBarControl.ActiveGroupChanged event to switch the selected Frame page. The code below uses page tags to find the required page.
private void navBarControl1_ActiveGroupChanged(object sender, DevExpress.XtraNavBar.NavBarGroupEventArgs e) {
    navigationFrame1.SelectedPage = (NavigationPage)navigationFrame1.Pages.FindFirst(x => (string)x.Tag == e.Group.Caption);
}
  1. Test your application at runtime. Note that, by default, animation effects are enabled.

img

  1. Return to design time, invoke the form smart tag (您可能需要重建項目並重新加載表單才能看到它) and click "Convert to Ribbon Form". This will convert your main form to a Ribbon Form, which will add Ribbon and Ribbon Status Bar controls.

img

  1. Add a BarSubItem with two child BarButtonItems to the Ribbon Page Group. End-users will be able to toggle between "Employees" and "Customers" Navigation Frame pages by clicking these buttons.

img

  1. 在設計時，雙擊第一個按鈕以創建BarItem.ItemClick事件處理程序。下面的代碼示例說明了如何切換活動的導航欄組。結合先前處理的NavBarControl.ActiveGroupChanged事件，此按鈕還可以更改導航框架頁面。
private void barButtonItem1_ItemClick(object sender, DevExpress.XtraBars.ItemClickEventArgs e) {
    navBarControl1.ActiveGroup = navBarControl1.Groups.First(x => x.Caption == e.Link.Caption);
}
  1. 選擇第二個BarButtonItem並在Visual Studio屬性窗口中找到ItemClick事件。使用組合框選擇與第一個按鈕相同的事件處理程序，以便兩個子菜單項均起作用。啟動應用程序，並確保導航框架正確更改其頁面。

img

使用模板庫創建

  1. 在Visual Studio中，轉到*“文件|新建|項目”，或按CTRL + SHIFT + N*來創建一個新項目。選擇“ *DevExpress模板庫”*選項，然后單擊“確定”。

img

  1. In the DevExpress Template Gallery, select the "Blank Application" option and proceed to the next step.

img

  1. 選定的模板創建一個帶有可換膚皮膚的XtraForm的項目，並啟用Layout Assistant Extension。打開表單的“智能標記”菜單，然后在*“布局助手操作”下單擊“預定義表單模板”*。

img

  1. 選擇*“導航容器”模板（“ Office Inspired UI”*組），然后單擊“應用”。

img

  1. 運行該應用程序，然后嘗試新創建的UI。嘗試使用“功能區內畫廊”切換主題，使用“功能區”菜單或底部導航控件在模塊之間導航，並在切換幀時注意動畫效果。

img

返回設計時間，並查看模板自動應用以啟用此UI的更改。該窗體現在是功能區窗體，並且上面同時具有RibbonControl和RibbonStatusBar。在功能區控件上，SkinRibbonGalleryBarItem在運行時自動創建主題庫，並且“導航”菜單中的項目使用以下代碼更改NavBar的活動組。

void barButtonNavigation_ItemClick(object sender, DevExpress.XtraBars.ItemClickEventArgs e) {
    navBarControl.ActiveGroup = e.Item.Caption == "Employees" ? employeesNavBarGroup : customersNavBarGroup;
}

OfficeNavigationBar和NavBar控件綁定在一起，因此單擊其中一個項目會更改另一個項目中的活動組。如果活動組更改（通過這種方式或如上所述通過功能區事件處理程序更改），則以下代碼將執行以更改當前選定的幀。

void navBarControl_ActiveGroupChanged(object sender, DevExpress.XtraNavBar.NavBarGroupEventArgs e) {
    navigationFrame.SelectedPageIndex = navBarControl.Groups.IndexOf(e.Group);
}

Visual Studio Inspired UI

img

Document Manager

  1. 啟動Visual Studio，創建一個新的Windows Forms Application項目，然后指定其名稱和位置。

img

  1. 在Visual Studio工具箱中找到DocumentManager組件，並將其拖放到您的窗體上。

img

  1. 通過單擊控件右上角的智能標記按鈕來調用DocumentManager的智能標記。默認情況下，新添加的DocumentManager 應用了選項卡式視圖。您可以通過相應的“轉換為...”鏈接將其更改為另一個可用的視圖。默認的“選項卡式視圖”適用於當前示例，因此請保持不變並調用DocumentManager設計器。

img

  1. 切換到設計器中的“文檔”部分。

img

在設計器中，您可以添加或刪除文檔並修改其屬性。請注意，當前僅啟用“添加文檔”按鈕。文檔可以在創建文檔，激活文檔或加載表單時接收其內容（有關詳細信息，請參閱文檔主題）。在此示例中，您將使用第三種方法。為此，向您的應用程序添加一些用戶控件。

如果您的應用程序不需要多個文檔，請在非文檔模式下使用文檔管理器。

  1. 在解決方案資源管理器中右鍵單擊您的項目，然后選擇添加新項，如下所示。

img

  1. 在顯示的對話框中，選擇“ **用戶控件”**並輸入其名稱。

img

根據您的要求多次重復此步驟。然后將控件添加到每個用戶控件，並根據需要自定義其屬性。確保項目編譯沒有錯誤，然后繼續下一步。

  1. 現在，您有多個用戶控件，這些控件代表最終用戶的工作空間。現在為每個現有的用戶控件添加一個文檔。打開設計器，然后再次轉到“ **文檔”**部分。如您所見，“ **填充”**按鈕現在可用。單擊此按鈕可以為項目中的每個用戶控件添加一個文檔。

img

請注意，每個文檔都通過BaseDocument.ControlName和BaseDocument.ControlTypeName屬性與相應的用戶控件關聯。

  1. 最后，處理View的BaseView.QueryControl事件，並將所需的控件傳遞給每個Document：
private void tabbedView1_QueryControl(object sender, DevExpress.XtraBars.Docking2010.Views.QueryControlEventArgs e) {
    if (e.Document.ControlName == "UserControl1") e.Control = new UserControl1();
    else e.Control = new UserControl2();
}
  1. 下圖顯示了應用Office 2013 外觀的結果。

img

Dock Manager

在此步驟中，您將學習如何在單個應用程序中將文檔管理器組件與Dock Manager一起使用。Dock Manager提供了對其所擁有的Dock面板的行為和視圖設置的集中控制。

  1. 在Visual Studio工具箱中找到DockManager組件，並將其拖放到窗體上。

img

或者，您可以通過DocumentManager的智能標記來執行此操作，如下圖所示。

img

  1. 調用DockManager智能標記，並通過相應的鏈接添加所需的DockPanel。

img

在Visual Studio中，“ **工具箱”**自動隱藏面板停靠在表單的左邊緣，“ **解決方案資源管理器”**和“ **屬性”**面板停靠在右邊緣，並且“ 錯誤”，“ **警告”**和“ **消息”**面板組合在窗體底部的選項卡式組中。形成。通過添加六個面板來模擬下圖所示的布局。

img

請注意，隨着新面板的出現，文檔管理器組件會自動縮放。

  1. 拖動面板以重新排列，並通過對接提示將它們對接到特定位置。

img

自定義面板后，您應該具有與下面類似的UI。

img

當以單一形式使用DockManager和DocumentManager時，您將從這些控件中獲得一些獨特的功能。下面列出了它們的兩個主要功能。

  • 最終用戶可以按Ctrl + Tab或Ctrl + Shift + Tab來瀏覽文檔選擇器中的文檔和面板。有關詳細信息，請參見文檔選擇器主題。
  • DockPanels可以作為選項卡式文檔停靠到DocumentManager。但是，您不能做相反的事情-文檔不能停靠在面板上。此行為由DockManager.DockMode屬性控制，並模擬Visual Studio的行為。

有關更多功能，請參考與Dock面板的交互。

  1. 停靠面板顯示默認按鈕-關閉，自動隱藏和最大化。您可以通過BaseDockOptions.ShowCloseButton，BaseDockOptions.ShowAutoHideButton和BaseDockOptions.ShowMaximizeButton屬性隱藏這些按鈕和/或添加自己的Header Buttons。下圖說明了添加到“ **錯誤”**面板的自定義“打印”按鈕。

img

如您所見，自定義“ 打印”按鈕圖標在懸停時以皮膚顏色繪制。此功能稱為字形外觀，它允許您以與默認按鈕相同的樣式繪制自己的自定義按鈕。您還可以使用它為您的應用程序構建單色UI，其中項目標題和字形以相同的顏色繪制。除了DockManager以外，其他許多控件也支持此功能。有關完整列表，請參見字形蒙皮主題。

Bar Manager

在此步驟中，您將向應用程序添加Bar Manager組件，並學習如何通過BarItems與DocumentManager和DockManager項進行交互。您可能要用功能區控件替換Bar Manager 。以下所有說明也適用於色帶控制。但是，在此步驟中，使用Bar Manager控件，因為它更適合於Visual Studio應用程序UI。

  1. 在工具箱中找到Bar Manager組件，並將其拖放到表單上。

img

  1. 添加Bar Manager控件后，將自動創建三個bar.這些欄代表主菜單，狀態欄和常規工具欄。從技術上講，這些欄與可以顯示BarItemLink的Bar對象相同，但是主菜單欄和狀態欄分別分配給BarManager.MainMenu和BarManager.StatusBar屬性。下圖說明了這些條（為可視化目的已將BarStaticItem添加到每個條）。

img

要添加新條，請使用“條管理器”智能標簽中的相應鏈接。

img

要刪除現有條形圖，請在設計時選擇它，然后按“刪除”，或單擊條形圖管理器設計器中的相應按鈕。對於此示例，我們只需要主菜單和狀態欄，因此可以刪除常規欄。

img

  1. bar顯示BarItemLink對象-指向BarItem的鏈接。要將BarItem添加到所需的Bar，請單擊“添加”按鈕，然后選擇所需的BarItem類型。將BarSubItem添加到主菜單欄。

img

您可以右鍵單擊一個項目以對其進行自定義。例如，選擇一種樣式，該樣式指定應僅顯示項目標題，項目字形還是同時顯示標題和字形。要在代碼中指定此樣式，請使用BarItemLink.PaintStyle屬性。

img

默認情況下，常規工具欄中的項目僅顯示圖標，而主菜單中的項目僅顯示標題。

  1. 您在上一步中添加的BarStaticItem是一個子菜單，可以包含其他項目。要將BarItem添加到BarStaticItem，請選擇BarStaticItem，然后單擊“ 添加”按鈕（使用將項目添加到Bar時所使用的相同方法）。將New BarButtonItem添加到File子菜單。此按鈕會將新文檔添加到您的應用程序。請參閱文檔主題，以查看在運行時將文檔添加到DocumentManager的示例。
  2. 將BarDockingMenuItem添加到主菜單。這個獨特的項目使您可以管理應用程序中包含的DockPanels和文檔。

img

  1. 下面的動畫顯示了完成上述步驟的大致結果。

img

Windows Modern UI

一個扁平，干凈，輕巧的UI，受Windows應用商店帶有磁貼的啟發。

img

手動創建

  1. 在Visual Studio中，單擊*“文件|新建|項目”（或按CTRL + SHIFT + N*）以創建一個新項目。選擇*“ DevExpress模板庫”*，然后單擊“ 確定”。

img

  1. 選擇*“空白應用程序”模板，然后單擊“創建項目”*。

img

  1. 調用智能標記，然后單擊*“轉換為Skinnable表單”*以將常規表單更改為XtraForm。

img

  1. 在同一智能標簽窗格中，單擊“選擇皮膚...”以添加DefaultLookAndFeel組件，然后選擇所需的 DevExpress skin。對於Windows Modern UI，請選擇外觀平淡，邊框薄或無邊框的平坦皮膚（例如，Office 2013，Office 2016，Metropolis等）。
  2. 將表單的FormBorderStyle屬性設置為None，並將WindowState屬性設置為Maximized。
  3. 單擊表單上的*“即時布局助手”鏈接以啟動表單向導。將鼠標懸停在所有側面區域上，然后點擊“刪除區域”。在剩余的空白區域中，單擊“添加控件”，然后選擇“ App UI Manager | Windows UI”*。接下來，單擊“應用”按鈕以添加應用了WindowsUIView的DocumentManager組件。

img

  1. 在“ 解決方案資源管理器”窗口中右鍵單擊該項目，然后選擇“添加DevExpress項目|用戶控件...”。

img

  1. 添加更多用戶控件並填充它們。這些用戶控件將顯示為單獨的應用程序屏幕。

img

  1. 返回主應用程序表單，調用DocumentManager組件的智能標記，然后單擊*“運行設計器”。切換到設計器的“元素|文檔”選項卡，然后單擊“填充”*。

img

單擊*“填充”后*，文檔管理器將生成以下內容：

void windowsUIView1_QueryControl(object sender, DevExpress.XtraBars.Docking2010.Views.QueryControlEventArgs e) { 
    if (e.Document == ucSample1Document) 
        e.Control = new WinModernUI.ucSample1(); 
    if (e.Document == ucSample2Document) 
        e.Control = new WinModernUI.ucSample2(); 
    // . . .  
    if (e.Control == null) 
        e.Control = new System.Windows.Forms.Control(); 
}
  1. 運行並查看您的應用程序。在應用程序啟動時，將顯示自動生成的填充有圖塊的圖塊控件。按Esc或右鍵單擊空白窗體空間，以調用帶有嵌入式*“退出”*按鈕的導航欄。

img

Tiles utilize the Tile.Document property鏈接到相應的文檔。When a tile is clicked,動態生成的Page容器將顯示帶有嵌入式*“后退”*按鈕的文檔。導航欄中顯示相同的按鈕。

img

  1. 關閉應用程序以對其進行修改。首先，使用WindowsUIView.Caption，BaseContentContainer.Caption和BaseContentContainer.Subtitle屬性添加應用程序標題字符串。另外，請使用BaseDocument.Caption屬性來修改自動生成的文檔標題。

最初，您將看不到WindowsUIView.Caption字符串，因為tile容器的標題將與之重疊。但是，該標題將在內容容器標題中可見，您將在本教程的稍后部分中創建標題。

img

  1. 轉到設計器的*“元素”頁面，然后選擇“內容容器”選項卡。單擊“添加新容器”，*然后從下拉菜單中選擇頁面組。

img

  1. 切換到設計器的*“布局|導航樹”選項卡，然后將文檔拖到頁面組的“項目”*集合中。img
  2. 在同一*“布局|導航樹”設計器選項卡中，將頁面組拖動到圖塊容器的“ ActivationTarget”*節點，該節點將頁面組分配給圖塊容器的TileContainer.ActivationTarget屬性。請注意，當單擊容器中的圖塊時，頁面組被激活。

img

15.運行該應用程序以查看發生了什么變化。現在，單擊磁貼將帶您到頁面組。此外，頁面組會自動激活與單擊的圖塊相關的文檔，因此無需為每個圖塊顯式設置激活目標。頁面組標題顯示View標題（WindowsUIView.Caption屬性），並顯示嵌入式的*“后退”按鈕-現在，最終用戶無需調用導航欄就可以導航回到啟動頁面。運行該應用以查看更改。當您單擊圖塊時，您將導航到頁面組，該頁面組將自動激活圖塊的相應文檔–因此，無需為每個圖塊顯式設置激活目標。頁面組標題顯示視圖標題（WindowsUIView.Caption屬性）和一個嵌入式“后退”*按鈕-最終用戶無需導航欄即可導航回啟動頁面。

img

要替換標題字符串，請為頁面組容器指定BaseContentContainer.Caption屬性。您還可以設置文檔BaseDocument.Header屬性來修改頁面標題內的文本。

  1. 所有申請文件都是自動生成的。接下來，在設計器的*“元素| 文件”標簽，點擊“添加新文件”*以手動添加文件。與文檔相對應的圖塊會自動添加。

img

  1. 由於其他文檔沒有內容，因此嘗試顯示這些文檔之一將引發異常。該BaseView.QueryControl事件使用延遲加載功能，動態填充空的文件，這些文件可以顯著提高應用程序的性能。QueryControl事件已在步驟9中處理，因此您只需要添加幾行代碼即可。
void windowsUIView1_QueryControl(object sender, DevExpress.XtraBars.Docking2010.Views.QueryControlEventArgs e) { 
    //. . .  
    if (e.Document == document1) 
        e.Control = CreateSampleContent("Manually Created Doc 1", Color.FromArgb(0, 99, 177)); 
    if (e.Document == document2) 
        e.Control = CreateSampleContent("Manually Created Doc 2", Color.FromArgb(231, 72, 86)); 
} 

public LabelControl CreateSampleContent(string text, Color backcolor) { 
    Font sampleFont = new Font(new FontFamily("Segoe UI Semibold"), 42f); 

    LabelControl lc = new LabelControl() { 
        AutoSizeMode = LabelAutoSizeMode.None, 
        Dock = DockStyle.Fill, 
        BackColor = backcolor, 
        ForeColor = Color.FromArgb(40, 40, 40), 
        Text = text, 
        Font = sampleFont, 
    }; 
    lc.Appearance.TextOptions.HAlignment = DevExpress.Utils.HorzAlignment.Center; 
    lc.Appearance.TextOptions.VAlignment = DevExpress.Utils.VertAlignment.Center; 
    return lc; 
}
  1. 需要另一個內容容器來存儲新文檔。添加幻燈片組容器，並在其中填充項目，如步驟12和13中所述。（在“內容容器”選項卡中，選擇“ SlideGroup”而不是“ PageGroup”。）
  2. 在設計器的*“布局|導航樹”選項卡中，將幻燈片組拖動到每個新圖塊的“激活目標”*節點中。導航層次結構應如下所示。

img

  1. 運行該應用程序以測試當前的導航層次結構。請注意，未為具有自動生成的文檔的圖塊指定Tile.ActivationTarget屬性，因此將激活父圖塊容器（頁面組）。其他圖塊也將應用其自己的激活目標，這些目標將導航到幻燈片組。

img

單擊文檔標題（BaseDocument.Header屬性），以在單獨的動態生成的Page容器中查看文檔。

img

  1. 根據需要自定義啟動磁貼容器及其磁貼. Tile container is based on a separate Tile Control and it inherits its base customization concepts.

下面的動畫演示了一個自定義的圖塊容器，其中包含帶有模板的示例圖塊。

img

  1. 通過以下較小的修改來完成應用程序

使用模板庫創建

  1. 在Visual Studio中，單擊*“文件|新建|項目”（或按CTRL + SHIFT + N*）以創建一個新項目。選擇*“ DevExpress模板庫”*，然后單擊“ 確定”。

img

  1. 該模板庫提供了三個模板來創建Windows現代風格的應用程序，位於下*“的WinForms Windows用戶界面的應用程序”*一節。

img

  • Blank Application

    一個帶有空白Tile容器的基於WindowsUI View的應用程序。選擇此模板可跳過初始表單設置，並直接繼續構建應用程序。

  • Tile Application

    從數據源填充的基於WindowsUI View的 復雜應用程序。下面的教程將使用該模板。

  • Wizard Application

    一個基於WindowsUI View的應用程序，可模擬安裝向導。四個用戶控件包裝在相應的文檔中（“開始”，“選項”，“安裝”和“完成”），並放置在具有隱藏頁面標題的“ 頁面組”容器中。導航按鈕（“ Next”，“ Back”和“ Exit”）是在WindowsUIView.QueryDocumentActions事件上動態創建的。當前顯示的向導頁面的類型作為參數傳遞給NavigatedTo事件。

在本課程中，選擇*“平鋪應用程序”模板，然后單擊“創建項目”*。

  1. 運行應用程序

啟動中心頁面是一個包含六個TileGroup的Tile Container，其中填充了靜態Tile對象。

img

單擊磁貼以顯示項目詳細信息頁面。單擊右上角的頁面標題可查看圖塊組中其他項目的詳細信息。

img

中心頁面上的圓形按鈕導航到組詳細信息頁面，該頁面顯示組信息以及其中的每個項目的概述。單擊項目圖像以導航到項目的詳細信息頁面。

img

要導航到上一頁，請按ESC或右鍵單擊一個容器，以調用帶有嵌入式*“后退”按鈕的導航欄。由於應用程序是作為無邊界全屏窗口運行的，因此“退出”*按鈕也將自動出現。

img

  1. 查看並修改自動生成的代碼。

此應用程序中顯示的項目是SampleDataItem類的對象。的*/數據/的sampleData*溶液文件包含這個類的定義，以及該SampleDataSource類，其實例作為用於應用程序的數據源。

dataSource = new SampleDataSource();

組詳細信息頁面是通過調用CreateGroupItemDetailPage方法創建的。

PageGroup CreateGroupItemDetailPage(SampleDataGroup group, PageGroup child) {
    GroupDetailPage page = new GroupDetailPage(group, child);
    PageGroup pageGroup = page.PageGroup;
    BaseDocument document = windowsUIView.AddDocument(page);
    pageGroup.Parent = tileContainer;
    pageGroup.Properties.ShowPageHeaders = DevExpress.Utils.DefaultBoolean.False;
    pageGroup.Items.Add(document as Document);
    windowsUIView.ContentContainers.Add(pageGroup);
    windowsUIView.ActivateContainer(pageGroup);
    return pageGroup;
}

這些詳細信息頁面是頁面組內容容器。這些容器的選項卡標題被隱藏，因為它們每個都承載一個文檔。本文檔使用組信息包裝GroupDetailPage用戶控件。簡要項目信息塊是GroupItemDetailPage用戶控件，由GroupDetailPage用戶控件擁有。下圖說明了這種結構。

img

項目詳細信息頁面也基於頁面組內容容器，但具有可見的標簽頁眉。選項卡標題允許最終用戶在包裝了ItemDetailPage用戶控件實例的子文檔之間切換。

img

項目詳細信息頁面，其子文檔和中心頁面的圖塊是在CreateLayout方法調用上生成的。

void CreateLayout() {
    foreach (SampleDataGroup group in dataSource.Data.Groups) {
        tileContainer.Buttons.Add(new DevExpress.XtraBars.Docking2010.WindowsUIButton(group.Title, null, -1,
            DevExpress.XtraBars.Docking2010.ImageLocation.AboveText, DevExpress.XtraBars.Docking2010.ButtonStyle.PushButton,
            null, true, -1, true, null, false, false, true, null, group, -1, false, false));
        PageGroup pageGroup = new PageGroup();
        pageGroup.Parent = tileContainer;
        pageGroup.Caption = group.Title;
        windowsUIView.ContentContainers.Add(pageGroup);
        groupsItemDetailPage.Add(group, CreateGroupItemDetailPage(group, pageGroup));
        foreach (SampleDataItem item in group.Items) {
            ItemDetailPage itemDetailPage = new ItemDetailPage(item);
            itemDetailPage.Dock = System.Windows.Forms.DockStyle.Fill;
            BaseDocument document = windowsUIView.AddDocument(itemDetailPage);
            document.Caption = item.Title;
            pageGroup.Items.Add(document as Document);
            CreateTile(document as Document, item).ActivationTarget = pageGroup;
        }
    }
    windowsUIView.ActivateContainer(tileContainer);
    tileContainer.ButtonClick += new DevExpress.XtraBars.Docking2010.ButtonEventHandler(buttonClick);
}

Hub page navigation is performed on BaseContentContainer.ButtonClick and BaseTile.Click events.

void tile_Click(object sender, TileClickEventArgs e) {
    PageGroup page = ((e.Tile as Tile).ActivationTarget as PageGroup);
    if (page != null) {
        page.Parent = tileContainer;
        page.SetSelected((e.Tile as Tile).Document);
    }
}

void buttonClick(object sender, DevExpress.XtraBars.Docking2010.ButtonEventArgs e) {
    SampleDataGroup tileGroup = (e.Button.Properties.Tag as SampleDataGroup);
    if (tileGroup != null) {
        windowsUIView.ActivateContainer(groupsItemDetailPage[tileGroup]);
    }
}

Touch-Enabled Tile UI

支持觸摸的應用程序（有時稱為混合應用程序）是易於在台式機和平板電腦等觸摸設備上使用的應用程序。

img

Common Application Settings

本節列舉了一些對開發支持觸摸的應用程序有用的提示。

  • Touch UI Mode

DevExpress為WindowsFormsSettings類提供了多個靜態屬性，這些屬性會影響所有DevExpress控件共有的外觀和行為。這些屬性使您可以僅使用一種設置來修改整個應用程序。對於混合應用程序，有靜態WindowsFormsSettings.TouchUIMode屬性。啟用此設置后，所有UI元素都傾向於增加其大小和邊距，從而使最終用戶更容易使用手指進行操作。例如，下圖說明了帶和不帶TouchUI模式的功能區控件。

img

  • Touch-Aware Scrolling(觸控觸摸滾動)

將靜態WindowsFormsSettings.ScrollUIMode屬性設置為Touch，以啟用使用觸摸手勢進行滾動。

  • Skins

使用現代的DevExpress外觀（例如“ Office 2013”及更高版本），因為它們具有“干凈”的外觀。

  • Hide Control Borders(隱藏控制邊框)

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

  • Glyph Skinning(字形蒙皮)

The Glyph Skinning feature paints item icons with these items' fore colors, which creates a flat monochrome application look.

Content Area

客戶區顯示當前由最終用戶選擇的模塊（UserControl）。用戶控件可以提供表格數據，圖表，量表，日歷，地形數據等。因此，您可以選擇適合您需要的任何控件。

盡管您可以啟用靜態WindowsFormsSettings.TouchUIMode屬性以使任何DevExpress控件都適合在啟用觸摸的設備上使用，但某些控件最初是為配合Hybrid應用而設計的。例如，如果您希望數據網格控件顯示數據源中的數據，請考慮使用其平鋪視圖而不是傳統的表格視圖。

img

Apart from showing regular tiles, 此視圖還可以表示類似於Microsoft Office 365數據網格的數據（請參見下圖）. 為此，將TileViewItemOptions.LayoutMode切換為*“List”*值。

img

另一個數據網格視圖WinExplorer View（下圖）有助於以類似於Microsoft Windows資源管理器的方式顯示記錄。

img

建議您使用基於圖塊的導航控件：由於其幾何形狀和大小，與傳統的工具欄按鈕相比，更容易用手指敲擊圖塊。

  • TileNavPane 允許您實現最多三個級別組成的基於圖塊的分層菜單。內置導航面包屑可幫助最終用戶跟蹤導航層次結構中的當前位置。

img

  • TileBar是Tile Nav Pane的簡化版本, 沒有 breadcrumb bar. 支持水平和垂直布局模式。

img

  • 將AccordionControl切換到Hamburger Menu模式，以在不需要導航元素時隱藏它們並節省屏幕空間。要啟用此模式，請使用AccordionControl.ViewType屬性。
  • Tile Control提供了可以排列成多列和多行的靜態和動態（動畫）圖塊。此控件適用於構建簡單的磁貼菜單。

img

Switching Between Modules

對於多界面應用程序，請使用以下DevExpress內容容器：

  • NavigationFrame 容器可幫助您實現單個文檔界面（SDI）。它的子模塊沒有導航按鈕或選項卡標題，要在模塊之間切換，您必須手動更改NavigationFrame.SelectedPage屬性。提供內置的動畫效果。
  • TransitionManager 組件為任何內容容器提供動畫效果，這些效果在容器更改其模塊時播放。使用導航框架時，不需要過渡管理器。

Additional Components

以下列表詳細介紹了適用於啟用觸摸的應用程序的其他有用控件和組件。

  • Buttons and Menus

    代替使用標准的矩形按鈕，請使用承載圓形Windows 10風格按鈕的WindowsUIButtonPanel。

    img

    使用相同的控件，您可以創建帶有built-in peek panels 的簡單 toolbars（請參見WindowsUIButtonPanel.QueryPeekFormContent事件）。

    img

  • Flyouts and Pop-Up Menus(彈出式菜單和彈出菜單)

    Employ the Flyout Panel component to create flat flyouts and pop-ups.

    使用“ 彈出面板”組件創建平面彈出和彈出窗口。

    img

  • Messages

    利用彈出對話框控件創建現代的通知消息

    img

  • Notifications

    對於Windows Modern風格的通知，請使用Toast Notification Manager組件。

  • Form Layout

    對於其他任何UI類型，請使用“ 布局”和“數據布局控件”組件在整個應用程序模塊中有效地排列UI元素。的數據布局控制可以自動生成基於給定數據源上的編輯UI。

  • Splash Screen

    利用啟動畫面管理器為您的應用程序提供啟動畫面和等待表單。

  • Split Container

    該SplitContainerControl部件分解的形式空間分成兩個可調整大小的區域。您可以修改SplitContainerControl.CollapsePanel屬性，以使用擴展/折疊按鈕替換拖放式拆分器。

    img

  • Auxiliary Containers(輔助容器)

    One-pixel border side panels support panel snapping and overlay resize features.

    一像素邊框側面板支持面板捕捉和覆蓋大小調整功能。

Automatic UI Generation

該DevExpress的模板庫提供了各種模板，以啟動應用程序的開發。對於啟用觸摸的應用程序，請轉到畫廊*“ WinForms流行的UI | UI就緒的表單”部分，然后選擇“混合UI”*類型。

img

對於數據管理應用程序，您可以利用腳手架向導根據給定的數據源自動生成功能齊全且隨時可用的應用程序。向導創建的應用程序由多個獨立的互連模塊組成，並遵循MVVM模式。

Fluent Design UI

一種由Microsoft開發並在2017年“秋季創作者更新”中針對Windows 10發布的UI類型。該設計類型將類似塑料的半透明效果與3D效果，高級照明以及不同應用程序狀態之間的新過渡混合在一起。img

Visual Effects(視覺效果)

Fluent Design的概念引入了兩種獨特的視覺效果： Acrylic Material and Reveal Highlight.

  • Acrylic Material

是一種半透明的材料，允許用戶“通過”應用程序查看。這種效果需要五個單獨的層，並具有各自的不透明度和視覺效果才能正確實現。

img

Microsoft文檔建議您將Acrylic用於以下用途：

“支持UI”，例如在滾動或與之交互時與主窗口內容重疊的表面；

瞬態UI元素的背景：上下文菜單，彈出菜單等。

  • Reveal Highlight

這種效果模仿了跟隨鼠標指針的聚光燈。

img

建立一個 Fluent Design-inspired 應用

請按照以下步驟來構建符合Microsoft Fluent Design UI要求和標准的應用程序。

  • Fluent Design 是一種獨特的UI類型，需要對其基本概念有基本的了解。 因此，請閱讀Microsoft的指南並學習Fluent設計的“要做”和“不要做”。例如，本文介紹了如何在表單中正確分配 Acrylic material 。
  • Enable the DirectX Hardware Acceleration: 傳統的GDI +引擎無法渲染復雜的Fluent Design視覺效果。啟用DirectX加速的最簡單方法是在“ 項目設置”頁面中檢查相應的設置。

img

  • 使用相同的 Project Settings Page 選擇 vector skin 和它的調色板.
  • 如果您需要帶有側面導航控件的表單，請使用嵌入Accordion Control的 Fluent Design Form 。 兩種形式都支持 Acrylic Material 效果，並允許您將欄項目（按鈕，編輯器，靜態文本項目等）添加到其標題欄區域。
  • 如果在具有 Acrylic background的表單上直接放置一個 Layout Control ，則控件的背景也會使用此效果。否則，如果存在另一個承載布局控件的容器，則需要在代碼中調用XtraForm.ApplyAcrylicAccent方法，以啟用布局控件的Acrylic效果。
InitializeComponent();
//. . . 
this.ApplyAcrylicAccent(layoutControl1);

Data Management Controls

Choose Application UI 部分提供了有關如何模擬流行的Microsoft風格的UI類型（例如Office，Visual Studio和Windows Modern）的教程。在這些shell中使用下面列出的控件來與主應用程序一起使用。

Data Browsing and Analysis(數據瀏覽與分析)

這些控件用於對大型數據集執行CRUD操作（創建，讀取，更新，刪除）。

img

  • Data Grid

    以標准表格或其他視圖格式（例如，帶狀網格，卡片，圖塊）顯示數據。

  • Vertical Grid

    以表格形式顯示數據，數據字段呈現為行，記錄顯示為列。

  • Pivot Grid

    模擬Microsoft Excel 的數據透視表功能–以交叉表格式顯示數據。

  • Scheduler

    以受Microsoft Outlook啟發的樣式顯示計划程序數據，並允許最終用戶編輯，保存和加載約會。

  • Charts

    將數據顯示為條形，面積，線形和其他圖形類型。

  • Gauges

    將數據可視化為圓形，線性，溫度計，數字和其他量規類型。

  • TreeMap Control

    將層次結構數據顯示為嵌套矩形。

  • Map Control

    顯示柵格和矢量地圖，並支持流行的地圖服務（Bing Maps和OpenStreetMap）和自定義地圖數據服務器。

Document Editors and Viewers(文件編輯和檢視)

顯示和編輯DOC，DOCX，RTF，HTML，PDF和其他文檔文件類型。

img

  • Rich Text Editor

    使用此受Microsoft Word啟發的文字處理控件創建，加載，修改，打印和保存RTF文檔。

  • Spreadsheet

    以Microsoft Excel樣式的外觀創建，加載，編輯，保存和打印電子表格文檔。

  • PDF Viewer

    直接在WinForms應用程序中顯示PDF文件，而無需在最終用戶的計算機上安裝外部PDF查看器。

Data Entry Forms(數據輸入表)

img

  • Editors

    超過35種數據編輯工具的集合，例如按鈕，文本框，下拉菜單，顏色選擇器和軌跡欄。

  • Layout and Data Layout Controls

    創建具有最終用戶可自定義的一致布局的表單。


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 Kubernetes Applications HDevEngine in .NET Applications MultiThreading Progressive Web Applications Debugging QML Applications Spark Submitting Applications淺析 Designing Data-Intensive Applications tf.keras模型——applications Federated Machine Learning: Concept and Applications Designing Data-Intensive Applications Devexpress之barManager
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM