如何:使用模板庫創(chuàng)建Windows現(xiàn)代UI應用程序
本文檔介紹了如何使用DevExpress 模板庫構建Windows Modern UI 應用程序。
1.在 Visual Studio 中,單擊“File | New | Project”(或按CTRL+SHIFT+N)創(chuàng)建一個新項目,選擇 “DevExpress Template Gallery”并單擊“OK”。
2.模板庫提供了三個模板來創(chuàng)建 Windows Modern 風格的應用程序,位于“WINFORMS WINDOWS UI APPLICATIONS”部分下。
- 空白申請表
一個帶有空白Tile容器的基于WindowsUI視圖的應用程序,選擇此模板可以跳過初始表單設置,直接構建應用程序。
- tile的應用程序
一個從數(shù)據(jù)源填充的并基于視圖的復雜WindowsUI應用程序。
- 向導應用程序
一個模擬安裝向導并基于Windows UI視圖的應用程序。四個用戶控件被包裝到相應的文檔(“Start”、 “Options”, “Install” 和“Finish”)中,并放置在帶有隱藏頁眉的頁面組容器中。導航按鈕(“Next”, “Back” 和“Exit”)是在WindowsUIView.QueryDocumentActions事件上動態(tài)創(chuàng)建的,當前顯示的向導頁面的類型會作為參數(shù)傳遞到NavigatedTo事件。
在本課程中,選擇“Tile Application”模板并單擊“Create Project”。
3.運行應用程序
啟動 hub page是一個包含了6個Tile group的Tile Container,其中填充了靜態(tài)Tile對象。
單擊圖塊可顯示項目詳細信息頁面,單擊右上角的頁面標題可查看圖塊組中其他項目的詳細信息。
按中心頁面上的圓形按鈕將導航到組詳細信息頁面,該頁面顯示組信息以及其中每個項目的概述。單擊商品圖像可導航至商品的詳細信息頁面。
要導航到上一頁,請按ESC或右鍵單擊容器來調(diào)用帶有嵌入式“Back”按鈕的導航欄。由于應用程序作為無邊框全屏窗口運行,因此“Exit” ”按鈕也會自動出現(xiàn)。
4.查看并修改自動生成的代碼。
此應用程序中顯示的項目是SampleDataItem類的對象。/Data/SampleData解決方案文件包含此類的定義,以及SampleDataSource類,該類的實例充當應用程序的數(shù)據(jù)源。
C#:
dataSource = new SampleDataSource();
VB.NET:
dataSource = New SampleDataSource()
通過調(diào)用CreateGroupItemDetailPage方法創(chuàng)建組詳細頁面。
C#:
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; }
VB.NET:
Private Function CreateGroupItemDetailPage(ByVal group As SampleDataGroup, ByVal child As PageGroup) As PageGroup Dim page As New GroupDetailPage(group, child) Dim pageGroup As PageGroup = page.PageGroup Dim document As BaseDocument = windowsUIView.AddDocument(page) pageGroup.Parent = tileContainer pageGroup.Properties.ShowPageHeaders = DevExpress.Utils.DefaultBoolean.False pageGroup.Items.Add(TryCast(document, Document)) windowsUIView.ContentContainers.Add(pageGroup) windowsUIView.ActivateContainer(pageGroup) Return pageGroup End Function
這些詳細信息頁面是頁面組內(nèi)容容器,這些容器的選項卡標題是隱藏的,因為每個容器都承載著一個文檔。本文檔將GroupDetailPage用戶控件與組信息包裝在一起,簡要項目信息塊是GroupItemDetailPage用戶控件,由 GroupDetailPage 用戶控件擁有。下圖說明了這種結構。
項目詳細信息頁面也基于頁面組內(nèi)容容器,但具有可見的選項卡標題。選項卡標題允許最終用戶在包裝ItemDetailPage用戶控件實例的子文檔之間進行切換。
項目詳細信息頁面、其子文檔以及中心頁面的圖塊是在CreateLayout方法調(diào)用時生成的。
C#:
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); }
VB.NET:
Private Sub CreateLayout() For Each group As SampleDataGroup In dataSource.Data.Groups tileContainer.Buttons.Add(New DevExpress.XtraBars.Docking2010.WindowsUIButton(group.Title, Nothing, -1, DevExpress.XtraBars.Docking2010.ImageLocation.AboveText, DevExpress.XtraBars.Docking2010.ButtonStyle.PushButton, Nothing, True, -1, True, Nothing, False, False, True, Nothing, group, -1, False, False)) Dim pageGroup As New PageGroup() pageGroup.Parent = tileContainer pageGroup.Caption = group.Title windowsUIView.ContentContainers.Add(pageGroup) groupsItemDetailPage.Add(group, CreateGroupItemDetailPage(group, pageGroup)) For Each item As SampleDataItem In group.Items Dim itemDetailPage As New ItemDetailPage(item) itemDetailPage.Dock = System.Windows.Forms.DockStyle.Fill Dim document As BaseDocument = windowsUIView.AddDocument(itemDetailPage) document.Caption = item.Title pageGroup.Items.Add(TryCast(document, Document)) CreateTile(TryCast(document, Document), item).ActivationTarget = pageGroup Next item Next group windowsUIView.ActivateContainer(tileContainer) AddHandler tileContainer.ButtonClick, AddressOf buttonClick End Sub
中心頁面導航是在BaseContentContainer.ButtonClick和BaseTile.Click事件上執(zhí)行的。
C#:
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]); } }
VB.NET:
Private Sub tile_Click(ByVal sender As Object, ByVal e As TileClickEventArgs) Dim page As PageGroup = (TryCast((TryCast(e.Tile, Tile)).ActivationTarget, PageGroup)) If page IsNot Nothing Then page.Parent = tileContainer page.SetSelected((TryCast(e.Tile, Tile)).Document) End If End Sub Private Sub buttonClick(ByVal sender As Object, ByVal e As DevExpress.XtraBars.Docking2010.ButtonEventArgs) Dim tileGroup As SampleDataGroup = (TryCast(e.Button.Properties.Tag, SampleDataGroup)) If tileGroup IsNot Nothing Then windowsUIView.ActivateContainer(groupsItemDetailPage(tileGroup)) End If End Sub