{"id":4253,"date":"2009-10-01T20:23:00","date_gmt":"2009-10-01T20:23:00","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/vcblog\/2009\/10\/01\/ribbon-designer\/"},"modified":"2019-02-18T18:45:47","modified_gmt":"2019-02-18T18:45:47","slug":"ribbon-designer","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/cppblog\/ribbon-designer\/","title":{"rendered":"Ribbon Designer"},"content":{"rendered":"

Hello, my name is Samatha Mannem and I am a QA with the IDE team.<\/font><\/p>\n

The world has become sophisticated and the time has come to make every application geeky as well as fancy. That is where \u2018Ribbon\u2019 has evolved. The recent UI designs that people are attracted to are Microsoft Office and Windows 7 ribbons.<\/font><\/p>\n

While Visual Studio 2008 SP1 included the ability to create an application that has a ribbon UI, it was difficult for you to configure it as desired. Detailed Information on Ribbon Designer VS2008 is available at <\/font>http:\/\/msdn.microsoft.com\/en-us\/library\/bb386089.aspx<\/font><\/a>.<\/font><\/u><\/span> The Visual Studio product team received a lot of feedback on this issue. With Visual Studio 2010, designing a ribbon-based UI is made much easier with the \u201cRibbon Designer\u201d.<\/font><\/font><\/p>\n

 <\/font><\/p>\n

During project creation, the Application Wizard allows you to select the ribbon style for your application. In addition to Office, Visual Studio and Windows Native which were available for Visual Studio 2008, Windows 7 ribbon style is also available in Visual Studio 2010.<\/font><\/p>\n

<\/p>\n

Changing the style of the application can easily be done on the fly. At any time during application development, the style of the ribbon\u2019s UI can be changed easily via the \u2018style\u2019 dropdown shown below. Changing the style of the ribbon only affects the ribbon\u2019s appearance \u2013 it does not in any way disturb the functionality of your application.<\/font><\/p>\n

<\/p>\n

With Dev10 creating a ribbon of your style or adding\/deleting few tools from the existing Office\/Windows ribbon is just a drag and drop action. Writing and debugging complicated UI code is now a thing of the past. Adding behavior to the ribbon\u2019s tools is easily done by adding an event handler to each (explained later). <\/font><\/p>\n

The following images show the variety of controls that can be used on the Ribbon.<\/font><\/p>\n

Each control shown below can be designed using Ribbon Designer\u2019s tool box shown here. This tool box can be viewed either by hovering the mouse over the \u2018Toolbox\u2019 in the Designer window or by using the menu View->Toolbox.  You can add the ribbon like any other resource (dialog, icon) with the Add Resource->Ribbon menu in the Resource view.<\/font><\/p>\n

<\/font><\/font><\/p>\n

<\/span> <\/p>\n

<\/span> <\/p>\n

A ribbon resource created can be added to existing MFC application. To do so, modify the application to load the ribbon resource.<\/span><\/p>\n

CMFCRibbonBar m_wndRibbonBar<\/span>;    \/\/declare it<\/span><\/span><\/font><\/font><\/p>\n

if (!m_wndRibbonBar.Create (this))  \/\/create and initialize the ribbon control<\/span><\/p>\n

{<\/span><\/p>\n

    return -1;<\/span><\/p>\n

}<\/span><\/p>\n

if (!m_wndRibbonBar.LoadFromResource(IDR_RIBBON))<\/span><\/p>\n

{<\/span><\/p>\n

    return -1;<\/span><\/p>\n

}<\/span><\/p>\n

<\/font><\/p>\n

<\/font><\/p>\n

<\/font><\/p>\n

 <\/font>Adding various properties to the control can make it function the way user wants it to serve the purpose.<\/font><\/font><\/p>\n

The image and Menu Items of the Button can be set using the properties window and can be viewed by Right clicking on Ribbon ->properties. Setting the properties in this window is same as writing the following code in CMainFrame.cpp.<\/font><\/p>\n

<\/p>\n

You can double-click any control on the designer to open an Items Editor and add more items in its sub menu.  You can create event handlers for all other control events by using either the Properties<\/b> window or right click on a control and choose \u2018Add Event Handler\u2019.<\/font><\/p>\n

 <\/span><\/p>\n

A Resource file in the solution, ribbonname.mfcribbon-ms, contains the property values of each control on the Ribbon.<\/font><\/p>\n

For example following properties are equivalent to the property window shown. The values modified in the properties window reflect the values in this resource file. <\/font><\/p>\n

 <\/p>\n

<\/p>\n

With this Ribbon designer, our goal is to make your UI creation easy and flexible to change. Overall we believe that with this designer you will have your Application Ribbon easy to play with. We are excited about this feature and would like to hear back from you.<\/font><\/p>\n

<\/font><\/p>\n","protected":false},"excerpt":{"rendered":"

Hello, my name is Samatha Mannem and I am a QA with the IDE team. The world has become sophisticated and the time has come to make every application geeky as well as fancy. That is where \u2018Ribbon\u2019 has evolved. The recent UI designs that people are attracted to are Microsoft Office and Windows 7 […]<\/p>\n","protected":false},"author":289,"featured_media":35994,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[6,24],"class_list":["post-4253","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cplusplus","tag-ide","tag-ribbon"],"acf":[],"blog_post_summary":"

Hello, my name is Samatha Mannem and I am a QA with the IDE team. The world has become sophisticated and the time has come to make every application geeky as well as fancy. That is where \u2018Ribbon\u2019 has evolved. The recent UI designs that people are attracted to are Microsoft Office and Windows 7 […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/cppblog\/wp-json\/wp\/v2\/posts\/4253","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/cppblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/cppblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/cppblog\/wp-json\/wp\/v2\/users\/289"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/cppblog\/wp-json\/wp\/v2\/comments?post=4253"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/cppblog\/wp-json\/wp\/v2\/posts\/4253\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/cppblog\/wp-json\/wp\/v2\/media\/35994"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/cppblog\/wp-json\/wp\/v2\/media?parent=4253"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/cppblog\/wp-json\/wp\/v2\/categories?post=4253"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/cppblog\/wp-json\/wp\/v2\/tags?post=4253"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}