Quick Tour Of New MFC Functionality

Quick Tour Of New MFC Functionality

Hi I’m Pat Brenner, a developer on the Visual C++ libraries team.  I’m pleased to give you a sneak peek at a major MFC update we’ve been working on.  Since we’re adding a number of cool new user interface components to MFC, this blog post is going to be graphics heavy.  I’d much rather show you some of these components than just describe them!  I hope you enjoy this quick tour through the new portions of the library.

 

Modern user interface elements

 

This update to the MFC library will enable developers to build modern user interfaces with support for the Office 2007 Ribbon Bar, Office-style menus, Visual Studio-style docking toolbars, tabbed documents and much more.   All of the components included in the update will run on Windows 2000 and above.

 

Let’s take a look at some of the Office 2007 Ribbon Bar support.  Below is an image of an MFC application built with the Office look and feel:

 

 Ribbon Application

The ribbon support includes support for the application button (the large round button at the top left), the quick access toolbar (the small set of tools just to the right of the application button) and the standard ribbon components.  Each tab on the ribbon (e.g., the “Home” tab above) allows access to a category of tools.  Each category is divided up into a set of panels (e.g., “Clipboard” and “Font” above) and each panel contains a set of ribbon elements.  These ribbon elements can have a wide variety of styles—I’ll go into more detail about these later.

 

Perhaps many of you would like to build applications that utilize some of the functionality we’ve had in Visual Studio.  For example, one of the most requested features is support for the smart docking we added in Visual Studio 2005.  With this new release, all the cool user interface features you’ve seen in the past versions of Visual Studio are at your disposal.

 

Let’s take a look at some of the Visual Studio support.  Below is an image of an MFC application built with the Visual Studio look and feel:

VS2005 Docking (edit)

 

MFC now implements its own menu bar and toolbar, which is fully customizable like the Visual Studio toolbar and menu bar.  This means that buttons can be moved between toolbars, and even from the toolbar to the menu bar and vice versa.   Custom toolbars can be created, and commands can be added to them.  And the images for the individual toolbar buttons can even be changed, and custom images can be created and used.  Support for docking panes is also included—these panes can be grouped into one docking frame as above, they can be floating as well as docked, and they support auto-hide mode like in Visual Studio, so a docked pane will slide out from the edge of the frame when its tab is hovered over, mimicking the Visual Studio behavior.  There is also support for tabbed MDI documents (which can be grouped) like in Visual Studio.

                                                                                                                                                                                                                                                        

Ribbon Elements

 

In addition to all the features supporting Office, Internet Explorer and Visual Studio “look and feel” there are a number of built-in cool elements you can use in the ribbon in your application.  In the images below, we provide a quick visual introduction to what’s included in the library.  The images come from the RibbonGadgets example that ships with the library.

 

In the image below you can see large and small buttons, as well as check boxes.  The buttons can be simple (so they just respond to a click), or they can drop down a menu or be a split button which responds to the click or drops a menu depending on the click location.

RibbonGadgets 1 (edit) 

In the image below you can see what we call palette buttons.  These can be a set of buttons that have associated images, so the user can see what he will get when he clicks on a button in the palette.  These palettes can be embedded in the ribbon, or they can be dropped down from a button in a window which can be resized dynamically by the user.

 RibbonGadgets 2 (edit)

In the image below you can see a variety of color choosers.  These can be embedded in the ribbon, or they can be attached to a button.  The table of colors associated with the chooser can be customized in your application.  There is a color picker dialog which offers even more flexibility, including the ability to choose the color of any pixel on the screen and use that color.

RibbonGadgets 3 (edit)

In the image below you can see groups of commands.  A ribbon group can be built from an existing toolbar, so if your application has a large number of toolbars, you can place them on the ribbon with ease.

                           

RibbonGadgets 4 (edit)                         

In the image below you can see support for edit boxes, combo boxes and spin controls, as well as the font picker control, which can display the font names in the font (as in Word) so you get an instant preview of the font appearance.

RibbonGadgets 5 (edit) 

Below you can see a few more ribbon elements.  Several of these, including the progress indicators and the links and sliders, actually make more sense on the ribbon status bar, which you can see in the first image at the top of this article.

                 

RibbonGadgets 6 (edit)                                                         

Powerful application wizard

 

We’ve also beefed up the MFC Application Wizard (see the images below) quite a bit to enable easy use of these new features in MFC.  We’ve added a couple of options to the “Project Style” category which will allow you to build a project that looks something like Visual Studio or an Office application by default.  We’ve added the option to use tabbed MDI document windows rather than the old MDI style.  And we’ve added the ability to choose the look and feel of your application with the “Visual Style and Colors” combo box.

 

