Subscribe via RSS
Toggle Submenu
  1. Categories
  2. Recent
  3. Tags
View Replies (3)

Resolved When does RibbonBar display PanelItem's Picture?

  1. How-to
1
Votes
Undo
  1. Michael Kramer
    Michael Kramer
  2. Beta Testing
  3. Tuesday, 14 January 2020 00:56 AM UTC

Does anyone know when the RibbonBar is supposed to display the picture defined for each panel within a category's "tab page"? No matter what I try to do, I can't get the panel to display its own picture.

Example: 

<RibbonBar>
  <RibbonItems>
    <Categories>
      <Category Text="Home">
        <Panel Text="Party" PictureName="HappyHome.png">
 . . .

 

Creating PB .NET assembly with c# assemblies
C# migration tool
Accepted Answer
Mark Lee @Appeon
Mark Lee @Appeon Accepted Answer Pending Moderation
  1. Wednesday, 15 January 2020 08:10 AM UTC
  2. Beta Testing
  3. # Permalink

Hi Michael,

  1. There is an '!' character at the end of the PictureName which means it is a built-in picture in the PB system.

You can find the Select Image tool in the RibbonBar Builder window. (see the attachment 1)

  1. The panel picture will be displayed if you shrink the RibbonBar width, this rule is the same as that in the Windows folder.

(see the attachment 2)

BTW, we will also enhance the documentation of the panel picture display issue.

 

Regards,

 

Attachments (2)
built-in image.png built-in image.png
panel picture.png panel picture.png
Comment
Michael Kramer
  1. Michael Kramer
  2. Wednesday, 15 January 2020 08:25 AM UTC
Thx, Mark. Got it!

I had to shrink the window width some more and the panel pictures appeared.
  1. Helpful
There are no comments made yet.
Responses (3)
Mark Lee @Appeon
Mark Lee @Appeon Accepted Answer Pending Moderation
  1. Tuesday, 14 January 2020 09:22 AM UTC
  2. Beta Testing
  3. # 1

Hi Michael,

 

Are you using the JSON format file to load your Ribbonbar control?

If yes, you can refer to the example below:

