This is a migrated thread and some comments may be shown as answers.

Timeline DataTemplate and ItemTemplateSelector

3 Answers 45 Views
TimeLine
This is a migrated thread and some comments may be shown as answers.
Chris
Top achievements
Rank 1
Chris asked on 17 Jul 2012, 08:47 AM
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

3 Answers, 1 is accepted

Sort by
0
Petar Kirov
Telerik team
answered on 20 Jul 2012, 08:39 AM
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

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

0
Mike
Top achievements
Rank 1
answered on 24 Aug 2012, 12:23 PM
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.
0
Petar Marchev
Telerik team
answered on 29 Aug 2012, 07:16 AM
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

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Tags
TimeLine
Asked by
Chris
Top achievements
Rank 1
Answers by
Petar Kirov
Telerik team
Mike
Top achievements
Rank 1
Petar Marchev
Telerik team
Share this question
or