Anchors and hiding controls

[VTwin]

I have a Form with a ToolBar at the top, a StatusBar at the bottom, a vertical ScrollBar on the right and a horizontal ScrollBar at the bottom above the StatusBar. The center of the Form is a PaintBox.

Code: [Select]

+---------------------+
|     ToolBar         |
+-------------------+-+
|                   | |
|   PaintBox        | | ScrollBar
|                   | |   
+-------------------+-+
|     ScrollBar     | | Panel
+-------------------+-+
|     StatusBar       |
+---------------------+

There is also a small Panel as a spacer.

I need to be able to hide the ToolBar, the StatusBar, and the ScrollBars independently. Using Anchors seems like the correct way to do this, and I set the control Anchors to attach them to each side of the Form. The PaintBox is then anchored to the controls.

However, when I hide the StatusBar or the ToolBar, I just get a gray rectangle. The PaintBox does not fill the space. This seems contrary to what I have read on anchoring to invisible controls.

I am using Lazarus 1.0.14 on Mac OS X 10.6.8, but am testing on OS X 10.7, Windows XP, and the current Ubuntu.

Any advise would be greatly appreciated.

Cheers,
Frederick

[taazz]

You are probably refering to a different anchor than the one you are using. I'm guessing that you need to see the anchor editor wich you can find when you right click a component on the form, while you are setting the acnhors property value on the OI.

[howardpc]

