Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
1060
Custom Tick values in XamDateTimeSlider
posted

Hello,

I am using "XamDateTimeSlider" in my Silverlight MVVM application. We have list of reports created on different dates so we need to give Slider controls from where user can select Date of report which he want to see.

We don't need the DAY, Month etc. frequency as Creation Date may be like this

1/1/2010      3/2/2010    3/5/2010       2/1/2011       2/2/2011

etc. so I want to mark the Tick only on these dates and user can slide to these dates tick only. Obviously I will bind MIN & MAX values but how can I bind the TICKMARKs property to a LIST<DateTime> property of my view model?

Any idea to accomplish this, please???

Parents
No Data
Reply
  • 435
    posted

    Hi,

      The solution for this is two fold, I've created a small example that should be able to get you headed in the right direction.  Basically, we need to create our own TickMarks, and in there we can override the TickMarksCollection and use our own values.  Also we tell the thumb that is on the Slider that it must always snap to the tick marks.  Just a note, the visual studio designer may complain about using a custom tick mark type, however, it will compile and run just fine.

    Hope this helps you get what you were looking for, if not let me know and I'll see if I can find something else!

    Thanks!

    Rich

     

    Here is the Xaml:

     

            <ig:XamDateTimeSlider Name="slider1" MinValue="1/1/2010" MaxValue="2/2/2011">
                <ig:XamDateTimeSlider.Thumb>
                    <ig:XamSliderDateTimeThumb IsSnapToTickEnabled="True"/>
                </ig:XamDateTimeSlider.Thumb>
                <ig:XamDateTimeSlider.TickMarks>
                    <local:CustomTickMarks>
                    </local:CustomTickMarks>
                </ig:XamDateTimeSlider.TickMarks>
            </ig:XamDateTimeSlider>

    And here is my class:
        public class CustomTickMarksDateTimeSliderTickMarks
        {
            public CustomTickMarks()
            {
                this.IncludeSliderEnds = true;
            }
     
            public override System.Collections.ObjectModel.ObservableCollection<DateTime> TickMarksValues
            {
                get
                {
                    return new System.Collections.ObjectModel.ObservableCollection<DateTime>() { 
                        new DateTime(2010, 1, 1), 
                        new DateTime(2010, 3, 2), 
                        new DateTime(2010, 3, 5), 
                        new DateTime(2011, 2, 1), 
                        new DateTime(2011, 2, 2) };
                }
            }
        }
Children
No Data