Ribbon Native

8/3/2019 Ribbon Native

1/27

Windows 7: Windows Ribbon: Native


2/27

Windows Ribbon - Native

Table of Contents

Windows 7: Windows Ribbon: Native .................................................................................... 1

Exercise 1 Creating an empty Ribbon and adding it to an application .......................................................................... 2

Exercise 2 Adding simple controls to an existing Ribbon ............................................................................................ 10

Exercise 3 Adding controls and groups to an existing Ribbon ..................................................................................... 20


3/27


Page 1 of 25

Windows 7: Windows Ribbon: Native

Objectives After completing this lab, you will be better able to:

Configure a Visual Studio project to make use of the Ribbon Integrate a Ribbon with a Win32 window (HWND) Add controls such as buttons, checkboxes, tabs, and chunks Connect the application business code with Ribbon controls

Scenario

This tutorial is intended for C++ developers who are developing desktop

applications and want to take advantage of the new Windows Ribbon

framework. The tutorial steps you through how to add an empty Ribbon to a

small application, add various controls with icons, labels, and other resources to

the Ribbon, and then connect the controls to the existing command

infrastructure of the application. You will also learn how the API maintains

separation between control organization and event handling. Finally, thetutorial will demonstrate how to specify layouts and resizing behavior to show

how the Ribbon adapts and performs at different sizes. When you are finished,

you will have performed all the steps necessary to add and customize, a basic

Ribbon in an application.

The tutorial will involve real-time compiling of code and markup copied from

this document. In the event that a copying error (or any other problem)

prevents the application from compiling, you can find fully completed samples

in the tutorial package with the final source code for each exercise. These

samples can be used to unblock you from compiling errors, or can be used as a

starting point for the next exercise if desired.

Prerequisites

Before working on this tutorial, it would be helpful (though not required) to

have:

Some familiarity with Win32 development and the C++ language A basic understanding of COM programming and concepts Some familiarity with Visual Studio

Estimated Time to

Complete This Lab90 Minutes

Computer used in this

Lab Win7Devs

The username for the Administrator account on this computer is Win7User and

the password is: pass@word1


4/27


Page 2 of 25

Exercise 1

Creating an empty Ribbon and adding it to an application

ScenarioIn this exercise, you will start by creating a Visual Studio project from scratch. Then, you will write the necessary

code to compile and initialize a Ribbon in an application.

Background Information

The Ribbon API consists of 2 parts:

XML Markup, used to define the Ribbon structure and organization of controls C++ COM interfaces, used to initialize and handle events

The markup must be compiled into a binary format in order to be used during execution. The compilation of the

Ribbon is done through the use of a new compiler tool named uicc.exe. During this exercise, we will show you how

to configure Visual Studio to compile the markup automatically.

All files referred to in the steps below can be found in the tutorial package und er the folder

(C:\Labs\Native\Ribbon\EX01_Starter\RibbonApp).

Note: Throughout this tutorial, code and/or markup that already exists in source files will be colored grey

(example). This will provide a sense of context when you are instructed to add new code to these files.

Tasks Detailed Steps

Complete the following

task on:

Win7User

1. Create a newproject in VisualStudio and

generate a basic

application

Note: In this task you will setup the bases required to start adding a Ribbon to an

application.

a. Launch Visual Studio.b. Create a new project by selecting File > New > Project.c. Under Visual C++ select Win32. Then select Win32 Project.d. Enter RibbonApp as the name of the project. e. Select OK, then on the next screen select Finish. f. Compile your new application, and launch it (hotkey F5). A window with a

simple menu will open.

Note:When building the application, if a prompt appears stating This project is out

of date, just ignore it and continue the building process.

g. Close the application.2. Create a basic

Ribbon markup file

Note: You will now add a small amount of Ribbon XML markup to your project. The

markup will define commands to be exposed in the Ribbon, and will also define how

controls will be arranged when exposing these commands.

Create a new file named ribbonmarkup.xml and add it to the project.

