Merge pull request #214 from CommunityToolkit/llama/canvas-view

🧪 Initial import of CanvasView Experiment
CommunityToolkit · Jul 20, 2022 · 2fc52f8 · 2fc52f8
2 parents c94573c + 557e94d
commit 2fc52f8
Show file tree

Hide file tree

Showing 42 changed files with 1,699 additions and 35 deletions.
diff --git a/labs/CanvasLayout/samples/CanvasLayout.Samples/CanvasLayout.md b/labs/CanvasLayout/samples/CanvasLayout.Samples/CanvasLayout.md
@@ -1,5 +1,5 @@
 ---
-title: Canvas Layout
+title: CanvasLayout
 author: mhawker
 description: A canvas-like VirtualizingLayout for use in an ItemsRepeater
 keywords: CanvasLayout, ItemsRepeater, VirtualizingLayout, Canvas, Layout, Panel, Arrange
@@ -9,19 +9,14 @@ category: Controls
 subcategory: Layout
 ---
 
-<!-- To know about all the available Markdown syntax, Check out https://docs.microsoft.com/contribute/markdown-reference -->
-<!-- Ensure you remove all comments before submission, to ensure that there are no formatting issues when displaying this page.  -->
-<!-- It is recommended to check how the Documentation will look in the sample app, before Merging a PR -->
-<!-- **Note:** All links to other docs.microsoft.com pages should be relative without locale, i.e. for the one above would be /contribute/markdown-reference -->
-<!-- Included images should be optimized for size and not include any Intellectual Property references. -->
-
 # CanvasLayout
 
 For more information about this experiment see:
-- Discussion: TODO: PASTE LINK HERE
-- Issue: TODO: PASTE LINK HERE
 
-The `CanvasLayout` is a custom Layout for ItemsRepeater...
+- Discussion: https://github.com/CommunityToolkit/WindowsCommunityToolkit/discussions/3716
+- Issue: https://github.com/CommunityToolkit/Labs-Windows/issues/213
+
+The `CanvasLayout` is an early prototype for a custom Layout for ItemsRepeater which provides a virtualized canvas.
 
 ## Example
 

