1. 程式人生 > >DevExpress 使用 XtraTabbedMdiManager 控制元件以 Tab樣式載入 Mdi窗體併合並父和子窗體的 RibbonControl 解決方案

DevExpress 使用 XtraTabbedMdiManager 控制元件以 Tab樣式載入 Mdi窗體併合並父和子窗體的 RibbonControl 解決方案

最近剛接觸到 DevExpress 13.1 這個面板元件, 覺得相當好用 於是開始準備搭建 個小應用的主體框架.

找了好久的就是沒找到對應的文章來講解這一塊.. 翻了他們主網站上人家問的,以及API 才摸索... 不懂英文好吃力呀~~~

首先選到的就是,依舊用 Mdi子窗體模式載入子模組

第一步: 建立一個主 RibbonForm 為: ParentForm

   1.1 設定 RibbonControl 屬性 MdiMergeStyle 為: Always 

第二步: 在左邊拖入一個NavBarControl 設定Dock : Left

第三步: 拖入: XtraTabbedMdiManager

  3.1 設定 XtraTabbedMdiManager 的 MdiParent 為: 當前窗體:ParentForm

以上 主窗體部分完成

第四步: 新建子 RibbonForm 為: ChildForm

第五步: 在ChildForm中拖入: XtraScrollableControl 並設定 Dock:Fill 然後你可以把你的元件都拖入這個控制元件,這樣就會在 ChildForm 被 載入的話會有 滾動條

第六步: 在 ChildForm 的 RibbonControl 中新增對就應的 RibbonPage 和 按鈕

以上子窗體部分完成

好了,至此,基本控制元件我們都已經新增好了.,接下來我們來新增事件

第七步: 開啟子窗體事件

在ParentForm的  navbarControl 中新增 Item 並新增事件

複製程式碼

複製程式碼

        // 給 NavBarControl 新增 LinkClicked 事件
        private void navBarControl2_LinkClicked(object sender, NavBarLinkEventArgs e)
        {
            AddPageMdi(e.Link.Item);
        }

     // 開啟子窗體方法
        private void AddPageMdi(NavBarItem navItem)
        {            
            ChildForm childForm = new ChildForm();
            childForm.MdiParent = this;
           // 子窗體的 Text  就是 Tab頁中的標題 ,我這裡是直接取 navItem中的標題作為 tab頁的標題
            childForm.Text = navItem.Caption + tabCount++;
            // 顯示 
            childForm.Show();
            // 設定當前 tab頁的 圖示,我這裡也預設取navBar中的Item中的圖示
            xtraTabbedMdiManager1.Pages[subform].Image = navItem.SmallImage;
        }

第八步: 新增雙擊頁籤時,關閉頁籤事件,記住 是新增在: XtraTabbedMdiManager 的 MouseDown 事件中:

 private DateTime m_LastClick = System.DateTime.Now;
        private XtraMdiTabPage m_lastPage = null;
        private void xtraTabbedMdiManager1_MouseDown(object sender, MouseEventArgs e)
        {
            XtraMdiTabPage curPage = (sender as XtraTabbedMdiManager).SelectedPage;

            if (e.Button == MouseButtons.Left)
            {

                DateTime dt = DateTime.Now;
                TimeSpan span = dt.Subtract(m_LastClick);
                if (span.TotalMilliseconds < 300)  //如果兩次點選的時間間隔小於300毫秒,則認為是雙擊
                {


                    if (this.MdiChildren.Length > 1)
                    {

                        // 限制只有在同一個頁簽上雙擊才能關閉.(規避兩個頁籤切換時點太快導致意外關閉頁籤)
                        if (curPage.Equals(m_lastPage))
                        {
                            //if (this.ActiveMdiChild != m_MapForm)
                            //{
                            this.ActiveMdiChild.Close();
                            //}

                        }
                    }
                    m_LastClick = dt.AddMinutes(-1);
                }
                else
                {
                    m_LastClick = dt;
                    m_lastPage = curPage;
                }
            }
        }

