WPF Binding to specific items in collection

Question

I'm currently trying to bind to certain items in a collection in wpf. This is best explained by an example.

My XAML is below:

<Canvas Name="TaskCanvas" Width="467.667" Height="414">
  <Ellipse Name="myElipse" Fill="White" Stroke="Black" Width="126" Height="76"
           Canvas.Left="{Binding Path=XPos}" Canvas.Top="{Binding Path=YPos}" />
</Canvas>       

Now as you can see i am just binding to the properties as a simple example of the ellipse to position it on the x and y axis from my data source.

I have c# code in the window_load event to bind my datasource to my ellipse as shown below:

PosClass posclass = new PosClass();
List<PosClass> posClasses = new List<PosClass>();

posclass.YPos = 100;
posclass.XPos= 100;            
posClasses.Add(posclass);

posclass.YPos = 0;
posclass.XPos = 0;
posClasses.Add(posclass);

TaskCanvas.DataContext = posClasses;

Now I did a binding to the canvas cotainer from my collection. The PosClass is a simple class with two properties being 'XPos' and 'YPos'.

When i run the code set my ellipse is correctly bound to the datasource which is great but as the ellipse is not set to take an exact row from the collection it by default takes the last row so setting my ellipse to 0,0 position.

What I want to be able to do is set the ellipse to use the first item in the collection attached in XAML or if i had more items lets say the 10th item. Again i want to do this in XAML so currently i just have the binding to the X and Y positions, is there some sort of syntax that lets me also specify which row in the collection to use?

Answer 1

You can specify which item you want to bind to using brackets :

<Ellipse Name="myElipse" Fill="White" Stroke="Black" Width="126" Height="76" Canvas.Left="{Binding Path=[10].XPos}" Canvas.Top="{Binding Path=[10].YPos}"/>

If you want to bind all items in the collections, you need to use an ItemsControl with an ItemTemplate and ItemsPanel :

<ItemsControl>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <Ellipse Name="myElipse" Fill="White" Stroke="Black" Width="126" Height="76" Canvas.Left="{Binding Path=XPos}" Canvas.Top="{Binding Path=YPos}"/>
    </ItemsControl.ItemTemplate>
</ItemsContol>