Overlaping items

3 posts, 1 answers
  1. Amige
    Amige avatar
    44 posts
    Member since:
    Dec 2013

    Posted 06 Mar 2015 Link to this post

    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


  2. Answer
    Martin
    Admin
    Martin avatar
    1101 posts

    Posted 11 Mar 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for WPF is Visual Studio 2017 Ready
  4. Amige
    Amige avatar
    44 posts
    Member since:
    Dec 2013

    Posted 11 Mar 2015 in reply to Martin Link to this post

    Hello Martin,

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

    Regards,

    Alberto
Back to Top