WPF Slider with annotations.

 Some days back I was looking for a way to annotate the tick-mars on the slider.

Again I will show what was the problem I was trying to solve.

Below Slider there are ticks, I wanted to annotate them with some meaningful labels. Unfortunately Slider doesn't have any APIs that would help me achieve this.

One of the obvious solutions that comes to mind is strategically placing the WPF Label control below the tick marks, but this will make this feature non-extensible. Each time you change the number of tick marks, you will have to update the label positions so that they come exactly below the tick marks. Something like this,

As you can see, I have failed at placing the labels correctly below the ticks, that is because I was limited by Visual Studio at choosing the nearest position, but not the exact location.

I did Google to search for the answers and found relevant information here and here.

The above post told everything except, tick marks were being replaced by string, but I wanted both tick marks and text!.

I started modifying the Slider control to include API that will accept comma(,) separated string to display below the ticks. Something like "1,,3,,5". I have placed two commas to let know the API that I don't want anything to displayed below the second or fourth tick marks. And I modified the algorithm a little so that I will not require Margin as mentioned in above post to correct the position of text below text. If I had used Margin it would have affected the placement of ticks along with that text, as a result the tick marks would have been misplaced.

Here is the algorithm that I used.

 public class CustomTickBar : TickBar
    {

        protected override void OnRender(DrawingContext dc)
        {

            string[] textArray = TickBarText.Split(',');

            FormattedText formattedText;
            Size size = new Size(base.ActualWidth, base.ActualHeight);
            double num = this.Maximum - this.Minimum;
            double num5 = this.ReservedSpace * 0.5;
            size.Width -= this.ReservedSpace;
            double tickFrequencySize = (size.Width * this.TickFrequency / (this.Maximum - this.Minimum));
            int j = 0;
            for (double i = 0; i <= num; i += this.TickFrequency)
            {
                string annotation;
                try
                {
                    annotation = textArray[j];
                }
                catch (System.IndexOutOfRangeException)
                {
                    annotation = "";
                }
                formattedText = new FormattedText(annotation, CultureInfo.GetCultureInfo("en-us"), FlowDirection.LeftToRight, new Typeface("Verdana"), 8, Brushes.Black);
                dc.DrawText(formattedText, new Point((tickFrequencySize * i) + num5-(formattedText.Width/2), 10));
                j++;
            }
            
            base.OnRender(dc); //This is essential so that tick marks are displayed. 

         } 

     }

Here is the sample output.

Whats more, since the tick bar is now part of slider itself, it can respond to property changes

Slider, like when the control is disabled the annotated text can gray out!