AdvGlowButton, position on Right-left aligned DockPanel

Battistotti_Michela · July 30, 2021, 6:23am

Goodmorning,

we're currently apply a flat-style looking to our application using:

TAdvDockPanel
TAdvToolbar
TAdvGlowButton

When the DockPanel is aligned to "top" o "bottom", the AdvGlowButton (4 or 5 per Advtoolbar) is visually separated with the Position property (Position: Left, Middle, Right). We use that property because the separator is looking better than settings the border property (that cover the entire button perimeter).

We've found that in the left/right aligned AdvDockPanel, where the glow buttons stacks veritcally, the position property doesn't seems to work as i expect (like, displaying a thin separation line on the bottom and/or top border, not on the left and/or right). It seems that the DockPanel align mode doesn't affect the the position-displaying border position of the AdvGlowButton.

Is there some property to use exactly "the same looking" like position, but with vertically stacked glowbuttons displaying a thin separator only in the top and/or bottom border?

Many thanks

brunofierens · July 30, 2021, 9:01am

Thanks for reporting.
We applied an improvement that will be included in the next update.

Battistotti_Michela · July 30, 2021, 11:20am

Thanks for the quick reply Bruno.
If the changes in the source is relatively simple, is it possible to have the code portion to make it happens?
Unfortunately, to reach the current situation in our next-version app release, we've made some changes in the TMS sources. So if the change need some "minor changes" (and if it's possible) i prefer to avoid reinstalling all the sources.

Counterwise, we need a lot of time to apply the new changes.

Thanks

brunofierens · July 30, 2021, 1:38pm

Changes are in 2 units. I propose you synchronize these when these updated units area delivered in the next TMS VCL UI Pack update (scheduled next week) if you do not want to use the newest release.

Battistotti_Michela · July 30, 2021, 2:45pm

That's purrfect.

Let me know the changes when these are published in the next update.

brunofierens · July 30, 2021, 2:53pm

v10.6.0.0 will be released in the first half of next week

Battistotti_Michela · August 5, 2021, 3:31pm

Bruno,

i've installed the 10.6.0.0 version containing the patch for the positioning problem i've raised a week ago.
Actually, the buttons looks like they're the same as the previous version.
In a left/right dock panel, the advglowbuttons displays left/middle/right separator still on the left and/or right position, not in the top and/or bottom.
I've already set the "IsRotated" property to TRUE

Actually i can see some code in the bpLeft and bpRight, but not in the bpMiddle position (where should draws separators in the top and in the bottom).

Is there something else i need to change in order to get things working as expected?

Thanks

brunofierens · August 5, 2021, 4:01pm

These buttons are on a TAdvToolBar and the TAdvToolBar is on the TAdvDockPanel?
You should not need to set IsRotated yourself. This should be internally handled depending on the position of the TAdvDockPanel and when it is rotated, it should show the border of the button adapted to orientation.

Battistotti_Michela · August 6, 2021, 6:33am

Sure.

If i create the toolbar and the buttons at design time the rotated property is set by the Loaded method.
But if i runtime create both of them, is not automatically set.
If I call the protected method UpdateGlowButtonRotation, the property is correctly set to TRUE on the AdvGlowButtons of the AdvToolbar.
The problem is that i can't see any difference from before: the line is still drawed on the left and/or right side of the button

Second question: the position pbMiddle, has no "rotation" condition.. is it right? The middle position should be drawed differently with rotated -> true or false.. Am I missing something?

Any ideas?

Battistotti_Michela · August 9, 2021, 10:34am

Good morning,

are there some news about this topic?
I'm currently using the "office2019" ui style, with some custom gray style (actually the tones depends by the customer choosed background color).

If you create a new project (without the toolbarstyler) the borders are paint properly (top/bottom).
But if i attach a toolbarstyler to the dockPanel:

the rounded corners is painted left/right.
(the buttons divider in the sample doesen't appear as expected, in the right DockPanel)
Seems to be a paint issue in the bottom-left corner (of the first and last button

img_buttons_2854×445 7.58 KB

)

(se attached project Project5.zip (27.4 KB))

Thanks

Battistotti_Michela · August 9, 2021, 11:52am

Just to clarify, i'm just searching the same separator looking as this image, but for vertically stacked buttons.
I've only one toolBarstyler that is assigned dinamically to forms that appear to the user..
The separator appears in the vertically stacket button, but "not in the right position" (see post nr 9)

brunofierens · August 9, 2021, 2:44pm

So, this concerns the TAdvToolBarSeparator component (something you never mention here in your posts) ?
Or not?
It would be more efficient if you send a sample source app so we know exactly what you use.

Battistotti_Michela · August 9, 2021, 3:05pm

No, the dock panel actually use only glowbuttons with the "position" property.
After some time, i've founded the errors on the AdvGlowButton Source (hope that this helps):

In the "DrawOpenRoundRectTop" method the line

path.AddLine(X + Width , Y+ radius, X + Width , Y + Height);

is incorrect because draw the separator line on the left.
Substituting with

path.AddLine(X, Y + Height, X + Width, Y + Height);

Draw the line on the bottom side of the button.
In the "DrawOpenRoundRectBottom" method the lines

path.AddLine(X , Y, X , Y + Height-radius);

is incorrect because draw the separator line on the right.
Substituting with

path.AddLine(X , Y, X + Width, Y);

Draw the line on the top side of the button.
and i've created a new method "DrawOpenRoundRectStacked" (copied from the "Middle" metiod) that use the corrections made in the "DrawOpenRoundRectTop" and "DrawOpenRoundRectBottom" methods, and managed to be called on the "DrawVistaButton" method when the button "IsRotated".

Now the buttons stacks perfectly.

brunofierens · August 11, 2021, 7:47am

We could see and understand the issues mentioned in DrawOpenRoundRectTop and DrawOpenRoundRectNBottom.
We cannot understand the needed for changes in DrawOpenRoundRectMiddle.
We do not see a desired effect from this in the different Office styles with which this was tested. I can only suspect you must be using a very specific setup that surfaces this. Can you isolate this and provide a sample source project so we can reproduce this and further investigate.

Battistotti_Michela · August 17, 2021, 7:23am

In the "DrawOpenRoundRectMiddle" method, the squared borders are drawn correctly.
The problems are in the divider lines that are drawn in the right and left side of the button.
When stacked vertically:

The left button ("top" if stacked), has a "dark divider" in the bottom border.
The right button ("bottom" if stacked), has a "light divider" in the top border
the middle button, still paint the divider on the left/right position.

My procedure (DrawOpenRoundRectStacked) "combine" the draw of the two dividers:

Draw a "dark divider" on the top of the button
Draw a "bright divider" on the bottom of the button

brunofierens · August 18, 2021, 8:09am

I can only assume you must use a specific / special style as we do not see this here. We tried several built-in Office styles and couldn't see a problem anymore.
In order to handle this in an efficient way, can you please isolate this and send a sample source project + exact steps with which we can reproduce this?