Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
295
How To Arrange Timelines in Grid
posted

Hi,

Anybody know, how to show Multiple Timeline (Only Axis pane) and arranging all the timelines on the grid 1. row by row 1. some timeline on same row based on timeline axis.

I have generated Timeline controls dynamically thru code and adding them to the grid. I think all these are overlapping, not able to see all of them.

And I want to apply Style to the TimeLine Scene, to make the background white.

 

I have to create multiple timeline, all should control by one Zoombar. All these timeline should arrange Scrollable panel. I have to show only xamWebTimeline Axis pane. Now I am getting whole Timeline panel with border etc. If change the height of TimeLine, the axis pane is not displaying in the available height.

I tried this to hide the bottom & top part http://community.infragistics.com/forums/p/28238/110462.aspx , but not applying. I thought problem may be with "SceneGridStyle", not found the definition.

Below is the xaml & codebehind code.

Thanks In Advance,

Kola

xaml code:

 

 

 <UserControl.Resources>

        <Style x:Key="PaneStyle1" TargetType="igTimeline:Mark">

            <Setter Property="Height" Value="3"/>

            <Setter Property="Stroke" Value="Black"/>

            <Setter Property="Fill" Value="Black"/>

            <Setter Property="VerticalAlignment" Value="Top"/>

         </Style>

        <Style x:Key="MinorTickMarkStyle1" TargetType="igTimeline:Mark">

            <Setter Property="Width" Value="2"/>

            <Setter Property="Height" Value="12"/>

            <Setter Property="Stroke" Value="Black"/>

        </Style>

        <Style x:Key="LegendStyle1" TargetType="igTimeline:Legend">

            <Setter Property="Visibility" Value="Hidden"/>

 

        </Style>

 

        <Style x:Key="EventPointStyle1" TargetType="igTimeline:EventPoint">

            <Setter Property="Width" Value="8" />

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="igTimeline:EventPoint">

                        <Grid>

 

                             <Rectangle Fill="{TemplateBinding Fill}" Stroke="{TemplateBinding Stroke}" Height="15" Width="8"></Rectangle>

                        </Grid>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

        <Style x:Key="EventTitleStyle1" TargetType="igTimeline:EventTitle">

            <Setter Property="Visibility" Value="Hidden" />  

 

        </Style>

        <Style x:Key="TimelineStyle1" TargetType="igTimeline:XamWebTimeline">

            <Setter Property="Visibility" Value="Hidden" />

 

        </Style>       

 

        <Style x:Key="SceneStyle1" TargetType="igTimeline:Scene">

            <Setter Property="Background" Value="White"/>

            <Setter Property="Template">

 

                <Setter.Value>

                    <ControlTemplate TargetType="igTimeline:Scene">

                        <Grid>

                            <igTimeline:GridArea x:Name="GridAreaElement" />

                            <Grid Style="{TemplateBinding SceneGridStyle}">

                                <Grid.RowDefinitions>

                                    <RowDefinition Height="0" />

                                    <RowDefinition Height="Auto" />

                                    <RowDefinition Height="0" />

                                    <!--set the height to 0-->

                                </Grid.RowDefinitions>

                                <igTimeline:SeriesPane x:Name="SeriesPaneTopElement" />

                                <Grid x:Name="AxisPaneElement"  Height="50" Grid.Row="1">  </Grid>

                                <igTimeline:SeriesPane x:Name="SeriesPaneBottomElement" Grid.Row="2" />

                            </Grid>

                        </Grid>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White" Height="245">       

 

        <Grid.RowDefinitions>

            <RowDefinition Height="245*" />

            <RowDefinition Height="0" />

 

        </Grid.RowDefinitions>

 

            <igControls:XamWebZoombar Background="White" x:Name="Zoombar" ZoomChanged="Zoombar_ZoomChanged" Margin="0,0,44,15" Height="41" VerticalAlignment="Bottom">

        </igControls:XamWebZoombar>

    </Grid>

</UserControl>

