1 / 44

Windows Ribbon: Technical Deep Dive

CL18. Windows Ribbon: Technical Deep Dive. Ryan Demopoulos Program Manager Microsoft Corporation. Ribbon Landscape Three ways to adopt a ribbon. Today’s talk: Windows Ribbon framework. WPF. MFC. WRF. Target: Managed. Target: MFC Native. Target: Native 1. needs .NET 3.5.

elmer
Download Presentation

Windows Ribbon: Technical Deep Dive

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CL18 Windows Ribbon:Technical Deep Dive Ryan Demopoulos Program Manager Microsoft Corporation

  2. Ribbon LandscapeThree ways to adopt a ribbon Today’s talk: Windows Ribbon framework WPF MFC WRF 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 Microsoft’s Ribbon Strategy 1Managed wrappers for Windows Ribbon framework available with PreviewRibbon tool http://code.msdn.microsoft.com/PreviewRibbon

  3. 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 • Ultimategoal: You feel equipped & energized to build great ribbons with the Windows Ribbon framework!

  4. Designing a RibbonPrepare your mind!  • Shift your thinking from “features” to “scenarios” • Resist the urge; don’t just map menus  tabs

  5. 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

  6. Example: Improve FontControl sampleFocus on design & implementation • Available in Windows SDK, or here:http://msdn.microsoft.com/en-us/library/dd742703(VS.85).aspx

  7. 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

  8. 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

  9. 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 Styling Text Pick text style Add text style Uppercase Lowercase Publishing Print Print Preview Close Print Preview

  10. Step 2: Categorize Commands By ScenarioFontControl • Existing FontControl commands • Font face • Font size • Inc. font size • Dec. font size • Bold • Italics • Underline • Strikethrough • Subscript • Superscript • Text highlight • Text color • Exit Transform Text Styling Text Pick text style Add text style Uppercase Lowercase Font commands (Bold, Dec. font size, Font face, Font size, Inc. font size, Italics, Strikethrough, Subscript, Superscript, Text color, Text highlight, Underline) Publishing Print Print Preview Close Print Preview Exiting Exit

  11. Step 3: Scenarios  Ribbon, Canvas, App MenuWhere do your commands fit best? • “Workspace”-related scenarios • Central place for users to find commands Ribbon

  12. Step 3: Scenarios  Ribbon, Canvas, App Menu Where do your commands fit best? • Quickly-performed actions • Maintaining commanding conventions • “Is this command really needed on the canvas?” Canvas

  13. 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

  14. Step 3: Scenarios  Ribbon, Canvas, App Menu FontControl Publishing Styling Text Application Menu Print Print Preview Close Print Preview Pick text style Add text style Font commands (Bold, Dec. font size, Font face, Font size, Inc. font size, Italics, Strikethrough, Subscript, Superscript, Text color, Text highlight, Underline) Exiting Ribbon Exit Transform Text Uppercase Lowercase Canvas

  15. 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!

  16. Step 4: Create Tabs, Groups, & ControlsSome tips.. • Be mindful of future scalability • Don’t stuff your tabs

  17. 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”

  18. 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

  19. 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

  20. 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 style Add text style Font commands (Font face, Bold, Text color, Strikethrough, etc..)

  21. Gallery Control SplitButton DropDown InRibbon • A menu for exposing visual commands • Live Preview • Arbitrary item image sizes • Dynamic population of items

  22. Gallery Control • A menu for exposing visual commands • Live Preview • Arbitrary item image sizes • Dynamic population of items • Command Space Command Space

  23. 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

  24. FontControlStyleGallery demo Markup: <InRibbonGallery> Code: IUICollection of IUISimplePropertySet items

  25. Step 4: Create Tabs, Groups, & Controls Commands for “Exiting” scenario • Target:Application Menu Exiting Exit

  26. Step 4: Create Tabs, Groups, & Controls Commands for “Transform” scenario • Target:Ribbon • Not commonly executed.. Transform Text Uppercase Lowercase

  27. Step 4: Create Tabs, Groups, & Controls Commands for “Transform” scenario • Target:Ribbon • Greyed out when text is not selected Transform Text Uppercase Lowercase

  28. Step 4: Create Tabs, Groups, & Controls Commands for “Transform” scenario • Target:Ribbon • App fires Contextual TabGroup when needed Transform Text Uppercase Lowercase

  29. FontControlContextual TabGroups demo Markup: <TabGroup> Code: Respond to UI_PKEY_ContextAvailable

  30. Step 4: Create Tabs, Groups, & Controls Commands for “Publishing” scenario • Target:Application Menu Publishing Print Print Preview Close Print Preview

  31. Step 4: Create Tabs, Groups, & Controls Commands for “Publishing” scenario • Target:Application Menu/Ribbon Publishing Print Print Preview Close Print Preview

  32. 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

  33. 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”>

  34. FontControlApplication Modes demo Markup: ApplicationModes=“1” Code: IUIFramework::SetModes()

  35. FontControlApplication Modes demo PAUSED Markup: ApplicationModes=“1” Code: IUIFramework::SetModes()

  36. 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

  37. FontControlApplication Modes demo RESUME Markup: ApplicationModes=“1” Code: IUIFramework::SetModes()

  38. FontControlApplication Modes demo Markup: ApplicationModes=“1” Code: IUIFramework::SetModes()

  39. 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/

  40. Q & A Please use the microphones provided.

  41. YOUR FEEDBACK IS IMPORTANT TO US! Please fill out session evaluation forms online at MicrosoftPDC.com

  42. 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/learn Built by Developers for Developers….

  43. ryandemo@microsoft.com

More Related