none
How to create DropDown with an Image in MSWord Backstage 2013 RRS feed

  • Question

  • Can I create a dropdown with an image?

    I mean I won't show the label, only image is shown. If I click on that Image, a dropdown list will come, and I am able to choose from that dropdown.

    Monday, February 10, 2014 6:23 AM

Answers

  • Nope. Only the following menu is possible to imitate:

    Monday, February 10, 2014 7:57 PM
  • Hi,
    According to the picture you provided, you want to create a menu in the backstage view of Word. You can use menu and menuGroup element to achieve the goal. And you can change the itemsize property of menuGroup to “large” to display the large item. I wrote a sample XML for your reference:

    <customUI xmlns="http://schemas.microsoft.com/office/2009/07/customui"  >
      <backstage>
        <tab id="testArea" insertAfterMso="TabInfo" label="Sample Scenarios" columnWidthPercent="30" >
          <firstColumn>
           
            <group id="grpTwo" label="Group Two" visible="true" >
              <primaryItem>
                <menu id="menuOne" label="DropDown Menu">
                  <menuGroup id="menuGrpOne" itemSize="large" >
                    <menu id="myMenu1" label="myMenu1" imageMso="BlogHomePage" description="This is menu1">
                      <menuGroup id ="myMenuGroup1" itemSize="normal">
                        <button id="myButton1" label="Button one" imageMso="BlogHomePage" />
                        <button id="myButton2" label="Button two" imageMso="BlogHomePage"   />
                      </menuGroup>
                    </menu>
                    <menu id="myMenu2" label="myMenu2" imageMso="BlogHomePage" description="This is menu2">
                      <menuGroup id ="myMenuGroup2" itemSize="normal">
                        <button id="myButton3" label="Button three" imageMso="BlogHomePage" />
                        <button id="myButton4" label="Button four" imageMso="BlogHomePage"  />
                      </menuGroup>
                    </menu>
                  </menuGroup>
                </menu>
              </primaryItem>      
            </group>
          </firstColumn>
        
        </tab>
      </backstage>
    </customUI>

    Screen Shot:

    You can get more information from article below:
    Introduction to the Office 2010 Backstage View for Developers

    Best regards

    Fei

     


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Monday, February 17, 2014 10:11 AM
    Moderator
  • Hi psycho

    Take a look at this page (ignoring the fact that it mentions Access - that doesn't matter):

    http://www.accessribbon.de/en/?Access_-_Ribbons:Ribbon_XML___Controls:Backstage_-_LayoutContainer

    You need the layoutContainter element. the attribute layoutChildren lets you specify that controls should lay out horizontally (or vertically).

    Search the term layoutContainer also in this article

    http://msdn.microsoft.com/en-us/library/ee691833(v=office.14).aspx


    Cindy Meister, VSTO/Word MVP, my blog

    Wednesday, February 19, 2014 6:35 AM
    Moderator

All replies

  • As far as I know, no, there's no control for the backstage that can do this. Neither the SplitButton nor the Gallery control type is supported in backstage. A "Primary Item" button or dropdown can show an image AND a label. Perhaps if you set &nbsp; as the label content?

    Cindy Meister, VSTO/Word MVP, my blog

    Monday, February 10, 2014 9:06 AM
    Moderator
  • Hello Psycho_1729,

    Here is what the Backstage UI allows to do:

    and when I click on the button:

    Is it what you are looking for?

    If so, here is a markup I've used for the sample add-in:

    <customUI xmlns="http://schemas.microsoft.com/office/2009/07/customui" onLoad="ribbonLoaded" loadImage="getImages">
      <ribbon startFromScratch="false" />
      <backstage onShow="OnShow" onHide="OnHide">
        <tab getEnabled="getEnabled" getKeytip="getKeytip" getLabel="getLabel" getTitle="getTitle" getVisible="getVisible" id="MyBackstageTab">
          <firstColumn>
            <group getHelperText="getHelperText" getLabel="getLabel" getShowLabel="getShowLabel" getStyle="getStyle" getVisible="getVisible" id="MyBackstageGroup">
              <primaryItem>
                <menu getEnabled="getEnabled" getImage="getImage" getKeytip="getKeytip" getLabel="getLabel" getScreentip="getScreenTip" getSupertip="getSuperTip" getVisible="getVisible" id="MyBackstagePrimaryMenu">
                  <menuGroup getLabel="getLabel" id="MyBackstageMenuGroup" itemSize="normal">
                    <button getDescription="getDescription" getEnabled="getEnabled" getImage="getImage" getKeytip="getKeytip" getLabel="getLabel" getVisible="getVisible" id="MyBackstageMenuButton" isDefinitive="false" onAction="onAction" />
                    <button getDescription="getDescription" getEnabled="getEnabled" getKeytip="getKeytip" getLabel="getLabel" getVisible="getVisible" id="MyOneBackstageMenuButton" isDefinitive="false" onAction="onAction" />
                    <button getDescription="getDescription" getEnabled="getEnabled" getKeytip="getKeytip" getLabel="getLabel" getVisible="getVisible" id="MyTwoBackstageMenuButton" isDefinitive="false" onAction="onAction" />
                    <button getDescription="getDescription" getEnabled="getEnabled" getKeytip="getKeytip" getLabel="getLabel" getVisible="getVisible" id="MyThreeBackstageMenuButton" isDefinitive="false" onAction="onAction" />
                    <button getDescription="getDescription" getEnabled="getEnabled" getKeytip="getKeytip" getLabel="getLabel" getVisible="getVisible" id="MyFourBackstageMenuButton" isDefinitive="false" onAction="onAction" />
                  </menuGroup>
                </menu>
              </primaryItem>
            </group>
          </firstColumn>
        </tab>
      </backstage>
    </customUI>      
    You can read more about the Backstage UI in the Introduction to the Office 2010 Backstage View for Developers article in MSDN.
    Monday, February 10, 2014 1:51 PM
  • Thanks Eugene.

    I actually want to know whether this type of dropdown can be created?

    Monday, February 10, 2014 3:40 PM
  • Nope. Only the following menu is possible to imitate:

    Monday, February 10, 2014 7:57 PM
  • Hi,
    According to the picture you provided, you want to create a menu in the backstage view of Word. You can use menu and menuGroup element to achieve the goal. And you can change the itemsize property of menuGroup to “large” to display the large item. I wrote a sample XML for your reference:

    <customUI xmlns="http://schemas.microsoft.com/office/2009/07/customui"  >
      <backstage>
        <tab id="testArea" insertAfterMso="TabInfo" label="Sample Scenarios" columnWidthPercent="30" >
          <firstColumn>
           
            <group id="grpTwo" label="Group Two" visible="true" >
              <primaryItem>
                <menu id="menuOne" label="DropDown Menu">
                  <menuGroup id="menuGrpOne" itemSize="large" >
                    <menu id="myMenu1" label="myMenu1" imageMso="BlogHomePage" description="This is menu1">
                      <menuGroup id ="myMenuGroup1" itemSize="normal">
                        <button id="myButton1" label="Button one" imageMso="BlogHomePage" />
                        <button id="myButton2" label="Button two" imageMso="BlogHomePage"   />
                      </menuGroup>
                    </menu>
                    <menu id="myMenu2" label="myMenu2" imageMso="BlogHomePage" description="This is menu2">
                      <menuGroup id ="myMenuGroup2" itemSize="normal">
                        <button id="myButton3" label="Button three" imageMso="BlogHomePage" />
                        <button id="myButton4" label="Button four" imageMso="BlogHomePage"  />
                      </menuGroup>
                    </menu>
                  </menuGroup>
                </menu>
              </primaryItem>      
            </group>
          </firstColumn>
        
        </tab>
      </backstage>
    </customUI>

    Screen Shot:

    You can get more information from article below:
    Introduction to the Office 2010 Backstage View for Developers

    Best regards

    Fei

     


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Monday, February 17, 2014 10:11 AM
    Moderator
  • As Eugene said, I guess I cannot imitate the same as 'Add a Service' button. I know that Menu and menu group are available but I cannot add any other control on that specific row or I cannot bring the control aligned to right.
    Monday, February 17, 2014 1:05 PM
  • Hi,

    Did you want to add other controls on the same row with the menu? As far as I know, in a group we can use topItems to add the control beside the primaryItem. If I understand correctly you can refer to below code to achieve the goal:

    <customUI xmlns="http://schemas.microsoft.com/office/2009/07/customui"  >
      <backstage>
        <tab id="testArea" insertAfterMso="TabInfo" label="Sample Scenarios" columnWidthPercent="30" >
          
          <firstColumn>
          
            <group id="grpTwo" label="Group Two" visible="true" >
              <primaryItem>
    
                <menu id="menuOne" label="DropDown Menu">
                  <menuGroup id="menuGrpOne" itemSize="large" >
                    <menu id="myMenu1" label="myMenu1" imageMso="BlogHomePage" description="This is menu1">
                      <menuGroup id ="myMenuGroup1" itemSize="normal">
                        <button id="myButton1" label="Button one" imageMso="BlogHomePage" />
                        <button id="myButton2" label="Button two" imageMso="BlogHomePage"   />
                      </menuGroup>
                    </menu>
                    <menu id="myMenu2" label="myMenu2" imageMso="BlogHomePage" description="This is menu2">
                      <menuGroup id ="myMenuGroup2" itemSize="normal">
                        <button id="myButton3" label="Button three" imageMso="BlogHomePage" />
                        <button id="myButton4" label="Button four" imageMso="BlogHomePage"  />
                      </menuGroup>
                    </menu>
                  </menuGroup>
                </menu>
    
              </primaryItem>
              <topItems>
                <button id="myButton5" label="myButton5"/>
              </topItems>
              
              <bottomItems>
                <button id="myButton6" label="myButton6"/>
              </bottomItems>
              
            </group >
    
          </firstColumn>
    
        </tab>
      </backstage>
    </customUI>
    

    Screen shot:
     
    In addition, you can edit the xml file in Visual Studio 2012, the IntelliSense will make us learning more easily.
    Hope it is helpful.

    Best regards
    Fei

     


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Tuesday, February 18, 2014 9:59 AM
    Moderator
  • Yes. I want to add it into one row. But the dropdown with image controls is in the right.

    Something like this!

    Tuesday, February 18, 2014 5:07 PM
  • Hi psycho

    Take a look at this page (ignoring the fact that it mentions Access - that doesn't matter):

    http://www.accessribbon.de/en/?Access_-_Ribbons:Ribbon_XML___Controls:Backstage_-_LayoutContainer

    You need the layoutContainter element. the attribute layoutChildren lets you specify that controls should lay out horizontally (or vertically).

    Search the term layoutContainer also in this article

    http://msdn.microsoft.com/en-us/library/ee691833(v=office.14).aspx


    Cindy Meister, VSTO/Word MVP, my blog

    Wednesday, February 19, 2014 6:35 AM
    Moderator