I'm styling an application to have dark toolbars, but are having problems styling some aspects of the UltraToolbarsManager.Boiled down, the essence of it is these UI Role settings:- ToolbarDockArea: Background color = 52;52;52- Toolbar: Background color = Transparent- ToolbarItemQuickCustomize (Normal state): Background color = Transparent- ToolbarItem (Pressed state): Background color = 102;102;102, Border 1 = Border 2 = 52;52;52, Border 3D = 188;188;188- ToolbarItem (HotTracked state): Background color = 75;75;75, Border 1 = Border 2 = 52;52;52, Border 3D = 188;188;188The overall Style setting on the UltraToolbarsManager component role is Office2007.
The result is shown as screenshot 1 in the attached image.
Problem 1:I can't get rid of the blue shadow (line) below the dark toolbar (more clearly visible on the zoomed in screenshot 2). Also, there are some rounded corners on the toolbar I can't get rid of either.What role do I need to change to modify the colors for this? Or are there no way to style these parts?
Second, I want the dropdown menus to have a dark bar on the left with an appearance similar to the toolbars. This bar does not seem to be directly stylable, but is typically gray or blue depending on the overall Style setting on the UltraToolbarsManager component role.
However, I figured out that I could do it using a background image:- MenuItem (Normal state): Background image = image with dark left part (24 pixels), Layout Mode = Stretched, Left Margin = 24 (unstretched part)- MenuItem (HotTracked state): Background image = grayish version of above (and dark part only 23 pixels wide, to compensate for the shift that apparently takes place when hottracked item is drawn)
The result can be seen in screenshot 3, which is close to what I want.
Problem 2:State menu items that are pressed puts a white pixel at the top and bottom of the item in the left side of the dark bar (more clearly visible on the zoomed in screenshot 4, where I've marked the problem).How can I get rid of this?
Another problem is that the pressed state (with the orange border) is not like on the toolbar, and the orange border do not seem to be stylable (changing border color for the MenuItem pressed state does not seem to have any effect).I found a workaround though, by making an image similar to how the pressed state appears on the toolbar:- MenuItem (Pressed state): Background image = modified version of image for Normal state, with a framed box in the left part (to indicate selected), Border Alpha = Transparent (to get rid of the orange border that hides the border on the image)
The appearance is now close to what I want, as shown in screenshot 5.
Unfortunately, setting Border Alpha = Transparent on the pressed state causes not only the orange border around the image to disappear, but also the border around the entire hottracked item (image and text).This workaround almost solves it:- MenuItem (HotTracked state): Border Alpha = Opaque
Problem 3:The workaround comes with the cost of reintroducing the orange border around pressed menu items when the mouse hovers over them (screenshot 6).Is there another way to get rid of the orange border (or change the color)?
Problem 4:Screenshot 6 also shows another problem: The interior of the orange border should be gray (to indicate item is pressed), not the almost black color used when hovering over a non-pressed item.I would be able to do this if there was a HotTrackPressed state on menu item, but this doesn't seem to exist (there is a HotTrackSelected state though, but Selected does not seem to be the same as Pressed).Is there any way to do this?
Problem 5:As screenshot 7 shows, when a pressed menu item appears right below a menu separator, the pressed background image is also used next to the separator bar.Is there any way to get rid of this? Unfortunately, there doesn't seem to be a UI role specifically for the separaor item.
Thanks
Hello,
Can you send the style that you are using for your application? I can look into the style to determine what is causing each of the listed problems, and I will provide solutions for as many of them that I can.
I've attached the .isl file (had to add .txt though to be able to upload it - just remove that part)
Thank you for sending the ISL file. I've loaded it into a sample and I can see all of the issues you described. I will continue working with the ISL to determine why these things are occurring and guide you on how to get around them.
I spoke with my team about this and we were able to help you solve these issues.
Problem 1: This is built into the UltraToolbarsManager's Style. I recommend changing the Style to Office2013, but there are a few styles that do not use the shadow.Problem 2: This happens because of the image that is being applied to the MenuItem role's Normal, HotTracked, and Pressed states. I recommend removing this image and replacing it with a background color.Problem 3: This might go away if you change the style, but you can also set the MenuCheckMark role's BorderColor to transparent.Problem 4: I believe this is a side effect of using the image in the MenuItem role.Problem 5: I am not sure why this was happening, but I did not reproduce this after making the above changes.
Please try this out and let me know whether it works.
Thank you for the reply. Unfortunately, it doesn't solve any of my problems:
Problem 1: Although changing the Style to Office2013 solves the problem, it also changes other things. E.g. there is no border on toolbar items (and no spacing between them). I guess I might see if a draw filter can solve my problem then.
Problem 2: The background color only seem to apply to the text part of the menu item. As described, I want the color behind the icon to be dark (resembling the toolbar). If I remove the images, then I get a light grey color behind the menu icons that I don't seem to be able to change. Is there any way to do this, other than setting an image like I did?
Problem 3: As mentioned, changing the style has other undesired consequences. I tried changing the MenuCheckMark border color as suggested, but it doesn't change anything (and I'm not sure why it should; the primary UI Role for the state menu items is MenuItemStateButton, and the MenuCheckMark UI Role is not part of the MenuItemStateButton hierarchy of roles).
Problem 4: As mentioned, I cannot get the dark bar behind the icons without setting an image.
Problem 5: This happens because the separator (which acc. to AppStylist doesn't have a UI Role itself) seem to pick up the image being set on the MenuItem below it. And as mentioned, I need the image to get the dark bar behind the icons. It doesn't seem logical that the separator appearance should ever be affected by the state of the menu item below it, but this is what happens.
Thanks for taking the time to try out my suggestions. I will look into what can be done from our end to resolve these issues. Please let me know if you have any questions.
Please let me know if you have any further questions.
Hi,
Thanks for the answers, and sorry for the long delay.
I've come a lot closer:
- I've currently switched to the Office2013 style as you originally suggested. This solves problem 1. As a workaround to the spacing and missing border on toolbar items, I've used a background image for the pressed state on the ToolbarItem role (unlike menus, the background image does not seem to cause undesired side effects on toolbars).
- I've removed the background image for Normal and Pressed state on the MenuItem role. Instead, I've set background color on the MenuCheckMark and MenuIconArea roles. This solves problem 2 and 5. I'm very confused though why MenuCheckMark and MenuIconArea affects the appearance, as these roles do not appear in the hierarhy of UI roles listed in the popup when I hover over the icon area of a MenuStateButton (with an image). Role 1 is MenuItemStateButton (inheriting from MenuItemButton->MenuItem->Base), and role 2 is PopupMenu (inheriting from Menu->Base). Are there any way except guessing to determine which roles will affect a certain UI element?
- Changing style to Office2013 also changed the orange border around pressed menu items to blue'ish (close to the desired gray, so it almost solved problem 3, but see below).
The reason that setting MenuCheckMark's border color to transparent had no effect seem to be because of a combination of factors: a) It only affects MenuStateButton's that do NOT have an image (i.e. uses the default checkmark glyph instead), and b) The effect on MenuStateButton's using the default checkmark glyph was already more or less accomplished by the setting of Border Alpha = Tranparent on the MenuItem role.
Although I can live with it, I've attempted to change the blue'ish border around pressed menu items, but this only seem to be partly possible. I'm very confused regarding the border color - it seem to be very inconsistent how it's used. What I've found out (for the Office2013 style unless otherwise mentioned) is this:
- Setting background color on the MenuCheckMark role (Normal or Checked state) affects the background color for the icon shown in the menu for StateButtonTool (no matter if the StateButtonTool have an image, or uses the default checkmark glyph when pressed). But the border color on the MenuCheckMark role only affects the border color for the default checkmark glyph. The border color for an image set on a MenuStateButton seem to be hardcoded (except for certain styles, see below). When background color affects both, then shouldn't border color also do this?
- Setting Border Alpha to Transparent on the MenuItem role affects the border around the icon shown in the menu for StateButtonTool, no matter if the StateButtonTool have an image, or uses the default checkmark glyph when pressed. Since the border alpha setting on the MenuItem role affects the border around the image/checkmark for a pressed MenuStateButton, then shouldn't border color on the MenuItem role also do this?
- For some styles (e.g. WindowsXP), the border color on the MenuItem role does actually affect the border around the icon shown in the menu for StateButtonTool (but only if it has an image; for items using the default checkmark glyph, the border color can still be set on the MenuCheckMark role). Unfortunately, the WindowsXP style seem to be the only style without a shadow on the toolbars (problem 1) where this is possible, but the WindowsXP style have an undesired image shadow when the mouse is placed over a menu or toolbar item.
Any other suggestions on how to set the border color?
One more question: Are there any ways (application styling or via code) to change the default checkmark glyph shown for MenuStateButton's that do not have an image? Setting Image on the MenuCheckMark role does not seem to change anything.