Overlaping items

[Amige]

Hello,

In my application I have a RadTimeline control which has a custom row index generator like this:

class CustomRowIndexGenerator : IItemRowIndexGenerator
    {
        public void GenerateRowIndexes(List<TimelineRowItem> dataItems)
        {
            foreach(TimelineRowItem item in dataItems)
            {
                if (item.RowIndex > 0)
                    item.RowIndex = 0;
            }
        }
    }

This is because when some items share a time space I want them to overlap and show them in a single row. 

When this occur, the newest item is shown on the top.

I'd like to know if it is possible to show the items in the opposite way, the oldest item on top.

I've attached an image to show my case, first a normal case (no overlap), then a case using the row index generator (overlaping items) and the last one, the case that I'd like to accomplish.

Thanks in advance,

Alberto

[Martin Ivanov]

Hi Amige,

The stack order in the panel that arranges the timeline items is determined by the order in which the items are added in the panel. However, this panel derives from the Panel class and you can use its ZIndex attached property to adjust the timeline item's stack order, but to achieve this you will need to write custom code. A possible approach to do this is through a custom attached property on the timeline control. Here is an example:

public class TimelineUtilities
{
    public static int GetItemZIndex(DependencyObject obj)
    {
        return (int)obj.GetValue(ItemZIndexProperty);
    }

    public static void SetItemZIndex(DependencyObject obj, int value)
    {
        obj.SetValue(ItemZIndexProperty, value);
    }

    public static readonly DependencyProperty ItemZIndexProperty =
        DependencyProperty.RegisterAttached("ItemZIndex", typeof(int), typeof(TimelineUtilities), new PropertyMetadata(0, OnItemZIndexChanged));

    private static void OnItemZIndexChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        var element = d as UIElement;
        if (element != null)
        {
            ContentPresenter parentControl = element.ParentOfType<ContentPresenter>();
            if (parentControl != null)
            {
                Panel.SetZIndex(parentControl, (int)e.NewValue);
            }
        }
    }
}

.

<Window.Resources>
    <Style TargetType="telerik:TimelineItemControl">
        <Setter Property="local:TimelineUtilities.ItemZIndex" Value="{Binding DataItem.ZIndex}" />
    </Style>
</Window.Resources>

Or if you are using the TimelineItemTemplate you can attach the property directly to the UI element in the template.

<telerik:RadTimeline.TimelineItemTemplate>
    <DataTemplate>
        <Border local:TimelineUtilities.ItemZIndex="{Binding DataItem.ZIndex}" />
    </DataTemplate>
</telerik:RadTimeline.TimelineItemTemplate>

I also attached a sample project demonstrating this implementation. Please give it a try and let me know if it works for you.

Regards,
Martin
Telerik

 

 

[Amige]

Hello Martin,

Thanks for your help, that's what I was looking for.

Regards,

Alberto