Backstage tab icons ignore BarImageSize and show always small size - Bars for Avalonia Forum

Posted 1 month ago by kucint.bp

Version: 25.2.1

Platform: .NET 9

Environment: Windows 11 (64-bit)

I create RibbonBackstageViewModel that contains couple of pages with appropriate icons:

    private RibbonBackstageViewModel CreateBackstage(BackstageCommands commands) => new()
    {
        Items =
        {
            new BackstageHomeTabViewModel()
            {
                SmallIcon = _imageProvider.GetImage(BackstageControlKeys.BackstageHome, BarImageSize.Small)
            },
            new BackstageNewTabViewModel()
            {
                SmallIcon = _imageProvider.GetImage(BackstageControlKeys.BackstageNew, BarImageSize.Small)
            },
            new RibbonBackstageHeaderButtonViewModel(BackstageControlKeys.BackstageOpen, "Open", commands.OpenCommand)
            {
                SmallIcon = _imageProvider.GetImage(BackstageControlKeys.BackstageOpen, BarImageSize.Small)
            },
    }

No matter which icon size I request: BarImageSize.Small, BarImageSize.Medium or BarImageSize.Large, the backstage shows always small icon.
I checked that _imageProvider delivers bitamps of appropriate size.

I tried as well to initialize RibbonBackstageTabViewModel.LargeIcon and RibbonBackstageHeaderButtonViewModel.LargeIcon rather than SmallIcon but it does not work either.

Comments (5)

Posted 1 month ago by Actipro Software Support - Cleveland, OH, USA

Hello,

The backstage tabs will use a 16x16 (small) size icon in the UI by default unless the tab has a Large VariantSize set. In that case the template will switch to using a 32x32 (large) size icon in the UI.

In the MVVM API, the RibbonBackstageTabViewModel.VariantSize property is what determines if the SmallIcon or LargeIcon are used.

Actipro Software Support

Posted 1 month ago by kucint.bp

Indeed, I can switch to Large icons 32x32 but.... this looks awkward.... Buttons are really huge now...
Pity that I cannot attach screenshot.

Additionally RibbonBackstageHeaderButtonViewModel supports only Small icons (no VariantSize property available).
This means, that if Backstage has both RibbonBackstageTabViewModel and RibbonBackstageHeaderButtonViewModel , I cannot set the same icon size for both.
So the only icon which is realy working is small one :(

Posted 1 month ago by Actipro Software Support - Cleveland, OH, USA

Hello,

We model the small and large size buttons after Microsoft Office and what they do on Backstage. The control templates are what determine the image size and how icons passed in are stretched. Right now, the Small VariantSize in our templates will shrink all images down to 16x16, which it sounds like is the main thing you're trying to avoid.

Since you are looking for a different appearance than what our default templates provide, your best bet may be to retemplate the RibbonBackstageHeaderButton and RibbonBackstageTabItem controls. I see you are a customer and have access to download our default styles/templates from your account. You should be able to create a ControlTheme for each of those two controls that sets an alternate Template, and put the ControlThemes in your Application's Resources. Use our default Templates as a starting point, and change things like the IconPresenter's Width/Height and any other margins/paddings you need adjusted. Then you should be able to obtain your desired appearance.

Actipro Software Support

Posted 1 month ago by kucint.bp

Hi, indeed again, the actipro mimics perfectly the Office design.
In Office it looks OK, because they do have icons (large) only in RibbonBackstageTabViewModel . RibbonBackstageHeaderButtonViewModel has no icon at all, so there is no design conflict here... :)

I will try to follow your suggestion to retemplate both controls, this is a perfect task for Xmas time ;)
Could you please help me to locate default styles/templates?
I could not find any link to download it from my my customer account (https://www.actiprosoftware.com/).
Thanks!
tomasz

Posted 1 month ago by Actipro Software Support - Cleveland, OH, USA

Hello,

Certainly! If you log into your user account, click your profile link at the upper right of the web page. A popup will have a menu item for "My Organizations". Click that and then click the "View Organization" button for your company. Scroll down to the "Purchases and Licenses" list and use the blue "Actions" button to show a popup menu that has an item to download default styles and templates.

Actipro Software Support

Add Comment

Please log in to a validated account to post comments.