microsoft’s ribbon strategy mfcmfcwrfwrfwpfwpf target: managed target: managed target: mfc native...

Windows Ribbon:Technical Deep Dive

Ryan DemopoulosProgram ManagerMicrosoft Corporation

CL18

Ribbon LandscapeThree ways to adopt a ribbon

Microsoft’s Ribbon Strategy

MFC WRFWPF

Target:Managed

Target:MFC Native

Target:Native1

needs .NET 3.5

WinXP or newer

Vista or newer

Office 2007 & Windows look

Office 2007 & Windows look

Windows look

•CodePlex now•New version in 2010

•Available now in Visual Studio 2008 SP1

•Included w/Win7•Vista with Platform Update

Today’s talk:Windows Ribbon

framework

1Managed wrappers for Windows Ribbon framework available with PreviewRibbon tool

http://code.msdn.microsoft.com/PreviewRibbon

Windows Ribbon Technical Deep DiveKey takeaways..> Awareness of how to tackle ribbon

design> Examples from Movie Maker, both good &

bad

> How to implement some controls> Dive into: Gallery, Contextual

TabGroup, Application Modes

> Ultimate goal: You feel equipped & energized to build great ribbons with the Windows Ribbon framework!

Designing a RibbonPrepare your mind!

> Shift your thinking from “features” to “scenarios”> Resist the urge; don’t just map menus

tabs

Designing a RibbonWhere Do I Start?

> General steps taken by our product teams:> Step 1: List all commands in your

application> Step 2: Categorize commands by scenario> Step 3: Scenarios Ribbon, Canvas, App

Menu> Step 4: Form into tabs, groups, & controls

Example: Improve FontControl sampleFocus on design & implementation> Available in Windows SDK, or here:

http://msdn.microsoft.com/en-us/library/dd742703(VS.85).aspx

Example: Improve FontControl sampleFocus on design & implementation> Available in Windows SDK, or here:

http://msdn.microsoft.com/en-us/library/dd742703(VS.85).aspx

> Imagine that we want to turn the sample into something that is more useful> Walk it through the four design steps> Write the necessary ribbon UI

markup/code

Step 1: List All Commands In Your App FontControl> Existing FontControl

commands> Font face> Font size> Inc. font size> Dec. font size> Bold> Italics> Underline> Strikethrough> Subscript> Superscript> Text highlight> Text color> Exit

> New FontControl commands> Uppercase selection> Lowercase selection> Print> Print Preview> Close Print Preview> Pick text style> Add text style

Step 2: Categorize Commands By ScenarioFontControl> New FontControl commands

> Uppercase selection> Lowercase selection> Print> Print Preview> Close Print Preview> Pick text style> Add text style

Transform Text

UppercaseLowercase

PublishingPrintPrint PreviewClose Print Preview

Styling TextPick text styleAdd text style

Styling TextPick text styleAdd text style

Step 2: Categorize Commands By ScenarioFontControl

ExitingExit

> Existing FontControl commands

> Font face> Font size> Inc. font size> Dec. font size> Bold> Italics> Underline> Strikethrough> Subscript> Superscript> Text highlight> Text color> Exit

Font commands(Bold, Dec. font size, Font face, Font size, Inc. font size, Italics, Strikethrough, Subscript, Superscript, Text color, Text highlight, Underline)

Transform Text

UppercaseLowercase

PublishingPrintPrint PreviewClose Print Preview

> “Workspace”-related scenarios> Central place for users to find commands

Step 3: Scenarios Ribbon, Canvas, App MenuWhere do your commands fit best?

Ribbon

> Quickly-performed actions> Maintaining commanding conventions> “Is this command really needed on the

canvas?”

Step 3: Scenarios Ribbon, Canvas, App Menu Where do your commands fit best?

Canvas

Step 3: Scenarios Ribbon, Canvas, App Menu Where do your commands fit best?

> Similar to classic File menu> “Meta-workspace” scenarios> Preferences & application settings

Application Menu

Step 3: Scenarios Ribbon, Canvas, App Menu FontControl

Application Menu

ExitingExit

Transform Text

UppercaseLowercase

PublishingPrintPrint PreviewClose Print Preview

Styling TextPick text styleAdd text styleFont commands(Bold, Dec. font size, Font face, Font size, Inc. font size, Italics, Strikethrough, Subscript, Superscript, Text color, Text highlight, Underline)

Ribbon

Canvas

Step 4: Create Tabs, Groups, & ControlsNow the fun begins!> Recap..

> Step 1: we identified our commands> Step 2: we sorted them into user

scenarios> Step 3: we mapped scenarios to UI areas

> ..now, it’s time to create the UI elements!

Step 4: Create Tabs, Groups, & ControlsSome tips..> Be mindful of future scalability

