Add Initial CanvasLayout component on top of initial project to aid testing/setup

CommunityToolkit.Labs.Uwp/CommunityToolkit.Labs.Uwp.csproj

@@ -25,6 +25,10 @@
       <Project>{a14189c0-39a8-4fbe-bf86-a78a94654c48}</Project>
       <Name>CanvasLayout.Sample</Name>
     </ProjectReference>
+    <ProjectReference Include="..\Labs\CanvasLayout\src\CommunityToolkit.Labs.Uwp.UI.CanvasLayout.csproj">
+      <Project>{fe19fff0-6ab6-4fc7-bfdf-b6499153dcd5}</Project>
+      <Name>CommunityToolkit.Labs.Uwp.UI.CanvasLayout</Name>
+    </ProjectReference>
   </ItemGroup>
   <Import Project="../Common/Labs.Uwp.props" />
 </Project>

Labs/CanvasLayout/samples/CanvasLayout.Sample/CanvasLayout.Sample.csproj

@@ -19,11 +19,13 @@
   <ItemGroup>
     <None Remove="SamplePage.xaml" />
     <None Remove="SamplePage2.xaml" />
+    <None Remove="SamplePage3.xaml" />
     <None Remove="SamplePageOptions.xaml" />
   </ItemGroup>
   <ItemGroup>
     <UpToDateCheckInput Remove="SamplePage.xaml" />
     <UpToDateCheckInput Remove="SamplePage2.xaml" />
+    <UpToDateCheckInput Remove="SamplePage3.xaml" />
     <UpToDateCheckInput Remove="SamplePageOptions.xaml" />
   </ItemGroup>
   <ItemGroup>

Labs/CanvasLayout/samples/CanvasLayout.Sample/SampleOne/SamplePage.xaml.cs

@@ -51,7 +51,7 @@ namespace CanvasLayout.Sample.SampleOne
     [ToolkitSampleMultiChoiceOption("TextFontFamily", label: "Arial", value: "Arial")]
     [ToolkitSampleMultiChoiceOption("TextFontFamily", label: "Consolas", value: "Consolas")]
 
