Browse Source

Add ticks property on Slider

This property will allow setting custom ticks on the slider without having to create a custom template for the TickBar.
Mihai Stan 5 years ago
parent
commit
a5f43c7ee1

+ 15 - 5
samples/ControlCatalog/Pages/SliderPage.xaml

@@ -6,11 +6,21 @@
     <TextBlock Classes="h2">A control that lets the user select from a range of values by moving a Thumb control along a Track.</TextBlock>
 
     <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0 16 0 0" Spacing="16">
-      <Slider Value="0"
-              Minimum="0"
-              Maximum="100"
-              TickFrequency="10"
-              Width="300"/>
+      <StackPanel Orientation="Vertical"
+                  HorizontalAlignment="Center">
+        <Slider Value="0"
+                Minimum="0"
+                Maximum="100"
+                TickFrequency="10"
+                Width="300" />
+        <Slider Name="CustomTickedSlider"
+                Value="0"
+                Minimum="0"
+                Maximum="100"
+                TickPlacement="BottomRight"
+                IsSnapToTickEnabled="True"
+                Width="300" />
+      </StackPanel>
       <Slider Value="0"
               Minimum="0"
               Maximum="100"

+ 11 - 0
samples/ControlCatalog/Pages/SliderPage.xaml.cs

@@ -1,3 +1,4 @@
+using System.Collections.Generic;
 using Avalonia.Controls;
 using Avalonia.Markup.Xaml;
 
@@ -13,6 +14,16 @@ namespace ControlCatalog.Pages
         private void InitializeComponent()
         {
             AvaloniaXamlLoader.Load(this);
+
+            var slider = this.FindControl<Slider>("CustomTickedSlider");
+            slider.Ticks = new List<double>
+            {
+                0d,
+                5d,
+                20d,
+                50d,
+                100d
+            };
         }
     }
 }

+ 18 - 1
src/Avalonia.Controls/Slider.cs

@@ -1,4 +1,5 @@
 using System;
+using System.Collections.Generic;
 using Avalonia.Controls.Mixins;
 using Avalonia.Controls.Primitives;
 using Avalonia.Input;
@@ -64,6 +65,12 @@ namespace Avalonia.Controls
         public static readonly StyledProperty<TickPlacement> TickPlacementProperty =
             AvaloniaProperty.Register<TickBar, TickPlacement>(nameof(TickPlacement), 0d);
 
+        /// <summary>
+        /// Defines the <see cref="TicksProperty"/> property.
+        /// </summary>
+        public static readonly StyledProperty<List<double>> TicksProperty =
+            TickBar.TicksProperty.AddOwner<Slider>();
+
         // Slider required parts
         private bool _isDragging = false;
         private Track _track;
@@ -83,7 +90,8 @@ namespace Avalonia.Controls
             PressedMixin.Attach<Slider>();
             OrientationProperty.OverrideDefaultValue(typeof(Slider), Orientation.Horizontal);
             Thumb.DragStartedEvent.AddClassHandler<Slider>((x, e) => x.OnThumbDragStarted(e), RoutingStrategies.Bubble);
-            Thumb.DragCompletedEvent.AddClassHandler<Slider>((x, e) => x.OnThumbDragCompleted(e), RoutingStrategies.Bubble);
+            Thumb.DragCompletedEvent.AddClassHandler<Slider>((x, e) => x.OnThumbDragCompleted(e),
+                RoutingStrategies.Bubble);
         }
 
         /// <summary>
@@ -94,6 +102,15 @@ namespace Avalonia.Controls
             UpdatePseudoClasses(Orientation);
         }
 
+        /// <summary>
+        /// Defines the ticks to be drawn on the tick bar.
+        /// </summary>
+        public List<double> Ticks
+        {
+            get => GetValue(TicksProperty);
+            set => SetValue(TicksProperty, value);
+        }
+
         /// <summary>
         /// Gets or sets the orientation of a <see cref="Slider"/>.
         /// </summary>

+ 6 - 3
src/Avalonia.Themes.Default/Slider.xaml

@@ -87,7 +87,10 @@
         </ControlTemplate>
     </Setter>
   </Style>
-    <Style Selector="Slider:disabled /template/ Grid#grid">
-        <Setter Property="Opacity" Value="{DynamicResource ThemeDisabledOpacity}" />
-    </Style>
+  <Style Selector="Slider /template/ TickBar">
+    <Setter Property="Ticks" Value="{TemplateBinding Ticks}" />
+  </Style>
+  <Style Selector="Slider:disabled /template/ Grid#grid">
+    <Setter Property="Opacity" Value="{DynamicResource ThemeDisabledOpacity}" />
+  </Style>
 </Styles>

+ 1 - 0
src/Avalonia.Themes.Fluent/Slider.xaml

@@ -182,6 +182,7 @@
 
   <Style Selector="Slider /template/ TickBar">
     <Setter Property="IsVisible" Value="False" />
+    <Setter Property="Ticks" Value="{TemplateBinding Ticks}" />
   </Style>
 
   <!-- TickBar Placement States -->