In addition to the careful anchor setting taazz suggests, you may find that altering the Visible property of controls to hide them has unwanted side effects.
An alternative is to alter a combination of properties to place the control out of view in such a way that their anchoring is undisturbed (and don't touch Visible at all).
For example, to hide the StatusBar, set its Align to alNone and its Top to Form1.ClientHeight. To show it simply restore its Align to alBottom.

[VTwin]

Thanks taazz and howardpc,

I used the Anchor editor to set all the anchors, and have been pretty careful, as well as trying different options.

I am trying the suggestion of moving the controls by, for example, anchoring the bottom of the ToolBar to the top of the Form, and anchoring the top of the PaintBox to the top of the form. So far no luck.

I also tried moving the PaintBox z-order to the front, to see if it would hide the ToolBar, but that is not working either.

I am curious why simply hiding the controls is not ok, this is discussed here:

http://wiki.freepascal.org/Anchor_Sides

but does not seem to work. Maybe ToolBars and StatusBars are  special cases?

I'll report back after some more tries. Any additional suggestions are welcome.

Cheers,
Frederick

[taazz]

What I do no get is why on such a simple set up you do not use the align property? what is it that makes you shy away from it?

[Martin_fr]

Maybe if you can post the form here? Then it would be simpler to check.

[VTwin]

Thanks taazz and Martin_fr,

I guess I can try Align again, but was having trouble and thought Anchors were a good way to do it. They also seemed worth learning for other projects and forms.

Here is the form (bitmap deleted):

Code: [Select]

object ImageForm: TImageForm
  Left = 309
  Height = 350
  Top = 135
  Width = 420
  AllowDropFiles = True
  Caption = 'PicTracker'
  ClientHeight = 350
  ClientWidth = 420
  Constraints.MinHeight = 200
  Constraints.MinWidth = 150
  KeyPreview = True
  OnActivate = FormActivate
  OnClose = FormClose
  OnCreate = FormCreate
  OnDeactivate = FormDeactivate
  OnDestroy = FormDestroy
  OnDropFiles = FormDropFiles
  OnHide = FormHide
  OnKeyDown = FormKeyDown
  OnShow = FormShow
  LCLVersion = '1.0.14.0'
  Visible = True
  object stbStatus: TStatusBar
    AnchorSideRight.Side = asrBottom
    AnchorSideBottom.Side = asrBottom
    Left = 0
    Height = 15
    Top = 335
    Width = 408
    Align = alNone
    Anchors = [akLeft, akRight, akBottom]
    Color = 15658734
    Panels = <   
      item
        Width = 60
      end   
      item
        Width = 60
      end   
      item
        Width = 60
      end   
      item
        Width = 50
      end>
    SimplePanel = False
  end
  object ToolBar1: TToolBar
    AnchorSideRight.Side = asrBottom
    Left = 0
    Height = 28
    Top = 0
    Width = 420
    Align = alNone
    Anchors = [akTop, akLeft, akRight]
    ButtonHeight = 24
    ButtonWidth = 24
    Caption = 'ToolBar1'
    Color = 15592941
    Images = ilToolBar
    ParentColor = False
    TabOrder = 0
    object tbtnOpen: TToolButton
      Left = 11
      Hint = 'Open'
      Top = 2
      Caption = 'Open'
      ImageIndex = 0
      ParentShowHint = False
      ShowHint = True
    end
    object tbtnPrevious: TToolButton
      Left = 49
      Hint = 'Previous'
      Top = 2
      Caption = 'Previous'
      ImageIndex = 1
      ParentShowHint = False
      ShowHint = True
    end
    object tbtnNext: TToolButton
      Left = 77
      Hint = 'Next'
      Top = 2
      Caption = 'Next'
      ImageIndex = 2
      ParentShowHint = False
      ShowHint = True
    end
    object tbtnSpace1: TToolButton
      Left = 1
      Top = 2
      Width = 10
      Caption = 'tbtnSpace1'
      Style = tbsSeparator
    end
    object tbtnZoomIn: TToolButton
      Left = 105
      Hint = 'Zoom In'
      Top = 2
      Caption = 'Zoom In'
      ImageIndex = 3
      ParentShowHint = False
      ShowHint = True
    end
    object tbtnZoomOut: TToolButton
      Left = 133
      Hint = 'Zoom Out'
      Top = 2
      Caption = 'Zoom Out'
      ImageIndex = 4
      ParentShowHint = False
      ShowHint = True
    end
    object tbtnSpace2: TToolButton
      Left = 39
      Top = 2
      Width = 10
      Caption = 'tbtnSpace2'
      Style = tbsSeparator
    end
    object tbtnDeleteFiles: TToolButton
      Left = 265
      Hint = 'Delete'
      Top = 2
      Caption = 'tbtnDeleteFiles'
      ImageIndex = 8
      ParentShowHint = False
      ShowHint = True
    end
    object tbtnSpace3: TToolButton
      Left = 255
      Top = 2
      Width = 10
      Caption = 'tbtnSpace3'
      Style = tbsSeparator
    end
    object tbtnRotateRight: TToolButton
      Left = 227
      Hint = 'Rotate Right'
      Top = 2
      Caption = 'tbtnRotateRight'
      ImageIndex = 7
      ParentShowHint = False
      ShowCaption = False
      ShowHint = True
    end
    object tbtnRotateLeft: TToolButton
      Left = 199
      Hint = 'Rotate Left'
      Top = 2
      Caption = 'tbtnRotateLeft'
      ImageIndex = 6
      ParentShowHint = False
      ShowCaption = False
      ShowHint = True
    end
    object ToolButton3: TToolButton
      Left = 189
      Top = 2
      Width = 10
      Caption = 'ToolButton3'
      Style = tbsSeparator
    end
    object tbtnFullScreen: TToolButton
      Left = 161
      Hint = 'Full Screen'
      Top = 2
      Caption = 'tbtnFullScreen'
      ImageIndex = 5
      ParentShowHint = False
      ShowCaption = False
      ShowHint = True
    end
  end
  object sbVertical: TScrollBar
    AnchorSideTop.Control = ToolBar1
    AnchorSideTop.Side = asrBottom
    AnchorSideRight.Side = asrBottom
    AnchorSideBottom.Control = sbHorizontal
    Left = 407
    Height = 294
    Top = 28
    Width = 13
    Anchors = [akTop, akRight, akBottom]
    Kind = sbVertical
    PageSize = 100
    Position = 50
    TabOrder = 2
  end
  object sbHorizontal: TScrollBar
    AnchorSideRight.Control = sbVertical
    AnchorSideBottom.Control = stbStatus
    Left = 0
    Height = 13
    Top = 322
    Width = 407
    Anchors = [akLeft, akRight, akBottom]
    PageSize = 100
    TabOrder = 1
  end
  object Panel1: TPanel
    AnchorSideLeft.Control = sbVertical
    AnchorSideTop.Control = sbHorizontal
    AnchorSideRight.Side = asrBottom
    AnchorSideBottom.Control = stbStatus
    Left = 407
    Height = 13
    Top = 322
    Width = 13
    Anchors = [akTop, akLeft, akRight, akBottom]
    Color = clBtnFace
    ParentColor = False
    TabOrder = 4
  end
  object pbx: TPaintBox
    AnchorSideTop.Control = ToolBar1
    AnchorSideTop.Side = asrBottom
    AnchorSideRight.Control = sbVertical
    AnchorSideBottom.Control = sbHorizontal
    Left = 0
    Height = 294
    Top = 28
    Width = 407
    Anchors = [akTop, akLeft, akRight, akBottom]
    OnDblClick = pbxDblClick
    OnMouseDown = pbxMouseDown
    OnMouseMove = pbxMouseMove
    OnMouseUp = pbxMouseUp
  end
  object ilToolBar: TImageList
    Height = 24
    Width = 24
    left = 208
    top = 72
    Bitmap = {
    DELETED 
    }
  end
  object tmr: TTimer
    Enabled = False
    Interval = 100
    OnTimer = tmrTimer
    left = 48
    top = 88
  end
end
 

Cheers,
Frederick

[Martin_fr]

yes (if I did not overlook anything), this kind of anchoring, should mean that paintbox moves to the top of the form, if toolbar is hidden.

And it does for me, in other examples.
You can use alTop for the toolbar. Or set the left and right anchor to the form.


I cant load your example, so I cant test it.

[VTwin]

Martin_fr,

Many thanks for looking through the code. Not sure if the missing bitmap was a problem for you to load it. It was just too big to post with it included.

I just tried it again in Mac OS 10.8.5 and Windows XP 32. Hiding the ToolBar (Visible := false) leaves a gray rectangle and does not reposition the PaintBox. So it does not seem specific to the Widget set. I suppose I must be doing something wrong.

Cheers,
Frederick

[Martin_fr]

Attached is what I tested.

Lazarus 1.3 win32
Also tested in 1.0.15

[VTwin]

Martin,

Many thanks. I confirmed that your example works on Win XP 32 and Linux Ubuntu.

It does not work on Mac however. I guess I was wrong, and it must be a Widget issue. Maybe this is not fully implemented in Carbon.

I guess I should try using Align again as taazz suggested. 

Cheers,
Frederick

[VTwin]

Martin,

I just confirmed that your example works on Carbon if I use alTop for TToolBar,
alClient for TPaintBox, and alBottom for TButton.

Frederick

[howardpc]

Martin, in your example the paintbox is anchored to the top of the toolbar, so when the toolbar is Visible the top of the paintbox is obscured by the toolbar. Making the toolbar invisible does not move the top of the paintbox, it merely uncovers it.
If the paintbox top is anchored to the bottom of the toolbar, when toolbar.Visible is False, a blank area appears above the paintbox, and the toolbar's Top does not move.

[VTwin]

howardpc,

I see you are correct. Changing the top PaintBox Anchor to the bottom of the ToolBar shows that the PaintBox does not reposition. I was too quick to blame the Carbon widgetset.

Frederick

[Martin_fr]

Ups, sorry.

Just tested. then you must anchor the top of the toolbar to the form (that is explicitly specify the form, not just set the anchor to enabled)

Then it will work again.

IT makes sense, if toolbar is invisible, then painthbox will (for its top) use the anchor settings that toolbar used for the top.

- If that is enabled, but no control set, then in means keep position (relative to form top, IF form top moves)

- If that is enabled, and the control set to form, then it means to keep "borderspace" (zero in this case) pixel to the form top.

You can also ANCHOR the paintbox, to an altop toolbar.