TScrollbox and Scaling

[Mike Warren 2]

I'm having a couple of problems with dragging objects inside a scrollbox. My actual use case is a lot more complicated, but I've created a simple test case (attached) to demonstrate the problems.

 

1/ When the items inside the scrollbox are scaled larger the scrollbars do not update, making it impossible to scroll to the edges of the component. I can't find any method to update the scrollbars.

 

2/ When any components are scaled below 1, the components will no longer properly follow the mouse when dragged. Instead, the component being dragged will jump all over the place. This problem gets particularly bad as the scale decreases, especially below 0.5.

 

Am I doing something wrong? If not, does anyone have workarounds?

 

Here's a video showing the problem:

 

 

Test.zip

Edited April 14, 2023 by Mike Warren
missing "s"

[Minox 4]

This is because the actual size of the rectangle does not change. Try inserting the main rectangle in a Layout of the same size, and when you work with the TrackBar change the size of the Layout appropriately. Or resize the main rectangle directly, instead of acting on the "Scale" property

[Mike Warren 2]

Thanks for your reply. I think you've given me the clue I was looking for in order to progress on this.

 

Unfortunately, your first idea of resizing the components rather than scaling them doesn't appear to be realistic in my case. In the real program I have dozens of components including images, paths, text etc and it would be quite a task to keep everything including line thicknesses, fonts etc properly scaled and aligned. On the other hand, scaling the main container component takes care of all that for me.

 

However, it does look like Layouts will be at least part of the answer.

 

I had not looked into layouts before now, so don't have an understanding of them. I found the Embarcadero documentation on layouts, but still don't have a proper grasp on them.

 

As an experiment, I added a TScaledLayout to my ScrollBox in the test app. Then I moved the blue rectangle to inside the Layout.

 

Now, scaling works beautifully insofar as everything moves nicely when dragged with the mouse, no matter what the scale, but the Scrollbars on the ScrollBox still do not adjust to the size of the scaled components inside. It's 3am here, so maybe it'll be clearer after I've had some sleep.

 

Thanks again for pointing me in the right direction.

 

[Mike Warren 2]

I'm actually having quite a bit of trouble solving part 1 of my problem. Attached is a new version of my test program. In this version a border is drawn around ScaledLayout1.OriginalWidth and OriginalHeight in black and a green border is drawn around ScaledLayout1.Width and Height.

 

The green border tracks the scaled size nicely, but the black one becomes smaller when Scale > 1 and larger when the Scale is < 1.

 

The   black boarder (OriginalWidth/OriginalHeight) the determines what the scrollbars do.

 

I've tried all sorts of things and keep going around in circles.

Test2.zip

[Minox 4]

why do you resize the size too?

Edited April 15, 2023 by Minox

[Mike Warren 2]

14 minutes ago, Minox said:

why do you resize the size too?

Because that's the only way I've found to stop it bouncing all over the place when the scale is below 0.5.

 

[Minox 4]

try like this

 

procedure TForm1.TrackBar1Change(Sender: TObject);
begin
  ShowValue;

  //ScaledLayout1.Scale.X := TrackBar1.Value;
  //ScaledLayout1.Scale.Y := TrackBar1.Value;

  ScaledLayout1.BeginUpdate;
  ScaledLayout1.Width := ScaledLayout1.OriginalWidth * TrackBar1.Value;
  ScaledLayout1.Height := ScaledLayout1.OriginalHeight * TrackBar1.Value;
  ScaledLayout1.EndUpdate;

  //ScaledLayout1.RecalcAbsoluteNow;
  //ScaledLayout1.RecalcSize;
end;

 

[Mike Warren 2]

4 minutes ago, Minox said:

try like this

 

procedure TForm1.TrackBar1Change(Sender: TObject);
begin
  ShowValue;

  //ScaledLayout1.Scale.X := TrackBar1.Value;
  //ScaledLayout1.Scale.Y := TrackBar1.Value;

  ScaledLayout1.BeginUpdate;
  ScaledLayout1.Width := ScaledLayout1.OriginalWidth * TrackBar1.Value;
  ScaledLayout1.Height := ScaledLayout1.OriginalHeight * TrackBar1.Value;
  ScaledLayout1.EndUpdate;

  //ScaledLayout1.RecalcAbsoluteNow;
  //ScaledLayout1.RecalcSize;
end;

 

Brilliant! That seems to fix everything. Now I just need to properly understand it. 🙂

 

Thank you very much!

[Mike Warren 2]

Ah! I see. My mistake was changing the scale of the ScaledLayout. It looks like the scaling happens automatically when the size is changed.

 

Of course, the correct answer was in your first reply. I just had scaling in my head and thought that was what you meant when you said "when you work with the TrackBar change the size of the Layout appropriately" I misinterpreted that as changing the "scale", not size.

Edited April 15, 2023 by Mike Warren