如何将单个控件实例添加到ItemsPanelTemplate？

Question

In my project, I have an ItemsControl which has as its ItemsPanel template a Grid . I would like to add a single control with this grid, completely independent of the ItemsControl 'Items' , which can be accessed in the code-behind. What is the best way to do this?

More detail:

I am implementing a keyframe animation timeline in WPF. I do this by having a set of 'Indicators' which is bound to an ItemsControl; the ItemsControl then positions each of these on a Grid according to their position using the Margin property:

    <DataTemplate x:Key="keyIndicatorTemplate">
        <Border Width="1" Height="1" 
                BorderBrush="Black" Background="Black" BorderThickness="0" 
                HorizontalAlignment="Left" VerticalAlignment="Top"
                Margin="{Binding Converter={StaticResource ResourceKey=keyIndicatorMarginConv}}"
                ></Border>
    </DataTemplate>

This Grid of indicators then automatically sizes to the key frames, and is zoomed and panned using the ItemsControl LayoutTransform property, and the encompassing ScrollViewer:

<Grid>
 <ScrollViewer Name="timelineScrollViewer" Background="LightCyan" HorizontalScrollBarVisibility="Visible">

    <ItemsControl Name="KeyGridPresenter" ItemTemplate="{StaticResource ResourceKey=keyIndicatorTemplate}" >

            <ItemsControl.LayoutTransform>
                <ScaleTransform 
                    ScaleX="{Binding Path=ZoomX, ElementName=TimelineUserControl}" 
                    ScaleY="{Binding Path=ZoomY, ElementName=TimelineUserControl}">
                </ScaleTransform>
            </ItemsControl.LayoutTransform>

                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <Grid Name="KeyGrid">
                        </Grid>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>

     </ItemsControl>

 </ScrollViewer>
</Grid>

I would like to add a semi-transparent 'highlighter/caret' which the user controls with the mouse, but since this design is based on the grid being an abstract 'surface' which the ItemsControl and ScrollViewer provide a 'window' to, I need to add the control in such a way that the transforms of the containers apply to it (ie a sibling or child of the grid)

How can I modify my ItemsTemplate , so that it instantiates a single control (border/rectangle/etc), independent of the Items?

Answer 1

You cannot modify the children of a panel being used as the ItemsPanelTemplate

What I usually do instead is put both the ItemsControl and the overlay control in an panel that allows its children to overlap, such as a Grid

For example,

<ScrollViewer Name="timelineScrollViewer" ...>
    <Grid>

        <ItemsControl Name="KeyGridPresenter" ... >

        </ItemsControl>

        <Grid x:Name="SomethingDrawnOnTopOfItemsControl">
            ...
        </Grid>

    </Grid>
 </ScrollViewer>