<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[Zooming into a ListView]]></title><description><![CDATA[<p dir="auto">Hey everyone. I am stuck on an issue regarding zooming into a ListView for multiple days now. I hope someone here might have a solution or an idea.</p>
<p dir="auto">I have a ListView (with the id <code>pageView</code>) that has a model of images. The ListView has a property <code>defaultPageHeight</code> which indicates the default height of each image. It also has a <code>zoomFactor</code> property, that is default initialized to <code>1</code>.<br />
The <code>height</code> of each delegate is set to:</p>
<pre><code>height: Math.round(pageView.defaultPageHeight * pageView.zoomFactor)
</code></pre>
<p dir="auto">I have overwritten the <code>onWheel</code> event of my <code>ListView</code> so that I can handle it manually. When I press <code>CTRL+Scroll</code> the <code>zoom(factor)</code> function is called, with a <code>factor</code> parameter that indicates how much to zoom.</p>
<p dir="auto">The zooms function looks like this:</p>
<pre><code>function zoom(factor)
{
    let newZoomFactor = pageView.zoomFactor * factor;
    let newPageHeight = Math.round(pageView.defaultPageHeight * newZoomFactor);
    
    // Make sure to store the position the listview was looking at before zooming
    let currentPageHeight = Math.round(pageView.defaultPageHeight * pageView.zoomFactor);
    let currentPageNumber = /*Gets the current page*/;
    let currentPos = pageView.contentY - pageView.originY;
    
    // Get the offset, meaning how far is the position away from the current page's top
    let pageOffset = currentPos - (currentPageHeight * currentPageNumber);
    
    // Apply the new zoom
    pageView.zoomFactor = newZoomFactor;

    // Set the new contentY
    pageView.contentY = newPageHeight * currentPageNumber + Math.round(pageOffset * newZoomFactor) + pageView.originY;
}
</code></pre>
<p dir="auto">The zooming itself works fine, but I am not able to restore the position of the ListView before the zoom. So when I am zooming, I am also moving up or down in the listview for some reason.</p>
<p dir="auto">You can see an example oft this in the following: <a href="https://imgur.com/a/cO4cAxq" target="_blank" rel="noopener noreferrer nofollow ugc">https://imgur.com/a/cO4cAxq</a><br />
As you can see, the ListView is successfully zooming, but it is changing its position. I'd like it to zoom into the middle of the screen, instead of moving around the document while zooming.</p>
<p dir="auto">I have set up a simple, minimal replica of this so that you can test it out locally. This is how it looks: <a href="https://imgur.com/a/acUmjjx" target="_blank" rel="noopener noreferrer nofollow ugc">https://imgur.com/a/acUmjjx</a><br />
You again see that it is zooming successfully, but moving across the ListView instead of zooming onto one point. Here is the code of the minimal replica: <a href="https://gist.github.com/DavidLazarescu/337d8b28e941cdbe6db3d4873ae45fd3" target="_blank" rel="noopener noreferrer nofollow ugc">https://gist.github.com/DavidLazarescu/337d8b28e941cdbe6db3d4873ae45fd3</a></p>
<p dir="auto">Thank you for any help in advance</p>
]]></description><link>https://forum.qt.io/topic/145994/zooming-into-a-listview</link><generator>RSS for Node</generator><lastBuildDate>Sun, 25 Oct 2026 10:02:03 GMT</lastBuildDate><atom:link href="https://forum.qt.io/topic/145994.rss" rel="self" type="application/rss+xml"/><pubDate>Sun, 25 Jun 2023 22:11:55 GMT</pubDate><ttl>60</ttl></channel></rss>