Create new TransitionHelper experiment

labs/TransitionHelper/samples/TransitionHelper.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/TransitionHelper/samples/TransitionHelper.Samples/MultiTarget.props

@@ -0,0 +1,9 @@
+<Project>
+    <PropertyGroup>
+        <!--
+          MultiTarget is a custom property that indicates which target a project is designed to be built for / run on.
+          Used to create project references, generate solution files, enable/disable TargetFrameworks, and build nuget packages.
+        -->
+        <MultiTarget>uwp;wasdk</MultiTarget>
+    </PropertyGroup>
+</Project>

labs/TransitionHelper/samples/TransitionHelper.Samples/TransitionHelper.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\MultiTarget\MultiTarget.props" />
+
+  <!-- Labs Project Config -->
+  <Import Project="$(RepositoryDirectory)common\SampleProjectConfig.props" />
+
+  <PropertyGroup>
+    <RootNamespace>TransitionHelperExperiment.Samples</RootNamespace>
+    <AssemblyName>TransitionHelperExperiment.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.TransitionHelper.csproj" />
+  </ItemGroup>
+</Project>

labs/TransitionHelper/samples/TransitionHelper.Samples/TransitionHelper.md

@@ -0,0 +1,64 @@
+---
+title: TransitionHelper
+author: githubaccount
+description: TODO: Your experiment's description here
+keywords: TransitionHelper, Control, Layout
+dev_langs:
+  - csharp
+category: Controls
+subcategory: Layout
+discussion-id: 0
+issue-id: 0
+---
+
+<!-- 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. -->
+
+# TransitionHelper
+
+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 TransitionHelperCustomSample]
+
+## 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 TransitionHelperTemplatedSample]
+
+### Custom style
+
+> [!SAMPLE TransitionHelperTemplatedStyleCustomSample]
+
+## 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 TransitionHelperXbindBackedSample]
+
+### Custom style
+
+> [!SAMPLE TransitionHelperXbindBackedStyleCustomSample]
+

labs/TransitionHelper/samples/TransitionHelper.Samples/TransitionHelperCustomSample.xaml

@@ -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.  -->
+<Page x:Class="TransitionHelperExperiment.Samples.TransitionHelperCustomSample"
+      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:TransitionHelperExperiment.Samples"
+      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      mc:Ignorable="d">
+
+    <StackPanel Spacing="15">
+        <labs:TransitionHelper Orientation="{x:Bind local:TransitionHelperCustomSample.ConvertStringToOrientation(LayoutOrientation), Mode=OneWay}">
+            <TextBlock Text="1" />
+            <TextBlock Text="2" />
+            <TextBlock Text="3" />
+            <TextBlock Text="4" />
+            <TextBlock Text="5" />
+            <TextBlock Text="6" />
+        </labs:TransitionHelper>
+    </StackPanel>
+</Page>

labs/TransitionHelper/samples/TransitionHelper.Samples/TransitionHelperCustomSample.xaml.cs

@@ -0,0 +1,27 @@
+// 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 TransitionHelperExperiment.Samples;
+
+/// <summary>
+/// An example sample page of a custom control inheriting from Panel.
+/// </summary>
+[ToolkitSampleMultiChoiceOption("LayoutOrientation", title: "Orientation", "Horizontal", "Vertical")]
+
+[ToolkitSample(id: nameof(TransitionHelperCustomSample), "Custom control", description: $"A sample for showing how to create and use a {nameof(TransitionHelper)} custom control.")]
+public sealed partial class TransitionHelperCustomSample : Page
+{
+    public TransitionHelperCustomSample()
+    {
+        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(),
+    };
+}

labs/TransitionHelper/samples/TransitionHelper.Samples/TransitionHelperTemplatedSample.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="TransitionHelperExperiment.Samples.TransitionHelperTemplatedSample"
+      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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      mc:Ignorable="d">
+
+    <StackPanel Spacing="16">
+        <labs:TransitionHelper_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>

labs/TransitionHelper/samples/TransitionHelper.Samples/TransitionHelperTemplatedSample.xaml.cs

@@ -0,0 +1,24 @@
+// 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 TransitionHelperExperiment.Samples;
+
+[ToolkitSampleBoolOption("IsTextVisible", "IsVisible", true)]
+// 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").
+[ToolkitSampleMultiChoiceOption("TextSize", title: "Text size", "Small : 12", "Normal : 16", "Big : 32")]
+[ToolkitSampleMultiChoiceOption("TextFontFamily", title: "Font family", "Segoe UI", "Arial", "Consolas")]
+[ToolkitSampleMultiChoiceOption("TextForeground", title: "Text foreground",
+    "Teal       : #0ddc8c",
+    "Sand       : #e7a676",
+    "Dull green : #5d7577")]
+
+[ToolkitSample(id: nameof(TransitionHelperTemplatedSample), "Templated control", description: "A sample for showing how to create and use a templated control.")]
+public sealed partial class TransitionHelperTemplatedSample : Page
+{
+    public TransitionHelperTemplatedSample()
+    {
+        this.InitializeComponent();
+    }
+}

