GradientSlider component creation

components/GradientSlider/OpenSolution.bat

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

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

components/GradientSlider/samples/GradientSlider.Samples.csproj

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

components/GradientSlider/samples/GradientSlider.md

@@ -0,0 +1,25 @@
+---
+title: GradientSlider
+author: githubaccount
+description: TODO: Your experiment's description here
+keywords: GradientSlider, 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. -->
+
+# GradientSlider
+
+> [!SAMPLE GradientSliderSample]

components/GradientSlider/samples/GradientSliderSample.xaml

@@ -0,0 +1,23 @@
+<!--  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="GradientSliderExperiment.Samples.GradientSliderSample"
+      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:GradientSliderExperiment.Samples"
+      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      mc:Ignorable="d">
+
+    <StackPanel Spacing="16">
+        <controls:GradientSlider>
+            <controls:GradientSlider.GradientStops>
+                <GradientStopCollection>
+                    <GradientStop Offset="0" Color="#FF0000" />
+                    <GradientStop Offset="0.3" Color="#00FF00" />
+                    <GradientStop Offset="0.66" Color="#0000FF" />
+                    <GradientStop Offset="1" Color="#FF0000" />
+                </GradientStopCollection>
+            </controls:GradientSlider.GradientStops>
+        </controls:GradientSlider>
+    </StackPanel>
+</Page>

components/GradientSlider/samples/GradientSliderSample.xaml.cs

@@ -0,0 +1,20 @@
+// 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 GradientSliderExperiment.Samples;
+
+/// <summary>
+/// An example sample page of a custom control inheriting from Panel.
+/// </summary>
+
+[ToolkitSample(id: nameof(GradientSliderSample), "Custom control", description: $"A sample for showing how to create and use a {nameof(GradientSlider)} custom control.")]
+public sealed partial class GradientSliderSample : Page
+{
+    public GradientSliderSample()
+    {
+        this.InitializeComponent();
+    }
+}

components/GradientSlider/src/CommunityToolkit.WinUI.Controls.GradientSlider.csproj

@@ -0,0 +1,14 @@
+<Project>
+  <Import Project="$([MSBuild]::GetPathOfFileAbove(Directory.Build.props))" Condition="Exists('$([MSBuild]::GetPathOfFileAbove(Directory.Build.props))')" />
+
+  <PropertyGroup>
+    <ToolkitComponentName>GradientSlider</ToolkitComponentName>
+    <Description>This package contains GradientSlider.</Description>
+
+    <!-- Rns suffix is required for namespaces shared across projects. See https://github.com/CommunityToolkit/Labs-Windows/issues/152 -->
+    <RootNamespace>CommunityToolkit.WinUI.Controls.GradientSliderRns</RootNamespace>
+  </PropertyGroup>
+
+  <!-- Sets this up as a toolkit component's source project -->
+  <Import Project="$(ToolingDirectory)\ToolkitComponent.SourceProject.props" />
+</Project>

components/GradientSlider/src/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>

components/GradientSlider/src/GradientSlider.Events.cs

@@ -0,0 +1,49 @@
+// 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 CommunityToolkit.WinUI.Controls;
+
+public partial class GradientSlider
+{
+    /// <summary>
+    /// Event raised when a thumb starts being dragged.
+    /// </summary>
+    public event DragStartedEventHandler? ThumbDragStarted;
+
+    /// <summary>
+    /// Event raised when a thumb ends being dragged.
+    /// </summary>
+    public event DragCompletedEventHandler? ThumbDragCompleted;
+
+    /// <summary>
+    /// Event raised when the gradient's value changes.
+    /// </summary>
+    public event EventHandler? ValueChanged;
+
+    /// <summary>
+    /// Called before the <see cref="ThumbDragStarted"/> event occurs.
+    /// </summary>
+    /// <param name="e">Event data for the event.</param>
+    protected virtual void OnThumbDragStarted(DragStartedEventArgs e)
+    {
+        ThumbDragStarted?.Invoke(this, e);
+    }
+
+    /// <summary>
+    /// Called before the <see cref="ThumbDragCompleted"/> event occurs.
+    /// </summary>
+    /// <param name="e">Event data for the event.</param>
+    protected virtual void OnThumbDragCompleted(DragCompletedEventArgs e)
+    {
+        ThumbDragCompleted?.Invoke(this, e);
+    }
+
+    /// <summary>
+    /// Called before the <see cref="ValueChanged"/> event occurs.
+    /// </summary>
+    protected virtual void OnValueChanged()
+    {
+        ValueChanged?.Invoke(this, EventArgs.Empty);
+    }
+}

components/GradientSlider/src/GradientSlider.Input.cs

@@ -0,0 +1,41 @@
+// 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 CommunityToolkit.WinUI.Controls;
+
+public partial class GradientSlider
+{
+    private void Thumb_DragStarted(object sender, DragStartedEventArgs e)
+    {
+        if (sender is not GradientSliderThumb thumb)
+            return;
+
+        _isDragging = true;
+        _dragStartPosition = Canvas.GetLeft(thumb);
+
+        OnThumbDragStarted(e);
+    }
+
+    private void Thumb_DragDelta(object sender, DragDeltaEventArgs e)
+    {
+        if (_containerCanvas is null)
+            return;
+
+        if (sender is not GradientSliderThumb thumb)
+            return;
+
+        _dragStartPosition += e.HorizontalChange;
+        var newPos = _dragStartPosition / (_containerCanvas.ActualWidth - thumb.ActualWidth);
+        thumb.GradientStop.Offset = Math.Clamp(newPos, 0, 1);
+        UpdateThumbPosition(thumb);
+    }
+
+    private void Thumb_DragCompleted(object sender, DragCompletedEventArgs e)
+    {
+        _isDragging = false;
+
+        OnThumbDragCompleted(e);
+        OnValueChanged();
+    }
+}

components/GradientSlider/src/GradientSlider.Properties.cs

@@ -0,0 +1,37 @@
+// 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 CommunityToolkit.WinUI.Controls;
+
+public partial class GradientSlider
+{
+    /// <summary>
+    /// The backing <see cref="DependencyProperty"/> for the <see cref="GradientStops"/> property.
+    /// </summary>
+    public static readonly DependencyProperty GradientStopsProperty =
+        DependencyProperty.Register(nameof(GradientStops),
+            typeof(GradientStopCollection),
+            typeof(GradientSlider),
+            new PropertyMetadata(new GradientStopCollection(), GradientStopsChangedCallback));
+
+    /// <summary>
+    /// Gets or sets the <see cref="GradientStopCollection"/> being modified by the <see cref="GradientSlider"/>.
+    /// </summary>
+    public GradientStopCollection GradientStops
+    {
+        get => (GradientStopCollection)GetValue(GradientStopsProperty);
+        set => SetValue(GradientStopsProperty, value);
+    }
+
+    private static void GradientStopsChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
+    {
+        if (d is not GradientSlider slider)
+            return;
+
+        if (slider._isDragging)
+            return;
+
+        slider.RefreshThumbs();
+    }
+}