An option that is hidden in this image is a checkbox that allows your application look and color to be changed at runtime.  You can choose your application look and color at design time, but if the user wants to change it, he can do so easily.  This is possible because the drawing of all the user interface elements is done via what is called a “visual manager”.  The visual manager takes care of all the drawing of elements, so if a different look is desired, all that is required is to switch to a different visual manager, and redraw the window, and your application instantly has a completely new look.  As you can see in the image below,  a number of schemes are supported, including Office 2003, Visual Studio 2005, and several different Office 2007 schemes which use different colors.  All of these are implemented using visual managers.

 

 wizard1

An option that is disabled in the image below (because ribbon was chosen instead of menu bar) is a checkbox that enabled “personalized menu behavior”.  This means that the menus will not show all commands by default, just like in Office applications.  When a menu is hovered over briefly, the menu will expand to contain its full set of commands.  And as the application is used, the most-used commands are added to the menu by default, so over time, the menu will become personalized to how it is being used.

 

 wizard2

 

Below is a screenshot of a running application which uses a ribbon.  This is actually the application created by the Application Wizard when the “Office” project style is chosen.  There is an Outlook-style navigation bar docked on the left side of the frame, and a caption (or message) bar at the top of the client area.  Note that the application button, quick access toolbar buttons, and the ribbon elements have keyboard hotkeys which are available when the Alt key is pressed.  On the right hand side of the ribbon is a drop-down element named “Style”, and from it you can choose which color you’d like the application to be presented in.

Wizard Generated with accelerator tips

Easy to update existing MFC code

 

One of the great things about the new components is that they’re easy to incorporate into existing applications.  All of the new behavior is encapsulated in new classes, and none of the existing classes have been modified.  If you want to update your existing MFC application to use the new menu bar and toolbar support, all that is required to update your application to the new look is to change the base classes of your application and frame windows, and add a few lines of code, and you’ve just updated your application to have a more modern interface. 

 

Below is an image of the new DrawClient sample.  This is a remodel of the DrawCli sample that ships with MFC—it’s been updated to include Ribbon support.  Most of the modifications to the source code were in mainfrm.h and mainfrm.cpp.  The ribbon is currently built entirely in code.  The ribbon is created and then the various ribbon elements (application button, quick access toolbar, categories, etc.) are added via calls to ribbon member functions.  However, the underlying command architecture did not have to change—all the ribbon controls can be associated with a command identifier, and when the command is fired, it is handled via the existing command handlers.  The object drawing code did not have to change in any substantial way—it was only augmented to allow a few new capabilities.  One of these capabilities is something I’ll call “command preview”.  This means that, just like in the new Office applications, you can see the effect of a command before actually choosing it.  For example, the purple rounded rectangle is active below.  As you float the mouse over the large color buttons in the ribbon, the rectangle will temporarily change color to match the color of the button the mouse is hovered over.  When you click on the button, the color of the rectangle will then be changed.

 

 drawcli (edit)

We’re pretty excited about all these new additions to MFC, and we hope you are too!  Feel free to ask any questions you have about the new features and I’ll do my best to answer.

 

Pat Brenner