labs/TransitionHelper/samples/TransitionHelper.Samples/TransitionHelperTemplatedStyleCustomSample.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="TransitionHelperExperiment.Samples.TransitionHelperTemplatedStyleCustomSample"
+      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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      mc:Ignorable="d">
+
+    <Page.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <!--  Import custom styles  -->
+                <ResourceDictionary Source="ms-appx:///CommunityToolkit.Labs.WinUI.TransitionHelper/TransitionHelperStyle_ClassicBinding.xaml" />
+            </ResourceDictionary.MergedDictionaries>
+        </ResourceDictionary>
+    </Page.Resources>
+
+    <StackPanel Spacing="16">
+        <labs:TransitionHelper_ClassicBinding FontFamily="{x:Bind TextFontFamily, Mode=OneWay}"
+                                             FontSize="{x:Bind TextSize, Mode=OneWay}"
+                                             Foreground="{x:Bind TextForeground, Mode=OneWay}"
+                                             Style="{StaticResource CustomClassicBindingTransitionHelperStyle}"
+                                             Visibility="{x:Bind IsTextVisible, Mode=OneWay}" />
+    </StackPanel>
+</Page>

labs/TransitionHelper/samples/TransitionHelper.Samples/TransitionHelperTemplatedStyleCustomSample.xaml.cs

@@ -0,0 +1,24 @@
+// 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 TransitionHelperExperiment.Samples;
+
+[ToolkitSampleBoolOption("IsTextVisible", "IsVisible", true)]
+// 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").
+[ToolkitSampleMultiChoiceOption("TextSize", title: "Text size", "Small : 12", "Normal : 16", "Big : 32")]
+[ToolkitSampleMultiChoiceOption("TextFontFamily", title: "Font family", "Segoe UI", "Arial", "Consolas")]
+[ToolkitSampleMultiChoiceOption("TextForeground", title: "Text foreground",
+    "Teal       : #0ddc8c",
+    "Sand       : #e7a676",
+    "Dull green : #5d7577")]
+
+[ToolkitSample(id: nameof(TransitionHelperTemplatedStyleCustomSample), "Templated control (restyled)", description: "A sample for showing how to create a use and templated control with a custom style.")]
+public sealed partial class TransitionHelperTemplatedStyleCustomSample : Page
+{
+    public TransitionHelperTemplatedStyleCustomSample()
+    {
+        this.InitializeComponent();
+    }
+}

labs/TransitionHelper/samples/TransitionHelper.Samples/TransitionHelperXbindBackedSample.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="TransitionHelperExperiment.Samples.TransitionHelperXbindBackedSample"
+      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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      mc:Ignorable="d">
+
+    <StackPanel Spacing="16">
+        <labs:TransitionHelper_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>

labs/TransitionHelper/samples/TransitionHelper.Samples/TransitionHelperXbindBackedSample.xaml.cs

@@ -0,0 +1,24 @@
+// 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 TransitionHelperExperiment.Samples;
+
+[ToolkitSampleBoolOption("IsTextVisible", "IsVisible", true)]
+// 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").
+[ToolkitSampleMultiChoiceOption("TextSize", title: "Text size", "Small : 12", "Normal : 16", "Big : 32")]
+[ToolkitSampleMultiChoiceOption("TextFontFamily", title: "Font family", "Segoe UI", "Arial", "Consolas")]
+[ToolkitSampleMultiChoiceOption("TextForeground", title: "Text foreground",
+    "Teal       : #0ddc8c",
+    "Sand       : #e7a676",
+    "Dull green : #5d7577")]
+
+[ToolkitSample(id: nameof(TransitionHelperXbindBackedSample), "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 TransitionHelperXbindBackedSample : Page
+{
+    public TransitionHelperXbindBackedSample()
+    {
+        this.InitializeComponent();
+    }
+}

labs/TransitionHelper/samples/TransitionHelper.Samples/TransitionHelperXbindBackedStyleCustomSample.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="TransitionHelperExperiment.Samples.TransitionHelperXbindBackedStyleCustomSample"
+      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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      mc:Ignorable="d">
+
+    <Page.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <!--  Import custom styles  -->
+                <labs:TransitionHelperStyle_xBind />
+            </ResourceDictionary.MergedDictionaries>
+        </ResourceDictionary>
+    </Page.Resources>
+
+    <StackPanel Spacing="16">
+        <labs:TransitionHelper_xBind FontFamily="{x:Bind TextFontFamily, Mode=OneWay}"
+                                    FontSize="{x:Bind TextSize, Mode=OneWay}"
+                                    Foreground="{x:Bind TextForeground, Mode=OneWay}"
+                                    Style="{StaticResource CustomxBindTransitionHelperStyle}"
+                                    Visibility="{x:Bind IsTextVisible, Mode=OneWay}" />
+    </StackPanel>
+</Page>

labs/TransitionHelper/samples/TransitionHelper.Samples/TransitionHelperXbindBackedStyleCustomSample.xaml.cs

@@ -0,0 +1,24 @@
+// 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 TransitionHelperExperiment.Samples;
+
+[ToolkitSampleBoolOption("IsTextVisible", "IsVisible", true)]
+// 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").
+[ToolkitSampleMultiChoiceOption("TextSize", title: "Text size", "Small : 12", "Normal : 16", "Big : 32")]
+[ToolkitSampleMultiChoiceOption("TextFontFamily", title: "Font family", "Segoe UI", "Arial", "Consolas")]
+[ToolkitSampleMultiChoiceOption("TextForeground", title: "Text foreground",
+    "Teal       : #0ddc8c",
+    "Sand       : #e7a676",
+    "Dull green : #5d7577")]
+
+[ToolkitSample(id: nameof(TransitionHelperXbindBackedStyleCustomSample), "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 TransitionHelperXbindBackedStyleCustomSample : Page
+{
+    public TransitionHelperXbindBackedStyleCustomSample()
+    {
+        this.InitializeComponent();
+    }
+}