Instant Item Height

3 posts, 1 answers
  1. Wolfgang
    Wolfgang avatar
    8 posts
    Member since:
    Oct 2011

    Posted 09 Sep 2013 Link to this post

    Dear support,

    I have the problem, that I want to set the instantitem height to the actualheight of the timeline.
    The problem is that if the instantitem height extends the height of the 'normal' items, my timeline extends it's height -> can see it on the vertical scrollbar.
    Is there a way to set the instant item height to the actual height of the timeline? 
    The reason is that we want to see the instant items even when the user scrolls down.
    I have attached an image with the desired behavior.

    You can test the the bevavior with that small piece of code:

            <DataTemplate x:Key="InstantItemTemplate">
                <Rectangle Width="7" Height="{Binding ElementName=slider1, Path=Value}" Fill="Red" />
            <DataTemplate x:Key="ItemWithDurationTemplate">
                    <Rectangle Margin="0, 0, 0, 5" Height="20" VerticalAlignment="Center" Fill="Green"/>
        <DockPanel LastChildFill="True">
            <StackPanel DockPanel.Dock="Top">
                <StackPanel Orientation="Horizontal">
                    <Slider Minimum="1" Maximum="1500" Value="{Binding ElementName=sliderTextBox, Path=Text, Mode=TwoWay}" TickFrequency="1" Name="slider1" Width="600" />
                    <TextBox Name="sliderTextBox" Text="{Binding ElementName=slider1, Path=Value}" />
                <TextBlock Text="{Binding ElementName=slider1, Path=Value}" FontSize="20" FontWeight="Bold" Height="25" HorizontalAlignment="Center" />
            <telerik:RadTimeline x:Name="timeline"
                    PeriodStart="2011/01/01" PeriodEnd="2011/06/01"
                    VisiblePeriodStart="2011/01/01" VisiblePeriodEnd="2011/03/22"
                    TimelineItemTemplate="{StaticResource ItemWithDurationTemplate}"
                    TimelineInstantItemTemplate="{StaticResource InstantItemTemplate}">
                    <telerik:DayInterval />
                    <telerik:WeekInterval />
                    <telerik:MonthInterval />
                    <telerik:YearInterval />

    using System;
    using System.Collections.Generic;
    using System.Windows;
    namespace WpfApplication1
        /// <summary>
        /// Interaction logic for MainWindow.xaml
        /// </summary>
        public partial class MainWindow : Window
            private List<Item> dataSource;
            private DateTime startDate;
            public MainWindow()
                dataSource = new List<Item>();
                startDate = new DateTime(2011, 1, 1);
                var endDate = new DateTime(2011, 6, 1);
                Random r = new Random();
                for (DateTime i = startDate; i < endDate; i = i.AddMonths(1))
                    for (int j = 0; j < 20; j++)
                        dataSource.Add(new Item() { Date = i, Duration = TimeSpan.FromDays(r.Next(50, 100)) });
                dataSource.Add(new Item() { Date = startDate.AddMonths(3).AddDays(15) });
                timeline.ItemsSource = dataSource;
                timeline.VisiblePeriodStart = startDate.AddDays(20);
                timeline.VisiblePeriodEnd = endDate.AddDays(-20);
        public class Item
            public TimeSpan Duration { get; set; }
            public DateTime Date { get; set; }

  2. Answer
    Petar Kirov
    Petar Kirov avatar
    425 posts

    Posted 12 Sep 2013 Link to this post

    Hi Wolfgang,

    1. To make an instant item to cover vertically  the whole view port, you can bind its height to the ActualHeight of the panel that holds the Timeline items - the VirtualizingTimelinePanel.

    2. To make the height of the item irrelevant to the calculation of the VirtualizingTimelinePanel height, just put them inside a Canvas with height = 0.

    I have modified your code accordingly:

    <DataTemplate x:Key="InstantItemTemplate">
        <Canvas Height="0">
            <Rectangle Width="7" Height="{Binding ActualHeight, RelativeSource={RelativeSource AncestorType=telerik:VirtualizingTimelinePanel}}" Fill="Red" />

    I hope this helps.

    On a side note, in case you need a faster response, please start a new support ticket as it gets higher priority than Forum posts. Regards,
    Petar Kirov
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  3. Wolfgang
    Wolfgang avatar
    8 posts
    Member since:
    Oct 2011

    Posted 13 Sep 2013 Link to this post

    Worked fine! 
    Thank you very much!

Back to Top