Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
250
Unstylable elements in UltraToolbarsManager?
posted

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;188
The 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

Parents Reply Children