Timeline DataTemplate and ItemTemplateSelector

4 posts, 0 answers
  1. Chris
    Chris avatar
    1 posts
    Member since:
    Jun 2012

    Posted 17 Jul 2012 Link to this post

    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
  2. Petar Kirov
    Admin
    Petar Kirov avatar
    425 posts

    Posted 20 Jul 2012 Link to this post

    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.

  3. DevCraft banner
  4. Mike
    Mike avatar
    2 posts
    Member since:
    May 2012

    Posted 24 Aug 2012 Link to this post

    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.
  5. Petar Marchev
    Admin
    Petar Marchev avatar
    968 posts

    Posted 29 Aug 2012 Link to this post

    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.

Back to Top