Share via

RibbonX Control Type Tour, Part 3

  • Article

Today's Guest Writer: Savraj Dhanjal

Savraj is a Program Manager on the Office User Experience team focused on user interface extensibility for Office developers.

This week, we'll take a look at the gallery control. It's one of the most important controls in the new Office 2007 user experience, and we've exposed a good chunk of core gallery functionality for you to use in your own Office-based solutions.

As you may have read in the many blog postings already written about galleries, the purpose of a gallery is to roll up features which would have taken many clicks into a gallery of choices that lets you get the same result in just one click.

In the example add-in I'm going to show, I've mocked up a gallery that allows you to insert pictures in one click, instead of opening a dialog, navigating the file tree, and selecting an image. I've dropped this gallery on the Insert tab in Word after the Illustrations group, because that's where it fits in best with the surrounding features.


The nature photos gallery, courtesy RibbonX
(Click to enlarge)

 <gallery id="nature" 
    label="Nature Photos"
    size="large"
    imageMso="FlyoutAnchorMovie"
    onAction="nature_OnAction"
    getItemCount="nature_getItemCount"
    getItemImage="nature_getItemImage"
    getItemLabel="nature_getItemLabel"
    showItemLabel="false"/>

The anchor for a gallery is similar to that of a menu in that it can be small or large. In this case, I'm using a large, built-in film strip icon, with the imageMso attribute. As I've previously written, our controls use callbacks to specify dynamic properties like labels, and in some cases, the content of the control. The gallery control asks callbacks for the items that populate the gallery, unless the gallery contains statically declared items. In my example above, a callback returns 150x150 pixel PNG images converted to an IPictureDisp for each item.

One of the neat features of our gallery control is that it can automatically scale your images. The original PNG images used in my example are 150 pixels square. By specifying a new itemHeight and itemWidth the gallery will resize the images. I also changed the return value of my getItemCount callback to return sixteen items instead of nine. The gallery creates a 4x4 grid for a group of sixteen items.


Sixteen items and smaller images
(Click to enlarge)

 <gallery id="nature"
    label="Nature Photos"
    size="large"
    imageMso="FlyoutAnchorMovie"
    onAction="nature_OnAction"
    getItemCount="nature_getItemCount"
    getItemImage="nature_getItemImage"
    getItemLabel="nature_getItemLabel"
    itemHeight="75"
    itemWidth="75"
    showItemLabel="false"/>

You can also scale up images, of course. In the next example, the gallery is enlarging the 150-pixel square images to 200-pixel square images. The gallery control can also resize images without preserving the aspect ratio of the original image, but because it doesn't look great I didn't include a screenshot. :)

You can also specify the number of rows and columns the gallery should display. In this case, I've got just one column and two rows.


Scaling up images, setting rows and columns
(Click to enlarge)

 <gallery id="nature"
    label="Nature Photos" 
    size="large" imageMso="FlyoutAnchorMovie"
    onAction="nature_OnAction"
    getItemCount="nature_getItemCount"
    getItemImage="nature_getItemImage"
    getItemLabel="nature_getItemLabel"
    itemHeight="200"
    itemWidth="200"
    rows="2"
    columns="1"
    showItemLabel="false"/>

You can also choose to display labels on gallery items. The example below contains labels for each item, resizes the images to be much smaller, and is set to show ten rows.


Showing labels on gallery items
(Click to enlarge)

 <gallery id="nature"
    label="Nature Photos"
    size="large"
    imageMso="FlyoutAnchorMovie"
    onAction="nature_OnAction"
    getItemCount="nature_getItemCount"
    getItemImage="nature_getItemImage"
    getItemLabel="nature_getItemLabel"
    itemHeight="20"
    itemWidth="20"
    rows="10"
    columns="1"
    showItemLabel="true"/>

Just like in many of the built-in galleries it Office 2007, you can also add buttons to the bottom of a gallery. Typically these buttons would configure what appears in the gallery or open a related settings dialog box.


Buttons at the bottom
(Click to enlarge)

 <gallery id="nature"
    label="Nature Photos"
    size="large" 
    imageMso="FlyoutAnchorMovie"
    onAction="nature_OnAction"
    getItemCount="nature_getItemCount"
    getItemImage="nature_getItemImage"
    getItemLabel="nature_getItemLabel"
    rows="2"
    columns="2"
    showItemLabel="false">
    
    <button id="b222"
      imageMso="Save"
      label="Save selection to Nature Photos Server..."/>
    
    <button id="b229"
      imageMso="Dollar"
      label="Purchase more photos..."/>




</gallery>

That's the high-level overview of the functionality provided by the gallery control. We can't wait to see how you'll use it in the solutions you create!

Comments

  • Anonymous
    April 27, 2006
    In all examples so far the labels are hard-coded in the markup which is generally bad for internationalization.

    For the gallery items you can specify a callback (getItemLabel) and Office queries the labels from the Add-In.

    Is there also a getLabel property for all other controls?

    Can an Add-In queries the current language from the Office apps?

  • Anonymous
    April 27, 2006
    If Office itself uses the same programming model as this then it almost definitely supports localization since Office ships in two dozen languages.

  • Anonymous
    April 27, 2006
    I'm sure 'getLabel' is supported - I think I have seen them using it in another demo.  

    Or, it might even be simpler to just localize the XML, either directly (different XMLs for different languages), or indirectly using an XslTransform (swap placeholder labels with localized strings from a database at runtime), or by using one of the many existing tools that do just this (search for 'XML localization').  Ahh, the joys of using open standards..

  • Anonymous
    April 27, 2006
    In a recent post, Jensen showed that the shapes group is consistent accross tabs. The shapes group shares a gallary.

    Is there a way to define a gallary (or any other ribbon element) once and then reference it later to avoid having to keep the two definitions in sync?

  • Anonymous
    April 27, 2006
    PingBack from http://gorbushin.wordpress.com/2006/04/28/office-2007-%d0%ba%d0%b0%d0%ba-%d1%82%d0%be%d0%bb%d1%81%d1%82%d1%8b%d0%b9-%d0%ba%d0%bb%d0%b8%d0%b5%d0%bd%d1%82/

  • Anonymous
    April 28, 2006
    A post about dynamic content of popup menus would also be great.

  • Anonymous
    April 28, 2006
    I wonder if you can have a gallery like this but populated by a SharePoint gallery :)

  • Anonymous
    May 06, 2006
    Hopefully Vista and Office 2007 will have a standard skin so that people that have worked with Windows since the start would recognize menues, layouts ect.
    Call me old, but I see Vista as a Eye-candy machine, that would soak my GPU resources as best it can. That's not the way to go.

  • Anonymous
    June 08, 2006
    Hi! http://www.ringtones-dir.com/get/ ringtones site free. ringtones site free, ringtones site, Free nokia ringtones here. From website .

  • Anonymous
    June 08, 2006
    ringtones free

  • Anonymous
    January 24, 2008
    It must be noted cash advance service account bank loan no payday

  • Anonymous
    January 29, 2008
    The comment has been removed

  • Anonymous
    January 29, 2008
    If you advance cash loan online kostenlos klingelt�ne runterladen

  • Anonymous
    February 01, 2008
    Turn cash till payday loan pay day loan cash advance

  • Anonymous
    February 05, 2008
    There is instant faxless payday loan hour loan online payday

  • Anonymous
    June 19, 2009
    PingBack from http://mydebtconsolidator.info/story.php?id=6187

  • Anonymous
    June 19, 2009
    PingBack from http://debtsolutionsnow.info/story.php?id=1953