DevExpress 設計Ribbon界面

Ribbon上包含以下一些元素，如圖所示：

元素對應API：

Element	Ribbon API
Quick Access Toolbar	RibbonControl.Toolbar RibbonQuickAccessToolbar.ItemLinks
Application Button	RibbonControl.ShowApplicationButton RibbonControl.ApplicationButtonDropDownControl
Main pages	RibbonControl.Pages
Page Category	RibbonControl.Categories
Contextual pages	RibbonPageCategory.Pages
Page Groups	RibbonPage.Groups RibbonPageGroup.ItemLinks
Bar Item links	RibbonControl.Items BarItemLink.Item

1、首先新建一窗體工程，從工具欄“導航和佈局Navigation&Layout”拖動RibbonControl到窗體，RibbonControl自動停靠到Form靠上的位置，如下圖所示：

　　Page：表示Ribbon的菜單項，參考Word2007的“開始”菜單（菜單下又分很多PageGroup，每一個PageGroup裏可以包含多個功能項，如按鈕、文本、編輯框等等）功能項和Quick Access快速訪問實質是一樣的，所以可以共用相同按鈕或文本等控件。

　　PageGroup：表示菜單下面的各個功能項，參考Word2007“開始”菜單下的“剪貼板”功能項。每一個PageGroup裏可以包含多個功能項，如按鈕、文本、編輯框等等

　　Quick Access:表示快捷功能鍵，參考Word2007“開始”上面的快捷按鈕圖標。（相當於03下的工具欄）

新增：

　　選中Page,右鍵點擊可以新增Page或者新增屬於本Page的PageGroup。

　　我們先增加一個Page，並在第一個Page下的Group裏新增一個按鈕button。

刪除：

　　點擊右RibbonControl右上角的三角符號 ，選擇Run Designer，

　　在第一項Ribbon Items裏，可看到剛纔新建的Page和PageGroup，在這裏選中想要刪除的項目，點擊上面的Remove既可。

　　Quick Access的新建和刪除參考上述的步驟既可。

2、轉換窗體爲Ribbon窗體

選擇RibbonControl控件的右上角的三角符號，選擇Convert Form to Ribbonform 窗體會轉換爲Ribbon格式

要把DX圖標換成自己的，修改RibbonControl.ApplicationICon即可

不顯示快速訪問this.ribbonControl1.ToolbarLocation = DevExpress.XtraBars.Ribbon.RibbonQuickAccessToolbarLocation.Hidden;

3、設置外觀和樣式

這個可以通過拖動DXXX Components組的DefaultLookAndFeel控件到窗體設計器來設置ribbon的皮膚。（我發現13.2.8試用版會影響解決方案的其他項目，所以要慎重哦，刪除了仍有影響）

也可以通過設置控件自身UseDefaultLookAndFeel=false，然後設置自己的樣式和外觀。4

4、單擊應用程序圖標彈出菜單

所以是PopupMenu，其實任何一個DropDown形式的都可以

拖動一個PopupMenu控件到窗體設計器，將ribbonControl.ApplicationButtonDropDownControl=popupMenu1

單擊ApplicationButton就會出現彈出菜單了。

四、新增圖片資源

　　從工具箱內拖住ImageCollection控件到Form上，類似於DefaultLookAndFeel，在Form下方出現新增控件，右鍵點擊此控件，選中Add Image，可從本地獲取相關圖標，我在這裏新增了四個小圖標，如下圖所示：

　　下面我想要在第一個PageGroup裏的Button前面新添加一個小圖標。

　　（1）查看Ribbon Control的屬性，將imagecollection 賦給Images屬性。

　　（2）選中button，查看其屬性，選中ImageIndex屬性，選擇需要添加的圖標既可。

如下圖所示：

 

--------------------------------------------------

附錄：

DevExpress點滴學習--換膚

一、在項目下新建RibbonForm  命名爲：useSkin

二、添加引用DevExpress.OfficeSkins
      DevExpress.UserSkins.BonusSkins

