WPF ItemsControl style with connecting lines like a timeline - xaml

Question

I'm trying to design an ItemsControl with a timeline that shows the sub items connected with arrows/lines.
The items are custom controls, and i'd like to connect the lines to the control's borders.
What's the best way to approach this?

Answer 1

Ok so this is the code for the Itemscontrol:
<ItemsControl DataContext="{StaticResource StratCol1}" ItemsSource="{Binding}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
This is the items collection:
<ctrl:StrategyCollection x:Key="StratCol1" >
<ctrl:StrategyNode Height="150" Width="Auto" Title="Title A" StrategyParameter="{StaticResource dpara}" Period="All year" IsChecked="False"/>
<ctrl:StrategyNode Height="150" Width="Auto" Title="Title B" StrategyParameter="{StaticResource dpara}" Period="3 Months" IsChecked="False" />
</ctrl:StrategyCollection>
And this is the style of the items:
<Style TargetType="{x:Type ctrl:StrategyNode}">
<Setter Property="SnapsToDevicePixels"
Value="true" />
<Setter Property="OverridesDefaultStyle"
Value="true" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ctrl:StrategyNode}">
<ControlTemplate.Resources>
</ControlTemplate.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Duration="0" Storyboard.TargetName="xBorderBrush"
Storyboard.TargetProperty="Color" To="{StaticResource ControlMouseOverColor}" />
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<ColorAnimation Duration="0" Storyboard.TargetName="xBorderBackground"
Storyboard.TargetProperty="Color" To="{StaticResource ControlCheckedBackColor}" />
<ColorAnimation Duration="0" Storyboard.TargetName="xBorderBrush"
Storyboard.TargetProperty="Color" To="{StaticResource ControlCheckedColor}" />
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked">
<Storyboard>
<ColorAnimation Duration="0" Storyboard.TargetName="xBorderBackground"
Storyboard.TargetProperty="Color" To="Transparent" />
</Storyboard>
</VisualState>
<VisualState x:Name="Indeterminate" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Border" Grid.Column="0" BorderThickness="3" CornerRadius="8" HorizontalAlignment="Stretch" Panel.ZIndex="1" >
<Border.BorderBrush>
<SolidColorBrush x:Name="xBorderBrush" Color="{StaticResource ControlBorderColor}"/>
</Border.BorderBrush>
<Border.Background>
<SolidColorBrush x:Name="xBorderBackground" Color="{StaticResource ControlBackColor}"/>
</Border.Background>
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Border Grid.ColumnSpan="2" Grid.Row="0" CornerRadius="8,8,0,0" Height="18.4" HorizontalAlignment="Stretch" VerticalAlignment="Top" >
<Border.Background>
<SolidColorBrush Color="{StaticResource ControlTitleBackColor}" />
</Border.Background>
<TextBlock Text="{Binding Path=Title, RelativeSource={RelativeSource TemplatedParent}}" Foreground="AliceBlue" FontSize="14" HorizontalAlignment="Stretch" VerticalAlignment="Top" TextAlignment="Center" />
</Border>
<Grid x:Name="ContentGrid" Height="Auto" Grid.Column="1" Grid.Row="1" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Label Content="Period" Grid.ColumnSpan="2"/>
<Label Content="{Binding Path=Period, RelativeSource={RelativeSource TemplatedParent}}" Grid.Column="2" Grid.ColumnSpan="2"/>
<Grid x:Name="ParametersGrid" Grid.Row="1" Grid.ColumnSpan="4" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Label Content="Qos" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3"/>
<Label Content="{Binding Path=Avg_Qos, RelativeSource={RelativeSource TemplatedParent}}" Grid.Row="0" Grid.Column="3"/>
<Label Content="Safty Range" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3"/>
<Label Content="{Binding Path=Avg_SaftyRange, RelativeSource={RelativeSource TemplatedParent}}" Grid.Row="1" Grid.Column="3"/>
<Label Content="TT in days" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3"/>
<Label Content="{Binding Path=Avg_TimeToDeliverInDays, RelativeSource={RelativeSource TemplatedParent}}" Grid.Row="2" Grid.Column="3"/>
</Grid>
</Grid>
</Grid>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Thank you for your help.