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
15
How can I create xamnumeric slider with different scale
posted

The distance between first 7 tick marks are same and other tick marks values distance is very less. Please help me to design such slider with same tick marks values and same distance shown in the image. 

Appreciate quick help.

Parents
  • 2680
    Offline posted

    Hi Shreekant,

    I noticed there is this other recent forum thread, where the same question has been discussed. Please, note that according to our support policy, we handle a single support case/forum thread per question, to ensure better tracking and that all your queries are addressed correctly.

    Now, I have been looking into your discussion so far and I believe my colleague Divya has already provided answers to your questions. To sum up, what you are looking for, is not really achievable as the XamSlider renders the distance between the tick marks based on the values as they are. The way these distances are rendered is precision-wise accurate and any other modification would be a subject to custom application level requirements and has to be addressed on application level, if the implementation is possible.

    Now, to add to the discussion I can suggest a workaround approach for this, however, please, keep in mind that it would still not be the built in behavior and has to be implemented on application level. It would also come to the detriment of being able to use double values, that is the “IsSnapToTickEnabled” property of the XamSliderNumericThumb has to be set to “True” to always snap on any of the specific tick mark values. That is, unless, the target value could somehow be calculated, although, I believe this would be out of scope here, as is ,again, subject to the custom application-level logic.

    So, the approach would involve declaring other custom values as the TickMarksValues, such that they are distanced in the same way that you would like them to appear in the end. Then, with the help of the VerticalTickMarksTemplate, a custom value converter could be used in order to match the underlying value to the corresponding tick mark value label to be shown, for example:

        <Window.Resources>
         <local:TickMarkValuesConverter x:Key="conv" />
     </Window.Resources>
     
     <!--... -->
       
            <ig:XamNumericSlider Name="xamNumericSlider2"
                                 MinValue="-60"
                                 MaxValue="30"
                                 Orientation="Vertical"
                                 Height="300">
                <ig:XamNumericSlider.Resources>
                    <DataTemplate x:Key="VerticalTick">
                        <Border>
                            <TextBlock Text="{Binding Converter={StaticResource conv}}"
                                       Margin="60,0,0,0" />
                        </Border>
                    </DataTemplate>
                </ig:XamNumericSlider.Resources>
                <ig:XamNumericSlider.TickMarks>
                    <ig:SliderTickMarks VerticalTickMarksTemplate="{StaticResource VerticalTick}">
                   <ig:SliderTickMarks.TickMarksValues>
                            <system:Double>-60</system:Double>
                            <system:Double>-55</system:Double>
                            <system:Double>-50</system:Double>
                            <system:Double>-45</system:Double>
                            <system:Double>-40</system:Double>
                            <system:Double>-30</system:Double>
                            <system:Double>-20</system:Double>
                            <system:Double>-10</system:Double>
                            <system:Double>0</system:Double>
                            <system:Double>10</system:Double>
                            <system:Double>20</system:Double>
                            <system:Double>30</system:Double>
                        </ig:SliderTickMarks.TickMarksValues>
               </ig:SliderTickMarks>
                    <ig:SliderTickMarks>
                        <ig:SliderTickMarks.TickMarksValues>
                            <system:Double>-60</system:Double>
                            <system:Double>-55</system:Double>
                            <system:Double>-50</system:Double>
                            <system:Double>-45</system:Double>
                            <system:Double>-40</system:Double>
                            <system:Double>-30</system:Double>
                            <system:Double>-20</system:Double>
                            <system:Double>-10</system:Double>
                            <system:Double>0</system:Double>
                            <system:Double>10</system:Double>
                            <system:Double>20</system:Double>
                            <system:Double>30</system:Double>
                        </ig:SliderTickMarks.TickMarksValues>
                    </ig:SliderTickMarks>
                </ig:XamNumericSlider.TickMarks>
                <ig:XamNumericSlider.Thumb>
                    <ig:XamSliderNumericThumb TrackFillBrush="Green"
                                              Value="0"
                                              IsSnapToTickEnabled="True" />
                </ig:XamNumericSlider.Thumb>
            </ig:XamNumericSlider>

    And the converter could declare a Dictionary mapping the values:

       {
           public Dictionary<double, double> dict = new Dictionary<double, double>()
           {
               { -60, -120},
               { -55, -90},
               { -50, -60},
               { -45, -40},
               { -40, -30},
               { -30, -20},
               { -20, -15},
               { -10, -10},
               { 0, -5},
               { 10, 0},
               { 20, 8},
               { 30, 12},
           };
    
           public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
           { 
                return dict[(double)value].ToString();
           }
    
           public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
           {
               throw new NotImplementedException();
           }
       }

    To retireve the value of the slider’s thumb when needed, the same mapping as in the converter can be applied.

    Please, note that the specified values are simply for demonstration purposes and are not meant to mathematically represent any custom scale that your business logic may involve. Please, feel free to modify them accordingly as per your requirements.

    Attached you will find a sample demonstrating this approach.

    Here would be the result:

    In conclusion, please, note that what you are looking for, as mentioned, is not really how the XamNumericSlider is designed and cannot work out of the box. Nevertheless, I hope the workaround can be of some use in this case.

    Best regards,
    Bozhidara Pachilova
    Associate Software Developer

    2260.XamSliderCase.zip

Reply Children
No Data