Skip to content

Commit 3a68bb0

Browse files
Avid29Avid29
committed
Added placeholder thumb for add position indicator
1 parent ecc79f2 commit 3a68bb0

File tree

3 files changed

+86
-18
lines changed

3 files changed

+86
-18
lines changed

‎components/GradientSlider/src/GradientSlider.Input.cs‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,4 +38,31 @@ private void Thumb_DragCompleted(object sender, DragCompletedEventArgs e)
3838
OnThumbDragCompleted(e);
3939
OnValueChanged();
4040
}
41+
42+
private void ContainerCanvas_PointerEntered(object sender, PointerRoutedEventArgs e)
43+
{
44+
if (_placeholderThumb is null)
45+
return;
46+
47+
_placeholderThumb.Visibility = Visibility.Visible;
48+
}
49+
50+
private void ContainerCanvas_PointerMoved(object sender, PointerRoutedEventArgs e)
51+
{
52+
if (_containerCanvas is null || _placeholderThumb is null)
53+
return;
54+
55+
var position = e.GetCurrentPoint(_containerCanvas).Position.X;
56+
position -= _placeholderThumb.ActualWidth / 2;
57+
position = Math.Clamp(position, 0, _containerCanvas.ActualWidth - _placeholderThumb.ActualWidth);
58+
Canvas.SetLeft(_placeholderThumb, position);
59+
}
60+
61+
private void ContainerCanvas_PointerExited(object sender, PointerRoutedEventArgs e)
62+
{
63+
if (_placeholderThumb is null)
64+
return;
65+
66+
_placeholderThumb.Visibility = Visibility.Collapsed;
67+
}
4168
}

‎components/GradientSlider/src/GradientSlider.cs‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,15 @@ namespace CommunityToolkit.WinUI.Controls;
1414
/// A slider for gradient color input.
1515
/// </summary>
1616
[TemplatePart(Name = "ContainerCanvas", Type = typeof(Canvas))]
17+
[TemplatePart(Name = "PlaceholderThumb", Type = typeof(Thumb))]
1718
[TemplatePart(Name = "BackgroundRectangle", Type = typeof(Rectangle))]
1819
public partial class GradientSlider : Control
1920
{
2021
private readonly Dictionary<GradientStop, GradientSliderThumb> _stopThumbs = [];
2122
private readonly Dictionary<GradientStop, long> _stopCallbacks = [];
2223

2324
private Canvas? _containerCanvas;
25+
private Thumb? _placeholderThumb;
2426
private Rectangle? _backgroundRectangle;
2527

2628
private double _dragStartPosition;
@@ -45,10 +47,20 @@ protected override void OnApplyTemplate()
4547
}
4648

4749
_containerCanvas = (Canvas)GetTemplateChild("ContainerCanvas");
50+
_placeholderThumb = (Thumb)GetTemplateChild("PlaceholderThumb");
4851
_backgroundRectangle = (Rectangle?)GetTemplateChild("BackgroundRectangle");
4952

5053
_containerCanvas.SizeChanged += ContainerCanvas_SizeChanged;
5154

55+
if (_placeholderThumb is not null)
56+
{
57+
_containerCanvas.PointerEntered += ContainerCanvas_PointerEntered;
58+
_containerCanvas.PointerMoved += ContainerCanvas_PointerMoved;
59+
_containerCanvas.PointerExited += ContainerCanvas_PointerExited;
60+
61+
_placeholderThumb.Visibility = Visibility.Collapsed;
62+
}
63+
5264
RefreshThumbs();
5365
}
5466

@@ -148,9 +160,6 @@ private void OnGradientStopOffsetChanged(DependencyObject d, DependencyProperty
148160
if (d is not GradientStop stop || !_stopThumbs.TryGetValue(stop, out var thumb))
149161
return;
150162

151-
if (_isDragging)
152-
return;
153-
154163
UpdateThumbPosition(thumb);
155164
}
156165

