Binding Canvas X,Y when used as ItemsControl ItemsPanel - windows-phone-7

Question

I have a canvas and I would love to bind some points there on specified XY location. However, I can't achieve this with ItemsControl. I found some solutions but I guess they are not for Windows Phone.
The XAML I'm using is:
<ItemsControl ItemsSource="{Binding Path=Nodes}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style TargetType="ContentPresenter">
<Setter Property="Canvas.Left" Value="{Binding Path=XPos}" />
<Setter Property="Canvas.Top" Value="{Binding Path=YPos}" />
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>
And I get: "The member "ItemContainerStyle" is not recognized or is not accessible"
How to do that kind of binding in other way? I have name of object, and X/Y values and I want to bind is as a some kind of pushpin

Answer 1

I encountered the same issue but solved it using a TriggerAction instead. You can use the System.Windows.Interactivity if you have the Blend SDK. The dll is located in
c:\Program Files\Microsoft SDKs\Expression\Blend\Silverlight\v4.0\Libraries\
System.Windows.Interactivity.dll`
Then, by using your previous xaml code I can set the datatemplate as such:
<ItemsControl.ItemTemplate>
<DataTemplate>
<Ellipse Stroke="Red" Width="2" Height="2">
<ia:Interaction.Triggers>
<ia:EventTrigger EventName="Loaded">
<tr:SetCanvasPropertiesAction Left="{Binding X}" Top="{Binding Y}" />
</ia:EventTrigger>
</ia:Interaction.Triggers>
</Ellipse>
</DataTemplate>
</ItemsControl.ItemTemplate>
Note the ia:Interaction prefix, from the interactivity dll mentioned before. You load it with
xmlns:ia="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
in the top of your xaml file.
The tr prefix is for including my own class, which looks like this:
using System.Windows;
using System.Windows.Controls;
using System.Windows.Interactivity;
using System.Windows.Media;
namespace Presentation.Triggers {
public class SetCanvasPropertiesAction : TriggerAction<DependencyObject> {
public static readonly DependencyProperty LeftProperty =
DependencyProperty.Register("Left", typeof(double), typeof(SetCanvasPropertiesAction), new PropertyMetadata(default(double)));
public static readonly DependencyProperty TopProperty =
DependencyProperty.Register("Top", typeof(double), typeof(SetCanvasPropertiesAction), new PropertyMetadata(default(double)));
public double Top {
get { return (double)GetValue(TopProperty); }
set { SetValue(TopProperty, value); }
}
public double Left {
get { return (double)GetValue(LeftProperty); }
set { SetValue(LeftProperty, value); }
}
protected override void Invoke(object parameter) {
UIElement presenter = (UIElement)VisualTreeHelper.GetParent(AssociatedObject);
Canvas.SetLeft(presenter, Left);
Canvas.SetTop(presenter, Top);
}
}
}
Two things to note with the Invoke method. The first is AssociatedObject, that gets resolved to the Ellipse since the trigger is nested under it in the xaml. The second thing is the VisualTreeHelper, which gets the parent to the ellipse. This is the ContentPresenter on which we want to set the attached properties of the canvas.
It might look like it's more complicated, but as with everything else in mvvm, you can reuse it in xaml and you don't have to copy and paste code-behind code everywhere.

Answer 2

Finally I did it in C# only using foreach.
foreach (var InsidePoints in _inside)
{
double left = InsidePoints.xaxis * Layer_3.Width;
double top = InsidePoints.yaxis * Layer_3.Height;
Image pinImage = new Image();
pinImage.Name = InsidePoints.id.ToString();
pinImage.Source = (ImageSource)new ImageSourceConverter().ConvertFromString("icons/inside_pin.png");
pinImage.Tap += new EventHandler<System.Windows.Input.GestureEventArgs>(pinImage_Tap);
//pinImage.Hold += new EventHandler<System.Windows.Input.GestureEventArgs>(pinImage_Hold);
Layer_3.Children.Add(pinImage);
Canvas.SetLeft(pinImage, left);
Canvas.SetTop(pinImage, top);
}