Question regarding tick labels

9 posts, 0 answers
  1. GEB
    GEB avatar
    228 posts
    Member since:
    Dec 2008

    Posted 22 Jan 2009 Link to this post

    The TickTemplate example was an excellent sample showing how to change the template used for the tick marks "on the fly".  I have a question regarding how to change the labels associated with the ticks,  on the fly.

    Assume that the slider will have a Minimum value of 0, and a Maximum value of 24.  Each tick mark represents an hour in the day.  Instead of labeling the tick marks 0 to 24 (default), I want to label 0 and 24 as "midnight", 12 as "noon", and all other values as nn:00 AM or nn:00 PM.  How to develop a template that allows this level of control over the value that is placed in the TextBlock that is inside the template for the tick marks?  Using your eample in TickTemplate, I would need 24 unique templates (one for every hour), just as there was a different template in the TickTemplate example for each bloodpressure tick value.

     
  2. GEB
    GEB avatar
    228 posts
    Member since:
    Dec 2008

    Posted 22 Jan 2009 Link to this post

    I may have an answer to my own question.  Is it possible to use a Converter to accomplish changing the values of the tick label on the fly?
  3. DevCraft banner
  4. GEB
    GEB avatar
    228 posts
    Member since:
    Dec 2008

    Posted 23 Jan 2009 Link to this post

    I implemented the Converter, and it works great.  I am now able to display the tick labels in virtually any time-of-day format required.
  5. Eric
    Eric avatar
    3 posts
    Member since:
    Feb 2009

    Posted 20 Feb 2009 Link to this post

    Could you please explain how the converter that you mention works?

    The problem I am having has to do with how many digits proceed the decimal point. I have a DoubleCollection and each element in that collection is a tick along my slider. I only want to display 3 places to the right of the decimal but it is showing 14 places past the decimal now.


  6. GEB
    GEB avatar
    228 posts
    Member since:
    Dec 2008

    Posted 20 Feb 2009 Link to this post

    Here is the XAML code that defines the Slider:
    <telerik:RadSlider x:Name="Slider" HorizontalAlignment="Stretch" Minimum="0" Maximum="24" 
                       TickFrequency="1" TickPlacement="BottomRight" IsSnapToTickEnabled="True"   
                       IsSelectionRangeEnabled="True"   
                       SelectionStart="{TemplateBinding StartHour}"   
                       SelectionEnd="{TemplateBinding EndHour}" 
                       HandlesVisibility="Visible">  
        <telerik:RadSlider.TickTemplate> 
            <DataTemplate> 
                <Grid> 
                    <Grid.RowDefinitions> 
                        <RowDefinition Height="Auto" /> 
                        <RowDefinition Height="Auto" /> 
                    </Grid.RowDefinitions> 
                    <Rectangle Grid.Row="0" Width="2" Height="6" Fill="Black" Margin="0,2,0,0" VerticalAlignment="Top" /> 
                    <TextBlock Grid.Row="1" Text="{Binding Converter={StaticResource TODTickLabelConverter}}" FontSize="8" Foreground="Black" /> 
                </Grid> 
            </DataTemplate> 
        </telerik:RadSlider.TickTemplate> 
    </telerik:RadSlider> 
     

     

    And here is the code-behind that defines the converter:

     

        public class TODTickLabelConverter : IValueConverter  
        {  
            public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)  
            {  
                double hour = (double)value;  
     
                if (hour % 24 == 0)  
                {  
                    return "Midnight";  
                }  
                else if (hour % 12 == 0)  
                {  
                    return "Noon";  
                }  
                else if (hour % 2 != 0)  
                {  
                    // Must return a SPACE here, or the tick mark will not be aligned with those that have a time string.  
                    // Do not return "".  
                    return " ";  
                }  
                else if (hour < 12)  
                {  
                    return hour.ToString() + ":00";  
                }  
                else  
                {  
                    hour -12;  
                    return hour.ToString() + ":00";  
                }  
            }  
     
            public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)  
            {  
                throw new NotSupportedException();  
            }  
        }  
     

    Note that I return the value as a string, so that I can format it any way I want.  In my code, I set the tick marks to the hour of the day, and I only label every other tick mark.  I also convert midnight and noon.

    Hope this helps.
  7. Eric
    Eric avatar
    3 posts
    Member since:
    Feb 2009

    Posted 23 Feb 2009 Link to this post

    Thanks for the excellent reply! I appreciate the code and xaml.

    I've created a class that implements the IValueConverter interface as you show and included code to call my class but for some reason my class is never being called.

    Do I need to add anything in the xmlns tags at the top of the page for it to find my class? (sorry for my lack of knowledge . .i'm very new to silverlight)

    Thank you,

    Eric Padelford
  8. Eric
    Eric avatar
    3 posts
    Member since:
    Feb 2009

    Posted 23 Feb 2009 Link to this post

    Also, some of the values along my slider are pretty close together. Do you know if there is a way I could stagger the height of my rectangle object so that if values are right next to each other they are still legible?


  9. GEB
    GEB avatar
    228 posts
    Member since:
    Dec 2008

    Posted 23 Feb 2009 Link to this post

    The only two things that I can think of is that I had to declare the converter as a resource:

    <Grid.Resources> 
         <local:TODTickLabelConverter x:Key="TODTickLabelConverter" /> 
    </Grid.Resources> 
     

    I declared it at the container (Grid) level, but you can declare it all the way up to the UserControl if you like.

    And, I had to declare my namespace, which is why you see the 'local' label.  Here is an example:

    xmlns:local="clr-namespace:MyControls;assembly=MyControls">  
     

    Hope this helps.  There are also some really good examples of using converters on various web sites.  I just had to determine how to use them with the slider control.
  10. GEB
    GEB avatar
    228 posts
    Member since:
    Dec 2008

    Posted 23 Feb 2009 Link to this post

    You should be able to define the tickmark container any way you choose.  All you have to do is define a DataTemplate like I did for my example:

    <DataTemplate> 
      <Grid> 
        <Grid.RowDefinitions> 
          <RowDefinition Height="Auto" /> 
          <RowDefinition Height="Auto" /> 
        </Grid.RowDefinitions> 
        <Rectangle Grid.Row="0" Width="2" Height="6" Fill="Black" Margin="0,2,0,0" VerticalAlignment="Top" /> 
        <TextBlock Grid.Row="1" Text="{Binding Converter={StaticResource TODTickLabelConverter}}" FontSize="8" Foreground="Black" /> 
      </Grid> 
    </DataTemplate> 
     

    In this example, every tick mark is described by a Grid.  I could have just a easily used a StackPanel or any other container.  You can then use this container to stagger the ticks at various vertical positions so that they do not overlap.  Again, hope this helps
Back to Top
DevCraft banner