How to uniquely position usercontrols from an ItemsControl (in MVVM)? - wpf

Question

I am trying to present the usercontrol, CharacterEditorView, from within an ItemsControl. (The use of "Canvas" in the ItemsPanelTemplate can be changed, Grid?). The CharacterEditorView is to overlay on top of a character string, so position is crucial. The ItemsControl is:
<ItemsControl Grid.Row="0" Grid.RowSpan="1" ItemsSource="{Binding CharacterPads}" >
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="Control.Margin" Value="{Binding Margin}"/>
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>
where the binding of CharacterPads is defined as:
private ObservableCollection<CharacterEditorViewModel> characterPads = new ObservableCollection<CharacterEditorViewModel>();
public ObservableCollection<CharacterEditorViewModel> CharacterPads
{
get
{
return characterPads;
}
}
I would like to present EACH CharacterEditorView within a specific rectangle known only at the time of its viewmodel creation. That is, each CharacterEditorView will have a different
rectangle to be presented in:
<UserControl x:Class="Nova5.UI.Views.CharacterEditorView"
.................................................................
<Grid Background="Red">
<TextBlock Text="TextBlock" Margin="{Binding ...?????}" />
</Grid>
</UserControl>
What binding is needed to position EACH CharacterEditorView at its own position?
Thanks for any ideas.

Answer 1

If you want to bind the TextBlock's Margin, you need some bindable property of type Thickness within the CharacterEditorViewModel and specify this as the binding target (or, for cleaner code, provide numeric properties in the ViewModel and implement a ValueConverter that creates a Thickness instance out of them).
Alternatively, since the ItemsPanelTemplate is already defined as Canvas, bind those numeric properties directly to Canvas.Left and Canvas.Top, as HighCore suggested.