{
    "BuiltinTheme": 0,
    "Font": "FaceName:Tahoma; TextSize:10",
    "RibbonItems": {
        "Category": [
            {
                "Text": "Home",
                "Enabled": true,
                "Visible": true,
                "Panel": [
                    {
                        "Text": "Clipboard",
                        "PictureName": "explorer_icon\\Layer-7.png",
                        "Enabled": true,
                        "Visible": true,
                        "RibbonItem": [
                            {
                                "LargeButton": {
                                    "Text": "Pin to Quick access",
                                    "PictureName": "explorer_icon\\Layer-9.png",
                                    "Clicked": "ue_largebutton",
                                    "Enabled": true,
                                    "Visible": true,
                                    "Checked": false,
                                    "DefaultCommand": true
                                }
                            },
                            {
                                "LargeButton": {
                                    "Text": "Copy",
                                    "PictureName": "explorer_icon\\Layer-8.png",
                                    "Clicked": "ue_largebutton",
                                    "Enabled": true,
                                    "Visible": true,
                                    "Checked": false,
                                    "DefaultCommand": true
                                }
                            },
                            {
                                "LargeButton": {
                                    "Text": "Parse",
                                    "PictureName": "explorer_icon\\Layer-7.png",
                                    "Clicked": "ue_largebutton",
                                    "Enabled": true,
                                    "Visible": true,
                                    "Checked": false,
                                    "DefaultCommand": true
                                }
                            },
                            {
                                "SmallButton": {
                                    "Text": "Cut",
                                    "PictureName": "explorer_icon\\11.png",
                                    "Clicked": "ue_smallbutton",
                                    "Enabled": true,
                                    "Visible": true,
                                    "Checked": false,
                                    "DefaultCommand": true
                                }
                            },
                            {
                                "SmallButton": {
                                    "Text": "Copy path",
                                    "PictureName": "explorer_icon\\10.png",
                                    "Clicked": "ue_smallbutton",
                                    "Enabled": true,
                                    "Visible": true,
                                    "Checked": false,
                                    "DefaultCommand": true
                                }
                            },
                            {
                                "SmallButton": {
                                    "Text": "Parse shotcut",
                                    "PictureName": "explorer_icon\\9.png",
                                    "Clicked": "ue_smallbutton",
                                    "Enabled": true,
                                    "Visible": true,
                                    "Checked": false,
                                    "DefaultCommand": true
                                }
                            }
                        ]
                    },
                    {
                        "Text": "Organize",
                        "PictureName": "explorer_icon\\Layer-4.png",
                        "Enabled": true,
                        "Visible": true,
                        "RibbonItem": [
                            {
                                "LargeButton": {
                                    "Text": "Move to",
                                    "Tag": "moveto",
                                    "PictureName": "explorer_icon\\Layer-6.png",
                                    "Clicked": "ue_largebutton",
                                    "Selected": "ue_largebutton_selected",
                                    "Enabled": true,
                                    "Visible": true,
                                    "Checked": false,
                                    "DefaultCommand": true,
                                    "Menu": {
                                        "Item": [
                                            {
                                                "Text": "Menu Test1",
                                                "PictureName": "explorer_icon\\Layer-6.png",
                                                "Clicked": "ue_MenuItemClicked",
                                                "Enabled": true,
                                                "Checked": false,
                                                "Visible": true,
                                                "Type": 0
                                            }
                                        ]
                                    }
                                }
                            },
                            {
                                "LargeButton": {
                                    "Text": "Copy to",
                                    "Tag": "CopyTo",
                                    "PictureName": "explorer_icon\\Layer-5.png",
                                    "Clicked": "ue_largebutton",
                                    "Selected": "ue_largebutton_selected",
                                    "Enabled": true,
                                    "Visible": true,
                                    "Checked": false,
                                    "DefaultCommand": false,
                                    "Menu": {
                                        "Item": [
                                            {
                                                "Text": "Menu Test2",
                                                "PictureName": "explorer_icon\\Layer-5.png",
                                                "Clicked": "ue_MenuItemClicked",
                                                "Enabled": true,
                                                "Checked": false,
                                                "Visible": true,
                                                "Type": 0
                                            }
                                        ]
                                    }
                                }
                            },
                            {
                                "LargeButton": {
                                    "Text": "Delete",
                                    "Tag": "deleted",
                                    "PictureName": "explorer_icon\\Layer-4.png",
                                    "Enabled": false,
                                    "Visible": true,
                                    "Checked": false,
                                    "DefaultCommand": true
                                }
                            },
                            {
                                "LargeButton": {
                                    "Text": "Rename",
                                    "PictureName": "explorer_icon\\Layer-3.png",
                                    "Clicked": "ue_largebutton",
                                    "Enabled": true,
                                    "Visible": true,
                                    "Checked": false,
                                    "DefaultCommand": true
                                }
                            }
                        ]
                    },
                    {
                        "Text": "New",
                        "PictureName": "explorer_icon\\Layer-2.png",
                        "Enabled": true,
                        "Visible": true,
                        "RibbonItem": [
                            {
                                "LargeButton": {
                                    "Text": "New F&older",
                                    "PictureName": "explorer_icon\\Layer-2.png",
                                    "Clicked": "ue_largebutton",
                                    "Enabled": true,
                                    "Visible": true,
                                    "Checked": false,
                                    "DefaultCommand": true
                                }
                            },
                            {
                                "SmallButton": {
                                    "Text": "New Item",
                                    "PictureName": "explorer_icon\\7.png",
                                    "Enabled": true,
                                    "Visible": true,
                                    "Checked": false,
                                    "DefaultCommand": true,
                                    "Menu": {
                                        "Item": [
                                            {
                                                "Text": "Menu Test4",
                                                "PictureName": "explorer_icon\\7.png",
                                                "Clicked": "ue_MenuItemClicked",
                                                "Enabled": true,
                                                "Checked": false,
                                                "Visible": true,
                                                "Type": 0
                                            }
                                        ]
                                    }
                                }
                            },
                            {
                                "SmallButton": {
                                    "Text": "Easy access",
                                    "PictureName": "explorer_icon\\8.png",
                                    "Enabled": true,
                                    "Visible": true,
                                    "Checked": false,
                                    "DefaultCommand": true,
                                    "Menu": {
                                        "Item": [
                                            {
                                                "Text": "Menu Test5",
                                                "PictureName": "explorer_icon\\8.png",
                                                "Clicked": "ue_MenuItemClicked",
                                                "Enabled": true,
                                                "Checked": false,
                                                "Visible": true,
                                                "Type": 0
                                            }
                                        ]
                                    }
                                }
                            }
                        ]
                    },
                    {
                        "Text": "Open",
                        "PictureName": "explorer_icon\\6.png",
                        "Enabled": true,
                        "Visible": true,
                        "RibbonItem": [
                            {
                                "LargeButton": {
                                    "Text": "Properties",
                                    "PictureName": "explorer_icon\\Layer-1.png",
                                    "Enabled": true,
                                    "Visible": true,
                                    "Checked": false,
                                    "DefaultCommand": true,
                                    "Menu": {
                                        "Item": [
                                            {
                                                "Text": "Menu Test6",
                                                "PictureName": "explorer_icon\\Layer-1.png",
                                                "Clicked": "ue_MenuItemClicked",
                                                "Enabled": true,
                                                "Checked": false,
                                                "Visible": true,
                                                "Type": 0
                                            }
                                        ]
                                    }
                                }
                            },
                            {
                                "SmallButton": {
                                    "Text": "Open",
                                    "PictureName": "explorer_icon\\6.png",
                                    "Enabled": true,
                                    "Visible": true,
                                    "Checked": false,
                                    "DefaultCommand": true,
                                    "Menu": {
                                        "Item": [
                                            {
                                                "Text": "Menu test7",
                                                "PictureName": "explorer_icon\\6.png",
                                                "Clicked": "ue_MenuItemClicked",
                                                "Enabled": true,
                                                "Checked": false,
                                                "Visible": true,
                                                "Type": 0
                                            }
                                        ]
                                    }
                                }
                            },
                            {
                                "SmallButton": {
                                    "Text": "Edit",
                                    "PictureName": "explorer_icon\\5.png",
                                    "Clicked": "ue_smallbutton",
                                    "Enabled": true,
                                    "Visible": true,
                                    "Checked": false,
                                    "DefaultCommand": true
                                }
                            },
                            {
                                "SmallButton": {
                                    "Text": "History",
                                    "PictureName": "explorer_icon\\4.png",
                                    "Clicked": "ue_smallbutton",
                                    "Enabled": true,
                                    "Visible": true,
                                    "Checked": false,
                                    "DefaultCommand": true
                                }
                            }
                        ]
                    },
                    {
                        "Text": "Select",
                        "PictureName": "explorer_icon\\3.png",
                        "Enabled": true,
                        "Visible": true,
                        "RibbonItem": [
                            {
                                "SmallButton": {
                                    "Text": "Select All",
                                    "PictureName": "explorer_icon\\3.png",
                                    "Clicked": "ue_smallbutton",
                                    "Enabled": true,
                                    "Visible": true,
                                    "Checked": false,
                                    "DefaultCommand": true
                                }
                            },
                            {
                                "SmallButton": {
                                    "Text": "Select None",
                                    "PictureName": "explorer_icon\\2.png",
                                    "Clicked": "ue_smallbutton",
                                    "Enabled": true,
                                    "Visible": true,
                                    "Checked": false,
                                    "DefaultCommand": true
                                }
                            },
                            {
                                "SmallButton": {
                                    "Text": "Invert Select",
                                    "PictureName": "explorer_icon\\1.png",
                                    "Clicked": "ue_smallbutton",
                                    "Enabled": true,
                                    "Visible": true,
                                    "Checked": false,
                                    "DefaultCommand": true
                                }
                            }
                        ]
                    }
                ]
            },
            {
                "Text": "Share",
                "Enabled": true,
                "Visible": true,
                "Panel": [
                    {
                        "Text": "Send",
                        "PictureName": "explorer_icon\\Share.png",
                        "Enabled": true,
                        "Visible": true,
                        "RibbonItem": [
                            {
                                "LargeButton": {
                                    "Text": "Share",
                                    "PictureName": "explorer_icon\\Share.png",
                                    "Clicked": "ue_largebutton",
                                    "Enabled": true,
                                    "Visible": true,
                                    "Checked": false,
                                    "DefaultCommand": true
                                }
                            },
                            {
                                "LargeButton": {
                                    "Text": "Email",
                                    "PictureName": "explorer_icon\\Email.png",
                                    "Clicked": "ue_largebutton",
                                    "Enabled": true,
                                    "Visible": true,
                                    "Checked": false,
                                    "DefaultCommand": true
                                }
                            },
                            {
                                "LargeButton": {
                                    "Text": "Zip",
                                    "PictureName": "explorer_icon\\Zip.png",
                                    "Clicked": "ue_largebutton",
                                    "Enabled": true,
                                    "Visible": true,
                                    "Checked": false,
                                    "DefaultCommand": true
                                }
                            },
                            {
                                "SmallButton": {
                                    "Text": "Burn to Disc",
                                    "PictureName": "explorer_icon\\burn-to-disc.png",
                                    "Clicked": "ue_smallbutton",
                                    "Enabled": true,
                                    "Visible": true,
                                    "Checked": false,
                                    "DefaultCommand": true
                                }
                            },
                            {
                                "SmallButton": {
                                    "Text": "Print",
                                    "PictureName": "explorer_icon\\Print2.png",
                                    "Clicked": "ue_smallbutton",
                                    "Enabled": true,
                                    "Visible": true,
                                    "Checked": false,
                                    "DefaultCommand": true
                                }
                            },
                            {
                                "SmallButton": {
                                    "Text": "Fax",
                                    "PictureName": "explorer_icon\\Fax.png",
                                    "Clicked": "ue_smallbutton",
                                    "Enabled": true,
                                    "Visible": true,
                                    "Checked": false,
                                    "DefaultCommand": true
                                }
                            }
                        ]
                    },
                    {
                        "Text": "Share With",
                        "Enabled": true,
                        "Visible": true,
                        "RibbonItem": [
                            {
                                "LargeButton": {
                                    "Text": "Stop Sharing",
                                    "PictureName": "explorer_icon\\stop-sharing.png",
                                    "Clicked": "ue_largebutton",
                                    "Enabled": true,
                                    "Visible": true,
                                    "Checked": false,
                                    "DefaultCommand": true
                                }
                            }
                        ]
                    },
                    {
                        "Enabled": true,
                        "Visible": true,
                        "RibbonItem": [
                            {
                                "LargeButton": {
                                    "Text": "Advanced Security",
                                    "PictureName": "explorer_icon\\advanced-security.png",
                                    "Clicked": "ue_largebutton",
                                    "Enabled": true,
                                    "Visible": true,
                                    "Checked": false,
                                    "DefaultCommand": true
                                }
                            }
                        ]
                    }
                ]
            },
            {
                "Text": "View",
                "Enabled": true,
                "Visible": true,
                "Panel": [
                    {
                        "Text": "Panes",
                        "Enabled": true,
                        "Visible": true,
                        "RibbonItem": [
                            {
                                "LargeButton": {
                                    "Text": "Navigation Pane",
                                    "PictureName": "explorer_icon\\Layer-13.png",
                                    "Enabled": true,
                                    "Visible": true,
                                    "Checked": false,
                                    "DefaultCommand": true,
                                    "Menu": {
                                        "Item": [
                                            {
                                                "Text": "Menu Test8",
                                                "PictureName": "explorer_icon\\Layer-13.png",
                                                "Clicked": "ue_MenuItemClicked",
                                                "Enabled": true,
                                                "Checked": false,
                                                "Visible": true,
                                                "Type": 0
                                            }
                                        ]
                                    }
                                }
                            },
                            {
                                "Group": {
                                    "Enabled": true,
                                    "NewLine": true,
                                    "Visible": true,
                                    "RibbonItem": [
                                        {
                                            "SmallButton": {
                                                "Text": "Preview Pane",
                                                "PictureName": "explorer_icon\\16.png",
                                                "Clicked": "ue_smallbutton",
                                                "Enabled": true,
                                                "Visible": true,
                                                "Checked": false,
                                                "DefaultCommand": true
                                            }
                                        }
                                    ]
                                }
                            },
                            {
                                "Group": {
                                    "Enabled": true,
                                    "NewLine": true,
                                    "Visible": true,
                                    "RibbonItem": [
                                        {
                                            "SmallButton": {
                                                "Text": "Details Pane",
                                                "PictureName": "explorer_icon\\15.png",
                                                "Clicked": "ue_smallbutton",
                                                "Enabled": true,
                                                "Visible": true,
                                                "Checked": false,
                                                "DefaultCommand": true
                                            }
                                        }
                                    ]
                                }
                            }
                        ]
                    },
                    {
                        "Text": "Current View",
                        "Enabled": true,
                        "Visible": true,
                        "RibbonItem": [
                            {
                                "LargeButton": {
                                    "Text": "Sort By",
                                    "PictureName": "explorer_icon\\Layer-12.png",
                                    "Enabled": true,
                                    "Visible": true,
                                    "Checked": false,
                                    "DefaultCommand": true,
                                    "Menu": {
                                        "Item": [
                                            {
                                                "Text": "Menu Test9",
                                                "PictureName": "explorer_icon\\Layer-12.png",
                                                "Clicked": "ue_MenuItemClicked",
                                                "Enabled": true,
                                                "Checked": false,
                                                "Visible": true,
                                                "Type": 0
                                            }
                                        ]
                                    }
                                }
                            },
                            {
                                "SmallButton": {
                                    "Text": "Group By",
                                    "PictureName": "explorer_icon\\14.png",
                                    "Enabled": true,
                                    "Visible": true,
                                    "Checked": false,
                                    "DefaultCommand": true,
                                    "Menu": {
                                        "Item": [
                                            {
                                                "Text": "Menu Test10",
                                                "PictureName": "explorer_icon\\14.png",
                                                "Clicked": "ue_MenuItemClicked",
                                                "Enabled": true,
                                                "Checked": false,
                                                "Visible": true,
                                                "Type": 0
                                            }
                                        ]
                                    }
                                }
                            },
                            {
                                "SmallButton": {
                                    "Text": "Add Column",
                                    "PictureName": "explorer_icon\\13.png",
                                    "Enabled": true,
                                    "Visible": true,
                                    "Checked": false,
                                    "DefaultCommand": true,
                                    "Menu": {
                                        "Item": [
                                            {
                                                "Text": "Menu Test11",
                                                "PictureName": "explorer_icon\\13.png",
                                                "Clicked": "ue_MenuItemClicked",
                                                "Enabled": true,
                                                "Checked": false,
                                                "Visible": true,
                                                "Type": 0
                                            }
                                        ]
                                    }
                                }
                            },
                            {
                                "SmallButton": {
                                    "Text": "Size All Columns to Fit",
                                    "PictureName": "explorer_icon\\12.png",
                                    "Clicked": "ue_smallbutton",
                                    "Enabled": true,
                                    "Visible": true,
                                    "Checked": false,
                                    "DefaultCommand": true
                                }
                            }
                        ]
                    },
                    {
                        "Text": "Show/Hide",
                        "Enabled": true,
                        "Visible": true,
                        "RibbonItem": [
                            {
                                "CheckBox": {
                                    "Text": "File Name Extensions",
                                    "Tag": "FileNameExtensions",
                                    "Enabled": true,
                                    "Checked": false,
                                    "ThreeState": true,
                                    "Visible": true
                                }
                            },
                            {
                                "CheckBox": {
                                    "Text": "File Name Extensions",
                                    "Enabled": true,
                                    "Checked": true,
                                    "ThreeState": false,
                                    "Visible": true
                                }
                            },
                            {
                                "CheckBox": {
                                    "Text": "Hiddent Items",
                                    "Enabled": true,
                                    "Checked": false,
                                    "ThreeState": false,
                                    "Visible": true
                                }
                            },
                            {
                                "LargeButton": {
                                    "Text": "Hide Selected Items",
                                    "PictureName": "explorer_icon\\Layer-11.png",
                                    "Clicked": "ue_largebutton",
                                    "Enabled": true,
                                    "Visible": true,
                                    "Checked": false,
                                    "DefaultCommand": true
                                }
                            }
                        ]
                    },
                    {
                        "Enabled": true,
                        "Visible": true,
                        "RibbonItem": [
                            {
                                "LargeButton": {
                                    "Text": "Options",
                                    "PictureName": "explorer_icon\\Layer-10.png",
                                    "Enabled": true,
                                    "Visible": true,
                                    "Checked": false,
                                    "DefaultCommand": true,
                                    "Menu": {
                                        "Item": [
                                            {
                                                "Text": "Menu Test12",
                                                "PictureName": "explorer_icon\\Layer-10.png",
                                                "Clicked": "ue_MenuItemClicked",
                                                "Enabled": true,
                                                "Checked": false,
                                                "Visible": true,
                                                "Type": 0
                                            }
                                        ]
                                    }
                                }
                            }
                        ]
                    }
                ]
            },
            {
                "Text": "Manage",
                "Enabled": true,
                "Visible": true,
                "Panel": [
                    {
                        "Text": "Rotate",
                        "Enabled": true,
                        "Visible": true,
                        "RibbonItem": [
                            {
                                "LargeButton": {
                                    "Text": "Rotate left",
                                    "PictureName": "explorer_icon\\rotate-left.png",
                                    "Clicked": "ue_largebutton",
                                    "Enabled": true,
                                    "Visible": true,
                                    "Checked": false,
                                    "DefaultCommand": true
                                }
                            },
                            {
                                "LargeButton": {
                                    "Text": "Rotate right",
                                    "PictureName": "explorer_icon\\rotate-right.png",
                                    "Clicked": "ue_largebutton",
                                    "Enabled": true,
                                    "Visible": true,
                                    "Checked": false,
                                    "DefaultCommand": true
                                }
                            }
                        ]
                    },
                    {
                        "Text": "View",
                        "Enabled": true,
                        "Visible": true,
                        "RibbonItem": [
                            {
                                "LargeButton": {
                                    "Text": "Slide show",
                                    "PictureName": "explorer_icon\\slide-show.png",
                                    "Clicked": "ue_largebutton",
                                    "Enabled": true,
                                    "Visible": true,
                                    "Checked": false,
                                    "DefaultCommand": true
                                }
                            },
                            {
                                "LargeButton": {
                                    "Text": "Set as background",
                                    "PictureName": "explorer_icon\\set-as-background.png",
                                    "Clicked": "ue_largebutton",
                                    "Enabled": true,
                                    "Visible": true,
                                    "Checked": false,
                                    "DefaultCommand": true
                                }
                            }
                        ]
                    }
                ]
            }
        ]
    }
}