第九步: 新增合併Mdi子窗體的 狀態列 ,記得是在ParentForm的 RibbonControl控的 Merge事件和 UnMerge 事件中新增 這樣就能在切換子窗體頁籤的時候同時將子窗體的狀態列也合併到主窗體的狀態列上,並且在切換另一個的時候同時解除安裝當前子窗體的合併狀態列,

        private void ribbon_Merge(object sender, DevExpress.XtraBars.Ribbon.RibbonMergeEventArgs e)
        {
            RibbonControl parentRRibbon = sender as RibbonControl;
            RibbonControl childRibbon = e.MergedChild;
            parentRRibbon.StatusBar.MergeStatusBar(childRibbon.StatusBar);
        }

        private void ribbon_UnMerge(object sender, RibbonMergeEventArgs e)
        {
            RibbonControl parentRRibbon = sender as RibbonControl;
            parentRRibbon.StatusBar.UnMergeStatusBar();

        }

OK 基本至此,小應用框架就能搭建出來了,後期還需要再新增控制,已經載入的子窗體不能重複新增的功能.

以及 NavBarControl 的 過濾功能.

[

注意: Mdi子窗體的RibbonControl中的控制元件合併到主窗體上的時候,是根據Text屬性值來合併的,如果對應的 Text值和主窗體上的 RibbonControl中的 Page或是 Group 的Text一樣的話(注意,先判斷Page,Page的Text不同則不需要再判斷Group是否相同而會新建一個Page在父窗體的RibbonControl中)就會被合併到同個Page或是 Group 中

另外,子窗體中的RibbonControl中??的按鈕之類的是根據Caption來進行合併的(因為BarButtonItem和NavBarItem等是沒有繼承Control類的,故沒有Text而只有Caption)可以通過: MergeType(在BarButtonItem的屬性中)來控制在合併到主窗體時是 :

  Add新增(預設) ,

     Replace:替換(子窗體按鈕設定就可以)

     MergeItems (還搞不清楚) 

     Remove:移除(需要主窗體的 MergeType 和 子窗體的MergeType 都設定為:Remove 時才可以,這個Remove應該是將兩個按鈕都移除??)

]

相關推薦

DevExpress 使用 XtraTabbedMdiManager 控制元件 Tab樣式載入 Mdi窗體窗體RibbonControl 解決方案

最近剛接觸到 DevExpress 13.1 這個面板元件, 覺得相當好用 於是開始準備搭建 個小應用的主體框架. 找了好久的就是沒找到對應的文章來講解這一塊.. 翻了他們主網站上人家問的,以及API 才摸索... 不懂英文好吃力呀~~~ 首先選到的就是,依舊用 Md

DevExpress TreeList控制元件的複選框

分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!        

Qt QTreeWidget 中加入控制元件——QPushButton為例

QPushButton *topLevelButton = new QPushButton("Top Level Button"); ui->treeWidget->addTopLevelItem(topLevelItem); ui->tre

HTML5學習第6篇—video:自己實現video的播放控制元件(新增樣式版)

     本篇部落格接著上一篇文章,實現了一個帶樣式的video播放控制元件,程式碼如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

DevExpress GridView控制元件設定預設選中的行顏色

DevExpress為.NET平臺提供了很多優秀美觀的Ui控制元件,給資料和圖表展示帶來了極大的便捷性。這裡使用的是DevExpress2015版本,安裝起來也很方便,只要執行DevExpressUniversalTrialComplete-20151209.exe,一路預設即可。 當然

自適應控制元件寬高大小載入bitmap圖片的友好方式