a. In the Solution Explorer, right-click the project name Add New Item. UnderVisual C++ select Web. Then select XML File (.xml), and in the Name field

call it ribbonmarkup.xml.


5/27


Page 3 of 25


b. Copy+Paste the markup below into the newly created ribbonmarkup.xml file,overwriting any previous text that was auto-generated when the .xml file was

created. This will define a minimum Ribbon with one Tab:

XML

Note: Exercise 2 is dedicated to understanding the Ribbon XML format in greater

detail. However, feel free to examine the syntax now and see how the Ribbon, Tabs,

and Commands are being defined.

3. Configure VisualStudio to

automatically

compile the Ribbon

markup

a. In Visual Studio, right click on the new XML file and select Properties. UnderCustom Build Step, enter the following into the Command Line field:

uicc.exe ribbonmarkup.xml ribbonmarkup.bml /res:ribbonres.rc

Note: uicc.exe is a new compiler tool dedicated to the Ribbon used to generate

resources consumable at runtime. "ribbonmarkup.bml is the output: a binary

representation of ribbonmarkup.xml.

b. On the same property page, enter the following into the Outputs f ield:ribbonmarkup.bml;ribbonres.rc

c. Close the Properties page by clicking OK.Note: The generated file ribbonres.rc defines a resource that youll use to link the

generated binary markup to your application module. The binary markup file (.bml)

will be generated when you build the application. Feel free to look at ribbonres.rc (in

order to do so you first need to build your project so the file can be generated by

uicc.exe).

Finally, you should include the binary markup in your project.

d. Edit the code of RibbonApp.rc (right-click it in the Solution Explorer, select viewcode) and add the following line right before where the icons are defined

(before the comment block called Icon):


6/27


Page 4 of 25


C++

#include "ribbonres.rc"

e. Build the solution.4.

Create a host forthe Ribbon

Note: A host is used to receive different notifications from the Ribbon. It is required

for the Ribbon to be initialized.

a. Configure your project to use ATL. In the Solution Explorer, right-click theproject name > Properties.

b. Expand Configuration Properties, and select the General page.c. On the property page, set the Use of ATL field to either of the following values,

depending on your preference:

Static Link to ATLor- Dynamic Link to ATL

d. Click OK to close the Property page.Note:Add a new file to the project named Ribbon.cpp.

e. In the Solution Explorer, right-click the project name Add New Item. UnderVisual C++ select Code. Select C++ File (.cpp), and in the Name field call it

Ribbon.cpp.

f. Edit the new Ribbon.cpp file and include the following headers:C++

//Precompiled header for the project:

#include"stdafx.h"

//ATL/COM header files:

#include

#include

#include

//And finally, the Ribbon header file which declares all the necessary

Ribbon interfaces:

#include

g. In Ribbon.cpp, implement the interface IUIApplication defined in uiribbon.h. Inthis exercise, we are not actually interested in implementing any of the

notifications, so you can return E_NOTIMPL for all 3 functions.

h.

The following code can be placed into Ribbon.cpp to implement IUIApplication:C++

class CApplication

: public CComObjectRootEx

, public IUIApplication


7/27


Page 5 of 25


{

public:

BEGIN_COM_MAP(CApplication)

COM_INTERFACE_ENTRY(IUIApplication)

END_COM_MAP()

STDMETHOD(OnViewChanged)(UINT32 nViewID, __in UI_VIEWTYPE

typeID, __in IUnknown* pView, UI_VIEWVERB verb, INT32 uReasonCode)

{

return E_NOTIMPL;

}

STDMETHOD(OnCreateUICommand)(UINT32 nCmdID, __in

UI_COMMANDTYPE typeID, __deref_out IUICommandHandler**

ppCommandHandler)

{

return E_NOTIMPL;}

STDMETHOD(OnDestroyUICommand)(UINT32 commandId, __in

UI_COMMANDTYPE typeID, __in_opt IUICommandHandler*

pCommandHandler)

{

return E_NOTIMPL;

}

};

5. Create and Initializethe Ribbon

