Initial port of CanvasView code into Labs

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>

labs/CanvasView/samples/CanvasView.Samples/CanvasView.md

@@ -0,0 +1,25 @@
+---
+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.
+
+The following example shows how the CanvasView can be used to display and drag a collection of rectangles:
+
+> [!SAMPLE CanvasViewDragSample]

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>

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));
+}

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>

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>

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>

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)]

labs/CanvasView/samples/CanvasView.Uwp/Properties/Default.rd.xml

@@ -0,0 +1,31 @@
+<!--
+ This file contains Runtime Directives used by .NET Native. The defaults here are suitable for most
+ developers. However, you can modify these parameters to modify the behavior of the .NET Native
+ optimizer.
+
+ Runtime Directives are documented at https://go.microsoft.com/fwlink/?LinkID=391919
+
+ To fully enable reflection for App1.MyClass and all of its public/private members
+ <Type Name="App1.MyClass" Dynamic="Required All"/>
+
+ To enable dynamic creation of the specific instantiation of AppClass<T> over System.Int32
+ <TypeInstantiation Name="App1.AppClass" Arguments="System.Int32" Activate="Required Public" />
+
+ Using the Namespace directive to apply reflection policy to all the types in a particular namespace
+ <Namespace Name="DataClasses.ViewModels" Serialize="All" />
+-->
+
+<Directives xmlns="http://schemas.microsoft.com/netfx/2013/01/metadata">
+ <Application>
+ <!--
+ An Assembly element with Name="*Application*" applies to all assemblies in
+ the application package. The asterisks are not wildcards.
+ -->
+ <Assembly Name="*Application*" Dynamic="Required All" />
+
+
+ <!-- Add your application specific runtime directives here. -->
+
+
+ </Application>
+</Directives>