Port Carousel as new component

components/Carousel/OpenSolution.bat

@@ -0,0 +1,3 @@
+@ECHO OFF
+
+powershell ..\..\tooling\ProjectHeads\GenerateSingleSampleHeads.ps1 -componentPath %CD% %*

components/Carousel/samples/Carousel.Samples.csproj

@@ -0,0 +1,10 @@
+<Project>
+  <Import Project="$([MSBuild]::GetPathOfFileAbove(Directory.Build.props))" Condition="Exists('$([MSBuild]::GetPathOfFileAbove(Directory.Build.props))')" />
+
+  <PropertyGroup>
+    <ToolkitComponentName>Carousel</ToolkitComponentName>
+  </PropertyGroup>
+
+  <!-- Sets this up as a toolkit component's sample project -->
+  <Import Project="$(ToolingDirectory)\ToolkitComponent.SampleProject.props" />
+</Project>

components/Carousel/samples/Carousel.md

@@ -0,0 +1,65 @@
+---
+title: Carousel
+author: githubaccount
+description: TODO: Your experiment's description here
+keywords: Carousel, Control, Layout
+dev_langs:
+  - csharp
+category: Controls
+subcategory: Layout
+discussion-id: 0
+issue-id: 0
+icon: assets/icon.png
+---
+
+<!-- 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. -->
+
+<!-- Be sure to update the discussion/issue numbers above with your Labs discussion/issue id numbers in order for UI links to them from the sample app to work. -->
+
+# Carousel
+
+TODO: Fill in information about this experiment and how to get started here...
+
+## Custom Control
+
+You can inherit from an existing component as well, like `Panel`, this example shows a control without a
+XAML Style that will be more light-weight to consume by an app developer:
+
+> [!Sample CarouselCustomSample]
+
+## Templated Controls
+
+The Toolkit is built with templated controls. This provides developers a flexible way to restyle components
+easily while still inheriting the general functionality a control provides. The examples below show
+how a component can use a default style and then get overridden by the end developer.
+
+TODO: Two types of templated control building methods are shown. Delete these if you're building a custom component.
+Otherwise, pick one method for your component and delete the files related to the unchosen `_ClassicBinding` or `_xBind`
+classes (and the custom non-suffixed one as well). Then, rename your component to just be your component name.
+
+The `_ClassicBinding` class shows the traditional method used to develop components with best practices.
+
+### Implict style
+
+> [!SAMPLE CarouselTemplatedSample]
+
+### Custom style
+
+> [!SAMPLE CarouselTemplatedStyleCustomSample]
+
+## Templated Controls with x:Bind
+
+This is an _experimental_ new way to define components which allows for the use of x:Bind within the style.
+
+### Implict style
+
+> [!SAMPLE CarouselXbindBackedSample]
+
+### Custom style
+
+> [!SAMPLE CarouselXbindBackedStyleCustomSample]
+

components/Carousel/samples/CarouselCustomSample.xaml

@@ -0,0 +1,25 @@
+<!--  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="CarouselExperiment.Samples.CarouselCustomSample"
+      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+      xmlns:controls="using:CommunityToolkit.WinUI.Controls"
+      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+      xmlns:local="using:CarouselExperiment.Samples"
+      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      mc:Ignorable="d">
+
+    <StackPanel Spacing="16">
+        <TextBlock Style="{StaticResource BodyStrongTextBlockStyle}"
+                   Text="{x:Bind TitleText, Mode=OneWay}" />
+        <StackPanel Spacing="16">
+            <controls:Carousel Orientation="{x:Bind local:CarouselCustomSample.ConvertStringToOrientation(LayoutOrientation), Mode=OneWay}">
+                <TextBlock Text="1" />
+                <TextBlock Text="2" />
+                <TextBlock Text="3" />
+                <TextBlock Text="4" />
+                <TextBlock Text="5" />
+                <TextBlock Text="6" />
+            </controls:Carousel>
+        </StackPanel>
+    </StackPanel>
+</Page>

components/Carousel/samples/CarouselCustomSample.xaml.cs

@@ -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.
+
+using CommunityToolkit.WinUI.Controls;
+
+namespace CarouselExperiment.Samples;
+
+/// <summary>
+/// An example sample page of a custom control inheriting from Panel.
+/// </summary>
+[ToolkitSampleTextOption("TitleText", "This is a title", Title = "Input the text")]
+[ToolkitSampleMultiChoiceOption("LayoutOrientation", "Horizontal", "Vertical", Title = "Orientation")]
+
+[ToolkitSample(id: nameof(CarouselCustomSample), "Custom control", description: $"A sample for showing how to create and use a {nameof(Carousel)} custom control.")]
+public sealed partial class CarouselCustomSample : Page
+{
+    public CarouselCustomSample()
+    {
+        this.InitializeComponent();
+    }
+
+    // TODO: See https://github.com/CommunityToolkit/Labs-Windows/issues/149
+    public static Orientation ConvertStringToOrientation(string orientation) => orientation switch
+    {
+        "Vertical" => Orientation.Vertical,
+        "Horizontal" => Orientation.Horizontal,
+        _ => throw new System.NotImplementedException(),
+    };
+}