-    [ToolkitSample(id: nameof(SamplePage), "Canvas Layout", ToolkitSampleCategory.Controls, ToolkitSampleSubcategory.Layout, description: "A canvas-like VirtualizingPanel for use in an ItemsControl")]
+    [ToolkitSample(id: nameof(SamplePage), "Simple Options", ToolkitSampleCategory.Controls, ToolkitSampleSubcategory.Layout, description: "A sample page for showing how to do simple options.")]
     public sealed partial class SamplePage : Page
     {
         public SamplePage()

Labs/CanvasLayout/samples/CanvasLayout.Sample/SampleThree/SamplePage3.xaml

@@ -0,0 +1,41 @@
+<Page
+    x:Class="CanvasLayout.Sample.SampleThree.SamplePage3"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    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:local="using:CanvasLayout.Sample.SampleThree"
+    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
+    xmlns:labs="using:CommunityToolkit.Labs.Uwp"
+    xmlns:win="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
+    mc:Ignorable="d">
+
+    <ScrollViewer
+        HorizontalScrollMode="Auto"
+        HorizontalScrollBarVisibility="Auto"
+        VerticalScrollMode="Auto"
+        VerticalScrollBarVisibility="Auto">
+        <muxc:ItemsRepeater ItemsSource="{x:Bind Items}">
+            <muxc:ItemsRepeater.Layout>
+                <labs:CanvasLayout/>
+            </muxc:ItemsRepeater.Layout>
+            <muxc:ItemsRepeater.ItemTemplate>
+                <DataTemplate x:DataType="local:CanvasItem">
+                    <Border Width="{x:Bind Width}" Height="{x:Bind Height}"
+                            CornerRadius="9999"
+                            Background="Red"
+                            BorderBrush="White" BorderThickness="2">
+                        <TextBlock Text="{x:Bind Text}"
+                                   Foreground="White"
+                                   FontSize="24"
+                                   FontWeight="Bold"
+                                   HorizontalAlignment="Center"
+                                   win:TextLineBounds="Tight"
+                                   VerticalAlignment="Center"/>
+                    </Border>
+                </DataTemplate>
+            </muxc:ItemsRepeater.ItemTemplate>
+        </muxc:ItemsRepeater>
+    </ScrollViewer>
+</Page>

Labs/CanvasLayout/samples/CanvasLayout.Sample/SampleThree/SamplePage3.xaml.cs

@@ -0,0 +1,65 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using System;
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using System.IO;
+using System.Linq;
+using System.Runtime.InteropServices.WindowsRuntime;
+using CommunityToolkit.Labs.Core.SourceGenerators;
+using CommunityToolkit.Labs.Core.SourceGenerators.Attributes;
+using CommunityToolkit.Labs.Uwp;
+
+#if !WINAPPSDK
+using Windows.Foundation;
+using Windows.Foundation.Collections;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Controls.Primitives;
+using Windows.UI.Xaml.Data;
+using Windows.UI.Xaml.Input;
+using Windows.UI.Xaml.Media;
+using Windows.UI.Xaml.Navigation;
+#else
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+using Microsoft.UI.Xaml.Controls.Primitives;
+using Microsoft.UI.Xaml.Data;
+using Microsoft.UI.Xaml.Input;
+using Microsoft.UI.Xaml.Media;
+using Microsoft.UI.Xaml.Navigation;
+#endif
+
+// The Blank Page item template is documented at https://go.microsoft.com/fwlink/?LinkId=234238
+
+namespace CanvasLayout.Sample.SampleThree
+{
+    /// <summary>
+    /// An empty page that can be used on its own or navigated to within a Frame.
+    /// </summary>
+    [ToolkitSample(id: nameof(SamplePage3), "Canvas Layout", ToolkitSampleCategory.Controls, ToolkitSampleSubcategory.Layout, description: "A canvas-like VirtualizingLayout for use in an ItemsRepeater")]
+    public sealed partial class SamplePage3 : Page
+    {
+        public ObservableCollection<CanvasItem> Items = new()
+        {
+            new() { Left = 100, Top = 50, Width = 100, Height = 100, Text = "Item 1" },
+            new() { Left = 400, Top = 250, Width = 200, Height = 200, Text = "Item 2" },
+            new() { Left = 200, Top = 500, Width = 100, Height = 100, Text = "Item 3" },
+            new() { Left = 1200, Top = 2500, Width = 100, Height = 100, Text = "Item 4" },
+            new() { Left = 2200, Top = 1500, Width = 100, Height = 100, Text = "Item 5" },
+            new() { Left = 1200, Top = 3500, Width = 100, Height = 100, Text = "Item 6" },
+        };
+
+        public SamplePage3()
+        {
+            this.InitializeComponent();
+        }
+    }
+
+    public class CanvasItem : CanvasLayoutItem
+    {
+        public string Text { get; set; }
+    }
+}

Labs/CanvasLayout/samples/CanvasLayout.Sample/SampleTwo/SamplePage2.xaml.cs

@@ -13,7 +13,7 @@
 
 namespace CanvasLayout.Sample.SampleTwo
 {
-    [ToolkitSample(id: nameof(SamplePage2), "Example sample", ToolkitSampleCategory.Controls, ToolkitSampleSubcategory.Layout, description: "An empty sample used to demonstrate the sample system.")]
+    [ToolkitSample(id: nameof(SamplePage2), "Custom options", ToolkitSampleCategory.Controls, ToolkitSampleSubcategory.Layout, description: "An empty sample used to demonstrate the sample system.")]
     public sealed partial class SamplePage2 : UserControl
     {
         public SamplePage2()

Labs/CanvasLayout/samples/CanvasLayout.Wasm/CanvasLayout.Wasm.csproj

@@ -7,6 +7,7 @@
   </ItemGroup>
 
   <ItemGroup>
+    <ProjectReference Include="..\..\src\CommunityToolkit.Labs.Uwp.UI.CanvasLayout.csproj" />
     <ProjectReference Include="..\CanvasLayout.Sample\CanvasLayout.Sample.csproj" />
   </ItemGroup>
 </Project>

Labs/CanvasLayout/src/CanvasLayout.cs

@@ -2,11 +2,135 @@
 // The .NET Foundation licenses this file to you under the MIT license.
 // See the LICENSE file in the project root for more information.
 
+using System;
+using System.Collections.Generic;
 using Microsoft.UI.Xaml.Controls;
+using Windows.Foundation;
 
 namespace CommunityToolkit.Labs.Uwp
 {
     public class CanvasLayout : VirtualizingLayout
     {
+        #region Setup / teardown
+        protected override void InitializeForContextCore(VirtualizingLayoutContext context)
+        {
+            base.InitializeForContextCore(context);
+
+            if (!(context.LayoutState is CanvasLayoutState state))
+            {
+                // Store any state we might need since (in theory) the layout could be in use by multiple 
+                // elements simultaneously
+                context.LayoutState = new CanvasLayoutState();
+            }
+        }
+
+        protected override void UninitializeForContextCore(VirtualizingLayoutContext context)
+        {
+            base.UninitializeForContextCore(context);
+
+            // clear any state
+            context.LayoutState = null;
+        }
+
+        #endregion
+
+        #region Layout
+
+        protected override Size MeasureOverride(VirtualizingLayoutContext context, Size availableSize)
+        {
+            int maxWidth = 0;
+            int maxHeight = 0;
+
+            // Get underlying data about positioning of items and determine if in viewport.
+            for (int i = 0; i < context.ItemCount; i++)
+            {
+                if (context.GetItemAt(i) is CanvasLayoutItem item)
+                {
+                    // See if this item pushes our maximum boundary
+                    maxWidth = Math.Max(item.Left + item.Width, maxWidth);
+                    maxHeight = Math.Max(item.Top + item.Height, maxHeight);
+
+                    // Calculate if this item is in our current viewport
+                    Rect rect = new(item.Left, item.Top, item.Width, item.Height);
+                    rect.Intersect(context.RealizationRect);
+
+                    // Check if we're in view now so we can compare to if we were last time.
+                    bool nowInView = rect.Width > 0 || rect.Height > 0;
+
+                    // If it wasn't visible and now is, realize the container
+                    if (nowInView && !item.IsInView)
+                    {
+                        var element = context.GetOrCreateElementAt(i);
+                        element.Measure(new Size(item.Width, item.Height));
+                    }
+                    // If it was visible, but now isn't recycle the container
+                    else if (!nowInView && item.IsInView)
+                    {
+                        var element = context.GetOrCreateElementAt(i);
+                        context.RecycleElement(element);
+                    }
+
+                    // Update our current visibility
+                    item.IsInView = rect.Width > 0 || rect.Height > 0;
+                }
+            }
+
+            return new Size(maxWidth, maxHeight);
+        }
+
+        protected override Size ArrangeOverride(VirtualizingLayoutContext context, Size finalSize)
+        {
+            for (int i = 0; i < context.ItemCount; i++)
+            {
+                if (context.GetItemAt(i) is CanvasLayoutItem item && item.IsInView)
+                {
+                    var container = context.GetOrCreateElementAt(i);
+                    // Is it better to have cached this from above?
+                    container.Arrange(new Rect(item.Left, item.Top, item.Width, item.Height));
+                }
+            }
+
+            return finalSize;
+        }
+
+        #endregion
+    }
+
+    internal class CanvasLayoutState
+    {
+        public int FirstRealizedIndex { get; set; }
+
+        /// <summary>
+        /// List of layout bounds for items starting with the
+        /// FirstRealizedIndex.
+        /// </summary>
+        public List<Rect> LayoutRects
+        {
+            get
+            {
+                if (_layoutRects == null)
+                {
+                    _layoutRects = new List<Rect>();
+                }
+
+                return _layoutRects;
+            }
+        }
+
+        private List<Rect> _layoutRects;
+    }
+
+    // TODO: Make DP? Can we do this with property mapping instead?
+    public class CanvasLayoutItem
+    {
+        public int Left { get; set; }
+
+        public int Top { get; set; }
+
+        public int Width { get; set; }
+
+        public int Height { get; set; }
+
+        public bool IsInView { get; internal set; }
     }
 }