windows ribbon technical deep dive l.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Windows Ribbon: Technical Deep Dive PowerPoint Presentation
Download Presentation
Windows Ribbon: Technical Deep Dive

Loading in 2 Seconds...

play fullscreen
1 / 44

Windows Ribbon: Technical Deep Dive - PowerPoint PPT Presentation


  • 237 Views
  • Uploaded on

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.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Windows Ribbon: Technical Deep Dive' - kalin


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
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
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

windows ribbon technical deep dive key takeaways
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!
designing a ribbon prepare your mind
Designing a RibbonPrepare your mind! 
  • Shift your thinking from “features” to “scenarios”
    • Resist the urge; don’t just map menus  tabs
designing a ribbon where do i start
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 sample focus on design implementation
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 sample focus on design implementation7
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
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 scenario fontcontrol
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

step 2 categorize commands by scenario fontcontrol10
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

step 3 scenarios ribbon canvas app menu where do your commands fit best
Step 3: Scenarios  Ribbon, Canvas, App MenuWhere do your commands fit best?
  • “Workspace”-related scenarios
    • Central place for users to find commands

Ribbon

step 3 scenarios ribbon canvas app menu where do your commands fit best12
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

step 3 scenarios ribbon canvas app menu where do your commands fit best13
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
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

step 4 create tabs groups controls now the fun begins
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 controls some tips
Step 4: Create Tabs, Groups, & ControlsSome tips..
  • Be mindful of future scalability
    • Don’t stuff your tabs
step 4 create tabs groups controls some tips17
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 controls some tips18
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 controls some tips19
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
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..)

gallery control
Gallery Control

SplitButton

DropDown

InRibbon

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

Command Space

gallery control23
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
fontcontrol style gallery

FontControlStyleGallery

demo

Markup: <InRibbonGallery>

Code: IUICollection of IUISimplePropertySet items

step 4 create tabs groups controls commands for exiting scenario
Step 4: Create Tabs, Groups, & Controls Commands for “Exiting” scenario
  • Target:Application Menu

Exiting

Exit

step 4 create tabs groups controls commands for transform scenario
Step 4: Create Tabs, Groups, & Controls Commands for “Transform” scenario
  • Target:Ribbon
  • Not commonly executed..

Transform Text

Uppercase

Lowercase

step 4 create tabs groups controls commands for transform scenario27
Step 4: Create Tabs, Groups, & Controls Commands for “Transform” scenario
  • Target:Ribbon
  • Greyed out when text is not selected

Transform Text

Uppercase

Lowercase

step 4 create tabs groups controls commands for transform scenario28
Step 4: Create Tabs, Groups, & Controls Commands for “Transform” scenario
  • Target:Ribbon
  • App fires Contextual TabGroup when needed

Transform Text

Uppercase

Lowercase

fontcontrol contextual tabgroups

FontControlContextual TabGroups

demo

Markup: <TabGroup>

Code: Respond to UI_PKEY_ContextAvailable

step 4 create tabs groups controls commands for publishing scenario
Step 4: Create Tabs, Groups, & Controls Commands for “Publishing” scenario
  • Target:Application Menu

Publishing

Print

Print Preview

Close Print Preview

step 4 create tabs groups controls commands for publishing scenario31
Step 4: Create Tabs, Groups, & Controls Commands for “Publishing” scenario
  • Target:Application Menu/Ribbon

Publishing

Print

Print Preview

Close Print Preview

application modes
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 modes how they work
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”>

fontcontrol application modes

FontControlApplication Modes

demo

Markup: ApplicationModes=“1”

Code: IUIFramework::SetModes()

fontcontrol application modes35

FontControlApplication Modes

demo

PAUSED

Markup: ApplicationModes=“1”

Code: IUIFramework::SetModes()

the default mode
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
fontcontrol application modes37

FontControlApplication Modes

demo

RESUME

Markup: ApplicationModes=“1”

Code: IUIFramework::SetModes()

fontcontrol application modes38

FontControlApplication Modes

demo

Markup: ApplicationModes=“1”

Code: IUIFramework::SetModes()

last words
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/
please use the microphones provided
Q & A

Please use the microphones provided.

slide41

YOUR FEEDBACK IS IMPORTANT TO US!

Please fill out session evaluation forms online at

MicrosoftPDC.com

learn more on channel 9
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….