Skip to content

Timeline.md

Latest commit

 

History

History
98 lines (79 loc) · 3.43 KB

Timeline.md

File metadata and controls

98 lines (79 loc) · 3.43 KB

Timeline / TimelineItem

Displays a vertical sequence of events along a connecting axis line. Supports four layout modes, custom icons, and five severity types.

Basic usage

<Timeline>
    <TimelineItem Header="Project started"
                  Content="Initial commit pushed to repository."
                  Time="{x:Static sys:DateTime.Now}" />

    <TimelineItem Header="Beta release"
                  Content="First public beta available for testing."
                  Type="Success" />

    <TimelineItem Header="Critical bug found"
                  Content="Memory leak in the rendering pipeline."
                  Type="Error" />
</Timeline>

Timeline properties

Property Type Default Description
Mode TimelineDisplayMode Left How items are positioned relative to the axis
TimeFormat string? "yyyy-MM-dd HH:mm:ss" Format string applied to each item's Time
IconMemberBinding BindingBase? — Binding path for the icon when using ItemsSource
HeaderMemberBinding BindingBase? — Binding path for the header
ContentMemberBinding BindingBase? — Binding path for the content
TimeMemberBinding BindingBase? — Binding path for the timestamp
IconTemplate IDataTemplate? — Data template for the icon node
DescriptionTemplate IDataTemplate? — Data template for the content area

TimelineDisplayMode values

Value Description
Left Content on the right, axis on the left
Right Content on the left, axis on the right
Center Axis in the center, time on the left, content on the right
Alternate Items alternate left/right of the axis

TimelineItem properties

Property Type Default Description
Header object? — Title shown above the content
Content object? — Body content of the event
Time DateTime — Timestamp displayed next to the item
TimeFormat string? inherited Override the format string for this item
Type TimelineItemType Default Visual severity / style of the icon node
Position TimelineItemPosition Left Overrides the item's position (set automatically by Timeline.Mode)
Icon object? — Custom icon content for the axis node
IconTemplate IDataTemplate? — Data template for the icon

TimelineItemType values

Value Description
Default Neutral dot
Success Green checkmark
Warning Yellow warning
Error Red error
Info Blue info

Data-bound timeline

<Timeline ItemsSource="{Binding Events}"
          Mode="Alternate"
          HeaderMemberBinding="{Binding Title}"
          ContentMemberBinding="{Binding Description}"
          TimeMemberBinding="{Binding OccurredAt}"
          TimeFormat="MMM d, yyyy" />

Custom icon

<TimelineItem Header="Deployed">
    <TimelineItem.Icon>
        <PathIcon Data="{DynamicResource RocketRegular}"
                  Width="14" Height="14" />
    </TimelineItem.Icon>
</TimelineItem>

Center mode with timestamps

<Timeline Mode="Center" TimeFormat="HH:mm">
    <TimelineItem Header="Login"    Time="2024-01-15T09:00:00" />
    <TimelineItem Header="Purchase" Time="2024-01-15T09:14:32" Type="Success" />
    <TimelineItem Header="Logout"   Time="2024-01-15T09:45:00" />
</Timeline>