Note:Now that youve implemented CApplication, declare a global g_pFramework of

type IUIFramework* near the top of the Ribbon.cpp file (put it just before the

declaration of the CApplication class, after the include lines). This pointer will be used

to instantiate the Ribbon platform.

a. Declare a global g_pFramework of type IUIFramework* near the top of theRibbon.cpp file.

Note: Put it just before the declaration of the CApplication class, after the include

lines. This pointer will be used to instantiate the Ribbon platform.

C++

IUIFramework* g_pFramework = NULL;

b. At the very bottom of Ribbon.cpp (after the CApplication definition), define aRibbon initialization function:

C++

HRESULT InitRibbon(HWND hWindowFrame)


8/27


Page 6 of 25


{

}

Note: hWindowFrame will be a handle on the application main window.

The following steps should be implemented, in order, inside the newly createdInitRibbon function.

c. Use CoCreateInstance to instantiate a class CLSID_UIRibbonFramework. Youllget an IUIFramework pointer back. IUIFramework is the main interface exposed

by the Ribbon platform.

C++

HRESULT hr = ::CoCreateInstance(CLSID_UIRibbonFramework, NULL,

CLSCTX_INPROC_SERVER, IID_PPV_ARGS(&g_pFramework));

if(FAILED(hr))

{

return hr;

}

d. Instantiate a CApplication object.C++

CComObject *pApplication = NULL;

hr = CComObject::CreateInstance(&pApplication);

if(FAILED(hr))

{

return hr;

}

e. Call Initialize on the returned IUIFramework pointer and specify both the hostHWND and the newly created CApplication object.

C++

hr = g_pFramework->Initialize(hWindowFrame, pApplication);

if(FAILED(hr))

{

return hr;

}

f. Now lets load the markup. On the IUIFramework pointer, call LoadUI.C++

g_pFramework->LoadUI(GetModuleHandle(NULL),

L"APPLICATION_RIBBON");


9/27


Page 7 of 25


if(FAILED(hr))

{

return hr;

}

g. Close the function. It is now complete.C++

return S_OK;

6. Integrate with theapplication

Note: We now need to call InitRibbon from the pre-generated application code.

a. Initialize COM in the application. Open RibbonApp.cpp and right after the includelines, add:

C++

#include

CComModule _Module;

extern HRESULT InitRibbon(HWND hWindowFrame);

b. Inside the generated function _tWinMain, add at the beginning of the function:C++

CoInitialize(NULL);

c. Add at the end, before the return statement:C++

CoUninitialize();

d. Inside the function InitInstance, right before ShowWindow is called, callInitRibbon:

C++

HRESULT hr = InitRibbon(hWnd);

if (FAILED(hr))

{

return FALSE;

}

e. Compile your application and launch it. It should now have an empty Ribbon.Note:Youll notice that the only change performed in the application code at this

point is the call to InitRibbon. The rest of the code added is standard COM

initialization.


10/27


Page 8 of 25


7. Complete theintegration

a. Inside Ribbon.cpp, add a DestroyRibbon() function. Paste the followingdefinition at the end of the file:

C++

void DestroyRibbon()

{

if(g_pFramework){

g_pFramework->Destroy();

g_pFramework->Release();

g_pFramework = NULL;

}

}

b. Inside RibbonApp.cpp, declare a DestroyRibbon() function near the beginning ofthe file:

C++

#include

CComModule _Module;extern HRESULT InitRibbon(HWND hWindowFrame);

extern void DestroyRibbon();

c. Inside RibbonApp.cpp, in the WndProc function, call DestroyRibbon() during theswitch statements WM_DESTROY processing. After youre finished, the code

should look like this:

C++

case WM_DESTROY:

DestroyRibbon();PostQuitMessage(0);

break;

d. Build and launch the application and notice that the Ribbon flickers duringresizing of the form.

e. Close the running application.f. Fix the flickering by adding the window style WS_CLIPCHILDREN to the

CreateWindow call inside the function InitInstance.

C++

