Remove white gap between items

[Jean]

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 :

<Grid.Resources>
           <DataTemplate x:Key="ProductionItemTemplate">
                    <Rectangle Height="50" HorizontalAlignment="Stretch" Fill="Red" Margin="0">
                    </Rectangle>
            </DataTemplate>

            <DataTemplate x:Key="NonProductionItemTemplate" >
                    <Rectangle Height="50" HorizontalAlignment="Stretch" Fill="Green" Margin="0">
                   </Rectangle>
            </DataTemplate>
            <local:CustomItemTemplateSelector x:Key="CustomItemTemplateSelector" NonProductionItemTemplate="{StaticResource NonProductionItemTemplate}" ProductionItemTemplate="{StaticResource ProductionItemTemplate}"/>
        </Grid.Resources>


        <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:RadTimeline.Intervals>
                <telerik:HourInterval />
            </telerik:RadTimeline.Intervals>
</telerik:RadTimeline>

I would like to have a continuous timeline without these white space.
Is there a workaround for this issue?

[Martin Ivanov]

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" />
</Style>

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" />
</Style>

I hope this helps.

Regards,
Martin
Telerik by Progress