Remove white gap between items

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

    Posted 20 Oct 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 :
    <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?
  2. Martin
    Admin
    Martin avatar
    1101 posts

    Posted 25 Oct 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" />
    </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!
  3. UI for WPF is Visual Studio 2017 Ready
Back to Top