hWnd = CreateWindow(szWindowClass, szTitle,

WS_OVERLAPPEDWINDOW | WS_CLIPCHILDREN,

CW_USEDEFAULT, 0, CW_USEDEFAULT, 0, NULL, NULL,

hInstance, NULL);

Note: The flickering was due to the host window drawing over the ribbon.


11/27


Page 9 of 25


WS_CLIPCHILDREN tells the host window to exclude the area occupied by child

windows when drawing occurs within the parent window.


12/27


Page 10 of 25

Exercise 2

Adding simple controls to an existing Ribbon

ScenarioIn this exercise, you will start with the completed project from Exercise 1 and write the code to add controls to the

Ribbon. You will also learn how to get notifications from the ribbon controls and how to get and set properties on

those controls.


All files referred to in the steps below can be found in the tutorial package under the folder




task on:

1. Add a button in aTab

Note: In this task, you will add a Button control to the ribbon.

Continue from the project you used for Exercise 1.

a. In ribbonmarkup.xml, inside add the following markupto define commands for the new controls.

XML

Note: Lets now add a new Button control inside a new Group. A Ribbon contains

Tabs, and inside those tabs are groups. These groups contain the controls you see in

the Ribbon that can be interacted with.

b. Inside the tag add the following markup:XML

c. Build and run the application.Note: You will notice an empty button control inside a new group if you hover the

mouse over the group. (Please note that the Button is not visible unless it is hovered

over with the mouse pointer because its background color is same as that of the

group.)

d. Close the running application.2. Specify Label,

Tooltip and Icon of

Note:All resources used by the Ribbon are defined in a header file. First youll learn

how to generate this header file. Then, youll specify all the different attributes


13/27


Page 11 of 25


the button (Label, Tooltip, Icons) for the different commands.

We will first setup project properties to generate header file by uicc.exe.

a. Right click on ribbonmarkup.xml Properties Custom build stepb. In Command Line, update the command to be:

Commanduicc.exe ribbonmarkup.xml ribbonmarkup.bml/header:ribbonres.h

/res:ribbonres.rc

c. In Outputs, update the text to be:Command

ribbonmarkup.bml;ribbonres.rc;ribbonres.h

d. Click OK to close the Properties dialog. e. Right click RibbonApp.rc View Codef. Add the following include line above the include line for ribbonres.rc (recall that

these include lines will be lower in the file, above the Icon comment block):

C++

#include "ribbonres.h"

g. In the Solution Explorer, right-click the project name Open Folder in WindowsExplorer to open the project directory folder.

h. Copy Button_Image.bmp from the BITMAPS folder(C:\Labs\Native\Ribbon\BITMAPS) to the project directory that was just

opened in the previous step.

i. In the Solution Explorer, add Button_Image.bmp to the project by right clickingRibbonApp project Add Existing Item Button_Image.bmp, and then

clicking Add.

Note: We want to add resource properties to the Command definition of

cmdMyButton. We are adding a Label, ToolTip Title, ToolTip Description and

an Image to be used by the control that references this command.

j. In ribbonmarkup.xml, change the command definition for cmdMyButton under to the following:

XML

My ButtonClick on My

Button


14/27


Page 12 of 25


k. Rebuild (in the menu Build Rebuild Solution) and run the project. Notice thata label and image appear for the ribbon button in the group.

l. Close the running application.m. Add Labels for some other controls (Tab, Group etc) as well in the project by

modifying their command definition as follows: (Notice the different syntax

allowed to specify XAML properties)

Replace:

XML

With:

XML

Then, replace:

XML

With:

XML

n. Build and run the project, and see the new Label added for the Ribbons HomeTab and Main Group.

o. Close the running application.3. Display a message

box when the

button is clicked

a. Add the following include line after the existing include lines in Ribbon.cpp:C++

#include


Note: ribbonres.h is generated by uicc.exe and contains the commands that are

defined in markup, making them accessible from code.


15/27


Page 13 of 25


In Ribbon.cpp, change CApplication to implement IUICommandHandler for all the

