Using MouseDragElementBehavior with an ItemsControl and Canvas

Question

I am currently having a problem using the MouseDragElementsBehavior from the Blend SDK when using a ItemsControl and a Custom Canvas. My custom canvas simply adds or removes the MouseDragElement from its children depending on a DependencyProperty. This worked just fine when I was manually adding Items to the Canvas' children but appears to have broken when moving to an ItemsControl.

I am currently using the following ItemsControl code:

<ItemsControl ItemsSource="{Binding Path=CanvasItems}">
  <ItemsControl.DataContext>
    <ViewModels:ViewModel/>
  </ItemsControl.DataContext>
  <ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
      <my:CustomCanvas Background="Black" IsEditable="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}, Path=DataContext.CanEdit}" AllowDrop="{Binding RelativeSource={RelativeSource Self}, Path=IsEditable}"  />
    </ItemsPanelTemplate>
  </ItemsControl.ItemsPanel>
</ItemsControl>

Adding the Drag Behavior in the Canvas.VisualChildrenChanged method does not allow the newly created object to be moved like before.

Do I need to add the Drag behavior to something other then the ContentPresenter that is passed to VisualChildrenChanged or provide a special style?

Answer 1

I don't really know the blend sdk behaviours, but I've worked with behaviours in general, so I hope the same mechanisms apply.

If you want to add a behaviour to the controls created by an ItemsControl the best way is adding it via a setter in the ItemsControl.ItemContainerStyle, though in this case I found it easier to add it in the ItemsControl.ItemTemplate

Something like

        <ItemsControl ItemsSource="{Binding CanvasItems}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <Canvas Background="Transparent" AllowDrop="True" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Border BorderBrush="Green" BorderThickness="1" Background="AntiqueWhite">
                        <i:Interaction.Behaviors>
                            <ei:MouseDragElementBehavior ConstrainToParentBounds="True" DragBegun="MouseDragElementBehavior_DragBegun"/>
                        </i:Interaction.Behaviors>
                        <ContentControl Content="{Binding}" />
                    </Border>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>

Answer 2

<ItemsControl ItemsSource="{Binding CanvasItems}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemContainerStyle>
        <Style TargetType="YourControl">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="YourControl">
                        <Border>
                            <Grid>
                                <SystemWindowsInteractivity:Interaction.Behaviors>
                                    <MicrosoftExpressionInteractivityLayout:MouseDragElementBehavior />
                                </SystemWindowsInteractivity:Interaction.Behaviors>
                                <ContentPresenter />
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ItemsControl.ItemContainerStyle>
</ItemsControl>