[SOLVED] MenuBar and ToolBar Visibility

Yes, you are right if TextAlign is set to Underneath.

Thanks.

I noticed that too. It’s probably the left padding of the blank label. Will fix.

If you set the toolbar layout to show the text below the icon it aligns well.

/Luca

Hi Luca,

Above class works.

But…..I noticed small issue though that I believe will be a easy fix for you. When a toolbarbutton has no text, the left and right padding are not equal, as if the image is left-aligned. The same behaviour in MenuBar menuitems. Please see attached images.

Build 1.2.35.0.

Thanks.

You can use this class:

public class MySeparator : ToolBarButton
{
    protected override void OnWebRender(dynamic config)
    {
         base.OnWebRender((object)config);

         config.appearance = "";
    }
}

We’ll enhance the designers for the toolbar and status bar to detect derived classes and let you choose it at design time. In a class like the one above you could set the Separator style in the constructor and hide the Style property and make your customized toolbar items.

/Luca

Hi Luca,

Yes, if possible. For separator that needs to push/dock toolbarbutton to the right, vertical line is not needed as it doesn’t look nice.

Thanks.

That’s correct. The separator has to be visible to be counted in the layout on the client. The toolbar is a single widget and the layout is entirely managed by the client using the HBox model.

You want to remove the line in the separator?

Hi Luca,

Yes. Visible property works now. However, when I set the SizeMode=Fill and Visible=False of a separator, it no longer pushes/docks the toolbarbutton to the right.

Build 1.2.35.0

Thanks.

This is fixed in the current update.

Bug. When is set to a separator it’s serialized differently and the visible property seems to be missing.

Thanks for spotting that.

Best,

Luca

Hi Luca,

Got it. But can’t set the separator’s Visible property to false. Is it by design?

And thanks for your info about panel’s header. I’ve tested that and works great.

Regards.

Hi Cris,

To push the button to the right you should put in a separator and set the separator to Fill. The buttons to the right of the separator will dock to the right. See image below.

If you set fill on the button, the button will expand to use the available space. You can set SizeMode.Fill on multiple buttons to have them resize proportionally.

HTH

Best,

Luca

Hi Frank,

Please see attache image how the ToolBar looks if I set SizeMode=Fill. A right-aligned toolbar button can work as a “Close” button of a UserControl loaded inside a form. In my opinion, it doesn’t look good and needs more  improvement especially when the mouse is over the button.

Thanks.

Hi Diego,

sorry for not explaining this upfront:

We could not add the align property because of the internal javascript HBox layout class and the overflow button added automatically.

But we added SizeMode.Auto and SizeMode.Fill. You can now add a button or a separator with SizeMode.Fill and it will fill the available space pushing the buttons to its right to the far right.
If multiple buttons are set to Fill they will share the space proportionally.

Having an enumeration will allow for additional layouts in the future.

Hope that helps
Frank

Hi Frank,

Visible property for ToolBar and MenuBar is fixed but can’t find Alignment property in ToolBarButton Collection Editor.

Thanks.

Hi Diego,

WJ-7440 is also fixed in the latest build (1.2.31).

Best regards
Frank

Logged as enhancement WJ-7440.

Hi Luca,

Thanks.

Hi Frank,

It’s fixed.

But can you not include a Position/Alignment property for a toolbarbutton which may be either Right or Left like in a Toolstrip control?

Thanks.

Hi Diego,

The bug that you have identified with the ToolBarButton is that it initializes Padding and Margin to 0,0,0,0 overriding the theme. It also serializes those values and the null icon. It has been fixed and should be available shortly.

Another problem reported above by Nic, is that the designer doesn’t take in consideration the padding value from the theme. This is also fixed.

About showing the theme value in the property editor, only the BackColor, ForeColor, Font show the value from the current theme as the default value. Most themeable properties that happen to be overridable by the component are overridden when they value corresponds to the “default” value. The padding should show (-1) to indicate the default. Usually when a property has been set to something different than the default it is displayed in bold.

The reason for this is that Wisej avoids sending the property back to the client if it is the default and lets the client and the theme handle it. For the colors and the font, there is some additional code that allows them to be shown in the property editor and still don’t go back to the client when unchanged.

Best,
Luca