components/Carousel/samples/CarouselTemplatedSample.xaml

@@ -0,0 +1,16 @@
+<!--  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="CarouselExperiment.Samples.CarouselTemplatedSample"
+      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+      xmlns:controls="using:CommunityToolkit.WinUI.Controls"
+      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      mc:Ignorable="d">
+
+    <StackPanel Spacing="16">
+        <controls:Carousel_ClassicBinding FontFamily="{x:Bind TextFontFamily, Mode=OneWay}"
+                                                 FontSize="{x:Bind TextSize, Mode=OneWay}"
+                                                 Foreground="{x:Bind TextForeground, Mode=OneWay}"
+                                                 Visibility="{x:Bind IsTextVisible, Mode=OneWay}" />
+    </StackPanel>
+</Page>

components/Carousel/samples/CarouselTemplatedSample.xaml.cs

@@ -0,0 +1,21 @@
+// 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 CarouselExperiment.Samples;
+
+[ToolkitSampleBoolOption("IsTextVisible", true, Title = "IsVisible")]
+// Single values without a colon are used for both label and value.
+// To provide a different label for the value, separate with a colon surrounded by a single space on both sides ("label : value").
+[ToolkitSampleNumericOption("TextSize", 12, 8, 48, 2, false, Title = "FontSize")]
+[ToolkitSampleMultiChoiceOption("TextFontFamily", "Segoe UI", "Arial", "Consolas", Title = "Font family")]
+[ToolkitSampleMultiChoiceOption("TextForeground", "Teal : #0ddc8c", "Sand : #e7a676", "Dull green : #5d7577", Title = "Text foreground")]
+
+[ToolkitSample(id: nameof(CarouselTemplatedSample), "Templated control", description: "A sample for showing how to create and use a templated control.")]
+public sealed partial class CarouselTemplatedSample : Page
+{
+    public CarouselTemplatedSample()
+    {
+        this.InitializeComponent();
+    }
+}

components/Carousel/samples/CarouselTemplatedStyleCustomSample.xaml

@@ -0,0 +1,26 @@
+<!--  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="CarouselExperiment.Samples.CarouselTemplatedStyleCustomSample"
+      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+      xmlns:controls="using:CommunityToolkit.WinUI.Controls"
+      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      mc:Ignorable="d">
+
+    <Page.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <!--  Import custom styles  -->
+                <ResourceDictionary Source="ms-appx:///CommunityToolkit.WinUI.Controls.Carousel/CarouselStyle_ClassicBinding.xaml" />
+            </ResourceDictionary.MergedDictionaries>
+        </ResourceDictionary>
+    </Page.Resources>
+
+    <StackPanel Spacing="16">
+        <controls:Carousel_ClassicBinding FontFamily="{x:Bind TextFontFamily, Mode=OneWay}"
+                                                 FontSize="{x:Bind TextSize, Mode=OneWay}"
+                                                 Foreground="{x:Bind TextForeground, Mode=OneWay}"
+                                                 Style="{StaticResource CustomClassicBindingCarouselStyle}"
+                                                 Visibility="{x:Bind IsTextVisible, Mode=OneWay}" />
+    </StackPanel>
+</Page>

components/Carousel/samples/CarouselTemplatedStyleCustomSample.xaml.cs

@@ -0,0 +1,21 @@
+// 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 CarouselExperiment.Samples;
+
+[ToolkitSampleBoolOption("IsTextVisible", true, Title = "IsVisible")]
+// Single values without a colon are used for both label and value.
+// To provide a different label for the value, separate with a colon surrounded by a single space on both sides ("label : value").
+[ToolkitSampleNumericOption("TextSize", 12, 8, 48, 2, true, Title = "FontSize")]
+[ToolkitSampleMultiChoiceOption("TextFontFamily", "Segoe UI", "Arial", "Consolas", Title = "Font family")]
+[ToolkitSampleMultiChoiceOption("TextForeground", "Teal : #0ddc8c", "Sand : #e7a676", "Dull green : #5d7577", Title = "Text foreground")]
+
+[ToolkitSample(id: nameof(CarouselTemplatedStyleCustomSample), "Templated control (restyled)", description: "A sample for showing how to create a use and templated control with a custom style.")]
+public sealed partial class CarouselTemplatedStyleCustomSample : Page
+{
+    public CarouselTemplatedStyleCustomSample()
+    {
+        this.InitializeComponent();
+    }
+}