UserControl CodeBehind:
public partial class TimeLineView : UserControl
    {
        TimelineEntity timeLineEntity = null;
       
        DateTimeAxis axis = null;
        public TimeLineView()
        {
            InitializeComponent();
            LoadData();
            axis = new DateTimeAxis()
            {
                Minimum = timeLineEntity.StartTime,
                Maximum = timeLineEntity.EndTime,
                AutoRange = true,
                Unit = 2,
                UnitType = DateTimeUnitType.Seconds,
                ShowLabels = false,
                ShowMinorGridLines = false,
                ShowMajorTickMarks = false,
                ShowLabelsInPreview = false,
                ShowMinorTickMarks = false,
                ShowThumb = false                
            };
          
            int i = 0;
            foreach (Events eventItem in timeLineEntity.EventList)
            {
                XamWebTimeline timeline1 = new XamWebTimeline();
                DateTimeSeries timeSeries = new DateTimeSeries();
                DateTimeAxis subaxis = new DateTimeAxis()
                {
                    Minimum = eventItem.StartTime,
                    Maximum = eventItem.EndTime,
                    AutoRange = true,
                    Unit = 2,
                    UnitType = DateTimeUnitType.Seconds,
                    ShowLabels = false,
                    ShowMinorGridLines = false,
                    ShowMajorTickMarks = false,
                    ShowLabelsInPreview = false,
                    ShowMinorTickMarks = false,
                    ShowThumb = false
                };
                timeline1.Axis = subaxis;
            
                foreach (DateTime marker in eventItem.Markers)
                {
                    DateTimeEntry entry = new DateTimeEntry();
                    entry.Time = eventItem.Markers[0];
                   
                    entry.Title = "Marker in Event";
                    entry.Details = "";
                    
                    timeSeries.Entries.Add(entry);
                }
               
                timeline1.Series.Add(timeSeries);
                
                i++;
              
                timeline1.VerticalContentAlignment = VerticalAlignment.Top;
                
                this.LayoutRoot.Children.Add(timeline1);
            }
           
           
        }
        private void LoadData()
        {
            timeLineEntity = new TimelineEntity();
            timeLineEntity.StartTime = Convert.ToDateTime("08/01/2009 12:00:00");
            timeLineEntity.EndTime = Convert.ToDateTime("08/11/2009 13:30:00");
            timeLineEntity.Title = "Event Time Line";
            string[] startDate = new string[5];
            startDate[0] = "08/01/2009 12:00:00";
            startDate[1] = "08/01/2009 12:10:00";
            startDate[2] = "08/04/2009 13:30:00";
            startDate[3] = "08/06/2009 06:30:00";
            startDate[4] = "08/08/2009 04:30:00";
            string[] endDate = new string[5];
            endDate[0] = "08/02/2009 13:30:00";
            endDate[1] = "08/04/2009 10:30:00";
            endDate[2] = "08/04/2009 13:40:00";
            endDate[3] = "08/06/2009 07:30:00";
            endDate[4] = "08/08/2009 13:30:00";
            string[] markerstartDate = new string[5];
            markerstartDate[0] = "08/01/2009 13:30:00";
            markerstartDate[1] = "08/03/2009 13:30:00";
            markerstartDate[2] = "08/04/2009 13:35:00";
            markerstartDate[3] = "08/06/2009 06:40:00";
            markerstartDate[4] = "08/08/2009 07:00:10";
            List<Events> eventList = new List<Events>();
            for (int i = 0; i < 5; i++)
            {
                
                Events eventItem = new Events();
                eventItem.Title = "Event #" + (i + 1).ToString() + " Event Type";
                eventItem.StartTime = Convert.ToDateTime(startDate[i]);
                eventItem.EndTime = Convert.ToDateTime(endDate[i]);
                List<DateTime> markers = new List<DateTime>();
                markers.Add(Convert.ToDateTime(markerstartDate[i]));
                eventItem.Markers = markers;
                eventList.Add(eventItem);
                
            }
            timeLineEntity.EventList = eventList;
        }
        private void Zoombar_ZoomChanged(object sender, Infragistics.Silverlight.Controls.ZoomChangedEventArgs e)
        {
            foreach (Control ctrl in LayoutRoot.Children)
            {
                if (ctrl.GetType().Name.Equals("XamWebTimeline"))
                {
                    XamWebTimeline timelineTemp = (XamWebTimeline)ctrl;
                    timelineTemp.Axis.ScrollPosition = e.NewRange.Scroll;
                    timelineTemp.Axis.ScrollScale = e.NewRange.Scale;
                }
            }                   
     
        }
        private void UserControl_Loaded(object sender, RoutedEventArgs e)
        {
            foreach (Control ctrl in LayoutRoot.Children)
            {
                if (ctrl.GetType().Name.Equals("XamWebTimeline"))
                {
                    XamWebTimeline timelineTemp = (XamWebTimeline)ctrl;
                   
                    timelineTemp.Zoombar.Visibility = Visibility.Collapsed;
                    timelineTemp.Axis.PaneStyle = (Style)this.Resources["PaneStyle1"];
                    timelineTemp.Axis.VerticalContentAlignment = VerticalAlignment.Top;
                    timelineTemp.LegendStyle = (Style)this.Resources["LegendStyle1"];
                  
                    timelineTemp.SceneStyle = (Style)this.Resources["SceneStyle1"];
                 
                    foreach (DateTimeSeries series in timelineTemp.Series)
                    {
                       
                        series.EventPointStyle = (Style)this.Resources["EventPointStyle1"];
                        series.EventTitleStyle = (Style)this.Resources["EventTitleStyle1"];
                        series.EventSpanStyle = (Style)this.Resources["EventSpan1Style"];
                    }
                }
            }
            Zoombar.Range.FromScaleScroll(axis.ScrollScale, axis.ScrollPosition);
         
        }
       
    }
    public class TimelineEntity
    {
        public string Title { get; set; }
        public DateTime StartTime { get; set; }
        public DateTime EndTime { get; set; }
        public List<Events> EventList { get; set; }
    }
    public class Events
    {
        public string Title { get; set; }
        public DateTime StartTime { get; set; }
        public DateTime EndTime { get; set; }
        public List<DateTime> Markers { get; set; }
    }
    

 

  • 28496
    Offline posted in reply to Chaitanya

    i didn't see anything named MajorGridLineStyle1 in your original post, so i added one myself.

            <Style x:Key="MajorGridLineStyle1" TargetType="igTimeline:Mark">
                <Setter Property="Width" Value="5"/>
                <Setter Property="Fill" Value="Red"/>
                <Setter Property="Stroke" Value="Blue"/>
            </Style>

    i didn't have any trouble applying this style in C#.

    as for the timeline customization... a lot of the timeline UI is in the ControlTemplate and not tied to control properties... so it is possible to change the look in feel (bgcolor, removing buttons), although it is complex.

    i am attaching the updated sample project with these changes.

    SilverlightApplication35_new.zip
  • 28496
    Suggested Answer
    Offline posted

    i modified your sample project to use a StackPanel inside the first row of the grid, so you can just add timelines to it repeatedly and you should see them all in the end.

    as for making the Scene white, i think you just need to set the timeline's Background property.

    <UserControl x:Class="SilverlightApplication35.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                 xmlns:igTimeline="clr-namespace:Infragistics.Silverlight.Timeline;assembly=Infragistics.Silverlight.DataVisualization.Timeline.v9.2"
                 xmlns:igControls="clr-namespace:Infragistics.Silverlight.Controls;assembly=Infragistics.Silverlight.DataVisualization.Controls.v9.2"
         Loaded="UserControl_Loaded">
        <UserControl.Resources>
            <Style x:Key="PaneStyle1" TargetType="igTimeline:Mark">
                <Setter Property="Height" Value="3"/>
                <Setter Property="Stroke" Value="Black"/>
                <Setter Property="Fill" Value="Black"/>
                <Setter Property="VerticalAlignment" Value="Top"/>
            </Style>
            <Style x:Key="MinorTickMarkStyle1" TargetType="igTimeline:Mark">
                <Setter Property="Width" Value="2"/>
                <Setter Property="Height" Value="12"/>
                <Setter Property="Stroke" Value="Black"/>
            </Style>
            <Style x:Key="LegendStyle1" TargetType="igTimeline:Legend">
                <Setter Property="Visibility" Value="Collapsed"/>
            </Style>
            <Style x:Key="EventPointStyle1" TargetType="igTimeline:EventPoint">
                <Setter Property="Width" Value="8" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="igTimeline:EventPoint">
                            <Grid>
                                <Rectangle Fill="{TemplateBinding Fill}" Stroke="{TemplateBinding Stroke}" Height="15" Width="8"></Rectangle>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
            <Style x:Key="EventTitleStyle1" TargetType="igTimeline:EventTitle">
                <Setter Property="Visibility" Value="Collapsed" />
            </Style>
            <Style x:Key="TimelineStyle1" TargetType="igTimeline:XamWebTimeline">
                <Setter Property="Visibility" Value="Collapsed" />
            </Style>
            <Style x:Key="SceneStyle1" TargetType="igTimeline:Scene">
                <Setter Property="Background" Value="White"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="igTimeline:Scene">
                            <Grid>
                                <igTimeline:GridArea x:Name="GridAreaElement" />
                                <Grid Style="{TemplateBinding SceneGridStyle}">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="0" />
                                        <RowDefinition Height="Auto" />
                                        <RowDefinition Height="0" />
                                        <!--set the height to 0-->
                                    </Grid.RowDefinitions>
                                    <igTimeline:SeriesPane x:Name="SeriesPaneTopElement" />
                                    <Grid x:Name="AxisPaneElement"  Height="50" Grid.Row="1"></Grid>
                                    <igTimeline:SeriesPane x:Name="SeriesPaneBottomElement" Grid.Row="2" />
                                </Grid>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </UserControl.Resources>
        <Grid x:Name="LayoutRoot" Background="White">
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition Height="60" />
            </Grid.RowDefinitions>
            <igControls:XamWebZoombar Background="White" x:Name="Zoombar" ZoomChanged="Zoombar_ZoomChanged" Margin="0,0,44,15" Height="41" VerticalAlignment="Bottom" Grid.Row="1">
            </igControls:XamWebZoombar>
        </Grid>
    </UserControl>

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Net;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Documents;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Animation;
    using System.Windows.Shapes;
    using Infragistics.Silverlight.Timeline;
    using Infragistics.Silverlight.Controls;

    namespace SilverlightApplication35
    {
        public partial class MainPage : UserControl
        {
            TimelineEntity timeLineEntity = null;

            DateTimeAxis axis = null;
            public MainPage()
            {
                InitializeComponent();
                LoadData();
                axis = new DateTimeAxis()
                {
                    Minimum = timeLineEntity.StartTime,
                    Maximum = timeLineEntity.EndTime,
                    AutoRange = true,
                    Unit = 2,
                    UnitType = DateTimeUnitType.Seconds,
                    ShowLabels = false,
                    ShowMinorGridLines = false,
                    ShowMajorTickMarks = false,
                    ShowLabelsInPreview = false,
                    ShowMinorTickMarks = false,
                    ShowThumb = false
                };

                int i = 0;
                StackPanel timeLineStack = new StackPanel();
                foreach (Events eventItem in timeLineEntity.EventList)
                {
                    XamWebTimeline timeline1 = new XamWebTimeline();
                    DateTimeSeries timeSeries = new DateTimeSeries();
                    DateTimeAxis subaxis = new DateTimeAxis()
                    {
                        Minimum = eventItem.StartTime,
                        Maximum = eventItem.EndTime,
                        AutoRange = true,
                        Unit = 2,
                        UnitType = DateTimeUnitType.Seconds,
                        ShowLabels = false,
                        ShowMinorGridLines = false,
                        ShowMajorTickMarks = false,
                        ShowLabelsInPreview = false,
                        ShowMinorTickMarks = false,
                        ShowThumb = false
                    };
                    timeline1.Axis = subaxis;

                    foreach (DateTime marker in eventItem.Markers)
                    {
                        DateTimeEntry entry = new DateTimeEntry();
                        entry.Time = eventItem.Markers[0];

                        entry.Title = "Marker in Event";
                        entry.Details = "";

                        timeSeries.Entries.Add(entry);
                    }

                    timeline1.Series.Add(timeSeries);

                    i++;

                    timeline1.VerticalContentAlignment = VerticalAlignment.Top;

                    timeLineStack.Children.Add(timeline1);
                }
                this.LayoutRoot.Children.Add(timeLineStack);
            }
            private void LoadData()
            {
                timeLineEntity = new TimelineEntity();
                timeLineEntity.StartTime = Convert.ToDateTime("08/01/2009 12:00:00");
                timeLineEntity.EndTime = Convert.ToDateTime("08/11/2009 13:30:00");
                timeLineEntity.Title = "Event Time Line";
                string[] startDate = new string[5];
                startDate[0] = "08/01/2009 12:00:00";
                startDate[1] = "08/01/2009 12:10:00";
                startDate[2] = "08/04/2009 13:30:00";
                startDate[3] = "08/06/2009 06:30:00";
                startDate[4] = "08/08/2009 04:30:00";
                string[] endDate = new string[5];
                endDate[0] = "08/02/2009 13:30:00";
                endDate[1] = "08/04/2009 10:30:00";
                endDate[2] = "08/04/2009 13:40:00";
                endDate[3] = "08/06/2009 07:30:00";
                endDate[4] = "08/08/2009 13:30:00";
                string[] markerstartDate = new string[5];
                markerstartDate[0] = "08/01/2009 13:30:00";
                markerstartDate[1] = "08/03/2009 13:30:00";
                markerstartDate[2] = "08/04/2009 13:35:00";
                markerstartDate[3] = "08/06/2009 06:40:00";
                markerstartDate[4] = "08/08/2009 07:00:10";
                List<Events> eventList = new List<Events>();
                for (int i = 0; i < 5; i++)
                {

                    Events eventItem = new Events();
                    eventItem.Title = "Event #" + (i + 1).ToString() + " Event Type";
                    eventItem.StartTime = Convert.ToDateTime(startDate[i]);
                    eventItem.EndTime = Convert.ToDateTime(endDate[i]);
                    List<DateTime> markers = new List<DateTime>();
                    markers.Add(Convert.ToDateTime(markerstartDate[i]));
                    eventItem.Markers = markers;
                    eventList.Add(eventItem);

                }
                timeLineEntity.EventList = eventList;
            }
            private void Zoombar_ZoomChanged(object sender, ZoomChangedEventArgs e)
            {
                List<XamWebTimeline> timelines = new List<XamWebTimeline>();
                this.GetTimelines(this.LayoutRoot.Children, timelines);
                foreach (XamWebTimeline timeline in timelines)
                {
                    timeline.Axis.ScrollPosition = e.NewRange.Scroll;
                    timeline.Axis.ScrollScale = e.NewRange.Scale;
                }
            }
            private void GetTimelines(UIElementCollection elements, List<XamWebTimeline> result)
            {
                foreach (UIElement ctrl in elements)
                {
                    if (ctrl is XamWebTimeline)
                    {
                        result.Add((XamWebTimeline)ctrl);
                    }
                    else if (ctrl is Panel)
                    {
                        this.GetTimelines(((Panel)ctrl).Children, result);
                    }
                }
            }


            private void UserControl_Loaded(object sender, RoutedEventArgs e)
            {
                List<XamWebTimeline> timelines = new List<XamWebTimeline>();
                this.GetTimelines(this.LayoutRoot.Children, timelines);
                foreach (XamWebTimeline timeline in timelines)
                {
                    timeline.Background = new SolidColorBrush(Colors.White);
                    if (timeline.Zoombar != null)
                    {
                        timeline.Zoombar.Visibility = Visibility.Collapsed;
                    }
                    timeline.Axis.PaneStyle = (Style)this.Resources["PaneStyle1"];
                    timeline.Axis.VerticalContentAlignment = VerticalAlignment.Top;
                    timeline.LegendStyle = (Style)this.Resources["LegendStyle1"];

                    timeline.SceneStyle = (Style)this.Resources["SceneStyle1"];

                    foreach (DateTimeSeries series in timeline.Series)
                    {

                        series.EventPointStyle = (Style)this.Resources["EventPointStyle1"];
                        series.EventTitleStyle = (Style)this.Resources["EventTitleStyle1"];
                        series.EventSpanStyle = (Style)this.Resources["EventSpan1Style"];
                    }
                }

                Zoombar.Range.FromScaleScroll(axis.ScrollScale, axis.ScrollPosition);

            }
        }
        public class TimelineEntity
        {
            public string Title { get; set; }
            public DateTime StartTime { get; set; }
            public DateTime EndTime { get; set; }
            public List<Events> EventList { get; set; }
        }
        public class Events
        {
            public string Title { get; set; }
            public DateTime StartTime { get; set; }
            public DateTime EndTime { get; set; }
            public List<DateTime> Markers { get; set; }
        }
    }

    SilverlightApplication35.zip