Question regarding tick labels

[GEB]

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.

 

[GEB]

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?

[GEB]

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.

[Eric]

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.

[GEB]

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.

[Eric]

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

[Eric]

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?

[GEB]

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.

[GEB]

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