自動計算BitmapFactory.Options 的inSampleSize 引數。程式碼如下: public static Bitmap decodeSampledBitmapFromResource(Resources res,int resId,

【轉】WPF自定義控制元件樣式(5)-Calendar/DatePicker日期控制元件自定義樣式及擴充套件

一.前言   申明:WPF自定義控制元件與樣式是一個系列文章,前後是有些關聯的,但大多是按照由簡到繁的順序逐步釋出的等。 本文主要內容: 日曆控制元件Calendar自定義樣式; 日期控制元件DatePicker自定義樣式,及Label標籤、水印、清除日期功能擴充套件; 二.Calend

android UI控制元件之webview控制元件使用例項:載入網頁到webview中

package com.vincent.org.networkapp; import android.app.Activity; import android.app.ProgressDialog; import android.os.Bundle; impo

解決c# devexpress treelist 控制元件顯示大紅叉

用vs2008 開發的一個winform 產品 最近發現一個 奇怪問題  當搜尋後treelist 顯示 總是大紅叉 而同樣的exe 資料庫 再請他計算機則沒有問題。 看來還是我本機開發環境有問題 但

OpenLayers 3 之 擴充套件自定義控制元件--切換圖層控制元件為例

      openlayers 中的控制元件,是一個固定在頁面某個位置的可見的DOM元素,它們可能包含可操作的按鈕,也可能只是單純的展示資訊,它們的位置及其樣式是由與其關聯的CSS樣式決定的。預設情況下,它們都位於一個CSS 類(class)為ol.overl

DevExpress GridControl控制元件,實現通過checkbox選中時整行高亮

看了官方7.0版本demo和tutorial,發現沒有例子講對於gridconrol中的gridview通過checkbox選中時,chebox也是高亮顯示,而不是變白,同其他單元格一樣高亮顯示。 程式碼如下: using System; using System.Dra

BUI樹形控制元件TreeList的非同步載入

在測試樹形列表的非同步載入時,發現一個問題,先貼原始碼,如下:  BUI.use(['bui/tree','bui/data'], function (Tree, Data) {          

WPF控制元件模板與樣式最方便的修改方法

話就不多說,直接給給個例子 比如要修改工具欄ToolBar的Background, 選擇ToolBar在屬性欄右鍵點Template將值提取到資源(如下圖) 提取到的資源儲存,最好儲存在資源字典裡方便管理. 如提取ToolBar的模板如下 <ControlTempl

第三方控制元件:上拉載入、下拉重新整理控制元件

使用: (1)匯入第三方外掛庫 Android-PullToRefresh-master.zip (2) 在佈局檔案中使用第三方外掛 com.handmark.pulltorefresh.library.PullToRefreshListView (3) 自定

Android用RadioGroup控制元件實現Tab選項卡效果

現在越來越多的app使用Tab選項卡的效果了,今天我們也來試試,上次我們說過用TextView控制元件來實現,但是要做選中與未選中的效果切換需要寫程式碼來實現,比較複雜,今天我們就來用RadioGroup控制元件實現,更加簡單和快捷。 RadioGroup控制元件定義如下

DevExpress 圖表控制元件:ChartControl 動態繫結資料

private void BindData(ViewType vt) { chartControl1.Series.Clear(); //Series series1 = new Series(

iOS系統自帶控制元件 UIBarButtonSystemItem 的樣式解析

UIBarButtonSystemItem的樣式解析 樣式 圖片 UIBarButtonSystemItemDone UIBarButtonSystemItemCancel UIBarButton

DevExpress GridControl 控制元件行中新增編輯按鈕行

以下為內容以圖片居多1234表示點選順序 先新增一行 操作和新增資料行一樣 開啟ColumnEdit  選擇new ButtenEdit  new上方會出現一個系統命名的button 命名可以更改必須在下發name中更改 是行的name            

控制元件 應用css樣式

[html] view plaincopyprint? <asp:MenuID="mnuTopMenu"runat="server"DynamicEnableDefaultPopOutImage="False"DynamicHorizontalOffset="-1"Font-Bold="fal

Andoroid中控制元件引用style樣式

佈局檔案中引用樣式: <TextView style="@style/alltitle" android:text="我的" /> 在re