Question

I am using a wpf slider to display the time line in a video player. I need to add an ItemControl of some sort on top of this so that I can add buttons on the time line on certain positions in the time line (the buttons will hold their own position relative to the parent ItemsControl).

What ItemsControl container should I use where I can add child elements that know their own position (based on their timecode)? I have looked at the different ItemsControls in Wpf, and it looks like all of them have a certain way to stack their children (Horizontal or vertical one after another)!

And to add some more complexity, How can the positioning of the children be relative to the width of the parent ItemsControl? This way scaling up and down the ItemsContol will reposition the children!

Answer 1

The WPF control that allows explicit positioning is the Canvas. You can then set Canvas.Left and Canvas.Top on child controls as necessary.

You can make an ItemControl use a Canvas for layout like this:

<ItemsControl>
  <ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
      <Canvas IsItemsHost="True" />
    </ItemsPanelTemplate>
  </ItemsControl.ItemsPanel>
</ItemsControl>

Edit: missed the resizing…

If you use a ViewBox around the ItemsControl the content will automatically resize, but the items themselves will also get larger. If that’s not suitable then I think you’ll have to manually reposition the controls, since the Canvas doesn’t allow that kind of positioning.