diff --git a/labs/CanvasView/CanvasView.sln b/labs/CanvasView/CanvasView.sln
diff --git a/labs/CanvasView/samples/CanvasView.Samples/CanvasView.Samples.csproj b/labs/CanvasView/samples/CanvasView.Samples/CanvasView.Samples.csproj
@@ -0,0 +1,23 @@
+<Project Sdk="MSBuild.Sdk.Extras/3.0.23">
+  <!-- Labs Constants -->
+  <Import Project="$(RepositoryDirectory)common\Labs.TargetFrameworks.props" />
+  <Import Project="$(RepositoryDirectory)common\Labs.ProjectIdentifiers.props" />
+
+  <!-- Labs Platform Config -->
+  <Import Project="$(RepositoryDirectory)common\Labs.Uno.props" />
+  <Import Project="$(RepositoryDirectory)common\Labs.MultiTarget.props" />
+
+  <!-- Labs Project Config -->
+  <Import Project="$(RepositoryDirectory)common\Labs.Sample.props" />
+
+  <PropertyGroup>
+    <RootNamespace>CanvasViewExperiment.Samples</RootNamespace>
+    <AssemblyName>CanvasViewExperiment.Samples</AssemblyName>
+  </PropertyGroup>
+
+  <!-- Sample XAML Pages and Markdown files are automatically included, and don't need to be specified here. -->
+
+  <ItemGroup>
+    <ProjectReference Include="..\..\src\CommunityToolkit.Labs.WinUI.CanvasView.csproj" />
+  </ItemGroup>
+</Project>
diff --git a/labs/CanvasView/samples/CanvasView.Samples/CanvasView.md b/labs/CanvasView/samples/CanvasView.Samples/CanvasView.md
@@ -0,0 +1,27 @@
+---
+title: CanvasView
+author: michael-hawker
+description: CanvasView is an ItemsControl which uses a Canvas for layout of items.
+keywords: CanvasView, ItemsControl, Canvas, Control, Layout
+dev_langs:
+  - csharp
+category: Controls
+subcategory: Layout
+---
+
+# CanvasView
+
+For more information about this experiment see:
+
+- Discussion: https://github.com/CommunityToolkit/WindowsCommunityToolkit/discussions/3716
+- Issue: https://github.com/CommunityToolkit/Labs-Windows/issues/212
+
+CanvasView is an ItemsControl which uses a Canvas for the layout of its items.
+
+It which provides built-in support for presenting a collection of items bound to specific coordinates and drag-and-drop support of those items.
+
+**Note:** This control isn't working on Web Assembly at the moment.
+
+The following example shows how the CanvasView can be used to display and drag a collection of rectangles:
+
+> [!SAMPLE CanvasViewDragSample]
diff --git a/labs/CanvasView/samples/CanvasView.Samples/CanvasViewDragSample.xaml b/labs/CanvasView/samples/CanvasView.Samples/CanvasViewDragSample.xaml
@@ -0,0 +1,30 @@
+<!--  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.  -->
+<Page x:Class="CanvasViewExperiment.Samples.CanvasViewDragSample"
+      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:labs="using:CommunityToolkit.Labs.WinUI"
+      xmlns:local="using:CanvasViewExperiment.Samples"
+      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      MinHeight="400"
+      mc:Ignorable="d">
+
+    <labs:CanvasView ItemsSource="{x:Bind Rectangles}">
+        <labs:CanvasView.ItemTemplate>
+            <DataTemplate x:DataType="local:ObservableRect">
+                <Border Canvas.Left="{x:Bind Left, Mode=TwoWay}"
+                        Canvas.Top="{x:Bind Top, Mode=TwoWay}"
+                        Width="{x:Bind Width}"
+                        Height="{x:Bind Height}"
+                        Background="Red"
+                        CornerRadius="4"
+                        ManipulationMode="TranslateX,TranslateY">
+                    <TextBlock Foreground="White">
+                        <Run Text="{x:Bind Left, Mode=OneWay}" />
+                        ,<Run Text="{x:Bind Top, Mode=OneWay}" />
+                    </TextBlock>
+                </Border>
+            </DataTemplate>
+        </labs:CanvasView.ItemTemplate>
+    </labs:CanvasView>
+</Page>
diff --git a/labs/CanvasView/samples/CanvasView.Samples/CanvasViewDragSample.xaml.cs b/labs/CanvasView/samples/CanvasView.Samples/CanvasViewDragSample.xaml.cs
@@ -0,0 +1,73 @@
+// 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.
+
+namespace CanvasViewExperiment.Samples;
+
+/// <summary>
+/// An empty page that can be used on its own or navigated to within a Frame.
+/// </summary>
+[ToolkitSample(id: nameof(CanvasViewDragSample), "Canvas View", description: "Draging items with a CanvasView control.")]
+public sealed partial class CanvasViewDragSample : Page
+{
+    public List<ObservableRect> Rectangles = new()
+    {
+        new(100, 50, 200, 50),
+        new(300, 150, 50, 75),
+        new(200, 250, 100, 100),
+    };
+
+    public CanvasViewDragSample()
+    {
+        this.InitializeComponent();
+    }
+}
+
+#pragma warning disable CA1001 // Type 'NavigateToUriAction' owns disposable field(s) '__storeBackingField' but is not disposable. From Uno - Gtk, Skia/WPF, WASM
+public partial class ObservableRect : DependencyObject
+#pragma warning restore CA1001 // Type 'NavigateToUriAction' owns disposable field(s) '__storeBackingField' but is not disposable. From Uno - Gtk, Skia/WPF, WASM
+{
+    public ObservableRect(int left, int top, int width, int height)
+    {
+        Left = left;
+        Top = top;
+        Width = width;
+        Height = height;
+    }
+
+    public int Left
+    {
+        get { return (int)GetValue(LeftProperty); }
+        set { SetValue(LeftProperty, value); }
+    }
+
+    public static readonly DependencyProperty LeftProperty =
+        DependencyProperty.Register(nameof(Left), typeof(int), typeof(ObservableRect), new PropertyMetadata(0));
+
+    public int Top
+    {
+        get { return (int)GetValue(TopProperty); }
+        set { SetValue(TopProperty, value); }
+    }
+
+    public static readonly DependencyProperty TopProperty =
+        DependencyProperty.Register(nameof(Top), typeof(int), typeof(ObservableRect), new PropertyMetadata(0));
+
+    public int Width
+    {
+        get { return (int)GetValue(WidthProperty); }
+        set { SetValue(WidthProperty, value); }
+    }
+
+    public static readonly DependencyProperty WidthProperty =
+        DependencyProperty.Register(nameof(Width), typeof(int), typeof(ObservableRect), new PropertyMetadata(0));
+
+    public int Height
+    {
+        get { return (int)GetValue(HeightProperty); }
+        set { SetValue(HeightProperty, value); }
+    }
+
+    public static readonly DependencyProperty HeightProperty =
+        DependencyProperty.Register(nameof(Height), typeof(int), typeof(ObservableRect), new PropertyMetadata(0));
+}
diff --git a/labs/CanvasView/samples/CanvasView.Samples/Dependencies.props b/labs/CanvasView/samples/CanvasView.Samples/Dependencies.props
@@ -0,0 +1,31 @@
+<!--
+    WinUI 2 under UWP uses TargetFramework uap10.0.*
+    WinUI 3 under WinAppSdk uses TargetFramework net6.0-windows10.*
+    However, under Uno-powered platforms, both WinUI 2 and 3 can share the same TargetFramework.
+    
+    MSBuild doesn't play nicely with this out of the box, so we've made it easy for you.
+
+    For .NET Standard packages, you can use the Nuget Package Manager in Visual Studio.
+    For UWP / WinAppSDK / Uno packages, place the package references here.
+-->
+<Project>
+    <!-- WinUI 2 / UWP -->
+    <ItemGroup Condition="'$(IsUwp)' == 'true'">
+        <!-- <PackageReference Include="Microsoft.Toolkit.Uwp.UI.Controls.Primitives" Version="7.1.2"/> -->
+    </ItemGroup>
+
+    <!-- WinUI 2 / Uno -->
+    <ItemGroup Condition="'$(IsUno)' == 'true' AND '$(WinUIMajorVersion)' == '2'">
+        <!-- <PackageReference Include="Uno.Microsoft.Toolkit.Uwp.UI.Controls.Primitives" Version="7.1.11"/> -->
+    </ItemGroup>
+
+    <!-- WinUI 3 / WinAppSdk -->
+    <ItemGroup Condition="'$(IsWinAppSdk)' == 'true'">
+        <!-- <PackageReference Include="CommunityToolkit.WinUI.UI.Controls.Primitives" Version="7.1.2"/> -->
+    </ItemGroup>
+
+    <!-- WinUI 3 / Uno -->
+    <ItemGroup Condition="'$(IsUno)' == 'true' AND '$(WinUIMajorVersion)' == '3'">
+        <!-- <PackageReference Include="Uno.CommunityToolkit.WinUI.UI.Controls.Primitives" Version="7.1.100-dev.15.g12261e2626"/> -->
+    </ItemGroup>
+</Project>
diff --git a/labs/CanvasView/samples/CanvasView.Uwp/CanvasView.Uwp.csproj b/labs/CanvasView/samples/CanvasView.Uwp/CanvasView.Uwp.csproj
@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Project ToolsVersion="15.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+  <Import Project="$([MSBuild]::GetPathOfFileAbove(directory.build.props))" Condition="Exists('$([MSBuild]::GetPathOfFileAbove(directory.build.props))')" />
+
+  <!-- Labs Constants -->
+  <Import Project="$(RepositoryDirectory)common\Labs.TargetFrameworks.props" />
+  <PropertyGroup>
+    <IsDeployableHead>true</IsDeployableHead>
+    <IsUno>false</IsUno>
+    <IsWasm>false</IsWasm>
+    <IsWasmHead>false</IsWasmHead>
+    <IsWasmLib>false</IsWasmLib>
+    <IsDroid>false</IsDroid>
+    <IsMacOS>false</IsMacOS>
+    <IsiOS>false</IsiOS>
+    <IsUwp>true</IsUwp>
+    <IsWinAppSdk>false</IsWinAppSdk>
+    <IsWpf>false</IsWpf>
+    <IsWpfHead>false</IsWpfHead>
+    <IsWpfLib>false</IsWpfLib>
+    <IsGtk>false</IsGtk>
+    <IsGtkHead>false</IsGtkHead>
+    <IsGtkLib>false</IsGtkLib>
+  </PropertyGroup>
+  <Import Project="$(RepositoryDirectory)common\Labs.ProjectIdentifiers.props" />
+
+  <!-- Labs Platform Config -->
+  <Import Project="$(RepositoryDirectory)common\Labs.Head.Uwp.props" />
+
+  <!-- Labs Project Config -->
+  <Import Project="$(RepositoryDirectory)common\Labs.Head.props" />
+
+  <PropertyGroup>
+    <RootNamespace>CanvasViewExperiment.Samples</RootNamespace>
+    <AssemblyName>CanvasViewExperiment.Samples.Uwp</AssemblyName>
+    <ProjectGuid>{11B0021A-DEC6-4942-B478-4367079357E4}</ProjectGuid>
+  </PropertyGroup>
+  <ItemGroup>
+    <Compile Include="Properties\AssemblyInfo.cs" />
+  </ItemGroup>
+  <ItemGroup>
+    <Content Include="Properties\Default.rd.xml" />
+  </ItemGroup>
+  <ItemGroup>
+    <AppxManifest Include="Package.appxmanifest">
+      <SubType>Designer</SubType>
+    </AppxManifest>
+  </ItemGroup>
+  <ItemGroup>
+    <ProjectReference Include="..\..\src\CommunityToolkit.Labs.WinUI.CanvasView.csproj">
+      <Project>{80C8F71C-EBC1-47AB-B22B-E6E9659B6F95}</Project>
+      <Name>CommunityToolkit.Labs.WinUI.CanvasView</Name>
+    </ProjectReference>
+    <ProjectReference Include="..\CanvasView.Samples\CanvasView.Samples.csproj">
+      <Project>{7C4C4439-89C8-446D-9BD1-6D32C2044302}</Project>
+      <Name>CanvasView.Sample</Name>
+    </ProjectReference>
+  </ItemGroup>
+  <!-- Must be imported after any shared projects in non-sdk style projects -->
+  <Import Project="$(MSBuildExtensionsPath)\Microsoft\WindowsXaml\v$(VisualStudioVersion)\Microsoft.Windows.UI.Xaml.CSharp.targets" />
+</Project>
diff --git a/labs/CanvasView/samples/CanvasView.Uwp/Package.appxmanifest b/labs/CanvasView/samples/CanvasView.Uwp/Package.appxmanifest
@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<Package
+  xmlns="http://schemas.microsoft.com/appx/manifest/foundation/windows10"
+  xmlns:mp="http://schemas.microsoft.com/appx/2014/phone/manifest"
+  xmlns:uap="http://schemas.microsoft.com/appx/manifest/uap/windows10"
+  IgnorableNamespaces="uap mp">
+
+  <Identity
+    Name="Labs.CanvasView.Uwp"
+    Publisher="CN=CommunityToolkit"
+    Version="1.0.0.0" />
+
+  <mp:PhoneIdentity PhoneProductId="36E5734F-8B6F-4E34-8421-BBF9307B7223" PhonePublisherId="00000000-0000-0000-0000-000000000000"/>
+
+  <Properties>
+    <DisplayName>CommunityToolkit Labs: CanvasView Samples (UWP)</DisplayName>
+    <PublisherDisplayName>CommunityToolkit</PublisherDisplayName>
+    <Logo>Assets\StoreLogo.png</Logo>
+  </Properties>
+
+  <Dependencies>
+    <TargetDeviceFamily Name="Windows.Universal" MinVersion="10.0.0.0" MaxVersionTested="10.0.0.0" />
+  </Dependencies>
+
+  <Resources>
+    <Resource Language="x-generate"/>
+  </Resources>
+
+  <Applications>
+    <Application Id="App"
+      Executable="$targetnametoken$.exe"
+      EntryPoint="CommunityToolkit.Labs.Shared.App">
+      <uap:VisualElements
+        DisplayName="CommunityToolkit Labs: CanvasView Sample"
+        Square150x150Logo="Assets\Square150x150Logo.png"
+        Square44x44Logo="Assets\Square44x44Logo.png"
+        Description="CommunityToolkit Labs Samples"
+        BackgroundColor="transparent">
+        <uap:DefaultTile Wide310x150Logo="Assets\Wide310x150Logo.png"/>
+        <uap:SplashScreen Image="Assets\SplashScreen.png" />
+      </uap:VisualElements>
+    </Application>
+  </Applications>
+
+  <Capabilities>
+    <Capability Name="internetClient" />
+  </Capabilities>
+</Package>
diff --git a/labs/CanvasView/samples/CanvasView.Uwp/Properties/AssemblyInfo.cs b/labs/CanvasView/samples/CanvasView.Uwp/Properties/AssemblyInfo.cs
@@ -0,0 +1,33 @@
+// 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.Reflection;
+using System.Runtime.CompilerServices;
+using System.Runtime.InteropServices;
+
+// General Information about an assembly is controlled through the following
+// set of attributes. Change these attribute values to modify the information
+// associated with an assembly.
+[assembly: AssemblyTitle("CommunityToolkit.Labs.Uwp.Samples.CanvasView")]
+[assembly: AssemblyDescription("")]
+[assembly: AssemblyConfiguration("")]
+[assembly: AssemblyCompany(".NET Foundation")]
+[assembly: AssemblyProduct("CommunityToolkit.Labs.Uwp.Samples.CanvasView")]
+[assembly: AssemblyCopyright("Copyright © .NET Foundation 2022")]
+[assembly: AssemblyTrademark("")]
+[assembly: AssemblyCulture("")]
+
+// Version information for an assembly consists of the following four values:
+//
+//      Major Version
+//      Minor Version
+//      Build Number
+//      Revision
+//
+// You can specify all the values or you can default the Build and Revision Numbers
+// by using the '*' as shown below:
+// [assembly: AssemblyVersion("1.0.*")]
+[assembly: AssemblyVersion("1.0.0.0")]
+[assembly: AssemblyFileVersion("1.0.0.0")]
+[assembly: ComVisible(false)]