> Don’t stuff your tabs

Step 4: Create Tabs, Groups, & ControlsSome tips..> Be mindful of future scalability

> Don’t stuff your tabs> On large tabs, users focus on “left-

center”

Step 4: Create Tabs, Groups, & ControlsSome tips..> Be mindful of future scalability

> Don’t stuff your tabs> On large tabs, users focus on “left-

center”> Home Tab: most important commands

Step 4: Create Tabs, Groups, & ControlsSome tips..> Be mindful of future scalability

> Don’t stuff your tabs> On large tabs, users focus on “left-

center”> Home Tab: most important commands

Usability Trumps All

Step 4: Create Tabs, Groups, & Controls Commands for “Styling Text” scenario

> Target:Ribbon (& Canvas)

> Users want to visualize how styling will affect their text

Styling Text

Pick text styleAdd text style

Font commands(Font face, Bold, Text color, Strikethrough, etc..)

Gallery Control

> A menu for exposing visual commands> Live Preview> Arbitrary item image sizes

> Dynamic population of items

InRibbonSplitButtonDropDown

Gallery Control

> A menu for exposing visual commands> Live Preview> Arbitrary item image sizes

> Dynamic population of items> Command Space

Command Space

Gallery Control

> Suggestion: use InRibbonGalleries!> Best visual indicator of what the gallery

can do> Reduces the number of clicks to get to

items> Fills the ribbon in an adaptable way

FontControlStyle Gallery

demo Markup: <InRibbonGallery>Code: IUICollection of

IUISimplePropertySet items

Step 4: Create Tabs, Groups, & Controls Commands for “Exiting” scenario

> Target:Application Menu

ExitingExit

Step 4: Create Tabs, Groups, & Controls Commands for “Transform” scenario

> Target:Ribbon

> Not commonly executed..

Transform Text

UppercaseLowercase

Step 4: Create Tabs, Groups, & Controls Commands for “Transform” scenario

> Target:Ribbon

> Greyed out when text is not selected

Transform Text

UppercaseLowercase

Step 4: Create Tabs, Groups, & Controls Commands for “Transform” scenario

> Target:Ribbon

> App fires Contextual TabGroup when needed

Transform Text

UppercaseLowercase

FontControlContextual TabGroups

demo Markup: <TabGroup>Code: Respond to

UI_PKEY_ContextAvailable

Step 4: Create Tabs, Groups, & Controls Commands for “Publishing” scenario

> Target:Application Menu

PublishingPrintPrint PreviewClose Print Preview

Step 4: Create Tabs, Groups, & Controls Commands for “Publishing” scenario

> Target:Application Menu/Ribbon

PublishingPrintPrint PreviewClose Print Preview

Application Modes

> A way to reconfigure your application’s UI

> Contextual TabGroups vs. Application Modes> TabGroups: context of workspace has

changed> App Modes: context of entire app has

changed

Application ModesHow they work..> Modes are numbered from 0, 1, … 31> Can be bound to three types of

controls:> Core tabs> Groups within a tab> Controls directly in the application menu

> Not always exclusive; they can be combined<Tab ApplicationModes=“1,3,4”>

FontControlApplication Modes

demo Markup:ApplicationModes=“1”Code: IUIFramework::SetModes()

FontControlApplication Modes

demo Markup:ApplicationModes=“1”Code: IUIFramework::SetModes()

PAUSED

The Default mode

> Mode 0 is called the “default” mode> Any modal control that isn’t explicitly

bound to a mode is put into mode 0 (default mode)

> This means FontControl is already modal

> On startup, default mode activates automatically> Useful for default UI configuration

FontControlApplication Modes

demo Markup:ApplicationModes=“1”Code: IUIFramework::SetModes()

RESUME

FontControlApplication Modes

demo Markup:ApplicationModes=“1”Code: IUIFramework::SetModes()

Last Words…

> Practice great ribbon design> Shift thinking from features to scenarios> Usability trumps all

> Windows Ribbon developers’ guides:http://msdn.microsoft.com/en-us/library/dd742866(VS.85).aspx

> Follow-up material:> See hidden slides for extra content> Nicolas Brun’s PDC2008 Windows Ribbon

talk:http://channel9.msdn.com/pdc2008/PC14/

Q & A Please use the microphones provided.

YOUR FEEDBACK IS IMPORTANT TO US!

Please fill out session evaluation

forms online atMicrosoftPDC.com

Learn More On Channel 9

> Expand your PDC experience through Channel 9

> Explore videos, hands-on labs, sample code and demos through the new Channel 9 training courses

channel9.msdn.com/learnBuilt by Developers for Developers….

© 2009 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

ryandemo@microsoft.com