Timeline days seperation

2 posts, 0 answers
  1. Jeffrey
    Jeffrey avatar
    5 posts
    Member since:
    Sep 2012

    Posted 14 Jul 2011 Link to this post


    I'm using the timelineview and I want to make the difference between the days clear, I thought doing this by give the line between the days another color, but I don't know how to do that. I already tried to chance the VerticalLineStyle, but this chances the color of every line. Is there a way to do this for only the lines between the days? If not, is there another way to make the difference between each day clearer.

    <SolidColorBrush x:Key="TimeRulerLineStroke" Color="#68C0ED" />
    <Style x:Key="TimeRulerLineBaseStyle" TargetType="schedule:TimeRulerLine">
        <Setter Property="BorderBrush" Value="{StaticResource TimeRulerLineStroke}" />

        <Style TargetType="schedule:TimeRulerLine" BasedOn="{StaticResource TimeRulerLineBaseStyle}" />

    Best regards,

  2. Dani
    Dani avatar
    848 posts

    Posted 15 Jul 2011 Link to this post

    Hello Jeffrey,

    The day headers in timeline view are part of the TimeRulerItemStyleSelector. So are the minor and major ticks. And so are the vertical lines. There are no borders corresponding only to the day headers, however.

    To create vertical lines that can have a different brush for the days only, you need a custom TimeRulerItemStyleSelector.

    In that selector you can get the datetime data that comes with each vertical line, and provide a custom style for the timeruler line when the line marks the start of a day - i.e. 12:00 AM.

    Such a selector would look something like this:
    public override Style SelectStyle(object item, DependencyObject container, ViewDefinitionBase activeViewDeifinition)
               if (container is TimeRulerLine)
                   TickData tick = item as TickData;
                   if (tick.DateTime == tick.DateTime.Date)
                       return DayLineStyle;
                   return MinorTickLineStyle;
               return base.SelectStyle(item, container, activeViewDeifinition);

    You will also need to customize the day headers themselves to match the style applied to the vertical lines. The style to do that is TimeRulerGroupItemStyle, which is a part of the TimeRulerItemStyleSelector.

    Also check this online help article related to customizing the time ruler items.

    I hope this helps.

    the Telerik team

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

Back to Top