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

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.

use Canvas.Top and Canvas.Left instead of Margin. Also use Height and Width if you need to define the size of each UI item. — Federico Berasategui, Jan 05 '15 at 06:18
Similar question was asked here: http://stackoverflow.com/questions/6249518/binding-only-part-of-the-margin-property-of-wpf-control — , Jan 05 '15 at 09:14
@HighCore Thanks for pointing me in the right direction. Found a similar question at http://stackoverflow.com/questions/1265364/setting-canvas-properties-in-an-itemscontrol-datatemplate — Alan Wayne, Jan 05 '15 at 14:01
@AlanWayne for an ultimate example of how to implement this and related features see [My Nodes Editor Example](http://stackoverflow.com/a/15580293/643085). — Federico Berasategui, Jan 05 '15 at 14:03

score 1 · Accepted Answer · answered Jan 05 '15 at 07:20

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.

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

1 Answers1