Overlapping Timeline Items and ZIndex

2 posts, 1 answers
  1. Josh Eastburn
    Josh Eastburn avatar
    32 posts
    Member since:
    Aug 2012

    Posted 11 Jan 2013 Link to this post

    There is an existing thread here that talks about Timeline items overlapping when zoomed out.
    In my scenario, I am using icons/images to represent items on the timeline and even at the most zoomed-in level, there is some overlap.  It seems like items are layered based on the StartTime of the items, but is there a way to get the ZIndex set in the ItemTemplate to take priority for ordering?
    I would like certain types of data to always show at the top, but this doesn't currently work even if the ZIndex is set higher than an item that starts immediately after it.

  2. Answer
    Tsvetie avatar
    1517 posts

    Posted 16 Jan 2013 Link to this post

    Hi Josh,

    Indeed, the task is not as trivial as you would expect. The reason for that is because you have to apply the custom ZIndex to the ContentPresenter that wraps your custom icons/images. You can use the following approach in order to do this:
    1. Add a property in your model MyZIndex that will contain the ZIndex for the timeline item.
    2. Apply it to the ContentPresenters, wrapping the timeline items, using the following implicit style: 
      <Style TargetType="ContentPresenter">
          <Setter Property="Canvas.ZIndex" Value="{Binding DataItem.MyZIndex}" />

    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Back to Top