TimelinePanel

TimelinePanel is a WPF panel that arranges its children along a timeline. Items are placed along the timeline based on the Date attached property, which is set on each item.

timelinepanel.jpg

        <xctk:TimelinePanel BeginDate="01/01/2007" EndDate="12/31/2007">
            <Image Margin="5,5,5,5" Width="100" xctk:TimelinePanel.Date="02/01/2007" 
                Source="C:\Windows\Web\Wallpaper\Landscapes\img8.jpg" />
            <Image Margin="5,5,5,5" Width="100" xctk:TimelinePanel.Date="03/31/2007" 
                Source="C:\Windows\Web\Wallpaper\Landscapes\img8.jpg" />
            <Image Margin="5,5,5,5" Width="100" xctk:TimelinePanel.Date="07/06/2007" 
                Source="C:\Windows\Web\Wallpaper\Landscapes\img8.jpg" />
            <Image Margin="5,5,5,5" Width="100" xctk:TimelinePanel.Date="10/02/2007" 
                Source="C:\Windows\Web\Wallpaper\Landscapes\img8.jpg" />
        </xctk:TimelinePanel>

UnitSize and UnitTimeSpan

These properties are used to determine how much space (UnitSize, in pixels) is used in the representation of an item on the TimelinePanel by each multiple of a given timespan (UnitTimeSpan). For example, on a TimelinePanel in which UnitSize is set to 5.0 (pixels) and UnitTimeSpan is set to 12 hours, an element that lasts 14 days (336 hours) would be 140 pixels wide:
  • 336 / 12 = 28 intervals of 12 hours
  • 28 * 5 = 140
These properties must be used in conjunction and with valid values for them to work properly.

Properties / Events

Property Description
BeginDate Gets or sets the beginning date of the TimeLinePanel, which corresponds to the beginning or leftmost side of the TimelinePanel. The position of all items in the panel will be calculated relative to this date.
CanHorizontallyScroll Gets or sets a value indicating whether scrolling on the horizontal axis is possible.
CanVerticallyScroll Gets or sets a value indicating whether scrolling on the vertical axis is possible.
DateEnd This attached property can be set on items within the TimelinePanel to determine size allotted to an item within the panel. DateEnd is an optional property. If omitted, the item will need to have an explicit Width set on it. If set on an item, the width of the item will be determined by difference between the DateEnd and the Date property.
EndDate Gets or sets the end date of the TimeLinePanel, which corresponds to the end or rightmost side of the TimelinePanel. The position of all items in the panel will be calculated relative to this date.
ExtentHeight Gets a value that contains the vertical size of the extent.
ExtentWidth Gets a value that contains the horizontal size of the extent.
HorizontalOffset Gets a value that contains the horizontal offset of the scrolled content.
KeepOriginalOrderForOverlap Gets or sets a value indicating whether the original order of the children should be respected when items with the same begin and end date overlap.
Orientation Gets/Sets the orientation of the timeline (Horizontal or Vertical).
OverlapBehavior Gets/Sets the behavior of overlapped items (Stack, Stretch, Hide, None).
ScrollOwner Gets/Sets a value that identifies the container that controls scrolling behavior in the panel.
UnitSize Gets/Sets the unit size (e.g., in pixels) to use in the timeline. Must be used in conjunction with UnitTimeSpan.
UnitTimeSpan Gets/Sets the unit timespan to use in the timeline. Must be used in conjunction with UnitSize.
VerticalOffset Gets the vertical offset of the scrolled content.
ViewportHeight Gets the vertical size of the viewport for this content.
ViewportWidth Gets the horizontal size of the viewport for this content.


Get 50+ awesome WPF controls in the Plus Edition.
---

Last edited May 9, 2013 at 9:52 PM by Kosmatos, version 6

Comments

lego290 May 16, 2013 at 6:05 PM 
Is it possible to make the TimelinePanel respect the MinHeight property of the child elements?

Tobita Jun 19, 2012 at 2:43 PM 
Hello and sorry for my english but is it possible to set the items on a DateTIME and not Date only? It would be great:-)

Gandhar Jun 7, 2012 at 9:32 PM 
How to set the "itemssource" to this element and define the "itemstemplate"?