Upload
tamsyn-murphy
View
228
Download
2
Tags:
Embed Size (px)
Citation preview
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.