Visual C++ Libraries Development 

  • Pat,

    A few questions:

    1) Is this going to be integrated into the MFC DLLs themselves directly (horrible idea BTW since a key benefit of MFC is/was that its light weight with no dependencies), or an optional external library that I can "turn 100% off" and not add the bloat?

    2) How will this affect turn around? If its an external standalone lib thats just visually integrated into the IDE, I can see it being inplace replacable when BCG comes out with fixes or new features. But if it requires a new MFC DLL, I see turn around going out the window.

  • Good things:

    1) modern UI for free

    2) bundled into standard distribution (shared dll's)

    3) attention from dev community - better docs and many examples

    4) code quality improvement by MS guys (unlikely)

    Bad things:

    1) future MFC updates? (BCG is a commercial product and IMO it will always be more advanced)

    2) MFC and new versions of BCG together?

    3) BCG's code quality

  • Hey Rick, don't wait for "Somebody", just download BCG's latest trial and see what stuff you're going to get for free. Don't hear what he "said about it".

  • I had some experience with BCGSoft products two years ago, so the first thought was that I don't need it even for free. However, I downloaded their latest pack and was amazed how the things have changed! Still there are some performance issues, but very minor. If this stuff is coming with new MFC, I take my words back!

  • Since some folks raised some issues about the quality. We haven't seen such flickering issues. From the support point of view, developers should expect the same kind of support for any other part of our librariest. We fully stand behind the quality. Hopefully you will be able to give it a try and let us know you feedback.

    Thanks,

    Ayman Shoukry

    Lead Program Manager

    Visual C++ Libraries Team

  • Well, I'm not one to play QA for free :), but I'll toss you a couple of quick bones to make my point:

    1) In the BCGPVisualStudioGUIDemo (as of the one posted tonight), you'll notice there are several rows of toolbars at the top:

    a) Changing the height of the dock area by dragging the toolbars around causes the bottom of the application window to flash like crazy.

    b) Drag one of the toolbars from docked to floating and back to docked a few times. You'll notice that even though I'm dragging it to where I want it (the lower right hand side of the dock area) it *always* flashes for a second in the upper left hand corner before redrawing in its correct location.

    c) Its quite easy to get the bars to flash in an overlapped state before redrawing correctly. By this, I mean, if I drag the toolbars around, I can frequently see them painting on top of one another briefly before adjusting.

    d) If I want to be anal about it, none of the themes really look very close to the real thing. Which is the whole point isn't it? Compare the Office 2003 style to the real Office 2003, the colors are way off.

    2) In the BCGPMSOffice2007Demo (as of the one posted tonight):

    a) Mouse over buttons so the tooltips appear. They often flash a black rectangle on the screen before repainting (easier to see on the expando buttons that have thumbnails)

    b) Switching between active/inactive frame causes the frame buttons to jump around.

    I could go on and on, but that was found in 5 minutes.

  • To Carole and others that have asked why we didn't choose to build on top of the actual Office ribbon implementation: this is primarily a question of time-to-market and opportunity costs.  It would have taken us at least another 2 years to bring functionality such as this to market by building on top of Office ourselves and during that 2 years the team would not have been able to work on any other C/C+++ libraries features.  To be quite honest, we weren't willing to wait this long with the team unavailable for other libs projects in order to bring this functionality to customers.  We're really happy with what we found in BCGSoft, and the strategy we chose enables us get to market more quicky with a fantastic feature set with only some fine tuning integration, quality, performance, and security.

    Thanks!

    Steve Teixeira, Group Program Manager, VC++

  • Steve, thank you for your answer.

    Honestly, I'm a big fan of VC++ and MFC. Then, I have another question about your decision of buying 3rd solution: Were there any technical or political reasons that prevent from using original Ribbon and UI source codes? I've expected those were written in native C/C++ code, so they can easily integrated into MFC library.

    In my opinion, it would be much better if we would use *real* ribbon and other stuffs and not seeing source code, than using imitated gadgets and its open sources.

  • http://www.bcgsoft.com/bcgcontrolbarpro-versions.htm Analyze the frequency of releases and number of defects resolved. With every version of this lib there are many bugfixes and new bugs injected by added features.

    How Microsoft will guarantee the quality of BCG's code as a part of MFC?

    Quality doesn't concern "flickering issues", i meant code quality. The library has been evolving for a long period of time and of course they were trying to make compatible versions with all those design and code quality problems.

  • Carole: The notion of wrapping the Office version of the ribbon didn't present any political or legal issues to cause any concern.  There could, however, potentially be some techniccal issues, since it was written to meet the needs of MS Office and not necessarily optimized to provide for the best experience for developers that want to put a ribbon into any application.  In the end, we felt the path we chose gave us the best time to market as well as maximal utility and flexibility for developers incorporating ribbons into their applications.

    Chabster: Perhaps we have different frames of reference here, but when I look at the page you reference I'm pretty impressed with the frequency of releases, the number of new features in these releases, and the modest number of bugs that need to be fixed.  At any rate, this code base went through several reviews, and we feel very good about its quality.  We're also doing even more work to improve quality and security as we integrate it into MFC proper.  As Ayman said, we will absolutely stand behind the quality of this library.

  • Steve, is Microsoft going to integrate these classes into mfc90.dll or is MFCnext an add-on to the core MFC? I would prefer the second.

  • stevetei: Steve, will MS provide an MSDN like documentation for the whole library? BCG's is not pretty.

  • Chabster, thats so wrong, I don't even know where to begin. Flickering & drawing bugs doesn't matter to you as long as the code looks pretty underneath? Glad I didn't hire you to work on my GUI :).

  • To the VC++ management who claim they don't see flickering and drawing issues in BCG:

    Its not that hard to find them. Try download the demo off the BCG site and drag the toolbars around. They flash like crazy as they are being docked/undocked/redocked. I'm looking at it right now and the toolbars often repaint over one other and in completely the wrong locations and cause the bottom of the app window to flash like crazy as well.

  • Also...

    1) None of the themes are very accurate to the original app. Ie. The Office 2003 theme generally looks like Office 2003, but the colors are pretty different. Same for the other themes.

    2) Tooltips often flash black rectangles on the screen before repainting correctly (at least in the ribbon demo).

    3) Ribbon frame buttons jump around between active & inactive states.

    Yeah, most of these issues I've just mentioned are "minor", but having 1000's of "minor" issues isn't that good.

Page 2 of 9 (135 items) 12345»