Timeline DataTemplate and ItemTemplateSelector

[Chris]

Hi,

I am very new to silverlight and C#... So excuse my ignorance.

I have worked through the example codes for the Customizing Items in the documentation. I have looked also throught the demo site. The control seems very configurable.

What i am after is to be able to change the colour of the TimelineInstantItemTemplate by binding it to my ItemSource data.

i.e. If item.Name = "Chris" then Color.Blue else Color.Red etc.

Any ideas? Some code would be great.

Thanks,

Chris

[Petar Kirov]

Hi Chris,
In order to set the colour of the InstantItemTemplate based on the item.Name you have created a custom IValueConverter. You said that you are new to Silverlight and C#, so I would recommend reading this article.

I will demonstrate an example implementation:

1. Create a class that implements IValueConverter:
2. Create an instance of the UserControl.Resources
3. Bind the Fill of the TimeLineInstantItemTemplate to your DataItem.Name

First the IValue Converter:

public class NameToColorConverter : IValueConverter
{
    public object Convert(object value, Type targetType,
        object parameter, System.Globalization.CultureInfo culture)
    {
        string input = value as string;
        SolidColorBrush resultColor;

        switch (input)
        {
            case "Chris":
            {
                //Blue Color
                resultColor =
                new SolidColorBrush(Color.FromArgb(255, 0, 0, 255));
                return resultColor;
            }

            default:
            {
                //Red Color
                resultColor =
                 new SolidColorBrush(Color.FromArgb(255, 255, 0, 0));
                return resultColor;
            }
        }
    }

    public object ConvertBack(object value, Type targetType,
        object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Second the instance object of that class:

<UserControl x:Class="SLApp.MainPage"
    ...
    xmlns:local="clr-namespace:SLApp"
    ...
    >
    <UserControl.Resources>
        <local:NameToColorConverter x:Key="nameToColorConverter" />
        ...

Third the DataTemplate for the TimelineInstantItemTemplate:

<DataTemplate x:Key="instantItemTemplate">
    <Border Width="10" Height="10" Margin="0,0,0,5">
        <Rectangle Height="7"
            Width="7"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Fill="{Binding DataItem.Name,
                Converter={StaticResource nameToColorConverter}}">
        </Rectangle>
    </Border>
</DataTemplate>
</UserControl.Resources>

And finally don't forget to tell the RadTimeLine to use the template:

<telerik:RadTimeline
        ...
        TimelineInstantItemTemplate="{StaticResource instantItemTemplate}">
        ...
</telerik:RadTimeline>

Greetings,
Petar Kirov
the Telerik team

[Mike]

I want to specify the color of any timeline (line from start to end date, like in the demo) on the Timeline control. How can I do it? By a DataTemplate with color binding (a property of an item)? But frankly - I don't know how to define a DataTemplate for these lines.

[Petar Marchev]

Hello Mike,

It seems that the entity of your question is different than the one in this forum post so I will ask that you open a new thread in which you provide a link to the demo in mind and include a snapshot of the results that you are after.

Greetings,
Petar Marchev
the Telerik team