[SOLVED] How to fix anchor/clipping problems when scaling a GridView

[pholz]

I implemented a "zoom" feature by allowing to adjust the scale property of a GridView that wraps at the right edge:

GridView {
  //...
  scale: zoomLevel
  transformOrigin: Item.TopLeft
  anchors.top: commandArea.bottom
  anchors.left: parent.left
  anchors.right: parent.right
  anchors.bottom: statusArea.top
 }

However, although the anchors are constant, when I zoom in, the content exceeds the right border and when I zoom out, the content is clipped above the bottom border.

I was able to fix the issues using the following properties:

anchors.rightMargin: (scale - 1.0) * width
anchors.bottomMargin: -(height * (1.0 - scale))

However, I get "binding loop" errors related to these two lines in the console every time I adjust the zoom level. While it seems to work anyway, the errors indicate that it's a bit of a hack... Is there a better way to do this? If not, can I just ignore the errors?

[p3c0]

Hi @pholz,
I suspect this is because the width of GridView is binded to rightMargin (right side spacing) of the GridView itself. So when the width of GridView changes it affects the rightMargin which in turn will affect the width of GridView (it will become thinner) and thus this goes on (loop).

[pholz]

@p3c0 I see. Any ideas what to use instead?

[p3c0]

@pholz Try assigning using = instead of binding.

[pholz]

@p3c0 seems to work, thanks!

new code:

onScaleChanged: {
    anchors.rightMargin = (scale - 1.0) * width;
    anchors.bottomMargin = -(height * (1.0 - scale));
}