三、將ribbonPage1的Text屬性設置爲：皮膚

      ribbonPageGroup1的Text屬性設置爲：更換皮膚

      在ribbonPageGroup1下新建個ribbonGalleryBarItem1，將其Caption的屬性設置爲：請選擇您喜歡的皮膚，並添GalleryItemClick    事件：ribbonGalleryBarItem1_GalleryItemClick

四、在應用程序的主入口裏添加：

static void Main()
        {
            //皮膚
            DevExpress.UserSkins.OfficeSkins.Register();
            DevExpress.UserSkins.BonusSkins.Register();
            DevExpress.Skins.SkinManager.EnableFormSkins();

            Application.EnableVisualStyles();
            Application.SetCompatibleTextRenderingDefault(false);
            Application.Run(new Exercises.useSkin());
        }

 

 

五、添加命名空間using System.Xml;

在事件ribbonGalleryBarItem1_Click裏添加代碼：

private void ribbonGalleryBarItem1_Click(object sender, DevExpress.XtraBars.Ribbon.GalleryItemClickEventArgs e)
        {
            string name = string.Empty;
            string caption = string.Empty;
            if (ribbonGalleryBarItem1.Gallery == null) return;
            caption = ribbonGalleryBarItem1.Gallery.GetCheckedItems()[0].Caption;//主題的描述
            caption = caption.Replace("主題：", "");
            //name = bsiPaintStyle.Manager.PressedLink.Item.Tag.ToString();//主題的名稱
            ribbonGalleryBarItem1.Caption = "主題：" + caption;

            XmlDocument doc = new XmlDocument();
            doc.Load("SkinInfo.xml");
            XmlNodeList nodelist = doc.SelectSingleNode("SetSkin").ChildNodes;
            foreach (XmlNode node in nodelist)
            {
                XmlElement xe = (XmlElement)node;//將子節點類型轉換爲XmlElement類型 
                if (xe.Name == "Skinstring")
                {
                    xe.InnerText = caption;
                }
            }

            doc.Save("SkinInfo.xml");
            //XtraMessageBox.Show("您選擇了主題：" + caption);
        }

添加命名空間

using DevExpress.XtraBars.Helpers;
using DevExpress.LookAndFeel;

六、添加命名空間using DevExpress.XtraEditors;

在Load下添加代碼：

public string defaultSkinName;//皮膚
        private void useSkin_Load(object sender, EventArgs e)
        {
            SkinHelper.InitSkinGallery(ribbonGalleryBarItem1);
            CheckFile();//檢查文件
            GetXmlSkin();//獲取xml主題
            UserLookAndFeel.Default.SetSkinStyle(defaultSkinName);//設置主題樣式
            ribbonGalleryBarItem1.Caption = "主題：" + defaultSkinName;
        }

        #region 檢查XML文件是否存在
        public void CheckFile()
        {
            try
            {
                if (System.IO.File.Exists("SkinInfo.xml") == false)
                {
                    //XtraMessageBox.Show("不存在XML");
                    CreateXml();
                }
            }
            catch (Exception ex)
            {
                XtraMessageBox.Show(ex.ToString(), "Error", MessageBoxButtons.OK, MessageBoxIcon.Error);
            }
        }

        #region 創建XML文件

        public void CreateXml()
        {
            XmlDocument doc = new XmlDocument();
            //建立xml定義聲明
            XmlDeclaration dec = doc.CreateXmlDeclaration("1.0", "utf-8", null);
            doc.AppendChild(dec);

            //創建根節點
            XmlElement root = doc.CreateElement("SetSkin");
            XmlElement rootone = doc.CreateElement("Skinstring");//皮膚


            //將one，two，插入到root節點下
            doc.AppendChild(root);
            root.AppendChild(rootone);
            doc.Save("SkinInfo.xml");
        }

        #endregion

        #region 讀取Xml節點內容

        public void GetXmlSkin()
        {
            try
            {
                XmlDocument mydoc = new XmlDocument();
                mydoc.Load("SkinInfo.xml");
                XmlNode ressNode = mydoc.SelectSingleNode("SetSkin");
                defaultSkinName = ressNode.SelectSingleNode("Skinstring").InnerText;

            }
            catch (Exception ex)
            {
                XtraMessageBox.Show(ex.ToString(), "Error", MessageBoxButtons.OK, MessageBoxIcon.Error);
            }
        }

        #endregion

        #endregion