And you can also go to PB IDE menu -> Tools -> RibbonBar Builder window, click the "Export to JSON" tool to export the JSON file. (see the attachment)

Regards,

 

Attachments (1)
ribbonbar json.png ribbonbar json.png
Comment
There are no comments made yet.
Michael Kramer
Michael Kramer Accepted Answer Pending Moderation
  1. Tuesday, 14 January 2020 11:01 AM UTC
  2. Beta Testing
  3. # 2

Hi Mark,

Here is example similar to what I did:

Create new RibbonBar in RibbonBar Builder

  1. Open Template
    Sidebar: I also used this to look for differences compared to #2203.

  2. Locate panel having Text="Boards"
    1. This panel has PictureName="BoardSmall!"
    2. But I don't see that picture anywhere in the ribbon

  3. Create new panel just before the Boards panel:
    ...
<Panel Text="Picture?" PictureName="PicturesSmall!">
  <LargeButton PictureName="RunPreviewObject!" Clicked="ue_DisplayPicture" />
</Panel>
...​
    1. See uploaded picture for how this looks.
    2. I don't see PicturesSmall! for the panel
    3. I only see RunPreviewObject! for the button
  • Where should the panel picture appear?
  • What should I do as developer or as end-user to make the panel picture visible?
Attachments (1)
RibbonPanel.png RibbonPanel.png
Comment
There are no comments made yet.
  • Page :
  • 1


There are no replies made for this question yet.
However, you are not allowed to reply to this question.