‎components/GradientSlider/src/GradientSliderStyle.xaml‎

Lines changed: 47 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,61 @@
1-
<!-- 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. -->
2-
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3-
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4-
xmlns:controls="using:CommunityToolkit.WinUI.Controls">
1+
<!-- 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. -->
2+
<ResourceDictionary
3+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5+
xmlns:controls="using:CommunityToolkit.WinUI.Controls">
56

6-
<Style BasedOn="{StaticResource DefaultGradientSliderStyle}"
7-
TargetType="controls:GradientSlider" />
7+
<SolidColorBrush x:Key="PlaceHolderThumbFillBrush" Color="{ThemeResource ControlSolidFillColorDefault}" />
8+
<SolidColorBrush x:Key="PlaceHolderThumbStrokeBrush" Color="{ThemeResource ControlStrongStrokeColorDefault}" />
9+
<x:Double x:Key="PlaceHolderThumbStrokeThickness">0.5</x:Double>
810

9-
<Style x:Key="DefaultGradientSliderStyle"
10-
TargetType="controls:GradientSlider">
11+
<Style BasedOn="{StaticResource DefaultGradientSliderStyle}" TargetType="controls:GradientSlider" />
12+
13+
<Style x:Key="DefaultGradientSliderStyle" TargetType="controls:GradientSlider">
1114
<Style.Setters>
1215
<Setter Property="Template">
1316
<Setter.Value>
1417
<ControlTemplate TargetType="controls:GradientSlider">
1518
<Grid MinHeight="20">
16-
<Rectangle x:Name="BackgroundRectangle"
17-
Height="8"
18-
HorizontalAlignment="Stretch"
19-
VerticalAlignment="Center" />
20-
<Canvas x:Name="ContainerCanvas"
21-
Background="Transparent" />
19+
<Rectangle
20+
x:Name="BackgroundRectangle"
21+
Height="8"
22+
HorizontalAlignment="Stretch"
23+
VerticalAlignment="Center" />
24+
<Canvas x:Name="ContainerCanvas" Background="Transparent">
25+
<Thumb
26+
x:Name="PlaceholderThumb"
27+
IsEnabled="False"
28+
Visibility="Collapsed">
29+
<Thumb.Style>
30+
<Style TargetType="Thumb">
31+
<Setter Property="UseSystemFocusVisuals" Value="True" />
32+
<Setter Property="BorderThickness" Value="1" />
33+
<Setter Property="BorderBrush" Value="{ThemeResource SliderThumbBorderBrush}" />
34+
<Setter Property="Height" Value="{ThemeResource SliderHorizontalThumbHeight}" />
35+
<Setter Property="CornerRadius" Value="{ThemeResource SliderThumbCornerRadius}" />
36+
<Setter Property="FocusVisualMargin" Value="-7" />
37+
<Setter Property="Template">
38+
<Setter.Value>
39+
<ControlTemplate TargetType="Thumb">
40+
<Ellipse
41+
x:Name="SliderInnerThumb"
42+
Width="{ThemeResource SliderInnerThumbWidth}"
43+
Height="{ThemeResource SliderInnerThumbHeight}"
44+
Fill="{ThemeResource PlaceHolderThumbFillBrush}"
45+
Stroke="{ThemeResource PlaceHolderThumbStrokeBrush}"
46+
StrokeThickness="{ThemeResource PlaceHolderThumbStrokeThickness}"
47+
Margin="-4"/>
48+
</ControlTemplate>
49+
</Setter.Value>
50+
</Setter>
51+
</Style>
52+
</Thumb.Style>
53+
</Thumb>
54+
</Canvas>
2255
</Grid>
2356
</ControlTemplate>
2457
</Setter.Value>
2558
</Setter>
2659
</Style.Setters>
2760
</Style>
28-
2961
</ResourceDictionary>

0 commit comments

Comments
 (0)