Binding Silverlight controls collection to Grid - possible or not? - silverlight

Question

I'm a bit new to Silverlight and now I'm developing a map app. I have a collection of custom controls (map markers, POIs, etc). Every control has a property "Location" of the type Point, where Location.X means Canvas.Left of the control, Location.Ymeans Canvas.Top of the control.
I'm trying to refactor my interface to MVVM pattern. I want to do something like this:
Say my controls are in Canvas. I want to have something like:
<Canvas DataContext="{StaticResource myModel}" ItemsSource="{Binding controlsCollection}">
<Canvas.ItemTemplate> ... </Canvas.ItemTemplate>
</Canvas>
In my custom control I want to have something like:
<myCustomControl DataContext="{StaticResource myControlModel}" Canvas.Left="{Binding Location.X}" Canvas.Top="{Binding Location.Y}" />
Is it possible? Maybe there's a better way?

Answer 1

I would think it is possible to use the ItemsControl control for this.
Let's say you create a holder-control that holds the position of the control + more info that you choose.
I call it "ControlDefinition.cs":
public class ControlDefinition : DependencyObject, INotifyPropertyChanged
{
public static readonly DependencyProperty TopProperty = DependencyProperty.Register("Top", typeof(Double), typeof(ControlDefinition), new PropertyMetadata(0d));
public static readonly DependencyProperty LeftProperty = DependencyProperty.Register("Left", typeof(Double), typeof(ControlDefinition), new PropertyMetadata(0d));
public static readonly DependencyProperty ModelProperty = DependencyProperty.Register("Model", typeof(Object), typeof(ControlDefinition), new PropertyMetadata(null));
public Double Top
{
get { return (Double)GetValue(TopProperty); }
set
{
SetValue(TopProperty, value);
NotifyPropertyChanged("Top");
}
}
public Double Left
{
get { return (Double)GetValue(LeftProperty); }
set
{
SetValue(LeftProperty, value);
NotifyPropertyChanged("Left");
}
}
public Object Model
{
get { return (Object)GetValue(ModelProperty); }
set
{
SetValue(ModelProperty, value);
NotifyPropertyChanged("Model");
}
}
public event PropertyChangedEventHandler PropertyChanged;
private void NotifyPropertyChanged(String aPropertyName)
{
if (PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs(aPropertyName));
}
}
Then, in my MODEL (ViewModel.cs), I create an ObservableCollection of this class:
public static readonly DependencyProperty ControlsProperty = DependencyProperty.Register("Controls", typeof(ObservableCollection<ControlDefinition>), typeof(MainWindow), new PropertyMetadata(null));
public new ObservableCollection<ControlDefinition> Controls
{
get { return (ObservableCollection<ControlDefinition>)GetValue(ControlsProperty); }
set
{
SetValue(ControlsProperty, value);
NotifyPropertyChanged("Controls");
}
}
Then, in the same MODEL, I initialize the collection and adds 4 dummy controls:
this.Controls = new ObservableCollection<ControlDefinition>();
this.Controls.Add(new ControlDefinition() { Top = 10, Left = 10, Model = "One" });
this.Controls.Add(new ControlDefinition() { Top = 50, Left = 10, Model = "Two" });
this.Controls.Add(new ControlDefinition() { Top = 90, Left = 10, Model = "Three" });
And I would have my VIEW (View.xaml) something like this:
<ItemsControl ItemsSource="{Binding Path=Controls}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas Background="Beige" IsItemsHost="True" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=Model, Mode=OneWay}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="Canvas.Top" Value="{Binding Path=Top, Mode=OneWay}" />
<Setter Property="Canvas.Left" Value="{Binding Path=Left, Mode=OneWay}" />
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>
NOTE that I show a "TextBlock" control inside my "DataTemplate", in lack of your control.
And I show the "Model" property (which I have defined as "String") in the TextBlock's "Text" property. You can assign the "Model" property to your control's "DataContext" property as in your example.
Hope it helps!

Answer 2

So, after all times of googling, asking and reading, here I found a solution:
There should be a model implementing INotifyPropertyChanged interface. DependencyProperties are not necessary. Here's an example:
public class MyItemModel: INotifyPropertyChanged
{
// INotifyPropertyChanged implementation
...
//
private Point _location;
public Point Location
{
get { return Location; }
set { _location = value; NotifyPropertyChanged("Location"); }
}
// any other fields
...
//
}
Then, say we have a model with a collection of MyItemModels:
public class MyModel: INotifyPropertyChanged
{
// INotifyPropertyChanged implementation
...
//
private ObservableCollection<MyItemModel> _myCollection;
public ObservableCollection<MyItemModel> MyCollection
{
get { return _myCollection; }
set { _myCollection = value; NotifyPropertyChanged("MyCollection"); }
}
}
Then, in XAML, we should use ItemsControl like this:
<ItemsControl x:Name="LayoutRoot" DataContext="{StaticResource model}"
ItemsSource="{Binding MyCollection}"
HorizontalAlignment="Left" VerticalAlignment="Top">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas x:Name="host"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid x:Name="item" Background="Transparent">
<Grid.RenderTransform>
<TranslateTransform X="{Binding Location.X}" Y="{Binding Location.Y}"/>
</Grid.RenderTransform>
// other stuff here
...
//
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Works like a charm :) Thanks everyone.