cannot autosize canvas itemspanel on custom itemscontrol: each element uses MouseDragElementBehavior

Question

I am able to render a collection of items and move them around with the mouse. I am having trouble getting the canvas itemspanel to resize automatically. Try the code as is and see how the rectangles are rendered and how they can be dragged hither and thither with the mouse. Note that they are constrained to the parent bounds (400x400). Next find the commented line <!--<Canvas>--> uncomment it and comment out the line above it <Canvas Height="400" Width="400">. Now note how the rectangles are rendered correctly but as soon as you drag one they fly off to the top left corner and cannot be moved anymore! Please help!

You will need these namespaces

xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"

Complete XAML is below, drop this in on a page or in a control

<Grid x:Name="LayoutRoot">

    <UserControl>

        <UserControl.Resources>
            <DataTemplate x:Key="ItemTemplateKey">
                <Canvas Height="400" Width="400">
                <!--<Canvas>-->
                    <Rectangle Height="50" Width="50" Fill="Red">
                        <i:Interaction.Behaviors>
                            <ei:MouseDragElementBehavior ConstrainToParentBounds="True"/>
                        </i:Interaction.Behaviors>
                    </Rectangle>
                </Canvas>
            </DataTemplate>
        </UserControl.Resources>

        <Grid x:Name="LayoutRoot2">
            <ItemsControl
                ItemsSource="{Binding anArrayOfThreeOrFourThingsInTheVM}"
                ItemTemplate="{StaticResource ItemTemplateKey}">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <Canvas/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
            </ItemsControl>
        </Grid>

    </UserControl>

</Grid>

In the VM or the code behind provide a collection for the itemssource to bind to:

    public int[] anArrayOfThreeOrFourThingsInTheVM { get { return new int[] { 1, 2, 3 }; } }

Edit: Sweet baby Jesus! As a last ditch effort before bed I tried replacing the canvas with a grid and it all worked!

Here is the new working xaml in case someone else has the same problem:

<Grid x:Name="LayoutRoot">

    <UserControl>

        <UserControl.Resources>
            <DataTemplate x:Key="ItemTemplateKey">
                <Grid>
                    <Rectangle Height="50" Width="50" Fill="Red">
                        <i:Interaction.Behaviors>
                            <ei:MouseDragElementBehavior ConstrainToParentBounds="True"/>
                        </i:Interaction.Behaviors>
                    </Rectangle>
                </Grid>
            </DataTemplate>
        </UserControl.Resources>

        <Grid x:Name="LayoutRoot2">
            <ItemsControl
                ItemsSource="{Binding anArrayOfThreeOrFourThingsInTheVM}"
                ItemTemplate="{StaticResource ItemTemplateKey}">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <Grid/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
            </ItemsControl>
        </Grid>

    </UserControl>

</Grid>

Answer 1

I edited my question above with this answer. Putting it here to answer/close the question.

Here is the new working xaml in case someone else has the same problem:

<UserControl>

    <UserControl.Resources>
        <DataTemplate x:Key="ItemTemplateKey">
            <Grid>
                <Rectangle Height="50" Width="50" Fill="Red">
                    <i:Interaction.Behaviors>
                        <ei:MouseDragElementBehavior ConstrainToParentBounds="True"/>
                    </i:Interaction.Behaviors>
                </Rectangle>
            </Grid>
        </DataTemplate>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot2">
        <ItemsControl
            ItemsSource="{Binding anArrayOfThreeOrFourThingsInTheVM}"
            ItemTemplate="{StaticResource ItemTemplateKey}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <Grid/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
        </ItemsControl>
    </Grid>

</UserControl>