Remove white gap between items

2 posts, 0 answers
  1. Jean
    Jean avatar
    3 posts
    Member since:
    Sep 2016

    Posted 20 Oct 2016 Link to this post

    I'm trying to use the radtimeline to display the machine state in a period of time.
    For example red item if the machine was stopped and green item if the machine was running.
    I manage to have all items with the right color (green or red) and on the same row of the RadTimeLine control.
    But I have some white gap between successive periods of time. (see screenshot)

    My Xaml is :
               <DataTemplate x:Key="ProductionItemTemplate">
                        <Rectangle Height="50" HorizontalAlignment="Stretch" Fill="Red" Margin="0">
                <DataTemplate x:Key="NonProductionItemTemplate" >
                        <Rectangle Height="50" HorizontalAlignment="Stretch" Fill="Green" Margin="0">
                <local:CustomItemTemplateSelector x:Key="CustomItemTemplateSelector" NonProductionItemTemplate="{StaticResource NonProductionItemTemplate}" ProductionItemTemplate="{StaticResource ProductionItemTemplate}"/>
            <telerik:RadTimeline x:Name="RadTimeline1"   PeriodStart="2016/01/01" PeriodEnd="2016/01/02" StartPath="StartDate" DurationPath="Duration" ItemRowIndexGenerator="{StaticResource NewLineRowIndexGenerator}"  ItemsSource="{Binding Data}" ItemTemplateSelector="{StaticResource CustomItemTemplateSelector}" >
                    <telerik:HourInterval />

    I would like to have a continuous timeline without these white space.
    Is there a workaround for this issue?
  2. Martin Ivanov
    Martin Ivanov avatar
    1408 posts

    Posted 25 Oct 2016 Link to this post

    Hello Jean,

    To resolve this you can move the timeline items with a single pixel on the left. Here is an example in code how to do this:
    <Style TargetType="telerik:TimelineItemControl">
        <Setter Property="Margin" Value="-1 0 0 0" />

    Note that if you are using NoXaml assemblies and implicit styles you will also need to base this style on the default TimelineItemControlStyle. Otherwise, its template will be completely overridden by the new style and nothing will be displayed. 
    <Style TargetType="telerik:TimelineItemControl" BasedOn="{StaticResource TimelineItemControlStyle}">
        <Setter Property="Margin" Value="-1 0 0 0" />
    I hope this helps.

    Telerik by Progress
    Do you need help with upgrading your WPF project? Try the Telerik API Analyzer and share your thoughts!
Back to Top