Instant Item Height

[Wolfgang]

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:

XAML

<Window

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

    x:Class="WpfApplication1.MainWindow"

    x:Name="Window"

    Title="MainWindow">

    <Window.Resources>

        <DataTemplate x:Key="InstantItemTemplate">

            <Rectangle Width="7" Height="{Binding ElementName=slider1, Path=Value}" Fill="Red" />

        </DataTemplate>

 

        <DataTemplate x:Key="ItemWithDurationTemplate">

                <Rectangle Margin="0, 0, 0, 5" Height="20" VerticalAlignment="Center" Fill="Green"/>

        </DataTemplate>

    </Window.Resources>

    <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}" />

            </StackPanel>

            <TextBlock Text="{Binding ElementName=slider1, Path=Value}" FontSize="20" FontWeight="Bold" Height="25" HorizontalAlignment="Center" />

        </StackPanel>

        <telerik:RadTimeline x:Name="timeline"

                Margin="6"

                VerticalAlignment="Top"

                PeriodStart="2011/01/01" PeriodEnd="2011/06/01"

                VisiblePeriodStart="2011/01/01" VisiblePeriodEnd="2011/03/22"

                StartPath="Date"

                DurationPath="Duration"

                VerticalScrollBarVisibility="Auto"

                TimelineItemTemplate="{StaticResource ItemWithDurationTemplate}"

                TimelineInstantItemTemplate="{StaticResource InstantItemTemplate}">

            <telerik:RadTimeline.Intervals>

                <telerik:DayInterval />

                <telerik:WeekInterval />

                <telerik:MonthInterval />

                <telerik:YearInterval />

            </telerik:RadTimeline.Intervals>

        </telerik:RadTimeline>

    </DockPanel>

</Window>



CS

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()
        {
            InitializeComponent();

            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; }
    }
}

Regards,
Wolfgang

[Petar Kirov]

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" />
    </Canvas>
</DataTemplate>

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
Telerik

[Wolfgang]

Worked fine! 
Thank you very much!

Regards,
Wolfgang