WPF ItemsControl style with connecting lines like a timeline

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.