components/Carousel/samples/CarouselXbindBackedSample.xaml

@@ -0,0 +1,16 @@
+<!--  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="CarouselExperiment.Samples.CarouselXbindBackedSample"
+      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+      xmlns:controls="using:CommunityToolkit.WinUI.Controls"
+      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      mc:Ignorable="d">
+
+    <StackPanel Spacing="16">
+        <controls:Carousel_xBind FontFamily="{x:Bind TextFontFamily, Mode=OneWay}"
+                                        FontSize="{x:Bind TextSize, Mode=OneWay}"
+                                        Foreground="{x:Bind TextForeground, Mode=OneWay}"
+                                        Visibility="{x:Bind IsTextVisible, Mode=OneWay}" />
+    </StackPanel>
+</Page>

components/Carousel/samples/CarouselXbindBackedSample.xaml.cs

@@ -0,0 +1,21 @@
+// 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 CarouselExperiment.Samples;
+
+[ToolkitSampleBoolOption("IsTextVisible", true, Title = "IsVisible")]
+// Single values without a colon are used for both label and value.
+// To provide a different label for the value, separate with a colon surrounded by a single space on both sides ("label : value").
+[ToolkitSampleNumericOption("TextSize", 12, 8, 48, 2, false, Title = "FontSize")]
+[ToolkitSampleMultiChoiceOption("TextFontFamily", "Segoe UI", "Arial", "Consolas", Title = "Font family")]
+[ToolkitSampleMultiChoiceOption("TextForeground", "Teal : #0ddc8c", "Sand : #e7a676", "Dull green : #5d7577", Title = "Text foreground")]
+
+[ToolkitSample(id: nameof(CarouselXbindBackedSample), "Backed templated control", description: "A sample for showing how to create and use a templated control with a backed resource dictionary.")]
+public sealed partial class CarouselXbindBackedSample : Page
+{
+    public CarouselXbindBackedSample()
+    {
+        this.InitializeComponent();
+    }
+}

components/Carousel/samples/CarouselXbindBackedStyleCustomSample.xaml

@@ -0,0 +1,26 @@
+<!--  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="CarouselExperiment.Samples.CarouselXbindBackedStyleCustomSample"
+      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+      xmlns:controls="using:CommunityToolkit.WinUI.Controls"
+      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      mc:Ignorable="d">
+
+    <Page.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <!--  Import custom styles  -->
+                <controls:CarouselStyle_xBind />
+            </ResourceDictionary.MergedDictionaries>
+        </ResourceDictionary>
+    </Page.Resources>
+
+    <StackPanel Spacing="16">
+        <controls:Carousel_xBind FontFamily="{x:Bind TextFontFamily, Mode=OneWay}"
+                                        FontSize="{x:Bind TextSize, Mode=OneWay}"
+                                        Foreground="{x:Bind TextForeground, Mode=OneWay}"
+                                        Style="{StaticResource CustomxBindCarouselStyle}"
+                                        Visibility="{x:Bind IsTextVisible, Mode=OneWay}" />
+    </StackPanel>
+</Page>

components/Carousel/samples/CarouselXbindBackedStyleCustomSample.xaml.cs

@@ -0,0 +1,21 @@
+// 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 CarouselExperiment.Samples;
+
+[ToolkitSampleBoolOption("IsTextVisible", true, Title = "IsVisible")]
+// Single values without a colon are used for both label and value.
+// To provide a different label for the value, separate with a colon surrounded by a single space on both sides ("label : value").
+[ToolkitSampleNumericOption("TextSize", 12, 8, 48, 2, true, Title = "FontSize")]
+[ToolkitSampleMultiChoiceOption("TextFontFamily", "Segoe UI", "Arial", "Consolas", Title = "Font family")]
+[ToolkitSampleMultiChoiceOption("TextForeground", "Teal : #0ddc8c", "Sand : #e7a676", "Dull green : #5d7577", Title = "Text foreground")]
+
+[ToolkitSample(id: nameof(CarouselXbindBackedStyleCustomSample), "Backed templated control (restyled)", description: "A sample for showing how to create and use a templated control with a backed resource dictionary and a custom style.")]
+public sealed partial class CarouselXbindBackedStyleCustomSample : Page
+{
+    public CarouselXbindBackedStyleCustomSample()
+    {
+        this.InitializeComponent();
+    }
+}

components/Carousel/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>