很多程式可能都會有一個首頁綜合展示系統的相關資訊，如匯總資訊，圖表統計、待辦業務、提醒資訊等內容，在Web上可能叫做Dashboard儀表板，或者首頁頁面，不管哪種叫法，都是綜合展示一些資訊，提供一些資訊展示或者處理作業的入口，我們在Winform里面，有時候也需要這樣的儀表板首頁，這個使用DevExpress的控制元件組的話，可以使用WidgetView控制元件來實作，
1、DevExpress默認案例
DevExpress的Demo樣例提供了一些WidgetView的樣式，如下所示，
通過上面的案例，我們可以看到，利用WidgetView可以創建很豐富的匯總、報表、待辦等相關內容，只要處理得當，可以為我們的Dashboard首頁提供很豐富的綜合內容展示，
2、WidgetView的使用介紹
WidgetView的使用，如果要較好掌握它的使用，需要了解DocumentManager、WidgetView、Document、StackGroup的概念是什么，以及它們之間的關系，
我們可以通過表單的設計器來創建一個DocumentManager，其中DocumentManager里面包含一個WidgetView，用來做視圖管理的；然后在設計模式上創建多個對應的Document，而Document是用來管理對應展示的內容的（如自定義用戶控制元件），StackGroup等是用來管理Document布局展示的，除了StackLayout外，可以通過WidgetView的LayoutMode屬性設定其他布局型別，如Table Layout, Flow Layout 以及 Free Layout等，如下是在設計模式下創建幾個空白的Document以及使用的LayoutMode 為StackLayout來排版Document的排列方式，
如果需要在設計模式下維護WidgetView的一些內容，可以通過表單下面的DocumentManager物件進行維護，
以上的Demo就是簡單的創建幾個空白的Document以及常規的StackLayout的方式排版，運行得到界面效果如下所示，
一般實際情況下，我們是在首頁上綜合展示各種報表內容、圖表內容、待辦資訊等內容的，那么各個模塊的內容，可以使用自定義用戶控制元件來處理，然后綜合展示即可，實際情況下，首先我們先創建用戶控制元件界面，以及實作好各個內容的展示；然后我們可以在設計模式下指定不同Document下容納的控制元件資訊，也可通過動態創建的方式創建所需要的內容，
以下是我使用代碼動態構建的WidgetView界面，通過動態創建DocumentManager、Document，以及加載各種自定義用戶控制元件，組合成下面的界面效果，
用戶自定義控制元件界面，我們在Controls里面放置各種不同內容的用戶控制元件，如下界面方案中的專案檔案界面所示，
動態創建WidgetView相關的內容比較簡單，我這里把所有相關的代碼一并貼出，方便了解，
/// <summary> /// 動態構建的Widget View /// </summary> public partial class FrmWidget2 : DevExpress.XtraEditors.XtraForm { public FrmWidget2() { InitializeComponent(); } private void FrmWidget2_Load(object sender, EventArgs e) { AddDocumentManager(); } WidgetView view; StackGroup group1, group2; void AddDocumentManager() { var docMananger = new DocumentManager(components); view = new WidgetView(); docMananger.View = view; docMananger.ContainerControl = this; view.AllowDocumentStateChangeAnimation = DevExpress.Utils.DefaultBoolean.True; group1 = new StackGroup(); group2 = new StackGroup(); group1.Length.UnitType = LengthUnitType.Star; group1.Length.UnitValue = 2; view.StackGroups.AddRange(new StackGroup[] { group1, group2 }); //添加檔案 AddDocuments(); //設定布局顯示 view.LayoutMode = LayoutMode.StackLayout; view.DocumentSpacing = 3; //tableLayout的行列定義 //構建每個檔案所屬的ColumnIndex和RowIndex this.view.Rows.Clear(); this.view.Columns.Clear(); List<Point> points = new List<Point>(); for (int i = 0; i < 3; i++) { this.view.Rows.Add(new RowDefinition() { }); for (int j = 0; j < 2; j++) { this.view.Columns.Add( new ColumnDefinition()); points.Add(new Point(i, j)); } } Random random = new Random(); foreach (Document document in view.Documents) { Point newLocation = points[random.Next(points.Count)]; document.RowIndex = newLocation.Y; document.ColumnIndex = newLocation.X; points.Remove(newLocation); } //添加 Document物件到group1不是必須的，因為所有新創建的檔案都是默認放置到第一個StackGroup中. //group1.Items.AddRange(new Document[] { view.Documents[0] as Document, view.Documents[1] as Document }); view.Controller.Dock(view.Documents[view.Documents.Count - 3] as Document, group2); view.Controller.Dock(view.Documents[view.Documents.Count - 2] as Document, group2); view.Controller.Dock(view.Documents[view.Documents.Count - 1] as Document, group2); } /// <summary> /// 動態添加用戶控制元件作為Widget視圖的檔案內容 /// </summary> void AddDocuments() { CreateDocument(typeof(Calendar), "日歷控制元件", Color.Blue); CreateDocument(typeof(ToDoList), "待辦串列4", Color.Yellow); CreateDocument(typeof(News), "訊息資訊", Color.Navy); CreateDocument(typeof(TodoControl), "待辦控制元件", Color.Red); CreateDocument(typeof(MyDateControl), "日期控制元件", Color.Green); CreateDocument(typeof(Mail), "郵箱資訊", Color.Purple); } /// <summary> /// 創建指定的檔案 /// </summary> /// <param name="controlType">檔案用戶控制元件物件型別</param> /// <param name="caption">標題</param> /// <param name="backColor">背景色</param> void CreateDocument(Type controlType, string caption, Color backColor) { //創建用戶控制元件 var control = Activator.CreateInstance(controlType) as Control; //創建指定的檔案 var document = view.AddDocument(control) as Document; document.Caption = caption; //背景色 document.AppearanceCaption.BackColor = backColor; } }
以上就是DevExpress的WidgetView的各種相關內容的介紹，以及介紹在設計模式下、代碼動態構建兩種方式下的處理方式，希望對你了解這個特殊的控制元件有所幫助，
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/134.html
標籤：WinForm