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"/>
<Style x:Key="LegendStyle1" TargetType="igTimeline:Legend">
<Setter Property="Visibility" Value="Hidden"/>
<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 x:Key="EventTitleStyle1" TargetType="igTimeline:EventTitle">
<Setter Property="Visibility" Value="Hidden" />
<Style x:Key="TimelineStyle1" TargetType="igTimeline:XamWebTimeline">
<Style x:Key="SceneStyle1" TargetType="igTimeline:Scene">
<Setter Property="Background" Value="White"/>
<ControlTemplate TargetType="igTimeline:Scene">
<igTimeline:GridArea x:Name="GridAreaElement" />
<Grid Style="{TemplateBinding SceneGridStyle}">
<Grid.RowDefinitions>
<RowDefinition Height="0" />
<RowDefinition Height="Auto" />
<!--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" />
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White" Height="245">
<RowDefinition Height="245*" />
<igControls:XamWebZoombar Background="White" x:Name="Zoombar" ZoomChanged="Zoombar_ZoomChanged" Margin="0,0,44,15" Height="41" VerticalAlignment="Bottom">
</igControls:XamWebZoombar>
</UserControl>
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; } }}
Thank You. I modified my code little bit, because observed some problem on applying Static Resource styles on control creation, So moved code from contructor to Load event. Now all the styles are applying.
And getting another issues, I have to show the gridlines for the Timelines.
If I set ShowMinorGridLines = true and set the timeline1.Axis.MajorGridLineStyle = (Style)this.Resources["MajorGridLineStyle1"];, System is hanging up. Do you have any idea on this.
Thanks,
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.
And Also trying to apply styles(Changed Background etc) to the Zoombar that is in xaml, not able apply. Is there any way that I can hide the Zoombar Scroll button.