controls in the project.

b. First derive CApplication from the IUICommandHandler interface by adding thefollowing code as the last interface that CApplication derives from:

C++

class CApplication

: public CComObjectRootEx

, public IUIApplication

, public IUICommandHandler

c. Then add the following COM_INTERFACE_MAP entry to the existing COM_MAP:C++

BEGIN_COM_MAP(CApplication)

COM_INTERFACE_ENTRY(IUIApplication)

COM_INTERFACE_ENTRY(IUICommandHandler)

END_COM_MAP()

d. Add the following code inside the CApplication class to implement the 2 methodsof the IUICommandHandler interface:

C++

STDMETHODIMP Execute(UINT nCmdID,

UI_EXECUTIONVERB verb,

__in_opt const PROPERTYKEY* key,

__in_opt const PROPVARIANT* ppropvarValue,

__in_opt IUISimplePropertySet* pCommandExecutionProperties){

HRESULT hr = S_OK;

switch (verb)

{

case UI_EXECUTIONVERB_EXECUTE:

if (nCmdID == cmdMyButton)

{

MessageBox(NULL, L"Clicked on My Button!",

L"My Button Execute", MB_OK);

}

break;

}

return hr;

}


16/27


Page 14 of 25


STDMETHODIMP UpdateProperty(UINT nCmdID,

__in REFPROPERTYKEY key,

__in_opt const PROPVARIANT* ppropvarCurrentValue,

__out PROPVARIANT* ppropvarNewValue)

{

return E_NOTIMPL;

}

e. Add the following if statement to CApplication::OnCreateUICommand, beforethe return line:

C++

STDMETHOD(OnCreateUICommand)(UINT32 nCmdID, __in

UI_COMMAND_TYPE typeID, __deref_out IUICommandHandler**

ppCommandHandler)

{


{return QueryInterface(IID_PPV_ARGS(ppCommandHandler));

}

return E_NOTIMPL;

}

f. Build and Run the application and click on the button to see the MessageBoxpopup.

g. Close the running application.4. Add a checkbox

control

Note: Follow the steps to create a CheckBox and an associated a command handler

for CheckBox commands.

a. Add the following Commands Definition in RibbonMarkup.xml inside the tag:

XML

My Choice

Select My

Choice!

b. Add a CheckBox inside the Group by adding the following markup:


17/27


Page 15 of 25


XML

Note: Now, associate a command handler for the new checkbox.

c. In the OnCreateUICommand method of Ribbon.cpp, modify the if statement toassociate the command handler to CheckBox control as well:

C++

if (nCmdID == cmdMyButton|| nCmdID == cmdMyChoice)

{

return QueryInterface(IID_PPV_ARGS(ppCommandHandler));

}

d. In the Ribbon.cpp Execute method, add the following if statement (just abovethe break; line) to get notified when CheckBox is clicked:

C++

case UI_EXECUTIONVERB_EXECUTE:


{

MessageBox(NULL, L"Clicked on My Button!", L"My Button Execute",

MB_OK);

}

elseif(nCmdID == cmdMyChoice)

{MessageBox(NULL, L"Toggled My Choice!", L"My Choice Execute",

MB_OK);

}

break;

e. Build and run the project.f. Click on the CheckBox and observe the CheckBox toggle its state. Also, notice

the MessageBox added in the code popup.

g. Close the running application.5. Swap the checkbox

for a toggle button

Note: In this task, we will change the CheckBox control in the ribbon to a

ToggleButton control. Both the CheckBox and ToggleButton controls are of the same

command type, and the application code handles them the same way. So when

changing a CheckBox control to a ToggleButton control, no C++ code change is

needed.


18/27


Page 16 of 25


a. In RibbonMarkup.xml, replace the CheckBox control with a ToggleButton control.This can be done by simply renaming the tag to ToggleButton.

Replace:

XML

With

XML

b. Build and run the project to observe that the checkbox has changed to a togglebutton. Youll notice that clicking on the toggle button invokes the same

message box as before.

