I have a similar need as described in this post:
https://www.infragistics.com/community/forums/t/49045.aspx
However, I need to display multiple series of EventSpans/Points where each series is stacked. Using the code from the above post and modifying it to use a negative EventSpan control template margin (as I want series to be stacked above the Axis), the stacked series are clipped from the control (I added a grid splitter control to try and dynamically expand the control in a grid, but that does not allow the control to resize and draw all the stacked series either). I need to do this for an arbitrary number of series, and I know I have to calculate margins for the control templates based on the (assuming this capability has not been added as an option since the post above), but how can I expand the area the EventSpans can be drawn in?
<GridSplitter Grid.Row="1" Height="5" HorizontalAlignment="Stretch" />
<Grid Grid.Row="2">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.Resources>
<Style x:Key="ZoombarStyle" TargetType="{x:Type ig:XamZoombar}">
<Setter Property="Visibility" Value="Collapsed"/>
</Style>
<Style x:Key="EventSpan1Style" TargetType="ig:EventSpan">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ig:EventSpan">
<Grid Margin="0,2,0,2">
<Rectangle Margin="0,0,0,0" RadiusX="5" RadiusY="5" Fill="{ TemplateBinding Fill}" Stroke="{ TemplateBinding Stroke}" StrokeThickness="1" Height="10" VerticalAlignment="Top" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style x:Key="EventSpan2Style" TargetType="ig:EventSpan">
<Rectangle Margin="0,-8,0,0" RadiusX="5" RadiusY="5" Fill="{ TemplateBinding Fill}" Stroke="{ TemplateBinding Stroke}" StrokeThickness="1" Height="10" VerticalAlignment="Top" />
</Grid.Resources>
<ig:XamTimeline x:Name="xamTimeline" ZoombarStyle="{StaticResource ZoombarStyle}">
<ig:XamTimeline.Series>
<ig:DateTimeSeries Title="Series 1"
EventSpanStyle="{StaticResource EventSpan1Style}">
<ig:DateTimeSeries.Entries>
<ig:DateTimeEntry Time="07:00 01/01/2000" Duration="3:00" />
<ig:DateTimeEntry Time="12:00 01/01/2000" Duration="2:00" />
</ig:DateTimeSeries.Entries>
</ig:DateTimeSeries>
<ig:DateTimeSeries Title="Series 2" Fill="Red"
EventSpanStyle="{StaticResource EventSpan2Style}">
<ig:DateTimeEntry Time="09:00 01/01/2000" Duration="2:00" />
<ig:DateTimeEntry Time="14:00 01/01/2000" Duration="1:00" />
</ig:XamTimeline.Series>
</ig:XamTimeline>
Hello Gary,
You are correct that you will have to calculate the margins for your EventSpan elements, as this "stacked" behavior has not currently been added to the XamTimeline as a built-in feature.
As far as increasing the area where the EventSpans will be drawn, I would recommend that you do some modifications of the default template for the housing element for your EventSpan elements in this case. To do this, I would recommend going into the XamTimeline default style file named "generic.xaml" commonly found at the following directory:
C:\Program Files (x86)\Infragistics\<your version here>\WPF\DefaultStyles\XamTimeline\
After locating this file, I would recommend that you extract a Style targeting AxisPane and pull it into your project. Inside the ControlTemplate for this AxisPane element will be an AxisEventsPanel element with its Height set to 40. I would recommend that you set this Height to the value that you wish to have the EventSpan plotting area be.
Note, once you do this, this will offset a couple of things. The default VerticalAlignment for the EventSpan elements is "Top" and so by setting the AxisEventsPanel's Height to a higher value, this will push the spans off of your axis a bit. You can fix this by setting the VerticalAlignment property in your EventSpan styles to "Center" and modify the Margin property accordingly to push them just above the actual axis for your XamTimeline.
Another thing that will be displaced is the LabelsPanel in that AxisPane template. This is because it currently has a Grid.Row property set to "1" and so it will appear under the AxisEventsPanel, however big that may be. I would recommend that you remove this setter so that the Grid.Row property defaults to "0," and then set a Margin on it that pushes the labels under the XamTimeline's axis. This should allow you to achieve the behavior you are looking to achieve, along with perhaps a dynamically and programmatically generated Style and ControlTemplate for your EventSpan elements, since you had said that you may not know how many you will necessarily need to plot.
I have attached a modified version of the sample project you provided to demonstrate the above. I hope this helps you.
If you would like to see "stacked" event span plotting included as part of the XamTimeline, I would recommend that you e-mail our product management team at ideas@infragistics.com. Submitting your idea will send it directly to our product management team so that it can be imported into our new ideas community once live: http://ideas.infragistics.com.
Please let me know if you have any other questions or concerns on this matter.
Sincerely,AndrewAssociate Developer
Great, your example helps out a lot. I changed the AxisStyle to dynamically set the height of the AxisEventPanel as
Height="{Binding Path=Height, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ig:TimelineAxis}}}"
instead of hard-coding the value so that I can dynamically calculate and set the height based on the number of event series I have to display at run time by setting the height of the Axis Height in the code behind. I should be able to make a dynamic control out of this example without much issue now.
Thanks!
Thank you for your update on this matter! I am glad that my example helps you to achieve your requirement.
One last hurdle I am battling is that I created a user control to encapsulate these modifications, but I get this build error (presumably because I am some how including two different definitions of the TickMarksPanel some how - I think because I am using other Infragistic controls in the XAML because I get this error even if I use it directly in the XAML?):
Ambiguous type reference. A type named 'TickMarksPanel' occurs in at least two namespaces, 'Infragistics.Controls.Timelines' and 'Infragistics.Controls.Editors'. Consider adjusting the assembly XmlnsDefinition attributes. EnergyEndeavors C:\Projects\VS\MontereyApp\EnergyEndeavors\UI\WPF\Infragistics\StackedTimeLine.xaml 1
My user control XAML looks like:
It sounds like you are likely using our XamSlider control along with the XamTimeline. Both of these controls have references to a "TickMarksPanel," but these two panels work differently. So, by using the xmlns:ig="http://schemas.infragistics.com/xaml" namespace, which encapsulates both the Infragistics.Controls.Editors and Infragistics.Controls.Timelines namespaces, Visual Studio cannot determine which one you actually mean to use.
To work around this, I would recommend defining an explicit namespace definition that points at the XamTimeline assembly, specifically. If you were using version 16.2, this explicit namespace definition could look like the following:
xmlns:igTimeline="clr-namespace:Infragistics.Controls.Timelines;assembly=InfragisticsWPF4.Controls.Timelines.XamTimeline.v16.2"
This will allow you to define the TickMarksPanel like so, which should resolve this error you are seeing:
<igTimeline:TickMarksPanel.... />