Different MouseMove behaviour with ItemsControl?

Question

I have WPF form, and in XAML I have label which on holding MouseDown I can move around form and on MouseRelease leave it in new position. This is working as expected.

XAML code:

<Canvas>
   <Label Content="Label"
      Background="ForestGreen"
      Padding="12,7"
      Canvas.Left="{Binding XPosition}"
      Canvas.Top="{Binding YPosition}"
      MouseDown="Label_MouseDown"
      MouseUp="Label_MouseUp"
      MouseMove="Label_MouseMove"/>
</Canvas>

C#

 public partial class frmTables : Window, INotifyPropertyChanged
    {
        private Point BasePoint = new Point(0.0, 0.0);
        private double DeltaX = 0.0;
        private double DeltaY = 0.0;
        private bool moving = false;
        private Point PositionInLabel;

        public frmTables()
        {
            InitializeComponent();
            this.DataContext = this;
        }

 public double XPosition
        {
            get { return BasePoint.X + DeltaX; }
        }

        public double YPosition
        {
            get { return BasePoint.Y + DeltaY; }
        }

        private void Label_MouseDown(object sender, MouseButtonEventArgs e)
        {
            Label l = e.Source as Label;
            if (l != null)
            {
                l.CaptureMouse();
                moving = true;
                PositionInLabel = e.GetPosition(l);
                lblCoord.Content = "MouseDown"; 
            }
        }

        private void Label_MouseMove(object sender, MouseEventArgs e)
        {
            if (moving)
            {
                Point p = e.GetPosition(null);
                DeltaX = p.X - BasePoint.X - PositionInLabel.X;
                DeltaY = p.Y - BasePoint.Y - PositionInLabel.Y;
                RaisePropertyChanged("XPosition");
                RaisePropertyChanged("YPosition");

                lblCoord.Content = DeltaX + ":" + DeltaY;
            }
        }

        private void Label_MouseUp(object sender, MouseButtonEventArgs e)
        {
            Label l = e.Source as Label;
            if (l != null)
            {
                l.ReleaseMouseCapture();
                BasePoint.X += DeltaX;
                BasePoint.Y += DeltaY;
                DeltaX = 0.0;
                DeltaY = 0.0;
                moving = false;
                lblCoord.Content = BasePoint.X + ":" + BasePoint.Y;
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;

        private void RaisePropertyChanged(string prop)
        {
            if (PropertyChanged != null)
                PropertyChanged(this, new PropertyChangedEventArgs(prop));
        }
    }
}

This is all working as expected until I change XAML, and create two labels during runtime from code behind:

<Canvas>
    <ItemsControl Name="btnTableImageList">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Label Content="Label"
                       Background="ForestGreen"
                       Padding="12,7"
                       Canvas.Left="{Binding XPosition}"
                       Canvas.Top="{Binding YPosition}"
                       MouseDown="Label_MouseDown"
                       MouseUp="Label_MouseUp"
                       MouseMove="Label_MouseMove"/>
            </DataTemplate>
       </ItemsControl.ItemTemplate>
    </ItemsControl>
</Canvas>

Everything else remains the same, except generating those labes from code behind and changed XAML. Now if I hold MouseDown on label and move, nothing happens but MouseDown, and MouseMove are working since I can see test messages in lblCoord.Content.

If you need I can show you label generation code, but it's nothing special, just a class with a for-loop to create certain number of labels and I am calling that on WindowLoaded with btnTableImageList.ItemsSource = tableLbl.CreateTableLabels();.

Anyone have idea why is this happening, or to be more precise, what am I doing wrong?

Answer 1

The standard ItemsPanel of an ItemsControl is a StackPanel, so you will not see any effect when changing Canvas.Left/Top. You can modify the ItemsPanel to provide a Canvas instead.

<Canvas>
    <ItemsControl Name="btnTableImageList">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <Canvas/>
            </ItemsPanelTemplate>
       </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Label Content="Label"
                       Background="ForestGreen"
                       Padding="12,7"
                       Canvas.Left="{Binding XPosition}"
                       Canvas.Top="{Binding YPosition}"
                       MouseDown="Label_MouseDown"
                       MouseUp="Label_MouseUp"
                       MouseMove="Label_MouseMove"/>
            </DataTemplate>
       </ItemsControl.ItemTemplate>
    </ItemsControl>
</Canvas>

NOTE: there is still something missing; for a complete solution see Setting Canvas properties in an ItemsControl DataTemplate

Answer 2

I think what you're trying to do here is a big step beyond your first piece of code. Because it touches on a number of wpf concepts you probably haven't looked at.

Stackpanel is only part of the thing you need to understand here.

I recommend you download and install snoop. When you run it you get a weird toolbar with some scope sight things on it. Drag one over your window and a new window appears. Hover over where one of your labels is and press shift+ctrl at the same time. You will see the tree of controls. Your label will be inside a contentpresenter and it is this which goes directly in the canvas. It is this you need to set canvas.top and canvas.left on.

You will notice when you try and manipulate that control that working in this was is a nuisance. Why is this so hard? ( you are likely to think ). That's because you're intended to use binding and templating rather than directly add controls. Hence, set the datacontext of the window to a viewmodel, bind an observablecollection of viewmodels from there to the itemssource of the itemscontrol. Each of these latter viewmodels would then expose left and top properties which are used to position your piece of ui ( label ).

Here's a working sample illustrates the approach of binding and templating:

https://1drv.ms/u/s!AmPvL3r385QhgooJ94uO6PopIDs4lQ

That's templating into textboxes and stuff rather than doing exactly what you're trying to do.