好了，現在就可以爲自己的窗體選擇喜歡的皮膚了。

看一下效果吧。。。。

       

Look And Feel被類UserLookAndFeel類實現，每個支持該機理的控件，都有一項屬性叫做LookAndFeel，通常，所有的控件都是使用該類的一個靜態缺省對象。

例如在窗體中添加一個簡單按鈕DevExpress.XtraEditors.SimpleButton simpleButton1，該按鈕就會有LookAndFeel屬性：

你要特別注意這個LookAndFeel下的UseDefaultLookAndFeel和 UseWindowsXPTheme，這兩個屬性能夠否決所有其他的設置。

如果UseDefaultLookAndFeel被設置爲True，則所有其他的設置將會被無視，將會採用默認的設置，那麼默認的設置是什麼呢？默認的設置又是可以定製的。這個看起來有點奇怪，其實慢慢看就會明白。

在工具箱中Component下拖動一個DefaultLookAndFeel控件（DevExpress.LookAndFeel.DefaultLookAndFeel defaultLookAndFeel1）
後，設置其屬性，這個屬性就會作爲全局的默認屬性，程序員就可以自行定製默認的LookAndFeel了。

這個時候你試試設置UseDefaultLookAndFeel會發現只能改爲True（因爲沒有上級的LookAndFeel供其參考了），同時把UseWindowsXPTheme設置爲False，然後修改一下SkinName，例如爲Lilian，會發現簡單按鈕的外觀發生了改變。在往其中添加控件，你會發現會自動使用Lilian外觀：

現在，一旦我修改了defaultLookAndFeel1的SkinName，這四個控件的外觀都會按統一的樣式發生變化，有趣的是，這一改變是可以在運行時發生的，例如我們給simpleButton1添加事件：

private void simpleButton1_Click(object sender, EventArgs e)
{
    this.defaultLookAndFeel1.LookAndFeel.SkinName = "iMaginary";
}

在運行過程就可以修改程序的外觀了。

如果UseDefaultLookAndFeel被設置爲False，控件的外觀就會受到UseWindowsXPTheme的影響，如果說UseDefaultLookAndFeel是總統的話，則UseWindowsXPTheme就是副總統了。該屬性決定了控件的外觀是否受到XP樣式的影響，當副總統說True的時候，並且系統恰好使用了XP主題，則UserLookAndFeel.Style的值就會被無視，而採用XP的主題。

修改簡單按鈕的的點擊事件，試試分別在副總統說True和False的時候運行該代碼：

private void simpleButton1_Click(object sender, EventArgs e)
{
    this.defaultLookAndFeel1.LookAndFeel.Style = LookAndFeelStyle.Office2003;
}

你就會知道副總統還是管點事的。

如果真想修改Style，比較好的建議是在運行時修改其值，例如：

private void simpleButton1_Click(object sender, EventArgs e)
{
    this.defaultLookAndFeel1.LookAndFeel.UseWindowsXPTheme = false;
    this.defaultLookAndFeel1.LookAndFeel.Style = LookAndFeelStyle.Office2003;//要使用命名空間using DevExpress.LookAndFeel;

}
這樣就可以不管控件的默認值了。

 最後說說UserLookAndFeel.Style，它接收或者返回一個 LookAndFeelStyle的枚舉值，其中有Flat、Office2003、UltraFlat等，具體可查看幫助文檔。

呃，還忘記了SkinName，前面可以發現，該屬性接收或者返回的是字符串，其實可行的字符串也就那幾種吧，即Caramel、Money Twins、Lilian、iMaginary、DevExpress Dark Style、Black、Blue，如果設置其他值，會有什麼後果呢？你自己試試吧