How can I zoom in a canvas containing items initially outside the drawn canvas?

[DrDryg]

I'm trying to implement a canvas with a lot of elements on it that can be zoomed. For that I used the pan and zoom package: https://www.nuget.org/packages/Avalonia.Controls.PanAndZoom. But I run into the problem that controls initially outside the canvas are not included when paning or zooming. What I dont get is that the issue is only for ItemsControl. If I place a number of buttons manually on a canvas, buttons outside the normal view will appear when I zoom out. Also, if I use a StackPanel everything works just fine. So the issue is quite localized to using the ItemsControl.

What am I missing? Or could there be something wrong in Pan and Zoom package?

Illustration of the issue.

As I zoom out. The buttons initially outside the view are not included. When resizing the window they do appear.

Code

My view is very simple and looks like:

<Window
    x:Class="PanZoomIssue.MainWindow"
    xmlns="https://github.com/avaloniaui"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:paz="using:Avalonia.Controls.PanAndZoom"
    xmlns:vm="using:PanZoomIssue"
    Title="PanZoomIssue"
    Width="500"
    Height="300"
    d:DesignHeight="450"
    d:DesignWidth="800"
    x:DataType="vm:DataViewModel"
    mc:Ignorable="d">

    <Design.DataContext>
        <vm:DataViewModel />
    </Design.DataContext>

    <paz:ZoomBorder
        Name="ZoomBorder3"
        HorizontalAlignment="Stretch"
        VerticalAlignment="Stretch"
        Background="SlateBlue"
        ClipToBounds="True"
        EnableConstrains="False"
        Focusable="True"
        Stretch="None"
        ZoomSpeed="1.5">
        <Panel>
            <ItemsControl ItemsSource="{Binding Models}">

                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <Canvas />
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>

                <ItemsControl.ItemContainerTheme>
                    <ControlTheme x:DataType="vm:Model" TargetType="ContentPresenter">
                        <Setter Property="Canvas.Left" Value="{Binding Location.X}" />
                        <Setter Property="Canvas.Top" Value="{Binding Location.Y}" />
                    </ControlTheme>
                </ItemsControl.ItemContainerTheme>

                <ItemsControl.ItemTemplate>
                    <DataTemplate DataType="vm:Model">
                        <Button Background="Green">Hello</Button>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </Panel>
    </paz:ZoomBorder>
</Window>

And the DataViewModel and related classes:

using System.Collections.ObjectModel;
using System.Drawing;

namespace PanZoomIssue
{
    public class Model
    {
        public Point Location { get; }
        public string Title { get; }
        public Model(int x, int y, string title)
        {
            Location = new Point(x, y);
            Title = title;
        }
    }

    public class DataViewModel
    {
        public ObservableCollection<Model> Models { get; set; }
        public DataViewModel()
        {
            Models = new ObservableCollection<Model>();
            int n = 30;
            for (int i = 0; i < n; i++)
            {
                for (int j = 0; j < n; j++)
                {
                    Models.Add(new Model(i*80, j*50, $"Title {i},{j}"));
                }
            }
        }
    }
}

[timunie]

I guess the issue might be that zomming in / out does not trigger a layout pass and thus the bounds of canvas is not re-calculated. If you set a certain width / heihgt to your ItemsControl, does it help?

[DrDryg]

No that does not help. Triggering of a layout pass, is that something I can do without having to modify the pan and zoom package?

[DrDryg]

I added this code to try to invalidate the window. But it did not do the trick :(

    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            ZoomBorder3 = this.Find<ZoomBorder>("ZoomBorder3");
            if (ZoomBorder3 != null)
            {

                ZoomBorder3.ZoomChanged += OnZoom;
            }
        }

        private void OnZoom(object sender, ZoomChangedEventArgs e)
        {
            InvalidateMeasure();
            InvalidateArrange();
            InvalidateVisual();
        }
    }

[timunie]

ping @wieslawsoltes