This is a migrated thread and some comments may be shown as answers.

Remove white gap between items

1 Answer 253 Views
TimeLine
This is a migrated thread and some comments may be shown as answers.
Jean
Top achievements
Rank 1
Jean asked on 20 Oct 2016, 04:21 PM
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?

1 Answer, 1 is accepted

Sort by
0
Martin Ivanov
Telerik team
answered on 25 Oct 2016, 10:33 AM
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
Do you need help with upgrading your WPF project? Try the Telerik API Analyzer and share your thoughts!
Tags
TimeLine
Asked by
Jean
Top achievements
Rank 1
Answers by
Martin Ivanov
Telerik team
Share this question
or