RowIndex for Instant items not respecting TimeLineItemTemplate on Duration items

2 posts, 0 answers
  1. Rajinder
    Rajinder avatar
    6 posts
    Member since:
    Dec 2012

    Posted 08 Apr 2015 Link to this post

    Perhaps I am going about this the wrong way.  My timeline contains both items with a duration and items that are an instant in time.   E.g. the duration items represent a project, and the instants are milestones in the project.   I need to associate a duration with it's instants visually, so I am using the RowIndex to place them on the same row. 

    It worked fine until I introduced a TimeLineItemTemplate (below) which has a height greater than the default duration item height.   The duration items appear as expected , but the instant items appear in their original vertical position.

    I'm running the SDK samples browser's TimeLineItemRowIndex project, with the modifications mentioned above.

    ​I've attached an image that shows the timeline with and without the template.   



    <DataTemplate x:Key="TimelineWithDurationTemplate">
        <Border >
                    <RowDefinition Height ="Auto"/>
                    <RowDefinition Height="Auto" />
                <TextBlock Grid.Row="1" Text="{Binding DataItem.Title}" Margin="0,4,0,0"/>
                <Rectangle Grid.Row="0" Height="7" VerticalAlignment="Center" Fill="BlueViolet"/>

  2. Petar Marchev
    Petar Marchev avatar
    968 posts

    Posted 13 Apr 2015 Link to this post

    Hello Rajinder,

    Thank you for the provided snapshot and xaml.

    All items in the timeline need to have the same height in order for the items to be properly positioned. This is a limitation of the timeline control. The vertical position of an element is determined by its row-index and its height, where the timeline assumes that all items (rows) have the same height. We suggest that you use a template with a fixed height in order to resolve this.

    Let us know if you have any other questions.

    Petar Marchev

    See What's Next in App Development. Register for TelerikNEXT.

  3. DevCraft banner
Back to Top