c. Close the running application.6. Specify a

SizeDefinitiontemplate for the

Group

Note: In this task, a SizeDefinition template will be specified for the Group using its

SizeDefinition attribute. Templates provide physical layout information for the

controls inside a Group. The Windows Ribbon includes several predefined templates,

and it is possible to define your own as well. Since there are now two buttons in the

group, the standard predefined TwoButtons template can be used.

a. Add a TwoButtons SizeDefinition template to the GroupMain. The Groupdefinition becomes:

XML

b.

Build and run the project, and observe that by using the TwoButtons template,large buttons laid side-by-side are used in the group.

c. Close the running application.7. Now well make

use of the

ToggleButton to

disable/enable the

Button control

a. In Ribbon.cpp, add a private member _fEnabled to the class CApplication byadding the following code just before the closing brace of the class:

C++

private:

BOOL _fEnabled;

b. At the top of Ribbon.cpp, above the include line (#include"ribbonres.h") add thefollowing include line:

C++

#include

#include



19/27


Page 17 of 25


Note: Link to propsys.lib in the linker properties.

c. Right click on RibbonApp project Properties Linker Input. In theAdditional Dependencies field, add the file propsys.lib. Click OK.

d. In Ribbon.cpp, inside the Execute method, replace the MessageBox forToggleButton click with the following code:

Replace:

C++

MessageBox(NULL, L"Toggled My Choice!", L"My Choice Execute", MB_OK);

With the code:

C++

PROPVARIANT var, varNew;

hr = g_pFramework->GetUICommandProperty(cmdMyChoice,

UI_PKEY_BooleanValue, &var);

if(FAILED(hr))

{

return hr;

}

hr = PropVariantToBoolean(var, &_fEnabled);

if(FAILED(hr))

{

return hr;

}

_fEnabled = !_fEnabled;

hr = UIInitPropertyFromBoolean(UI_PKEY_Enabled, _fEnabled, &varNew);

if(FAILED(hr))

{

return hr;

}

hr = g_pFramework->SetUICommandProperty(cmdMyButton,

UI_PKEY_Enabled, varNew);

if(FAILED(hr))

{

return hr;

}


20/27


Page 18 of 25


e. Build and run the project.f. Click on the ToggleButton and observe that the My Button command becomes

disabled and enabled.

g. Close the running application.8. Update the Label

property of theToggleButton

control at runtime

a. In Ribbon.cpp, add the following code as the last lines of code inside the else if(nCmdID == cmdMyChoice) of the Execute method:

C++

hr = g_pFramework->InvalidateUICommand(cmdMyChoice,

UI_INVALIDATIONS_PROPERTY, &UI_PKEY_Label);

if(FAILED(hr))

{

return hr;

}

Note: Replace the implementation of the UpdateProperty method with code that will

cause the MyChoice command to update its label.

b. In the UpdateProperty function, replace:C++

return E_NOTIMPL;

With:

C++

UNREFERENCED_PARAMETER(ppropvarCurrentValue);

HRESULT hr = E_FAIL;

if(key == UI_PKEY_Label)

{

// Update the Label of ToggleButton control

if(nCmdID == cmdMyChoice)

{

if(_fEnabled)

{

hr = UIInitPropertyFromString(UI_PKEY_Label,

L"Disable Button", ppropvarNewValue);

}

else

{

hr = UIInitPropertyFromString(UI_PKEY_Label,

L"Enable Button", ppropvarNewValue);

}

}

}


21/27


Page 19 of 25


return hr;

c. Build and run the project.d.

Click on the toggle button and observe that the label of the button changes eachtime it is clicked. This shows that command resources can be defined and

changed either in markup, or in the code at run time (or both).

e. Close the running application.


22/27


Page 20 of 25

Exercise 3

Adding controls and groups to an existing Ribbon

ScenarioIn this exercise, you will start with the completed project from Exercise 2 and revise the ribbon markup to add

more controls. You will learn how to better organize the controls using Groups.


All files referred to in the steps below can be found in the tutorial package under the folder




task on:

1. Add additionalcontrols and groups

in a Tab

Note: In this task, you will add more controls and chunks to the ribbon.

Continue from the project you used for Exercise 2.

a. In ribbonmarkup.xml, inside add the following markupto define commands for new groups.

XML

Database

Clipboard

Note: We will now add button icons to the project resources.

b. Copy the remaining bitmaps from the BITMAPS folder(C:\Labs\Native\Ribbon\BITMAPS) to your project directory.

c. Add those bitmaps to the project by right clicking RibbonApp projectAddExisting Item(select each of the bitmaps below):

d. Add the following: AddTableL.bmp AddTableS.bmp Copy.bmp Cut.bmp


23/27


Page 21 of 25


DeleteTableL.bmp DeleteTableS.bmp Paste.bmp PrintRelationshipsL.bmp PrintRelationshipsS.bmp

e. Inside add more commands for new Buttons:XML

Add Table

Add

Table

Delete Table

Delete

Table

Print Relationships

Print

Relationships

PastePaste


24/27


Page 22 of 25


Cut

Cut

Copy

Copy

f. Inside tag, add the following markup to addGroups and Buttons after the existing Group with the name GroupMain:

XML


25/27


Page 23 of 25


g. Build and run the application.h. Notice there are now three chunks in the Ribbon with each group containing

three buttons arranged differently depending on the SizeDefinition template

declared in the markup.

i. Now drag the right border of the application window to the left. Once thewindows right border moves beyond the right-most control, a pager control

appears to indicate some controls are out of the windows view. If you continue

to resize the window small enough, the Ribbon will eventually disappear

maximizing the room provided to the applications working area.

j. Close the running application.2. Specify adaptive

resizing rules

Note: Now well specify resizing rules for the Ribbon so that an adaptive group layout

can be applied instead of a fixed layout.

We will now add scaling rules to TabHome.

a. Locate and add the following markup rightafter that line:

XML

b. Rebuild the app and run it.c. Shrink the size of the window gradually.d. Notice the Clipboard group will shrink its size if there is not enough room for

displaying its controls. The labels of small buttons disappear first.

e. Continue reducing the window size. The Clipboard group becomes a dropdownbutton. When you click the button, all controls display inside a popup.

f. Keep reducing the window size. The Database group rearranges its controls. Allcontrols show as small buttons and lay themselves out vertically.

Note: As previously mentioned, if you continue to resize the Ribbon smaller it will

eventually disappear in an attempt to give as much space to the applications

workspace as possible.

You may discover a few issues while resizing the window.


26/27


Page 24 of 25


When the Clipboard group shows as a dropdown button, the buttondoesnt have icon. This is because an image needs to be specifiedfor the

group itself.

In the Database group, the icons used for the small buttons look slightlydistorted. This is caused by the Ribbon trying to scale down the large-

sized bitmap. To fix this, a small-sized icon (16x16) needs to be provided.

g. Close the running application.Note: We will now add an image for the Clipboard group, and small images

for the commands in the Database group.

h. Replace the GroupClipboard, AddTable, DeleteTable and PrintRelationshipscommands under with the following:

XML

Clipboard

Add Table

Add

Table

Delete Table

Delete

Table


27/27


Page 25 of 25


Print Relationships

Print

Relationships

i. Build and run the project.j. Notice that the previous issues have been fixed and the small group icon that

was missing before is now present. Once again, this was accomplished using

markup alone and didnt require any changes to C++ code.k. Close the running application.

Related Resources:

Windows 7 API Code Pack

Windows Web Application Gallery
http://clk.atdmt.com/MRT/go/249592795/direct/01/http://clk.atdmt.com/MRT/go/249592795/direct/01/http://clk.atdmt.com/MRT/go/249592795/direct/01/http://clk.atdmt.com/MRT/go/249592795/direct/01/http://clk.atdmt.com/MRT/go/249592795/direct/01/http://clk.atdmt.com/MRT/go/249592795/direct/01/

Documents

Ribbon Native